项目只使用到了html,css,js,jquery技术点，没有使用游戏框架，下载本地直接双击index.html 运行即可体验游戏效果。

项目展示

进入游戏

游戏开始

游戏暂停

html文件

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>贪吃蛇游戏</title>

    <link rel="stylesheet" href="style.css">

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

</head>

<body>

    <div class="container">

        <div class="game-wrapper">

            <h1>贪吃蛇游戏</h1>

            <div class="game-info">

                <div class="score-container">

                    <div class="score">得分: <span id="score">0</span></div>

                    <div class="high-score">最高分: <span id="highScore">0</span></div>

                </div>

                <button id="startBtn">开始游戏</button>

            </div>

            <div class="game-board-wrapper">

                <div id="gameBoard"></div>

            </div>

            <div class="controls-info">

                <p>使用方向键 ← ↑ → ↓ 控制蛇的移动</p>

                <p>按空格键 <span class="key-space">Space</span> 暂停/继续游戏</p>

            </div>

        </div>

    </div>

    <script src="game.js"></script>

</body>

</html>

CSS文件

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

body {

    background: linear-gradient(135deg, #1a1a2e, #16213e);

    min-height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;

    color: #fff;

    font-family: Arial, sans-serif;

}

.container {

    width: 100%;

    max-width: 800px;

    padding: 20px;

}

.game-wrapper {

    background: rgba(255, 255, 255, 0.1);

    border-radius: 20px;

    padding: 30px;

    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);

    backdrop-filter: blur(4px);

    border: 1px solid rgba(255, 255, 255, 0.18);

}

h1 {

    text-align: center;

    margin-bottom: 30px;

    font-size: 2.5em;

    color: #fff;

    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);

}

.game-info {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 20px;

}

.score-container {

    font-size: 1.2em;

}

.score, .high-score {

    margin: 5px 0;

}

#score, #highScore {

    color: #4CAF50;

    font-weight: bold;

}

#startBtn {

    background: #4CAF50;

    color: white;

    border: none;

    padding: 12px 30px;

    border-radius: 25px;

    font-size: 1.1em;

    cursor: pointer;

    transition: all 0.3s ease;

    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);

}

#startBtn:hover {

    background: #45a049;

    transform: translateY(-2px);

}

.game-board-wrapper {

    display: flex;

    justify-content: center;

    margin: 20px 0;

}

#gameBoard {

    width: 600px;

    height: 600px;

    border-radius: 10px;

    background: rgba(255, 255, 255, 0.05);

    border: 2px solid rgba(255, 255, 255, 0.1);

    position: relative;

}

.snake-body {

    width: 20px;

    height: 20px;

    background: #4CAF50;

    position: absolute;

    border-radius: 4px;

}

.snake-body.head {

    background: #66bb6a;

    box-shadow: 0 0 15px rgba(76, 175, 80, 0.7);

}

.food {

    width: 20px;

    height: 20px;

    background: #ff4444;

    position: absolute;

    border-radius: 50%;

    box-shadow: 0 0 15px rgba(255, 68, 68, 0.7);

}

.controls-info {

    text-align: center;

    margin-top: 20px;

    color: rgba(255, 255, 255, 0.7);

    font-size: 0.9em;

    line-height: 1.6;

}

.controls-info p {

    margin: 5px 0;

}

.key-space {

    display: inline-block;

    padding: 2px 8px;

    background: rgba(255, 255, 255, 0.1);

    border: 1px solid rgba(255, 255, 255, 0.2);

    border-radius: 4px;

    margin: 0 3px;

}

@media (max-width: 768px) {

    #gameBoard {

        width: 300px;

        height: 300px;

    }

    .snake-body, .food {

        width: 10px;

        height: 10px;

    }

}

.pause-text {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    font-size: 2em;

    color: #fff;

    background: rgba(0, 0, 0, 0.7);

    padding: 20px 40px;

    border-radius: 10px;

    z-index: 100;

    animation: pulse 1.5s infinite;

}

@keyframes pulse {

    0% { opacity: 0.6; }

    50% { opacity: 1; }

    100% { opacity: 0.6; }

}

js文件

