# 纯JS——贪吃蛇小游戏【JS练习】

最新推荐文章于 2022-05-19 00:33:47 发布

原创最新推荐文章于 2022-05-19 00:33:47 发布 · 407 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #贪吃蛇

JS学习专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个简单的贪吃蛇游戏的实现过程，包括游戏的基本结构、界面布局、蛇的运动逻辑及食物生成机制等关键信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//点击开始--》.png消失--》游戏开始（可暂停和继续游戏）

//随机出现食物，出现三节蛇开始运动

//上下左右--》改变方向运动

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>贪吃蛇</title>
    <link rel="stylesheet" href="./demo.css">
</head>
 
<body>
    <!-- 整个界面外部 -->
    <div class="startPage" id="startPage">
        <!-- 开始按钮 -->
        <div class="startBtn" id="startBtn"></div>
    </div>
    <div class="wrapper">
        <!-- 左部分区域 -->
        <div class="left-side">
            <!-- 暂停按钮部分 -->
            <img src="./image/start.png" id="startP">
        </div>
        <!-- 中间游戏区内容 -->
        <div class="main">
            <!-- 分数展示区 -->
            <div class="header">
                <div class="score">
                    分数：
                    <span id="score" id="score"></span>
                </div>
            </div>
            <!-- 游戏操作区 -->
            <div class="content" id="content"></div>
        </div>
    </div>
    <!-- 游戏结束弹窗区 -->
    <div class="loser" id="lose">
        <div class="con">
            <div class="close" id="close"></div>
            <div class="loserScore" id="loserScore">30</div>
        </div>
    </div>
    <script src="./demo.js"></script>
</body>
 
</html>

//点击开始--》startpage消失--》游戏开始
//随机出现食物，出现三节蛇开始运动
//上下左右--》改变方向运动
//判断是否吃到食物--》食物消失--》蛇+1
//判断游戏结束--》弹出结束框
 
var content = document.getElementById('content');
var startPage = document.getElementById('startPage');
var scoreBox = document.getElementById('score');
var lose = document.getElementById('lose');
var loserScore = document.getElementById('loserScore');
var close = document.getElementById('close');
var startP = document.getElementById('startP');
var startBtn = document.getElementById('startBtn')
var snakeMove;
var speed = 200;
var startFlag = true;
var startPush = true;
init();
bindEvent();
function init() {
    //地图初始化
    this.mapW = parseInt(getComputedStyle(content).width);
    this.mapH = parseInt(getComputedStyle(content).height);
    this.mapDiv = content;
    //食物初始化
    this.foodW = 20;
    this.foodH = 20;
    this.foodX = 0;
    this.foodY = 0;
    //蛇初始化--》蛇的宽高--》蛇头身体部分--》初始方向
    this.snakeW = 20;
    this.snakeH = 20;
    this.snakeBody = [[3, 1, 'head'], [2, 1, 'body'], [1, 1, 'body']];
    this.direct = 'right';
    this.left = false;
    this.right = false;
    this.up = true;
    this.down = true;
    //初始分数
    this.score = 0;
 
}
//开使游戏
function startGame() {
    startPage.style.display = 'none';
    startP.style.display = 'block';
    food();
    snake();
 
}
//食物初始化
function food() {
    var food = document.createElement('div');
    food.style.width = this.foodW + 'px';
    food.style.height = this.foodH + 'px'
    food.style.position = 'absolute';
    this.foodX = Math.floor(Math.random() * (this.mapW / 20));
    this.foodY = Math.floor(Math.random() * (this.mapH / 20));
    food.style.left = this.foodX * 20 + 'px';
    food.style.top = this.foodY * 20 + 'px';
    this.mapDiv.appendChild(food).setAttribute('class', 'food');
}
//蛇初始化
function snake() {
    for (var i = 0; i < this.snakeBody.length; i++) {
        var snake = document.createElement('div');
        snake.style.width = this.snakeW + 'px';
        snake.style.height = this.snakeH + 'px';
        snake.style.position = 'absolute';
        snake.style.left = this.snakeBody[i][0] * 20 + 'px';
        snake.style.top = this.snakeBody[i][1] * 20 + 'px';
        snake.classList.add(this.snakeBody[i][2]);
        this.mapDiv.appendChild(snake).classList.add('snake');
        switch (this.direct) {
            case 'right':
                break;
            case 'up':
                snake.style.transform = 'rotate(270deg)';
                break;
            case 'left':
                snake.style.transform = 'rotate(180deg)';
                break;
            case 'down':
                snake.style.transform = 'rotate(90deg)';
                break;
            default:
                break;
        }
    }
}
 
