这样的美杜莎，你不爱？

Posted 2021-12-28 N奈斯先生

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了这样的美杜莎，你不爱？相关的知识，希望对你有一定的参考价值。

欢迎加入前端技术营！如果你也是前端学习者或者对前端有学习的想法，那就跟着我一起从零开始进击前端。
致力于尽可能详细且简洁的介绍前端知识、自己的捷径，也是学习路上的记录。欢迎探讨

文章目录

蛇的初始化和创建

        table
        border-collapse: collapse;
        background: transparent;
        border: 1px solid pink;
        
        td
        width: 24px;
        height: 24px;
        border: 1px solid pink;

    <div id="app"></div>
    <script src="js/game.js"></script>
    <script>
        var game = new Game()
    </script>

function Game() 
    // alert('欢迎来到贪吃蛇');
    //行数
    this.row = 20;
    //列数
    this.col = 20;
    // 分数
    this.score = 0;
    //初始化蛇类
    this.init();

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");
            //追加到tr
            console.log(tr);
            tr.appendChild(td);
        
        //追加结点上树
        this.dom.appendChild(tr);
    
    //表格上树
    document.getElementById("app").appendChild(this.dom);

function Snake() 
    //蛇的初始化身体
    this.body = [
        /*  "row": 3, "col": 7 ,
        "row": 3,"col": 6, */

         "row": 3, "col": 5 ,
        "row": 3, "col": 4,
        "row": 3,"col": 3,
        "row": 3,"col": 2 ];

蛇的运动

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;

// 设置键盘事件监听
Game.prototype.bindEvent = function () 
    var self = this;
    //键盘事件
    document.onkeydown = function (event) 
        // 获取键盘值
        console.log(event.keyCode, 'event');
        switch (event.keyCode) 
            //按下左键
            case 37:
                //先进行判断，如果当前的方向是向右移动，此时不能按左键
                if (self.snake.direction == 'R') return;
                self.snake.changeDirection("L");
                break;
            case 38:
                //按下上键
                //先进行判断，如果当前的方向是向下移动，此时不能按上键
                if (self.snake.direction == 'D') return;
                self.snake.changeDirection("U");
                break;
            case 39:
                //按下右键
                //先进行判断，如果当前的方向是向左移动，此时不能按右键
                if (self.snake.direction == 'L') return;
                self.snake.changeDirection("R");
                break;
            case 40:
                //按下下键
                //先进行判断，如果当前的方向是向上移动，此时不能按下键
                if (self.snake.direction == 'U') return;
                self.snake.changeDirection("D");
                break;
        

    
;

死亡判定

//死亡判定1：超出边界
    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.unshift(); //删除是因为当前的头增是不合法的，因为已经结束了
        clearInterval(game.timer)
    
    // //死亡判定2：自己撞自己:当前蛇的头部和身体的某一部分row和col重合时
    for (var i = 1; i < this.body.length; i++) 
        if (this.body[0].col == this.body[i].col && this.body[0].row == this.body[i].row) 
            alert('游戏结束,得分为：' + game.score + "分");
            this.body.unshift(); //删除是因为当前的头增是不合法的，因为已经结束了
            clearInterval(game.timer)

食物的创建

function Food(gameSnake) 
    var self = this;
    // alert('食物');
    //食物的位置
    //do while 作用是先创建一个位置，再判断是否在蛇身上
    do 
        this.row = parseInt(Math.random() * gameSnake.row);
        this.col = parseInt(Math.random() * gameSnake.col);
     while ((function () 
            //遍历蛇的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, "🍤")

蛇吃食物

//蛇吃食物
    //判断如果当前蛇的头部没有和食物进行重合，就代表此时没有吃到食物，进行尾部删除；否则相反
    if (this.body[0].row == game.food.row && this.body[0].col == game.food.col) 
        // alert('吃到了');
        // 此时只有头部增加了，尾部没有删除
        // 创建新食物
        game.food = new Food(game)
        //加分数
        game.score++;
        //让帧编号归0，因为蛇会窜一下
        game.f = 0;
     else 
        this.body.pop()