03-贪吃蛇案例

2021-12-23-贪吃蛇

作者：zhzh
时间: 2020-12-23，12-24,12-25
书籍/博客/视频：
网站地址：

摘要

食物对象和蛇对象的创建，蛇对象的创建，game对象的创建

总结

game对象的 完成，把蛇对象，食物对象放入到，game对象中，实现在画布中渲染出，蛇和食物，蛇的移动和压缩代码，后面的还没 有完成

昨天未完成的的随机方块生成案例的完成，运用随机生成案例完成了食物对象的随机生成，完成了蛇对象的生成

贪吃蛇案例的全部完成，回顾了 一遍代码，没有把视频中的代码扩展，把视频中所完成的案例扩展，看了一点点继承

目录

js文件中创建一个自调用函数，开启一个新的作用域，避免命名冲突

1 、map

index.html

<div id="map"></div>

style.css

#map {
    width: 800px;
    height: 600px;
    background-color: gray;
    position: relative;
}

2、food

index.html

<script src="js/tools.js"></script>
<script src="js/food.js"></script>

tool.js

(function () {
    var Tools = {
        //一个模块解决一个问题
        getRandom:function (min, max) {
            min = Math.ceil(min);
            max = Math.floor(max);
            return Math.floor(Math.random() * (max - min + 1) + min); //The maximum is inclusive and the minimum is inclusive
        }

    }
    window.Tools = Tools;
})()

food.js

(function () {
    var position = 'absolute';
//记录上一次创建的食物，为删除做准备
    var elements = [];



//创建食物的对象，给实物对象的属性赋值
    function Food(options) {
        options = options ||{};
        this.x = options.x || 0;
        this.y = options.y || 0;
        this.width = options.width || 20;
        this.height = options.height || 20;
        this.color = options.color || 'pink';
    }


//渲染
    Food.prototype.render = function (map) {
        //随机生成对象之前要先删除之前创建的食物
        remove();


        //随机设置x和y
        //随机生成对象
        this.x = Tools.getRandom(0,map.offsetWidth/this.width - 1) * this.width;
        this.y = Tools.getRandom(0,map.offsetHeight/this.height - 1) * this.height;

        var div = document.createElement('div');
        map.appendChild(div);
        elements.push(div);

        div.style.position = position
        div.style.left = this.x + 'px';
        div.style.top = this.y + 'px';
        div.style.width = this.width + 'px';
        div.style.height = this.height + 'px';
        div.style.backgroundColor = this.color;

    }


    function remove() {
//    遍历数组
        for (var i = elements.length-1 ;i >= 0 ; i--){
            //删除创建的节点，删除创建的盒子
            elements[i].parentNode.removeChild(elements[i]);
            // 删除数组中的元素
            //1\从哪开始删除
            //2、删除几个元素
            elements.splice(i,1);
        }
    }
//把food构造函数，让外部可以访问
    window.Food = Food;
})()



//测试代码

// var map = document.getElementById('map')
// var food = new window.Food();
// food.render(map);

3、snake

//创建一个自调用函数
(function () {s++
    var position = 'absolute';
    var elements = [];
    function Snake(options) {
        options = options || {};
        this.width = options.width || 20;
        this.height = options.height || 20;
        this.direction = options.direction ||'right';
        this.body = [
            // 蛇的身体（蛇节），第一个元素是蛇头
            {x:3 , y:2 , color: 'red'},
            {x:2 , y:2 , color: 'blue'},
            {x:1 , y:2 , color: 'blue'},
        ];
    }
    
    
    Snake.prototype.render = function (map) {
        //先删除之前的蛇节
        remove();


        //把每一个蛇节渲染
        for(var i = 0,len = this.body.length;i<len; i++){
            var object = this.body[i];

            var div = document.createElement('div');
            map.appendChild(div);
            //Uncaught TypeError: Cannot read property 'appendChild' of undefined;
            //错误原因是game.js中创建的蛇没有渲染到画布中没有添加画布的参数

            //记录当前蛇节

            elements.push(div);

            //设置样式
            div.style.position = position;
            div.style.width = this.width +'px';
            div.style.height = this.height +'px';
            div.style.left = object.x * this.width + 'px';
            div.style.top = object.y * this.height + 'px';
            div.style.backgroundColor = object.color;

        }
    }

    //私有成员：移除方法
    function remove(){
        for (var i = elements.length -1;i >= 0;i--){
            //删除盒子
            elements[i].parentNode.removeChild(elements[i]);
            //删除数组中的元素
            elements.splice(i,1);
        }

    }



    Snake.prototype.move = function (food,map){
        //控制蛇身体移动（当前蛇节 到 上一个蛇节的位置）
        for (var i = this.body.length - 1; i > 0; i --){
            this.body[i].x = this.body[i - 1].x;
            this.body[i].y = this.body[i - 1].y;
        }
        //控制蛇头
        //判断蛇移动的方向
        var head = this.body[0];
        switch (this.direction) {
            case 'right':
                head.x += 1;
                break;
            case 'left':
                head.x -= 1;
                break;
            case 'top':
                head.y -= 1;
                break;
            case 'bottom':
                head.y += 1;
                break;
        }
        //2.3判断头是否和食物相遇（坐标重合）
        var headX = head.x * this.width;
        var headY = head.y * this.height;
        if (headX === food.x && headY === food.y){
            //让蛇增加一个蛇节
           var last = this.body[this.body.length - 1];
           this.body.push({
               x:last.x,
               y:last.y,
               color: last.color
           })
        //  重新创建一个食物
            food.render(map);

        }

    }

    //暴露构造函数给外部
window.snake = Snake;

})()
   this.body.push({
               x:last.x,
               y:last.y,
               color: last.color
           })
        //  重新创建一个食物
            food.render(map);

        }

    }

    //暴露构造函数给外部
window.snake = Snake;

})()