function move() {
    for (var i = this.snakeBody.length - 1; i > 0; i--) {
        this.snakeBody[i][0] = this.snakeBody[i - 1][0];
        this.snakeBody[i][1] = this.snakeBody[i - 1][1];
    }
    //蛇行动
    switch (this.direct) {
        case 'right':
            this.snakeBody[0][0] += 1;
            break;
        case 'up':
            this.snakeBody[0][1] -= 1;
            break;
        case 'left':
            this.snakeBody[0][0] -= 1;
            break;
        case 'down':
            this.snakeBody[0][1] += 1;
            break;
        default:
            break;
    }
    removeClass('snake');
    snake();
    //判断蛇是否吃到了苹果的位置
    if (this.snakeBody[0][0] == this.foodX && this.snakeBody[0][1] == this.foodY) {
        //给蛇添加新的一节
        var snakeEndX = this.snakeBody[this.snakeBody.length - 1][0];
        var snakeEndY = this.snakeBody[this.snakeBody.length - 1][1];
        //判断吃苹果的方向
        switch (this.direct) {
            case 'right':
                this.snakeBody.push([snakeEndX - 1, snakeEndY, 'body']);
                break;
            case 'up':
                this.snakeBody.push([snakeEndX, snakeEndY + 1, 'body']);
                break;
            case 'left':
                this.snakeBody.push([snakeEndX + 1, snakeEndY, 'body']);
                break;
            case 'down':
                this.snakeBody.push([snakeEndX, snakeEndY - 1, 'body']);
                break;
            default: break;
        }
        this.score += 1;
        scoreBox.innerHTML = this.score;
        //重置苹果
        removeClass('food');
        food();
    }
    //判断蛇移动是否超出游戏宽度
    if (this.snakeBody[0][0] < 0 || this.snakeBody[0][0] >= this.mapW / 20) {
        relodGame();
    }
    //判断蛇移动是否超出游戏高度
    if (this.snakeBody[0][1] < 0 || this.snakeBody[0][1] >= this.mapH / 20) {
        relodGame();
    }
    var snakeHX = this.snakeBody[0][0];
    var snakeHY = this.snakeBody[0][1];
    for (var i = 1; i < this.snakeBody.length; i++) {
        //判断蛇是否碰到了自己的身体
        if (snakeHX == snakeBody[i][0] && snakeHY == snakeBody[i][1]) {
            relodGame();
        }
    }
}
//游戏结束重新初始数据以及展示游戏分数
function relodGame() {
    removeClass('snake');
    removeClass('food');
    clearInterval(snakeMove);
    this.snakeBody = [[3, 1, 'head'], [2, 1, 'body'], [1, 1, 'body']];
    this.direct = 'right';
    this.left = false;
    this.right = false;
    this.up = true;
    this.down = true;
    lose.style.display = 'block';
    loserScore.innerHTML = this.score;
    this.score = 0;
    scoreBox.innerHTML = this.score;
    startFlag = true;
    startPush = true;
    startP.setAttribute('src', './image/start.png');
}
//remove类函数--》主要配合生成新的苹果 和 新的蛇结构
function removeClass(className) {
    var ele = document.getElementsByClassName(className);
    while (ele.length > 0) {
        ele[0].parentNode.removeChild(ele[0]);
    }
}
//上下左右按键改变方向函数
function setDerict(code) {
    switch (code) {
        case 37:
            if (this.left) {
                this.direct = 'left';
                this.left = false;
                this.right = false;
                this.up = true;
                this.down = true;
            }
            break;
        case 38:
            if (this.up) {
                this.direct = 'up';
                this.left = true;
                this.right = true;
                this.up = false;
                this.down = false;
            }
            break;
        case 39:
            if (this.right) {
                this.direct = 'right';
                this.left = false;
                this.right = false;
                this.up = true;
                this.down = true;
            }
            break;
        case 40:
            if (this.down) {
                this.direct = 'down';
                this.left = true;
                this.right = true;
                this.up = false;
                this.down = false;
            }
            break;
        default: break;
    }
}
 
