Click here for free DL of the app version that can save data.

No:39282

A mobile fighting game with 2 health bars in the t..ALL
Developer User17566｜Date and time 24/1/27 16:34:48
Build time 12.966 sec｜Game capacity 3.681KB｜

Script

Sure! Here's a simple mobile fighting game implemented as a single HTML file with JavaScript. It features two health bars in the top corner and allows you to fight against the CPU opponent. The game uses pictograms for visual representation.

Mobile Fighting Game

To play the game, simply copy the above code into an HTML file (e.g., `game.html`) and open that file in a web browser on your smartphone. You'll see a "Play" button, and when pressed, you can start fighting against the CPU. The health bars at the top corner will indicate the current health of both the player and the CPU. Good luck with the battle!

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

Click here for free DL of the app version that can save data.

```html
<!DOCTYPE html>
<html>
<head>
    <title>Mobile Fighting Game</title>
    <style>
        body {
            font-family: sans-serif;
            text-align: center;
            margin-top: 50px;
        }
        
        #playButton {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            font-size: 18px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        
        #healthBars {
            position: fixed;
            top: 15px;
            right: 15px;
        }
        
        #playerHealthBar, #cpuHealthBar {
            display: inline-block;
            width: 100px;
            height: 20px;
            border: 1px solid black;
            margin-bottom: 5px;
        }
        
        #playerHealthBar {
            background-color: #4CAF50;
        }
        
        #cpuHealthBar {
            background-color: #f44336;
        }
    </style>
</head>
<body>
    <h1>Mobile Fighting Game</h1>
    <button id="playButton">Play</button>
    
    <div id="healthBars">
        <div id="playerHealthBar"></div>
        <div id="cpuHealthBar"></div>
    </div>
    
    <script>
        var playerHealth = 100;
        var cpuHealth = 100;

document.getElementById("playButton").addEventListener("click", startGame);

function startGame() {
            document.getElementById("playButton").disabled = true;
            document.getElementById("playButton").textContent = "Playing...";

setInterval(cpuAttack, 2000); // CPU attack every 2 seconds

// Handle player attack on touch or click
            document.body.addEventListener("click", playerAttack);
            document.body.addEventListener("touchstart", playerAttack);
        }

function playerAttack() {
            cpuHealth -= getRandomNumber(5, 10);
            updateHealthBars();

if (cpuHealth <= 0) {
                endGame("Player wins!");
            }
        }

function cpuAttack() {
            playerHealth -= getRandomNumber(3, 8);
            updateHealthBars();

if (playerHealth <= 0) {
                endGame("CPU wins!");
            }
        }

function updateHealthBars() {
            document.getElementById("playerHealthBar").style.width = playerHealth + "%";
            document.getElementById("cpuHealthBar").style.width = cpuHealth + "%";
        }

function getRandomNumber(min, max) {
            return Math.floor(Math.random() * (max - min + 1) + min);
        }

function endGame(message) {
            document.body.removeEventListener("click", playerAttack);
            document.body.removeEventListener("touchstart", playerAttack);

document.getElementById("playButton").disabled = false;
            document.getElementById("playButton").textContent = "Play Again";

alert(message);

playerHealth = 100;
            cpuHealth = 100;
            updateHealthBars();
        }
    </script>
</body>
</html>
```