オートで棒人間と棒人間が戦うゲーム's game

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

No:40670

←

Prev Next

→

オートで棒人間と棒人間が戦うゲーム
Developer User18220｜Date and time 24/2/3 22:17:10
Build time 16.224 sec｜Game capacity 4.431KB｜

Script

了解しました。以下にプログラムを実装します。

このプログラムは2人の棒人間が画面内を移動しながら戦うゲームです。Player1は矢印キー（←, →, ↑）で操作し、Player2は「A, D, W」キーで操作します。それぞれの自機の棒人間は画面内で移動可能で、画面外には出ることができません。

←

Prev　Next

→ 　

Back　

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

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

了解しました。以下にプログラムを実装します。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>棒人間 vs 棒人間</title>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400" style="border:2px solid black;"></canvas>
    
    <script>
        const canvas = document.getElementById("gameCanvas");
        const ctx = canvas.getContext("2d");
        
        let player1 = {
            x: 50,
            y: canvas.height - 50,
            width: 30,
            height: 50,
            color: "blue",
            speed: 5,
            jumping: false,
            jumpHeight: 100,
            jumpCount: 0
        };
        
        let player2 = {
            x: canvas.width - 80,
            y: canvas.height - 50,
            width: 30,
            height: 50,
            color: "red",
            speed: 5,
            jumping: false,
            jumpHeight: 100,
            jumpCount: 0
        };
        
        let keys = {};
        
        function keyDown(event) {
            keys[event.keyCode] = true;
        }
        
        function keyUp(event) {
            delete keys[event.keyCode];
        }
        
        document.addEventListener("keydown", keyDown);
        document.addEventListener("keyup", keyUp);
        
        function update() {
            if (keys[37]) {
                player1.x -= player1.speed;
            }
            if (keys[39]) {
                player1.x += player1.speed;
            }
            if (keys[38] && !player1.jumping) {
                player1.jumping = true;
                player1.jumpCount = 0;
            }
            
            if (keys[65]) {
                player2.x -= player2.speed;
            }
            if (keys[68]) {
                player2.x += player2.speed;
            }
            if (keys[87] && !player2.jumping) {
                player2.jumping = true;
                player2.jumpCount = 0;
            }
            
            if (player1.jumping) {
                player1.y -= player1.speed;
                player1.jumpCount += player1.speed;
                if (player1.jumpCount >= player1.jumpHeight) {
                    player1.jumping = false;
                }
            } else {
                player1.y += player1.speed;
            }
            
            if (player2.jumping) {
                player2.y -= player2.speed;
                player2.jumpCount += player2.speed;
                if (player2.jumpCount >= player2.jumpHeight) {
                    player2.jumping = false;
                }
            } else {
                player2.y += player2.speed;
            }
            
            if (player1.x < 0) {
                player1.x = 0;
            } else if (player1.x + player1.width > canvas.width) {
                player1.x = canvas.width - player1.width;
            }
            
            if (player2.x < 0) {
                player2.x = 0;
            } else if (player2.x + player2.width > canvas.width) {
                player2.x = canvas.width - player2.width;
            }
            
            if (player1.y < 0) {
                player1.y = 0;
            } else if (player1.y + player1.height > canvas.height) {
                player1.y = canvas.height - player1.height;
            }
            
            if (player2.y < 0) {
                player2.y = 0;
            } else if (player2.y + player2.height > canvas.height) {
                player2.y = canvas.height - player2.height;
            }
        }
        
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle = player1.color;
            ctx.fillRect(player1.x, player1.y, player1.width, player1.height);
            ctx.fillStyle = player2.color;
            ctx.fillRect(player2.x, player2.y, player2.width, player2.height);
        }
        
        function gameLoop() {
            update();
            draw();
            requestAnimationFrame(gameLoop);
        }
        
        gameLoop();
    </script>
</body>
</html>
```