[JavaScript知识库] 贪吃蛇 javascript（附带百度网盘链接）

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 贪吃蛇 javascript（附带百度网盘链接） -> 正文阅读

[JavaScript知识库]贪吃蛇 javascript（附带百度网盘链接）

这里贪吃蛇游戏是通过javascript面向对象编程的方法编写，代码结构分为游戏类（Game.js），

蛇行为类（Snake.js），食物类(Food.js)，话不多说，直接源码了。(粘贴源码，引入正确路径即可运行)

贪吃蛇：链接：https://pan.baidu.com/s/1_gfxQOWZ5ktZXLARzcn6fA?
提取码：672a
其他游戏源码：俄罗斯方块https://blog.csdn.net/weixin_45851686/article/details/120242677https://blog.csdn.net/weixin_45851686/article/details/120242677

游戏页面：

1.html&css页面搭建：

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #app {
            position: relative;
        }
        table {
            border-collapse: collapse;
         
            margin: auto;
        }

        td {
            width: 25px;
            height: 25px;
            border: 1px solid #aaa;
        }
        .fen {
            position: relative;
            width: 300px;
            height: 100px;
            margin: 0 auto 10px;
            background-color: #ccc;
            font-size: 14px;

        }
        p {
            display: block;
            width: 100%;

            line-height: 35px;
            text-align: center;
        }

        .fen span {
            display: block;
            float: left;
            margin-left: 15px;
            line-height: 25px;
        }

        .fen span:nth-of-type(3) {
            margin-left: 15px;
        }

        #btn {
            display: block;
            margin: 12px auto;

            clear: both;
        }
    </style>
</head>
<body>
    <div class="fen">
        <p>
            键盘控制方向：
            ↑上
            ↓下
            ←左
            →右
        </p>
        <span>分数：</span>
        <span id="score">0</span>
        <span>请选择游戏难度：</span>
        <select name="" id="hard">请选择游戏难度
            <option value="1">简单</option>
            <option value="2">一般</option>
            <option value="3">困难</option>
        </select>
        <button id="btn">开始游戏</button>
    </div>

    <div id="app">
    </div>
</body>
</html>
<script src="./js/Game.js"></script>
<script src="./js/Snake.js"></script>
<script src="js/Food.js"></script>
<script>
    var game = new Game();
</script>

2.游戏类 Game.js：

实现功能：绘出游戏表格，控制蛇运动方向，游戏分数，设置游戏难度：

function Game() {
    /*创建行列，难度，游戏页面初始化*/
    this.row = 20;//行
    this.col = 20;//列
    this.hard = document.getElementById("hard");//获取难度选项卡
    this.score = parseInt(document.getElementById("score").innerHTML);//获取分数
    this.init();//初始化
    this.snake = new Snake();
    this.food = new Food(this);
    this.btn = document.getElementById("btn");//获取开始按钮
    this.start();//开始游戏
    this.bindEvent();//绑定键盘事件
}
//初始化地图，创建表格，生成20行，20列
Game.prototype.init = function () {
    this.table = document.createElement("table");
    var tr, td;
    for (var i = 0; i < this.row; i++) {
        tr = document.createElement("tr");
        for (var j = 0; j < this.col; j++) {
            td = document.createElement("td");
            tr.appendChild(td);
        }
        this.table.appendChild(tr);
    }
    document.getElementById("app").appendChild(this.table);

}
//设置颜色
Game.prototype.setColor = function (row, col, color) {
    this.table.getElementsByTagName("tr")[row].getElementsByTagName('td')[col].style.backgroundColor = color;
}
//清除画布
Game.prototype.clean = function () {
    for (var i = 0; i < this.row; i++) {
        for (var j = 0; j < this.col; j++) {
            this.table.getElementsByTagName("tr")[i].getElementsByTagName('td')[j].style.backgroundColor = "white";
            this.table.getElementsByTagName("tr")[i].getElementsByTagName('td')[j].innerHTML = "";
        }
    }
}
//绑定事件，控制蛇运动方向
Game.prototype.bindEvent = function () {
    var self = this;
    document.addEventListener("keydown", function (e) {
        switch (e.keyCode) {
            case 37:
                if (self.snake.dir != "R") {
                    self.snake.dir = "L";
                }
                break;
            case 38:
                if (self.snake.dir != "D") {
                    self.snake.dir = "U";
                }
                break;
            case 39:
                if (self.snake.dir != "L") {
                    self.snake.dir = "R";
                }
                break;
            case 40:
                if (self.snake.dir != "U") {
                    self.snake.dir = "D";
                }
                break;
        }
    })
}
//设置食物
Game.prototype.setHtml = function (row, col, html) {
    this.table.getElementsByTagName("tr")[row].getElementsByTagName('td')[col].innerHTML = html;
}
//开始游戏
Game.prototype.start = function () {

    //定时器每秒更新画面，按帧运动
    this.btn.onclick = function () {

        this.speed = 600 - game.hard.value * 150;//根据难度设置蛇运动速度
        console.log("dfyhu");
        game.timer = setInterval(function () {
            // 每秒开始清屏
            game.clean();
            //更新蛇状态
            game.snake.upDate();
            //把蛇渲染到表格中
            game.snake.render();
            //渲染食物到页面
            game.food.render();

        }, this.speed);
    }

}

