js教程

简单的贪吃蛇小游戏源码

我的站长站 2023-07-01 共人阅读
<!DOCTYPE html>
<html>
<head>
    <title>贪吃蛇游戏</title>
    <style>
        #game-board {
            width: 600px;
            height: 600px;
            border: 1px solid #000;
            position: relative;
            margin: 0 auto;
        }
        .snake-node {
            width: 20px;
            height: 20px;
            background-color: #000;
            position: absolute;
        }
        #food {
            width: 20px;
            height: 20px;
            background-color: red;
            position: absolute;
        }
        #score {
            text-align: center;
            margin-top: 20px;
        }
        #pause-btn {
            display: block;
            margin: 10px auto;
        }
        #restart-btn {
            display: block;
            margin: 10px auto;
        }
    </style>
</head>
<body>
    <h1 style="text-align: center;">贪吃蛇游戏</h1>
    <div id="game-board"></div>
    <div id="score">得分：<span id="score-value">0</span></div>
    <button id="pause-btn">暂停</button>
    <button id="restart-btn">重新开始</button>
 
    <script>
        var gameBoard = document.getElementById('game-board');
        var scoreDisplay = document.getElementById('score-value');
        var pauseBtn = document.getElementById('pause-btn');
        var restartBtn = document.getElementById('restart-btn');
 
        var gridSize = 30; // 网格大小
        var snakeSize = 20; // 蛇身大小
        var snakeSpeed = 200; // 蛇移动速度（毫秒）
        var snakeDirection = 'right'; // 蛇移动方向
        var snake = [{ x: 0, y: 0 }]; // 蛇的初始位置
        var food = null; // 食物的位置
        var score = 0; // 得分
        var gameInterval = null; // 游戏循环定时器
 
        // 初始化游戏
        function initializeGame() {
            createSnake();
            generateFood();
 
            gameInterval = setInterval(moveSnake, snakeSpeed);
 
            pauseBtn.addEventListener('click', togglePause);
            restartBtn.addEventListener('click', restartGame);
            document.addEventListener('keydown', changeDirection);
        }
 
        // 创建蛇
        function createSnake() {
            for (var i = 0; i < snake.length; i++) {
                var node = document.createElement('div');
                node.className = 'snake-node';
                node.style.left = snake[i].x + 'px';
                node.style.top = snake[i].y + 'px';
                gameBoard.appendChild(node);
            }
        }
 
        // 生成食物
        function generateFood() {
            var x = getRandomPosition();
            var y = getRandomPosition();
            while (isOverlapping(x, y)) {
                x = getRandomPosition();
                y = getRandomPosition();
            }
 
            food = { x: x, y: y };
 
            var foodNode = document.createElement('div');
            foodNode.id = 'food';
            foodNode.style.left = food.x + 'px';
            foodNode.style.top = food.y + 'px';
            gameBoard.appendChild(foodNode);
        }
 
        // 获取一个随机位置
        function getRandomPosition() {
            return Math.floor(Math.random() * gridSize) * snakeSize;
        }
 
        // 判断位置是否与蛇或食物重叠
        function isOverlapping(x, y) {
            for (var i = 0; i < snake.length; i++) {
                if (snake[i].x === x && snake[i].y === y) {
                    return true;
                }
            }
 
            if (food && food.x === x && food.y === y) {
                return true;
            }
 
            return false;
        }
 
        // 移动蛇
        function moveSnake() {
            var newHead = { x: snake[0].x, y: snake[0].y };
 
            switch (snakeDirection) {
                case 'right':
                    newHead.x += snakeSize;
                    break;
                case 'left':
                    newHead.x -= snakeSize;
                    break;
                case 'up':
                    newHead.y -= snakeSize;
                    break;
                case 'down':
                    newHead.y += snakeSize;
                    break;
            }
 
            // 判断是否吃到食物
            if (food && food.x === newHead.x && food.y === newHead.y) {
                score++;
                scoreDisplay.textContent = score;
 
                gameBoard.removeChild(document.getElementById('food'));
                generateFood();
            } else {
                snake.pop();
            }
 
            // 判断是否游戏结束
            if (newHead.x < 0 || newHead.x >= gridSize * snakeSize ||
                newHead.y < 0 || newHead.y >= gridSize * snakeSize ||
                isOverlapping(newHead.x, newHead.y)) {
                clearInterval(gameInterval);
                alert('游戏结束！得分：' + score + '\n点击"重新开始"按钮重新开始游戏。');
                return;
            }
 
            snake.unshift(newHead);
 
            updateSnakePosition();
        }
 
        // 更新蛇的位置
        function updateSnakePosition() {
            var snakeNodes = document.getElementsByClassName('snake-node');
            while (snakeNodes.length > 0) {
                gameBoard.removeChild(snakeNodes[0]);
            }
 
            for (var i = 0; i < snake.length; i++) {
                var node = document.createElement('div');
                node.className = 'snake-node';
                node.style.left = snake[i].x + 'px';
                node.style.top = snake[i].y + 'px';
                gameBoard.appendChild(node);
            }
        }
 
        // 切换暂停/继续游戏
        function togglePause() {
            if (gameInterval) {
                clearInterval(gameInterval);
                gameInterval = null;
                pauseBtn.textContent = '继续';
            } else {
                gameInterval = setInterval(moveSnake, snakeSpeed);
                pauseBtn.textContent = '暂停';
            }
        }
 
        // 重新开始游戏
        function restartGame() {
            clearInterval(gameInterval);
            gameBoard.innerHTML = '';
            snake = [{ x: 0, y: 0 }];
            score = 0;
            scoreDisplay.textContent = score;
            snakeDirection = 'right';
            initializeGame();
        }
 
        // 改变蛇的移动方向
        function changeDirection(event) {
            switch (event.keyCode) {
                case 37:
                    if (snakeDirection !== 'right') {
                        snakeDirection = 'left';
                    }
                    break;
                case 38:
                    if (snakeDirection !== 'down') {
                        snakeDirection = 'up';
                    }
                    break;
                case 39:
                    if (snakeDirection !== 'left') {
                        snakeDirection = 'right';
                    }
                    break;
                case 40:
                    if (snakeDirection !== 'up') {
                        snakeDirection = 'down';
                    }
                    break;
            }
        }
 
        // 启动游戏
        initializeGame();
    </script>
</body>
</html>
贪吃蛇源码
上一篇：双击页面任意空白处返回顶部JS代码
下一篇：分享一个QQ音乐刷音响力API接口和JS请求代码
js教程

简单的贪吃蛇小游戏源码

js返回上一页、刷新页面代码大全

js语言!=与!==的区别

JS防止网站被扒的解决方法

Hexo插件开发实战教程

JavaScript定时删除指定元素方法
