Create 2D survival Game's game

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

No:20918

←

Prev Next

→

Create 2D survival Game
Developer User9230｜Date and time 23/10/12 1:47:21
Build time 67.3 sec｜Game capacity 3.267KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>2D Survival Game</title>
    <style>
        canvas {
            background-color: #000;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>
    <script>
        const canvas = document.getElementById("gameCanvas");
        const context = canvas.getContext("2d");

// Player object
        const player = {
            x: canvas.width / 2,
            y: canvas.height - 50,
            width: 50,
            height: 50,
            speed: 5,
            isMovingLeft: false,
            isMovingRight: false,
            isMovingUp: false,
            isMovingDown: false
        };

// Pictogram images
        const playerImage = new Image();
        playerImage.src = "player.png";

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

// Game loop
        function gameLoop() {
            context.clearRect(0, 0, canvas.width, canvas.height);
            updatePlayer();
            drawPlayer();
            requestAnimationFrame(gameLoop);
        }

// Update player position based on player movement
        function updatePlayer() {
            if (player.isMovingLeft && player.x - player.speed > 0) {
                player.x -= player.speed;
            }
            if (player.isMovingRight && player.x + player.width + player.speed < canvas.width) {
                player.x += player.speed;
            }
            if (player.isMovingUp && player.y - player.speed > 0) {
                player.y -= player.speed;
            }
            if (player.isMovingDown && player.y + player.height + player.speed < canvas.height) {
                player.y += player.speed;
            }
        }

// Draw player and enemies on the canvas
        function drawPlayer() {
            context.drawImage(playerImage, player.x, player.y, player.width, player.height);
        }

// Event listeners for player movement
        document.addEventListener("keydown", function(event) {
            switch (event.keyCode) {
                case 37: // Left arrow key
                    player.isMovingLeft = true;
                    break;
                case 39: // Right arrow key
                    player.isMovingRight = true;
                    break;
                case 38: // Up arrow key
                    player.isMovingUp = true;
                    break;
                case 40: // Down arrow key
                    player.isMovingDown = true;
                    break;
            }
        });

document.addEventListener("keyup", function(event) {
            switch (event.keyCode) {
                case 37: // Left arrow key
                    player.isMovingLeft = false;
                    break;
                case 39: // Right arrow key
                    player.isMovingRight = false;
                    break;
                case 38: // Up arrow key
                    player.isMovingUp = false;
                    break;
                case 40: // Down arrow key
                    player.isMovingDown = false;
                    break;
            }
        });

// Start the game
        gameLoop();
    </script>
</body>
</html>