3.蛇类 Snake.js

功能实现:初始化蛇的身体，颜色等，蛇运动状态的判断，判断死亡条件，吃到食物判断，以及根据不同游戏难度蛇的加分：

function Snake() {
    /*初始化蛇的身体*/
    this.sbody = [
        { "row": 3, "col": 5 },
        { "row": 3, "col": 4 },
        { "row": 3, "col": 3 },
        { "row": 3, "col": 2 }
    ];
    this.dir = "R";
}
//更新蛇的状态(即蛇的运动)，蛇吃食物，蛇的死亡
Snake.prototype.upDate = function () {
    // console.log(game);
    //添加头,根据运动方向
    switch (this.dir) {
        case "R":
            this.sbody.unshift({ "row": this.sbody[0].row, "col": this.sbody[0].col + 1 });
            break;
        case "L":
            this.sbody.unshift({ "row": this.sbody[0].row, "col": this.sbody[0].col - 1 });
            break;
        case "U":
            this.sbody.unshift({ "row": this.sbody[0].row - 1, "col": this.sbody[0].col });
            break;
        case "D":
            this.sbody.unshift({ "row": this.sbody[0].row + 1, "col": this.sbody[0].col });
            break;
    }
    // 撞到墙
if(this.sbody[0].col>game.col-1||this.sbody[0].row>game.row-1||this.sbody[0].col<0||this.sbody[0].row<0){
   clearInterval(game.timer);
   this.sbody.shift();
    alert("撞到墙了，游戏结束，您的得分是"+game.score);
}
// 撞到自己
for(var i=1;i<this.sbody.length;i++){
    if(this.sbody[0].row==this.sbody[i].row&&this.sbody[0].col==this.sbody[i].col){
       alert("撞到自己了，游戏结束,您的得分是"+game.score);
        clearInterval(game.timer);
        this.sbody.shift();
    }   
}
//吃到食物
if(this.sbody[0].row==game.food.row&&this.sbody[0].col==game.food.col){
    game.food=new Food(game);//新增食物
   //根据游戏难度加分
    if(game.hard.value==1){
        game.score+=1;//简单
    }
    else if(game.hard.value==2){
        game.score+=3;//一般
    }
    else if(game.hard.value==3){
        game.score+=5;//困难
    }
    document.getElementById("score").innerHTML=game.score;//获得的分数
}else{
       // 删除尾
       this.sbody.pop();
}
}

//渲染蛇头部和身体颜色
Snake.prototype.render = function () {
    // console.log(game);
    game.setColor(this.sbody[0].row, this.sbody[0].col, "#cc0");
    for (var i = 1; i < this.sbody.length; i++) {
        game.setColor(this.sbody[i].row, this.sbody[i].col, "#996");
    }
}

4.食物类 food.js

实现功能:食物的随机产生，食物的更新等

function Food(para){
    var self=this;
    /*随机生成食物*/ 
    do{
        this.row=parseInt(Math.random()*para.row);
        this.col=parseInt(Math.random()*para.col);
        console.log(this.row,this.col);
    }while((function(){
        //判断生成的食物是否与身体重合
        for(var i=0;i<para.snake.sbody.length;i++){
            if(para.snake.sbody[i].row==self.row&&para.snake.sbody[i].col==self.col){
                return true;//如果重合返回true，重新执行do语句
            }
        }
        return false;
    })());
}
//设置事务出现的行列和内容🍎
Food.prototype.render=function(){
game.setHtml(this.row,this.col,"🍎")
}

JavaScript知识库最新文章

ES6的相关知识点

react 函数式组件 & react其他一些总结

Vue基础超详细

前端JS也可以连点成线（Vue中运用 AntVG6）

Vue事件处理的基本使用

Vue后台项目的记录（一）

前后端分离vue跨域，devServer配置proxy代理

TypeScript

初识vuex

vue项目安装包指令收集