Create an animal battle game's game

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

No:50307

140

←

Prev Next

→

Create an animal battle game
Developer User21294｜Date and time 24/3/8 10:14:40
Build time 6.58 sec｜Game capacity 2.471KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Animal Battle Game</title>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');

const player1 = {
            x: 50,
            y: 50,
            width: 50,
            height: 50,
            color: 'red'
        };

const player2 = {
            x: 300,
            y: 300,
            width: 50,
            height: 50,
            color: 'blue'
        };

function drawPlayer(player) {
            ctx.fillStyle = player.color;
            ctx.fillRect(player.x, player.y, player.width, player.height);
        }

function updateGame() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

drawPlayer(player1);
            drawPlayer(player2);
        }

function movePlayer(player, direction) {
            switch(direction) {
                case 'up':
                    player.y -= 10;
                    break;
                case 'down':
                    player.y += 10;
                    break;
                case 'left':
                    player.x -= 10;
                    break;
                case 'right':
                    player.x += 10;
                    break;
            }
        }

function handleKeydown(event) {
            switch(event.key) {
                case 'w':
                    movePlayer(player1, 'up');
                    break;
                case 's':
                    movePlayer(player1, 'down');
                    break;
                case 'a':
                    movePlayer(player1, 'left');
                    break;
                case 'd':
                    movePlayer(player1, 'right');
                    break;
                case 'ArrowUp':
                    movePlayer(player2, 'up');
                    break;
                case 'ArrowDown':
                    movePlayer(player2, 'down');
                    break;
                case 'ArrowLeft':
                    movePlayer(player2, 'left');
                    break;
                case 'ArrowRight':
                    movePlayer(player2, 'right');
                    break;
            }

updateGame();
        }

document.addEventListener('keydown', handleKeydown);

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