贪吃蛇 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:

2.游戏类 Game.js：

3.蛇类 Snake.js

4.食物类 food.js

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（附带百度网盘链接）_那年风吹雪正的博客

26 人参与 2021年10月15日 08:43 分类 : 《资源分享》评论

1.html&css页面搭建：

index.html:

2.游戏类 Game.js：

3.蛇类 Snake.js

4.食物类 food.js

评论（0）

赞助本站

最新文章

张士玉小黑屋

当前位置：首页 » 《资源分享》 » 正文

贪吃蛇 javascript（附带百度网盘链接）_那年风吹雪正的博客

26 人参与 2021年10月15日 08:43 分类 : 《资源分享》 评论

1.html&css页面搭建：

index.html:

2.游戏类 Game.js：

3.蛇类 Snake.js

4.食物类 food.js

评论（0） 赞助本站

最新文章

26 人参与 2021年10月15日 08:43 分类 : 《资源分享》评论

评论（0）

赞助本站