AI game creator

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

No:14593

129

←

Prev Next

→

Shooting Game
Developer User6309｜Date and time 23/9/3 10:31:38
Build time 32.851 sec｜Game capacity 5.538KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shooting Game</title>
    <style>
        canvas {
            border: 1px solid black;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

const bulletImage = new Image();
        bulletImage.src = "bullet.png";

const enemyImage = new Image();
        enemyImage.src = "enemy.png";

// Game variables
        const canvas = document.getElementById('gameCanvas');
        const context = canvas.getContext('2d');

const spaceship = {
            x: canvas.width / 2,
            y: canvas.height - 50,
            width: 50,
            height: 50,
            speed: 5
        };

const bullets = [];
        const enemies = [];

let score = 0;

// Event listeners
        document.addEventListener('keydown', keyDownHandler);
        document.addEventListener('keyup', keyUpHandler);

function keyDownHandler(event) {
            if (event.key === 'ArrowLeft') {
                spaceship.moveLeft = true;
            }

if (event.key === 'ArrowRight') {
                spaceship.moveRight = true;
            }

if (event.key === ' ') {
                bullets.push({
                    x: spaceship.x + spaceship.width / 2 - 2.5,
                    y: spaceship.y,
                    width: 5,
                    height: 10,
                    speed: 10
                });
            }
        }

function keyUpHandler(event) {
            if (event.key === 'ArrowLeft') {
                spaceship.moveLeft = false;
            }

if (event.key === 'ArrowRight') {
                spaceship.moveRight = false;
            }
        }

function drawSpaceship() {
            context.drawImage(spaceshipImage, spaceship.x, spaceship.y, spaceship.width, spaceship.height);
        }

function moveSpaceship() {
            if (spaceship.moveLeft) {
                spaceship.x -= spaceship.speed;
            }

if (spaceship.moveRight) {
                spaceship.x += spaceship.speed;
            }

if (spaceship.x < 0) {
                spaceship.x = 0;
            }

if (spaceship.x + spaceship.width > canvas.width) {
                spaceship.x = canvas.width - spaceship.width;
            }
        }

function drawBullets() {
            bullets.forEach(bullet => {
                context.drawImage(bulletImage, bullet.x, bullet.y, bullet.width, bullet.height);
            });
        }

function moveBullets() {
            bullets.forEach(bullet => {
                bullet.y -= bullet.speed;
            });

bullets.forEach((bullet, bulletIndex) => {
                if (bullet.y < 0) {
                    bullets.splice(bulletIndex, 1);
                }
            });
        }

function drawEnemies() {
            enemies.forEach(enemy => {
                context.drawImage(enemyImage, enemy.x, enemy.y, enemy.width, enemy.height);
            });
        }

function moveEnemies() {
            enemies.forEach(enemy => {
                enemy.y += enemy.speed;
            });

enemies.forEach((enemy, enemyIndex) => {
                if (enemy.y > canvas.height) {
                    enemies.splice(enemyIndex, 1);
                }
            });
        }

function drawScore() {
            context.font = "16px Arial";
            context.fillStyle = "black";
            context.fillText("Score: " + score, 8, 20);
        }

function drawGame() {
            context.clearRect(0, 0, canvas.width, canvas.height);

drawSpaceship();
            moveSpaceship();

drawBullets();
            moveBullets();

drawEnemies();
            moveEnemies();

collisionDetection();

drawScore();

requestAnimationFrame(drawGame);
        }

function startGame() {
            setInterval(() => {
                enemies.push({
                    x: Math.random() * (canvas.width - 30),
                    y: 0,
                    width: 30,
                    height: 30,
                    speed: Math.random() * 2 + 1
                });
            }, 1000);

drawGame();
        }

spaceshipImage.addEventListener('load', startGame);
    </script>
</body>
</html>