//绑定点击事件
function bindEvent() {
    close.onclick = function () {
        lose.style.display = 'none';
    }
    startBtn.onclick = function () {
        startAndPaush();
    }
    startP.onclick = function () {
        startAndPaush();
    }
}
//游戏开始函数--》startGame()；
//startPush--》判断是否暂停游戏（锁）第一次赋值为true；
function startAndPaush() {
    if (startPush) {
        if (startFlag) {
            startGame();
            startFlag = false;
        }
        startP.setAttribute('src', './image/pause.png');
        document.onkeydown = function (e) {
            var code = e.keyCode;
            setDerict(code);
        }
        snakeMove = setInterval(function () {
            move();
        }, speed);
        startPush = false;
    } else {
        startP.setAttribute('src', './image/start.png');
        clearInterval(snakeMove);
        document.onkeydown = function (e) {
            e.returnValue = false;
            return false;
        };
        startPush = true;
    }
 
}

*{
    padding: 0;
    margin: 0;
}
html,body{
    height: 100%;
    overflow: hidden;
}
.startPage{
    width: 100%;
    z-index: 999;
    height: 1000px;
    position: absolute;
    top: 0;
    left: 0; 
}
.startBtn{
    background-image: url('image/startGame.png');
    height: 170px;
    width: 200px;
    background-size: 100% 100%;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}
.wrapper{
    width: 100%;
    height: 1000px;
    background-image: url('image/bg.jpg');
    background-size: 100% 100%;
    position: relative;
}
.left-side{
    width: 24%;
    position: absolute;
    height: 1000px;
}
.left-side img {
    display: none;
    margin-left: 50px;
    margin-top: 50px;
}
.main{
    position: absolute;
    left: 25%;
    width: 50%;
    height: 90%;
}
.header{
    width: 100%;
    height: 80px;
    text-align: center;
}
.score{
    line-height: 80px;
    color: #ddd;
    font-size: 20px;
    font-weight: bold;
}
.content{
    position: absolute;
    width: 79%;
    height: 36%;
    left: 10%;
    top: 34%;
}
.loser{
    position: absolute;
    width: 100%;
    height: 1000px;
    top: 0;
    left: 0;
    display: none;
}
.con{
    background-image: url('image/startP.jpg');
    background-size: 100% 100%;
    width: 400px;
    height: 300px;
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-radius: 20px;
}
.loserScore{
    position: absolute;
    display: block;
    height: 30px;
    width: 40px;
    top: 42%;
    left: 40%;
    color: #222222;
    font-size: 30px;
    font-weight: bold;
}
.close{
    position: absolute;
    top: 0;
    right: 0;
    height: 40px;
    width: 40px;
    background-image: url('image/closeBtn.png');
    background-size: 100% 100%;
    cursor: pointer;
}
.food{
    background-image: url('image/apple.png');
    background-size: 100% 100%;
}
.head{
    background-image: url('image/head.png');
    background-size: 100% 100%;
}
.body{
    background-image: url('image/body.png');
    background-size: 100% 100%;
}