前端贪吃蛇功能基本实现（长期入驻，佬多提建）

admin • 2022-01-12 08:24 • 前端

贪吃蛇

1.贪吃蛇图片（不浪费大家时间）

## 代码
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>
        body{
            background: -webkit-linear-gradient(rgba(0, 255, 200, 0.925), skyblue);
            color: #fff;
        }
        table{
            border-collapse: collapse;
            background: transparent;
            border: 1px solid #fff;
        }
        td{
            width: 24px;
            height: 24px;
            color: rgb(255, 0, 64);
            text-align: center;
            background: transparent;
            border: 1px solid #fff;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <h3 id="f">帧编号：0</h3>
    <h3 id="score">分数：0</h3>
    <dic id="app"></dic>
    <script src="js/Game.js"></script>
    <script src="js/Snake.js"></script>
    <script src="js/food.js"></script>
    <script>
        var game = new Game();
    </script>
    
</body>
</html>

以下是food.js,snake.js,game.js的代码
1.food.js

function Food(gameSnake){
    var self = this;
    //食物的位置
    //下面的do-while循环语句作用是先创建一个row和col，然后判断这个row和col是否在蛇的身上
    do{
        this.row = parseInt(Math.random() * gameSnake.row);
        this.col = parseInt(Math.random() * gameSnake.col);
    }while((function(){
        //遍历蛇的row和col，然后和Food新随机出来的row和col来进行判断，是否重合
        for(var i = 0; i < gameSnake.snake.body.length; i++){
            if(gameSnake.snake.body[i].row == self.row || gameSnake.snake.body[i].col == self.col){
                return true;
            }
        }
        return false;
    })());
    console.log(this.row, this.col);
}

Food.prototype.render = function() {
    game.setHtml(this.row, this.col, "♥");
}

2.snake.js

function Snake(){
    //蛇的初始化身体
    this.body = [
        {"row":3, "col":5},
        {"row":3, "col":4},
        {"row":3, "col":3},
        {"row":3, "col":2}
    ];
    //信号量，设置的运行方向
    this.direction = "R";
    //即将改变的方向，目的是为了防止出现原地调头的情况
    this.willDirection = "R";
}
//蛇的运行
Snake.prototype.update = function() {
    //让当前的direction接受以下willDirection
    this.direction = this.willDirection;
    switch(this.direction){
        case "R":
            //向右移动
            this.body.unshift({"row":this.body[0].row, "col":this.body[0].col + 1});
            break;  
        case "D":
            //向下移动
            this.body.unshift({"row":this.body[0].row + 1, "col":this.body[0].col});
            break;
        case "L":
            //向左移动
            this.body.unshift({"row":this.body[0].row, "col":this.body[0].col - 1});
            break;
        case "U":
            //向上移动
            this.body.unshift({"row":this.body[0].row - 1, "col":this.body[0].col});
            break;
    }
    //死亡的判断，超出了表格边缘的部分  
    if(this.body[0].col > game.col-1 || this.body[0].row > game.row - 1 || this.body[0].col < 0 || this.body[0].row < 0){ 
        
        alert("游戏结束！您当前的得分为："+game.score+"分。");
        this.body.shift();
        clearInterval(game.timer);
        
    }
    //自己撞到了自己的时候，也会判定死亡
    for(var i = 1; i <this.body.length; i++){
        //如何能够判断死亡，也就是当前的蛇的头部与身体的某一部分的col和row完全重合的时候
        if (this.body[0].col == this.body[i].col && this.body[0].row == this.body[i].row){
            alert("游戏结束！您当前的得分为："+game.score+"分。");
            clearInterval(game.timer);
        }
    }
    //蛇吃食物
    //判断如果当前的蛇的头部没有和食物进行重合，就代表此时没有吃到食物，此时就进行尾部删除，如果重合了就代表吃到了，此时我们不进行尾部删除。
    if(this.body[0].row == game.food.row &&  this.body[0].col == game.food.col){
        //此时的情况只有头部增加了，尾部没有删除
        //创建新的食物
        game.food = new Food(game);
        //加分数
        game.score++;
        //让帧编号归0，因为蛇会蹿一下
        game.f = 0;
    }else{        
        this.body.pop();
    }
    
};
//蛇的方向改变，防止的是在一次渲染之前会出现调头的情况
Snake.prototype.changeDirection = function(d){
    this.willDirection = d;

}
Snake.prototype.render = function(){
    // 蛇头的渲染
    game.setColor(this.body[0].row, this.body[0].col, '-webkit-radial-gradient(center center , pink, red)');
    //蛇身的渲染
    for(var i = 1; i < this.body.length; i++){
        game.setColor(this.body[i].row, this.body[i].col, '-webkit-radial-gradient(center center , orange, red)');
    }
}

3.game.js

function Game(){
    //行数
    this.row = 20;
    //列数
    this.col = 20;
    //分数
    this.score = 0;
    //初始化节点
    this.init();
    //实例化蛇类
    this.snake = new Snake();
    //初始化食物
    this.food = new Food(this);
    //执行定时器任务
    this.start();
    //键盘的事件监听
    this.bindEvent();

}
Game.prototype.init = function(){
    this.dom = 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");    
            //追加到trtd
            tr.appendChild(td);
        }
        //追加节点上树
        this.dom.appendChild(tr);
    }
    
    //表格上树
    document.getElementById("app").appendChild(this.dom);
};
Game.prototype.clear = function() {
    //遍历表格，擦除画布
    for(var i = 0; i < this.row; i++){
        for(var j = 0; j < this.col; j++){
            this.dom.getElementsByTagName("tr")[i].getElementsByTagName("td")[j].style.background = "transparent";
            this.dom.getElementsByTagName("tr")[i].getElementsByTagName("td")[j].innerHTML = "";
        }
    }
};
//设置颜色的方法
Game.prototype.setColor = function(row, col, color){
    //让表格的第几行，第几列设置什么颜色
    this.dom.getElementsByTagName("tr")[row].getElementsByTagName("td")[col].style.background = color; 
};
//渲染食物
Game.prototype.setHtml = function(row, col, html){
    this.dom.getElementsByTagName("tr")[row].getElementsByTagName("td")[col].innerHTML = html;
};
//设置键盘的事件监听
Game.prototype.bindEvent = function(){
    var self = this;
    //键盘事件
    document.onkeydown = function(event){
        switch(event.keyCode){
            //按下左键
            case 37:
                //先进行判断，如果当前的方式是向右移动，此时不能按左键
                if(self.snake.direction == "R")
                    break;
                self.snake.changeDirection("L");
                break;
            //按下上键
            case 38:
                //先进行判断，如果当前的方式是向下移动，此时我们不能按上键
                if(self.snake.direction == "D")
                    break;
                self.snake.changeDirection("U");
                break;
            //按下右键
            case 39:
                //先进行判断，如果当前的方式是向左移动，此时不能按右键
                if(self.snake.direction == "L")
                    break;
                self.snake.changeDirection("R");
                break;
            //按下下键
            case 40:
                //先进行判断，如果当前的方式是向上移动，此时不能按下键
                if(self.snake.direction == "U")
                    break;
                self.snake.changeDirection("D");
                break;

        }
    }
};
Game.prototype.start = function(){
    //帧编号
    this.f = 0;
    this.timer = setInterval(function() {
        //定时器里面的核心就是游戏的渲染本质，清屏-更新-渲染
        game.f++;score
        document.getElementById("f").innerHTML = "帧编号："+game.f;
        //渲染分数
        document.getElementById("score").innerHTML = "分数："+game.score;
        //清楚屏幕
        game.clear();
        //蛇的更新速度，当蛇边长的时候没速度要加快
        var during = game.snake.body.length < 30 ? 30 - game.snake.body.length : 1;
        //蛇的更新
        game.f % during == 0 && game.snake.update();
        //蛇的渲染
        game.snake.render();
        //渲染食物
        game.food.render();
    }, 20)
};

