Make a fighter game (playable game)'s game

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

No:8235

324

←

Prev Next

→

Make a fighter game (playable game)
Developer User4044｜Date and time 23/7/14 10:25:38
Build time 15.076 sec｜Game capacity 2.571KB｜

Script

Sure! Here's a simple fighter game written in a single HTML file using JavaScript:

In this game, you control a blue fighter using the arrow keys on your smartphone. The red enemy will move towards you, and if the two fighters collide, it's game over. The game loop continuously updates the game state and redraws the canvas.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

Sure! Here's a simple fighter game written in a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Fighter Game</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <script>
        // Game variables
        var canvas = document.getElementById("gameCanvas");
        var ctx = canvas.getContext("2d");
        var fighter = { x: 50, y: 175, width: 50, height: 50 };
        var enemy = { x: 350, y: 175, width: 50, height: 50 };
        var isGameOver = false;

// Game loop
        function gameLoop() {
            if (!isGameOver) {
                update();
                draw();
            }
        }

// Update game state
        function update() {
            // Move enemy towards the player
            if (fighter.x < enemy.x) {
                enemy.x -= 1;
            } else {
                enemy.x += 1;
            }

// Check for collision
            if (fighter.x < enemy.x + enemy.width &&
                fighter.x + fighter.width > enemy.x &&
                fighter.y < enemy.y + enemy.height &&
                fighter.y + fighter.height > enemy.y) {
                
                isGameOver = true;
                alert("Game Over!");
            }
        }

// Draw game objects
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw fighter
            ctx.fillStyle = "blue";
            ctx.fillRect(fighter.x, fighter.y, fighter.width, fighter.height);

// Draw enemy
            ctx.fillStyle = "red";
            ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
        }

// Handle player input
        document.addEventListener("keydown", function(event) {
            if (event.key === "ArrowUp") {
                fighter.y -= 5;
            } else if (event.key === "ArrowDown") {
                fighter.y += 5;
            } else if (event.key === "ArrowLeft") {
                fighter.x -= 5;
            } else if (event.key === "ArrowRight") {
                fighter.x += 5;
            }
        });

// Start game
        setInterval(gameLoop, 20);
    </script>
</body>
</html>
```