Haz el juego de la víbora comemanzanas con un contador de puntos y cada vez que pierdas aparecerá un botón de reintentar y una pantalla con un texto que dice perdiste's game

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

No:49514

3891

←

Prev Next

→

Haz el juego de la víbora comemanzanas con un cont..ALL
Developer anonymous｜Date and time 70/1/1 10:02:42
Build time unknown sec｜Game capacity 3.762KB｜

Script

Score: 0

¡Perdiste!

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Snake Game</title>
    <style>
        canvas {
            border: 1px solid black;
            display: block;
            margin: 0 auto;
        }
        button {
            display: block;
            margin: 0 auto;
            margin-top: 10px;
        }
        #message {
            display: none;
            text-align: center;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <p id="score">Score: 0</p>
    <div id="message">
        <p>¡Perdiste!</p>
        <button onclick="restartGame()">Reintentar</button>
    </div>

function drawSnake() {
            ctx.fillStyle = 'green';
            snake.forEach(segment => {
                ctx.fillRect(segment.x, segment.y, gridSize, gridSize);
            });
        }

function moveSnake() {
            if (gameOver) return;

if (snake[0].x < 0 || snake[0].x >= canvas.width || snake[0].y < 0 || snake[0].y >= canvas.height || checkCollision()) {
                endGame();
            }
        }

function generateApple() {
            apple.x = Math.floor(Math.random() * canvas.width / gridSize) * gridSize;
            apple.y = Math.floor(Math.random() * canvas.height / gridSize) * gridSize;
        }

function drawApple() {
            ctx.fillStyle = 'red';
            ctx.fillRect(apple.x, apple.y, gridSize, gridSize);
        }

function checkCollision() {
            return snake.slice(1).some(segment => segment.x === snake[0].x && segment.y === snake[0].y);
        }

function updateScore() {
            document.getElementById('score').innerText = `Score: ${score}`;
        }

function endGame() {
            gameOver = true;
            document.getElementById('message').style.display = 'block';
        }

function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawSnake();
            drawApple();
            moveSnake();
        }

function keyDownHandler(event) {
            switch (event.key) {
                case 'ArrowLeft':
                    dx = -gridSize;
                    dy = 0;
                    break;
                case 'ArrowRight':
                    dx = gridSize;
                    dy = 0;
                    break;
                case 'ArrowUp':
                    dx = 0;
                    dy = -gridSize;
                    break;
                case 'ArrowDown':
                    dx = 0;
                    dy = gridSize;
                    break;
            }
        }

document.addEventListener('keydown', keyDownHandler);

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