$(document).ready(function() {

    // 游戏配置

    const boardSize = 600;

    const cellSize = 20;

    const gridSize = boardSize / cellSize;

    // 游戏状态

    let snake = [];

    let food = {};

    let direction = 'right';

    let gameLoop;

    let score = 0;

    let highScore = localStorage.getItem('highScore') || 0;

    let isGameRunning = false;

    // 添加暂停状态变量

    let isPaused = false;

    let savedInterval = null;

    // 显示最高分

    $('#highScore').text(highScore);

    // 初始化蛇的位置

    function initSnake() {

        snake = [

            {x: 6, y: 10},

            {x: 5, y: 10},

            {x: 4, y: 10}

        ];

    }

    // 生成食物

    function generateFood() {

        while (true) {

            food = {

                x: Math.floor(Math.random() * gridSize),

                y: Math.floor(Math.random() * gridSize)

            };

            // 确保食物不会生成在蛇身上

            let foodOnSnake = false;

            for (let body of snake) {

                if (body.x === food.x && body.y === food.y) {

                    foodOnSnake = true;

                    break;

                }

            }

            if (!foodOnSnake) break;

        }

    }

    // 绘制游戏画面

    function draw() {

        $('#gameBoard').empty();

        // 绘制蛇

        snake.forEach((segment, index) => {

            const snakeElement = $('<div>')

                .addClass('snake-body')

                .css({

                    left: segment.x * cellSize + 'px',

                    top: segment.y * cellSize + 'px'

                });

            if (index === 0) {

                snakeElement.addClass('head');

            }

            $('#gameBoard').append(snakeElement);

        });

        // 绘制食物

        $('#gameBoard').append(

            $('<div>')

                .addClass('food')

                .css({

                    left: food.x * cellSize + 'px',

                    top: food.y * cellSize + 'px'

                })

        );

    }

    // 移动蛇

    function moveSnake() {

        const head = {x: snake[0].x, y: snake[0].y};

        switch(direction) {

            case 'up': head.y--; break;

            case 'down': head.y++; break;

            case 'left': head.x--; break;

            case 'right': head.x++; break;

        }

        // 检查是否撞墙

        if (head.x < 0 || head.x >= gridSize || head.y < 0 || head.y >= gridSize) {

            gameOver();

            return;

        }

        // 检查是否撞到自己

        for (let body of snake) {

            if (head.x === body.x && head.y === body.y) {

                gameOver();

                return;

            }

        }

        snake.unshift(head);

        // 检查是否吃到食物

        if (head.x === food.x && head.y === food.y) {

            score += 10;

            $('#score').text(score);

            if (score > highScore) {

                highScore = score;

                localStorage.setItem('highScore', highScore);

                $('#highScore').text(highScore);

            }

            generateFood();

        } else {

            snake.pop();

        }

        draw();

    }

    // 游戏结束

    function gameOver() {

        clearInterval(gameLoop);

        alert('游戏结束！得分：' + score);

        isGameRunning = false;

        isPaused = false;

        $('#startBtn').text('重新开始');

        $('.pause-text').remove();

    }

    // 开始游戏

    function startGame() {

        if (isGameRunning) return;

        isGameRunning = true;

        isPaused = false;

        score = 0;

        $('#score').text(score);

        direction = 'right';

        $('#startBtn').text('游戏中...');

        initSnake();

        generateFood();

        draw();

        if (gameLoop) clearInterval(gameLoop);

        gameLoop = setInterval(moveSnake, 150);

    }

    // 添加暂停函数

    function togglePause() {

        if (!isGameRunning) return;

        if (isPaused) {

            // 继续游戏

            isPaused = false;

            gameLoop = setInterval(moveSnake, 150);

            $('#startBtn').text('游戏中...');

            // 移除暂停提示

            $('.pause-text').remove();

        } else {

            // 暂停游戏

            isPaused = true;

            clearInterval(gameLoop);

            $('#startBtn').text('已暂停');

            // 添加暂停提示

            $('#gameBoard').append(

                $('<div>')

                    .addClass('pause-text')

                    .text('游戏暂停')

            );

        }

    }

    // 键盘控制

    $(document).keydown(function(e) {

        // 防止方向键和空格键滚动页面

        if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {

            e.preventDefault();

        }

        // 空格键控制暂停

        if (e.keyCode === 32) { // 空格键

            togglePause();

            return;

        }

        // 游戏暂停时不响应方向键

        if (!isGameRunning || isPaused) return;

        switch(e.keyCode) {

            case 38: // 上

                if (direction !== 'down') direction = 'up';

                break;

            case 40: // 下

                if (direction !== 'up') direction = 'down';

                break;

            case 37: // 左

                if (direction !== 'right') direction = 'left';

                break;

            case 39: // 右

                if (direction !== 'left') direction = 'right';

                break;

        }

    });

    // 绑定开始按钮事件

    $('#startBtn').click(startGame);

});

总结

可以直接下载代码到本地，双击index.html文件即可运行查看效果并体验游戏。

js+jquery实现贪吃蛇经典小游戏的更多相关文章

