AI game creator

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

No:49073

←

Prev Next

→

Sniper game
Developer User20920｜Date and time 24/3/3 16:31:47
Build time 7.444 sec｜Game capacity 1.841KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html>
<head>
<title>Sniper Game</title>
<style>
    canvas {
        border: 2px solid black;
    }
</style>
</head>
<body>
<canvas id="gameCanvas"></canvas>
<script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');

const player = {
        x: 250,
        y: 250,
        width: 50,
        height: 50
    };

const target = {
        x: Math.random() * 450,
        y: Math.random() * 450,
        width: 30,
        height: 30
    };

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

function drawTarget() {
        ctx.fillStyle = 'red';
        ctx.fillRect(target.x, target.y, target.width, target.height);
    }

function checkCollision() {
        if(player.x < target.x + target.width &&
            player.x + player.width > target.x &&
            player.y < target.y + target.height &&
            player.y + player.height > target.y) {
            alert('You hit the target! Game over.');
            location.reload();
        }
    }

function movePlayer(event) {
        switch(event.key) {
            case 'ArrowUp':
                player.y -= 10;
                break;
            case 'ArrowDown':
                player.y += 10;
                break;
            case 'ArrowLeft':
                player.x -= 10;
                break;
            case 'ArrowRight':
                player.x += 10;
                break;
        }
        checkCollision();
    }

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

drawPlayer();
        drawTarget();

requestAnimationFrame(gameLoop);
    }

document.addEventListener('keydown', movePlayer);

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