Make A space Invaders game's game

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

No:52946

1081

←

Prev Next

→

Make A space Invaders game
Developer User16701｜Date and time 24/3/27 4:49:38
Build time 6.073 sec｜Game capacity 1.636KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Space Invaders</title>
    <style>
        #gameCanvas {
            background-color: black;
            display: block;
            margin: auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>
    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
    
        const playerWidth = 50;
        const playerHeight = 50;
        const playerSpeed = 5;
    
        let playerX = canvas.width / 2 - playerWidth / 2;
    
        function drawPlayer() {
            ctx.fillStyle = 'white';
            ctx.fillRect(playerX, canvas.height - playerHeight, playerWidth, playerHeight);
        }
    
        function clearCanvas() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
        }
    
        function updateGame() {
            clearCanvas();
            drawPlayer();
        }
    
        function movePlayer(direction) {
            if (direction === 'left' && playerX > 0) {
                playerX -= playerSpeed;
            } else if (direction === 'right' && playerX < canvas.width - playerWidth) {
                playerX += playerSpeed;
            }
            updateGame();
        }
    
        function keyDownHandler(e) {
            if (e.key === 'ArrowLeft') {
                movePlayer('left');
            } else if (e.key === 'ArrowRight') {
                movePlayer('right');
            }
        }
    
        document.addEventListener('keydown', keyDownHandler);
    
        updateGame();
    
    </script>
</body>
</html>