AI game creator

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

No:45867

←

Prev Next

→

Shooting Game
Developer User19733｜Date and time 24/2/21 22:01:02
Build time 11.046 sec｜Game capacity 3.326KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

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

let player = {
            x: canvas.width / 2,
            y: canvas.height - 30,
            speed: 5
        };

let bullets = [];
        let enemies = [];
        let enemySpeed = 2;
        let enemySpawnRate = 100;
        let score = 0;

document.addEventListener('keydown', keyDownHandler);

function keyDownHandler(event) {
            if(event.key === 'ArrowLeft' && player.x > 0) {
                player.x -= player.speed;
            } else if(event.key === 'ArrowRight' && player.x < canvas.width - 20) {
                player.x += player.speed;
            }

if(event.key === ' ') {
                bullets.push({x: player.x + 10, y: player.y});
            }
        }

function drawPlayer() {
            ctx.beginPath();
            ctx.rect(player.x, player.y, 20, 20);
            ctx.fillStyle = 'blue';
            ctx.fill();
            ctx.closePath();
        }

function drawBullets() {
            bullets.forEach(bullet => {
                ctx.beginPath();
                ctx.rect(bullet.x, bullet.y, 4, 10);
                ctx.fillStyle = 'red';
                ctx.fill();
                ctx.closePath();
                bullet.y -= 5;

// Check for collision with enemies
                enemies.forEach((enemy, index) => {
                    if(bullet.x >= enemy.x && bullet.x <= enemy.x + 20 && bullet.y >= enemy.y && bullet.y <= enemy.y + 20) {
                        score++;
                        enemies.splice(index, 1);
                    }
                });
            });
        }

function drawEnemies() {
            enemies.forEach(enemy => {
                ctx.beginPath();
                ctx.rect(enemy.x, enemy.y, 20, 20);
                ctx.fillStyle = 'black';
                ctx.fill();
                ctx.closePath();
                enemy.y += enemySpeed;

// Check for collision with player
                if(enemy.y >= player.y && enemy.y <= player.y + 20 && enemy.x >= player.x && enemy.x <= player.x + 20) {
                    alert('Game Over! Your score: ' + score);
                    document.location.reload();
                }

if(enemy.y >= canvas.height) {
                    enemies.shift();
                }
            });

// Spawn new enemies
            if(Math.random() < 1 / enemySpawnRate) {
                enemies.push({x: Math.random() * (canvas.width - 20), y: 0});
            }
        }

function drawScore() {
            ctx.font = '16px Arial';
            ctx.fillStyle = 'black';
            ctx.fillText('Score: ' + score, 10, 20);
        }

function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawPlayer();
            drawBullets();
            drawEnemies();
            drawScore();
        }

setInterval(draw, 10);
    </script>
</body>
</html>