シューティングして敵を倒す's game

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

No:47250

←

Prev Next

→

シューティングして敵を倒す
Developer User20430｜Date and time 24/2/27 19:37:07
Build time 11.495 sec｜Game capacity 2.606KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>シューティングゲーム</title>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

const player = {
            x: 200,
            y: 350,
            width: 20,
            height: 20,
            color: "blue",
            speed: 5
        };

const bullets = [];

const enemies = [];

let gameover = false;

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

function drawBullets() {
            bullets.forEach(bullet => {
                bullet.y -= 5;
                ctx.fillStyle = "red";
                ctx.fillRect(bullet.x, bullet.y, 5, 5);
            });
        }

function drawEnemies() {
            enemies.forEach(enemy => {
                enemy.y += 2;
                ctx.fillStyle = "green";
                ctx.fillRect(enemy.x, enemy.y, 20, 20);
            });
        }

function checkCollision() {
            enemies.forEach((enemy, enemyIndex) => {
                bullets.forEach((bullet, bulletIndex) => {
                    if (bullet.x < enemy.x + 20 &&
                        bullet.x + 5 > enemy.x &&
                        bullet.y < enemy.y + 20 &&
                        bullet.y + 5 > enemy.y) {
                        enemies.splice(enemyIndex, 1);
                        bullets.splice(bulletIndex, 1);
                    }
                });

if (enemy.y > 400) {
                    gameover = true;
                }
            });

}

function gameLoop() {
            if (!gameover) {
                ctx.clearRect(0, 0, canvas.width, canvas.height);

drawPlayer();
                drawBullets();
                drawEnemies();

checkCollision();

requestAnimationFrame(gameLoop);
            } else {
                ctx.font = "30px Arial";
                ctx.fillText("Game Over", 140, 200);
            }
        }

window.addEventListener('keydown', function (event) {
            if (event.code === "Space") {
                bullets.push({ x: player.x + player.width / 2, y: player.y });
            }
        });

for (let i = 0; i < 5; i++) {
            enemies.push({ x: Math.random() * 380, y: Math.random() * 200 });
        }

gameLoop();
    </script>
</body>
</html>