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

No:12457

←

Prev Next

→

Snake Game
Developer User5121｜Date and time 23/8/17 16:00:49
Build time 39.671 sec｜Game capacity 5.677KB｜

Script

游戏结束

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>贪吃蛇游戏</title>
    <style>
        #game-board {
            display: grid;
            grid-template-columns: repeat(20, 30px);
            grid-template-rows: repeat(20, 30px);
            border: 1px solid #000;
        }

.cell {
            background-color: #fff;
            border: 1px solid #ccc;
        }

#game-over {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #fff;
            padding: 20px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div id="game-board"></div>
    <div id="game-over">
        <h1>游戏结束</h1>
        <button onclick="restartGame()">再来一局</button>
    </div>

function drawCell(x, y, color) {
                ctx.fillStyle = color;
                ctx.fillRect(x * cellSize, y * cellSize, cellSize, cellSize);
                ctx.strokeStyle = "#ccc";
                ctx.strokeRect(x * cellSize, y * cellSize, cellSize, cellSize);
            }

function drawSnake() {
                snake.forEach(function (segment) {
                    drawCell(segment.x, segment.y, "#000");
                });
            }

function drawApple() {
                drawCell(apple.x, apple.y, "#ff0000");
            }

function moveSnake() {
                var head = { x: snake[0].x, y: snake[0].y };

if (direction === "right") head.x++;
                else if (direction === "left") head.x--;
                else if (direction === "up") head.y--;
                else if (direction === "down") head.y++;

snake.unshift(head);

var ateApple = head.x === apple.x && head.y === apple.y;
                if (ateApple) {
                    generateApple();
                } else {
                    snake.pop();
                }
            }

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

function checkCollision() {
                var head = snake[0];

// Check if snake hit the wall or itself
                var hitWall = head.x < 0 || head.x >= canvas.width / cellSize || head.y < 0 || head.y >= canvas.height / cellSize;
                var hitSnake = false;
                for (var i = 1; i < snake.length; i++) {
                    if (head.x === snake[i].x && head.y === snake[i].y) {
                        hitSnake = true;
                        break;
                    }
                }

if (hitWall || hitSnake) {
                    gameOver = true;
                }
            }

function updateGame() {
                if (!gameOver) {
                    ctx.clearRect(0, 0, canvas.width, canvas.height);

drawSnake();
                    drawApple();

moveSnake();
                    checkCollision();
                } else {
                    clearInterval(interval);
                    document.getElementById("game-over").style.display = "block";
                }
            }

function handleSwipe(event) {
                if (event.touches.length === 0) return;

var startX = event.touches[0].pageX;
                var startY = event.touches[0].pageY;

document.addEventListener("touchend", function handleTouchEnd(e) {
                    var endX = e.changedTouches[0].pageX;
                    var endY = e.changedTouches[0].pageY;

var dx = endX - startX;
                    var dy = endY - startY;

if (Math.abs(dx) > Math.abs(dy)) {
                        if (dx > 0) direction = "right";
                        else direction = "left";
                    } else {
                        if (dy > 0) direction = "down";
                        else direction = "up";
                    }

document.removeEventListener("touchend", handleTouchEnd);
                });
            }

function startGame() {
                canvas.addEventListener("touchstart", handleSwipe);
                interval = setInterval(updateGame, 200);
            }

document.getElementById("game-over").style.display = "none";

startGame();
            }

return {
                startGame: startGame,
                restartGame: restartGame
            };
        })();

snakeGame.startGame();
    </script>
</body>
</html>