（五）项目二日志12.7

物联网工程 - 李涵 - 182210713119
Github:https://github.com/kevin-lh/SoftwarePractice/tree/main/Gluttonous%20Snake

文章目录

• • （五）项目二日志12.7
• 一、功能设计
• • 1.1 详细设计
• 二、功能演示
• 三、总结

---

一、功能设计

1.1 详细设计

对照上表，对个别函数做简要说明：

• Game 类
  init 函数
  init函数功能为初始化游戏，包括初始化游戏背景、蛇、食物、得分、关卡、背景音乐等等。在其中声明如下函数，后面做定义。

    init() {
        //音乐
        this.renderMusic();
        //增加地图样式
        this.addMapStyle();
        //渲染地图
        this.renderMap();
        //渲染蛇
        this.renderSnake();
        //随机食物坐标
        this.randomFood();
        //根据随机食物坐标渲染食物
        this.renderFood();
        //得分
        this.renderSocre();
        //关卡
        this.renderLevel();
        //键盘绑定事件
        this.bindEvent();
        //开始函数
        this.start();
    }

renderMap 函数
renderMap函数为初始化游戏背景，利用HTML DOM技术，动态生成25*25的网状格子。

    renderMap() {
        for (let i = 0; i < this.rows; i++) {
            //创建行
            let row = document.createElement('div');
            row.className = 'row';
            //缓存地图坐标信息
            let arr = [];
            for (let j = 0; j < this.rows; j++) {
                //创建列
                let column = document.createElement('div');
                column.className = 'column';
                //列装到行里面
                row.appendChild(column);
                arr.push(column);
            }
            //行加到列上面
            this.map.appendChild(row);
            this.maps.push(arr);
        }
    }

renderSnake 函数
renderSnake函数渲染蛇，即根据地图的坐标信息，将蛇头与蛇身的div 设置为对应的颜色。

    renderSnake() {
        //准备地图的坐标信息,找蛇头、蛇身坐标改变颜色
        for (let i = 0; i < this.snake.length; i++) {
            this.maps[this.snake[i].row][this.snake[i].column].style.backgroundColor = i === 0 ? 'rgba(60, 63, 65)' : 'rgba(105, 198, 109)';
        }
    }

rendomFood函数
rendomFood函数功能为随机在地图中生成食物，利用**Math.random()**函数即可实现，之后再根据坐标信息，在地图中渲染食物。

    randomFood(){
        //floor向下取整，因为random为【0,1】，最大0.99，向下取整为19
        let row = Math.floor(Math.random()*25);
        let column = Math.floor(Math.random()*25);
        //判断食物坐标是否和蛇头坐标重合
        if(row === this.snake[0].row && column === this.snake[0].column){
            this.randomFood();
            return false;
        }
        this.food.row = row;
        this.food.column = column;
    }

rendomFood函数
rendomFood函数功能为渲染食物，与上文渲染蛇的方法类似，但为了视觉效果更好，实现了每次更新的食物颜色不同，实现方法是利用Math.random函数，给rgb 三通道的颜色值每次赋予随机生成的数，效果请见下文演示 。

    renderFood(){
        //准备地图的坐标信息,找食物坐标改变颜色
        var r = Math.floor(Math.random() * 256);
        var g = Math.floor(Math.random() * 256);
        var b = Math.floor(Math.random() * 256);
        var RGB = 'rgb(' + r + ',' + g + ',' + b + ')';
        this.maps[this.food.row][this.food.column].style.backgroundColor = RGB;
    }

start函数
start函数功能为开始游戏，让蛇动起来其实很简单，利用setInterval方法设置一个定时器即可，通过不断渲染蛇的最新位置信息，蛇就能动起来啦！
start函数中还包含其他一些函数，比如需要判断是否撞墙、是否首尾相撞、是否吃到食物等等，在此就不做详细说明（github代码中有详细注释）.

start() {
        //让蛇跑起来
        this.timer = setInterval(() => {
            this.snake.move();
            //判断是否撞墙 以及 是否碰到蛇尾巴
            if (this.knockedEdge() || this.snake.killSelf()) {
                this.audio.pause();
                this.renderDieMusic();
                this.gameOver();
                this.renderDieMessage();
                //alert("Game Over ！！！");
                return;
            }
            //蛇吃食物
            if(this.isEatFood()){
                //1、蛇身体增长
                this.snake.growUp();
                //2、更新食物坐标
                this.randomFood();

                //3、更新关卡
                this.renderLevel();
            }
            //清除之前的坐标信息
            this.clear();
            //根据蛇的最新坐标，重新渲染
            this.renderSnake();
            //重新渲染食物
            this.renderFood();
        }, this.speed);
    }

gameOver函数
gameOver函数功能为当蛇碰壁或者蛇首尾相撞的时候结束游戏，实现起来及其简单，就是把start中设置的定时器关掉即可。

    gameOver() {
        //停止游戏，清除定时器
        //alert('撞墙啦！');
        clearInterval(this.timer);
    }

• Snake 类
  move函数
  move函数的功能为移动，蛇的移动也很简单，根据键盘的键码，判断按下了哪个键，然后操作数组即可（蛇头加一，蛇尾减一），然后重新渲染蛇就好啦。

move(){
        //1 去掉蛇尾
        this.tail = this.pop();
        //2 蛇头移动 根据键盘按下的键
        if(this.direction === 39){
            //往右跑
            this.unshift({
                row:this[0].row,
                column:this[0].column+1
            });
        }else if(this.direction === 37){
            //往左跑
            this.unshift({
                row:this[0].row,
                column:this[0].column-1
            });
        }else if(this.direction === 40){
            //往下跑
            this.unshift({
                row:this[0].row+1,
                column:this[0].column
            });
        }else if (this.direction === 38){
            //往下跑
            this.unshift({
                row:this[0].row-1,
                column:this[0].column
            });
        }
    }

gorwUp函数
growUp函数的功能为增长，即蛇吃了食物后蛇身长度加一，实现起来也很容易，就是把刚刚move的时候蛇尾去掉的元素push进数组即可！

   growUp(){
        //把move时候干掉的蛇尾巴加回来
        this.push(this.tail);
    }

！！！
最后，new对象

game = new Game('#game',new Snake(),new Food());

二、功能演示

由于界面跳转，背景音乐，操作控制、难度控制等功能还未实现，下面只演示蛇移动，以及蛇吃食物的效果。

三、总结

今天，主要完成了蛇移动，蛇吃食物，分数关卡控制的功能，其他的一些附属功能还有待完善！！！请见下一篇博文丫

标签：函数,项目,column,12.7,坐标,食物,日志,Math,row
来源： https://blog.csdn.net/qq_44288506/article/details/110947801