原生js写的贪吃蛇网页版游戏特效
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <bo ...
JS练习实例--编写经典小游戏俄罗斯方块
最近在学习JavaScript,想编一些实例练练手,之前编了个贪吃蛇,但是实现时没有注意使用面向对象的思想,实现起来也比较简单所以就不总结了,今天就总结下俄罗斯方块小游戏的思路和实现吧(需要下载代码也 ...
用Python设计一个经典小游戏
这是关于Python的第9篇文章,介绍如何用Python设计一个经典小游戏:猜大小. 在这个游戏中,将用到前面我介绍过的所有内容:变量的使用.参数传递.函数设计.条件控制和循环等,做个整体的总结和复习 ...
20行JS代码实现贪吃蛇
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
Java经典小游戏——贪吃蛇简单实现（附源码）
一.使用知识 Jframe GUI 双向链表线程二.使用工具 IntelliJ IDEA jdk 1.8 三.开发过程 3.1素材准备首先在开发之前应该准备一些素材,已备用,我主要找了一个图片以 ...
用js写一个贪吃蛇小游戏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
jQuery实践-网页版2048小游戏
▓▓▓▓▓▓ 大致介绍看了一个实现网页版2048小游戏的视频,觉得能做出自己以前喜欢玩的小游戏很有意思便自己动手试了试,真正的验证了这句话-不要以为你以为的就是你以为的,看视频时觉得看懂了,会写了, ...
JS高级---案例贪吃蛇，把封装的函数移动到js文件中
案例贪吃蛇,把封装的函数移动到js文件中 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
JS实现别踩白块小游戏
最近有朋友找我用JS帮忙仿做一个别踩白块的小游戏程序,但他给的源代码较麻烦,而且没有注释,理解起来很无力,我就以自己的想法自己做了这个小游戏,主要是应用JS对DOM和数组的操作. 程序思路:如图:将游 ...
WinFom中经典小游戏(含源码)
最近整理了若干经典的小游戏,无聊时可以打发时间.程序本身不大,练手非常不错,主要是GDI编程,主界面地址如下图所示源码下载方式 1,关注微信公众号:小特工作室(也可直接扫描签名处二维码) 2,发送: ...

随机推荐

Go 闭包捕获问题
在 Go 语言中,闭包(closure)是一个函数值,它引用了其外部作用域中的变量.简而言之,闭包能够"捕获"并"记住"其外部作用域中的变量,即使这个变量的生命 ...
禁止 SSH 传递 locale 环境变量
SSH 在连接远程机器时默认会传递一些环境变量,其中就包括你本机的 locale 变量.这会导致远程机器的 locale 配置变成和你本地主机一样.有时候我们不希望这种行为,我们可以通过修改 SSH ...
Error:java: JDK isn't specified for module
报错: Error:java: JDK isn't specified for module 背景: 删除原项目文件夹内所有文件,copy的新的配置文件与src文件夹等,期间打开该项目的IDEA一直处 ...
PyTorch从入门到放弃之张量模块
目录张量的数据类型 torch.rand()函数 torch.randn()函数 torch.normal()函数 torch.linspace()函数 torch.manual_seed()函数 ...
《Effective TypeScript》条款21 - 类型扩展
本文主要通过一些实际的代码示例,来帮助大家理解什么是类型扩展,本文主要内容如下: 什么是类型扩展代码示例总结什么是类型扩展? TypeScript 需要从你指定的单一值中决定一组可能的值,这个过 ...
webpack笔记-webpack基础用法（二）
webpack 本质上是一个打包工具,它会根据代码的内容解析模块依赖,帮助我们把多个模块的代码打包. 一切文件:JavaScript.CSS.SCSS.图片.模板,在 Webpack 眼中都是一个个模 ...
MDC – Text field
前言 Angular Material 只有 Form field, 但 Material Design 有份 Text field 和 Form field, Form field 是给 check ...
namespace hdk
没有高精类,因为这玩意太占内存了,正在优化 demap Rander StringAddition_InFix string ordered_vector #include<bits/stdc+ ...
下载 Youtube 上的视频的方法
事件起因: 某项目组同事需要下载 Youtube 上的视频作为参考视频解决办法: https://www.converto.io/ -= 实测有效 =- 我个人一直在用该网站可以下载,非常好用,下 ...
Windows应急响应-灰鸽子远控木马
目录应急背景木马查杀 1.查看异常连接 2.根据端口号查看对应进程文件 3.排查异常服务 4.发现启动项开始查杀入侵排查 1.账号排查 2.查看服务 3.查看启动项 4.查看计划任务 5.网络 ...

js+jquery实现贪吃蛇经典小游戏

项目展示

进入游戏

游戏开始

游戏暂停

html文件

CSS文件

js文件

总结

js+jquery实现贪吃蛇经典小游戏的更多相关文章

随机推荐

热门专题