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

No:9486

166

fighting game with a menu
Developer User4370｜Date and time 23/7/25 15:22:55
Build time 32.896 sec｜Game capacity 4.426KB｜

Sure! Here's an example of a simple fighting game with a menu implemented as a single HTML file using JavaScript and pictograms:

Fighting Game

To use pictograms, you would need to replace the `emozi_bear.png`, `emozi_all/block.png`, and `emozi_rabbit.png` image URLs with your desired pictogram icons. Also, make sure to save the respective images in the same directory as the HTML file. The game starts with a menu that allows the player to click the "Start" button. After clicking "Start," the game interface is displayed, which allows the player to select an action to play their turn (attack, block, or heal). The player and enemy health are displayed, and the result of each turn is shown. Once either the player or enemy health reaches zero, the game ends, and the result is shown. The player can then click the "Restart" button to reset the game and start over. Please note that this is just a basic example, and you can further enhance the game with additional features such as animations, levels, and more complex gameplay mechanics based on your requirements.

→ 　

0　

0　

[PR]現在の売れ筋ゲームアプリランキング

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

(C)2023 HisashiApp

Sure! Here's an example of a simple fighting game with a menu implemented as a single HTML file using JavaScript and pictograms:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Fighting Game</title>
    <style>
        body {
            background-color: #f0f0f0;
            text-align: center;
            padding-top: 100px;
        }
    </style>
</head>
<body>
    <h1>Fighting Game</h1>
    <div>
        <img src="attack.png" id="attack" width="100">
        <img src="block.png" id="block" width="100">
        <img src="heal.png" id="heal" width="100">
    </div>
    <div id="menu">
        <button onclick="startGame()">Start</button>
    </div>
    <div id="game" style="display: none;">
        <h2>Select an action:</h2>
        <div id="actions">
            <button onclick="playTurn('attack')">Attack</button>
            <button onclick="playTurn('block')">Block</button>
            <button onclick="playTurn('heal')">Heal</button>
        </div>
        <p id="player-health">Player Health: 100</p>
        <p id="enemy-health">Enemy Health: 100</p>
        <p id="result" style="font-weight: bold;"></p>
        <button onclick="resetGame()">Restart</button>
    </div>

<script>
        let playerHealth = 100;
        let enemyHealth = 100;

function startGame() {
            document.getElementById('menu').style.display = 'none';
            document.getElementById('game').style.display = 'block';
        }

function playTurn(action) {
            let playerDamage = Math.floor(Math.random() * 10) + 1;
            let enemyDamage = Math.floor(Math.random() * 10) + 1;

if (action === 'attack') {
                enemyHealth -= playerDamage;
                document.getElementById('result').innerText = `You attacked the enemy for ${playerDamage} damage.`;
            } else if (action === 'block') {
                playerHealth += Math.round(playerDamage / 2); // Heal a portion while blocking
                document.getElementById('result').innerText = `You blocked and healed ${Math.round(playerDamage / 2)} health.`;
            } else if (action === 'heal') {
                playerHealth += playerDamage;
                document.getElementById('result').innerText = `You healed yourself for ${playerDamage} health.`;
            }

playerHealth -= enemyDamage;
            updateHealth();

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

function updateHealth() {
            document.getElementById('player-health').innerText = `Player Health: ${playerHealth}`;
            document.getElementById('enemy-health').innerText = `Enemy Health: ${enemyHealth}`;
        }

function endGame() {
            let resultText = "";
            if (playerHealth <= 0 && enemyHealth <= 0) {
                resultText = "It's a tie!";
            } else if (playerHealth <= 0) {
                resultText = "You lost!";
            } else {
                resultText = "You won!";
            }
            document.getElementById('result').innerText += ` ${resultText}`;
            document.getElementById('actions').classList.add('disabled');
        }

function resetGame() {
            playerHealth = 100;
            enemyHealth = 100;
            document.getElementById('result').innerText = "";
            document.getElementById('actions').classList.remove('disabled');
            updateHealth();
        }
    </script>
</body>
</html>
```

To use pictograms, you would need to replace the `attack.png`, `block.png`, and `heal.png` image URLs with your desired pictogram icons. Also, make sure to save the respective images in the same directory as the HTML file.

The game starts with a menu that allows the player to click the "Start" button. After clicking "Start," the game interface is displayed, which allows the player to select an action to play their turn (attack, block, or heal). The player and enemy health are displayed, and the result of each turn is shown.

Once either the player or enemy health reaches zero, the game ends, and the result is shown. The player can then click the "Restart" button to reset the game and start over.

Please note that this is just a basic example, and you can further enhance the game with additional features such as animations, levels, and more complex gameplay mechanics based on your requirements.