贪吃蛇游戏我打算进行很多创新，希望大家任意发表一些玩法方面的想法我尽力去实现，感谢各位佬们的观看。

个人简介

本人是大连理工大学软件工程专业（存活于著名的大黑山程序员养殖基地）的一名大一学生，现在在比特科技旗下学习。
本人github网址（里面有大一上我打的所有c语言代码，包含没有实现文件读取的学生管理系统，通讯录以及一些小游戏等等）

个人能力

现已完成c语言的学习（不过在这个假期仍然会发一些c语言的学习心得分享因为比特课需要先跟鹏哥学习c语言一段时间），在学校参加了两大科创社团，帮我在这半年内了解了网络安全的入门级知识（包括逆向软件的使用，抓包软件的使用，了解密码学，网络安全隐写，web渗透，pwn太难了搞不明白），了解了Linux的基本命令和简单shell的编写，在假期自学了js，html和css的基础（vue框架，node.js等还未入门）,了解了部分数据结构，基本能够使用eclipse和pycharm来进行java和python的代码编写。

未来如何学习编程

会从底层出发去学习，结合实际情况去制定适当目标。

未来编程付出的时间

每周会有6天进行代码的编写

最想进入的公司

当然是Microsoft，待遇很好。

未来博客暂时面向方向

由于下学期课程的影响，我会进行c加加和数据结构的学习，还有就是下学期我选社团方向为web方向，所以我需要实现各种功能的贪吃蛇（功能会在后期逐渐完善包括吃啥色变什么色以及上一局回放等），也就意味着要进行前端的学习。

写博客目的

我这种菜鸡当然不是为了赚钱（也赚不了了），主要是为了进行一些代码的记录和分享，希望大家的监督！未来我会不断优化博客文章带来一些好的代码给大家！

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

THE END

javascript vscode

二维码

Html+CSS+JS轮播图：手动轮播，自动轮播

< <上一篇

秒懂JS的this指向问题

下一篇>>

搜索内容