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

No:23226

118

←

Prev Next

→

2d battle game
Developer User10753｜Date and time 23/10/29 5:02:22
Build time 82.493 sec｜Game capacity 4.679KB｜

Script

Sure, here's a simple 2D battle game implemented as a single HTML file, including JavaScript. It uses pictograms for the game elements and is designed for smartphone operation. You can play it by running the HTML file in a web browser:

2D Battle Game

🤺

👹

You can save the above code as a ".html" file and open it in your web browser. The game presents you with a player and enemy, represented by pictograms. You can attack, defend, or heal using the buttons provided. The health of each character is displayed below their pictogram. The game will end once either the player or enemy reaches 0 health. Enjoy the game!

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>2D Battle Game</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }
        
        #game-container {
            border: 2px solid black;
            display: inline-block;
            padding: 10px;
        }
        
        #player {
            font-size: 40px;
        }
        
        #enemy {
            font-size: 50px;
            margin-top: 20px;
        }
        
        #result {
            margin-top: 20px;
            font-size: 20px;
            font-weight: bold;
        }
        
        button {
            margin-top: 20px;
            padding: 10px 20px;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <h1>2D Battle Game</h1>
    <div id="game-container">
        <div>
            <span id="player">🤺</span>
        </div>
        <div>
            <span id="enemy">👹</span>
        </div>
        <div>
            <button onclick="attack()">Attack</button>
            <button onclick="defend()">Defend</button>
            <button onclick="heal()">Heal</button>
        </div>
        <div id="result"></div>
    </div>

function attack() {
            if (!isGameOver) {
                var playerAttackDamage = Math.floor(Math.random() * 20) + 10;
                var enemyAttackDamage = Math.floor(Math.random() * 15) + 5;

if (isPlayerDefending) {
                    enemyAttackDamage = Math.floor(enemyAttackDamage / 2);
                    isPlayerDefending = false;
                }

enemyHealth -= playerAttackDamage;
                playerHealth -= enemyAttackDamage;

updateGameStatus();

if (playerHealth <= 0 || enemyHealth <= 0) {
                    endGame();
                }
            }
        }

function defend() {
            if (!isGameOver) {
                isPlayerDefending = true;

var enemyAttackDamage = Math.floor(Math.random() * 15) + 5;

if (isPlayerDefending) {
                    enemyAttackDamage = Math.floor(enemyAttackDamage / 2);
                    isPlayerDefending = false;
                }

playerHealth -= enemyAttackDamage;

updateGameStatus();

if (playerHealth <= 0 || enemyHealth <= 0) {
                    endGame();
                }
            }
        }

function heal() {
            if (!isGameOver) {
                var healAmount = Math.floor(Math.random() * 15) + 5;
                playerHealth += healAmount;

if (playerHealth > 100) {
                    playerHealth = 100;
                }

var enemyAttackDamage = Math.floor(Math.random() * 15) + 5;

if (isPlayerDefending) {
                    enemyAttackDamage = Math.floor(enemyAttackDamage / 2);
                    isPlayerDefending = false;
                }

playerHealth -= enemyAttackDamage;

updateGameStatus();

if (playerHealth <= 0 || enemyHealth <= 0) {
                    endGame();
                }
            }
        }

function updateGameStatus() {
            document.getElementById("player").innerHTML = "🤺 " + playerHealth;
            document.getElementById("enemy").innerHTML = "👹 " + enemyHealth;
        }

function endGame() {
            isGameOver = true;

var result = "";

if (playerHealth <= 0 && enemyHealth <= 0) {
                result = "It's a draw!";
            } else if (playerHealth <= 0) {
                result = "You lost!";
            } else if (enemyHealth <= 0) {
                result = "You won!";
            }

document.getElementById("result").innerHTML = result;
        }

updateGameStatus();
    </script>
</body>
</html>
```