javascript贪吃蛇案例

2019年12月14日00:55:29 评论 16 次浏览

课程视频 js>Day-9

1、分析

小游戏中共有三个对象。一个是地图(Map)、一个是食物(Food)、一个是蛇(Snake)。
以面向对象的方式来开发,应该创建三个对象。
每个对象的特点:

地图Map:

宽width
高height
背景颜色backgroundColor
显示方法:show

食物Food:

宽width
高height
背景颜色backgroundColor
x轴坐标:0~29(每个坐标实际像素是20px)
y轴坐标:0~19(每个坐标实际像素是20px)

蛇Snake:

身体body(默认有三个div组成,其中一个蛇头,两段蛇身,都有颜色)
能够移动move
能够拐弯,改变移动方向
能够吃食物,变长

2、创建地图

javascript贪吃蛇案例

3、创建食物

创建一食物,让它显示在body中。
javascript贪吃蛇案例

食物没有和地图对齐,解决办法是让父级元素地图position是relative,让子元素食物position是absolute,并且让食物显示在地图中,而不是显示在body中。
所以修改Map,添加position属性,并且用一个属性_map来保存地图:
javascript贪吃蛇案例然后修改食物,让其显示在地图中即可:
javascript贪吃蛇案例

4、创建蛇

javascript贪吃蛇案例
蛇的每一节用一个div来表示,每一节都有宽度、高度、背景颜色、坐标。创建蛇,并让它显示到地图上。
javascript贪吃蛇案例

5、让蛇移动

移动方向:默认先向右移动
javascript贪吃蛇案例

这样做有个问题,当蛇移动的时候,会调用show方法,让蛇从新显示。调用show方法,会一直循环创建div。所以看到的效果是蛇移动了,但是越走越长。
解决办法:
javascript贪吃蛇案例

6、让蛇拐弯

控制蛇头即可,因为身体一直跟着蛇头走。
蛇头的方向肯定是上下左右四个方向,可以用一个属性来表示蛇的移动方向。
javascript贪吃蛇案例
当蛇移动的时候,根据方向修改蛇头的坐标:
javascript贪吃蛇案例
下面添加键盘事件,修改蛇的运行方向:
javascript贪吃蛇案例

7、让蛇吃食物

蛇头和食物重叠,才算吃到食物。即在移动过程中,如果发现蛇头的坐标和食物的坐标一样,才表示吃到食物。
javascript贪吃蛇案例
这样做,吃完食物,发现食物没有从新显示。修改Food函数:
javascript贪吃蛇案例

8、让蛇加速

javascript贪吃蛇案例

当蛇吃到食物的时候,让时间变小,速度加快:
javascript贪吃蛇案例

 /********************** 创建地图 *************************/
    function Map(){
        //地图特点
        this.width = '600px';
        this.height = '400px';
        this.backgroundColor = '#dddddd';
        this.position = 'relative';
        this.ditu = null; //该属性用于保存地图那个div
        //show方法用于显示地图
        this.show = function(){
            this.ditu = document.createElement('div');
            this.ditu.style.width = this.width;
            this.ditu.style.height = this.height;
            this.ditu.style.backgroundColor = this.backgroundColor;
            this.ditu.style.position = this.position;
            //将div放到body中
            document.body.appendChild(this.ditu);
        }
    }
    //实例化地图,创建对象
    var map = new Map();
    //调用show,显示地图
    map.show();

    /********************** 创建食物 *************************/
    function Food(){
        this.width = 20;
        this.height = 20;
        this.backgroundColor = 'green';
        this.position = 'absolute';
        this.x = null;
        this.y = null;
        this.shiwu = null; //它表示食物那个div
        //show方法,显示食物
        this.show = function () {
            if(this.shiwu == null){
                this.shiwu = document.createElement('div');
                this.shiwu.style.width = this.width + 'px';
                this.shiwu.style.height = this.height + 'px';
                this.shiwu.style.backgroundColor = this.backgroundColor;
                this.shiwu.style.position = this.position;
            }
            this.x = Math.floor(Math.random()*30); // 0~29的随机数
            this.y = Math.floor(Math.random()*20); // 0~19的随机数
            this.shiwu.style.left = this.x * this.width + 'px';
            this.shiwu.style.top = this.y * this.height + 'px';
            map.ditu.appendChild(this.shiwu);
        }
    }
    //实例化食物对象
    var food = new Food();
    food.show();

    /********************** 创建蛇 *************************/
    function Snake(){
        this.body = [[3,2,'red', null], [2,2,'blue', null], [1,2,'blue', null]];
        this.width = 20; //每一节的宽度
        this.height = 20;//每一节的高度
        this.position = 'absolute';
        this.direction = 'right'; //表示蛇的移动方向,默认向右
        //定义方法show,让蛇显示
        this.show = function () {
            for(var i=0; i<this.body.length; i++){
                if(this.body[i][3] == null){
                    this.body[i][3] = document.createElement('div');
                    this.body[i][3].style.width = this.width + 'px';
                    this.body[i][3].style.height = this.height + 'px';
                    this.body[i][3].style.backgroundColor = this.body[i][2];
                    this.body[i][3].style.position = this.position;
                }
                this.body[i][3].style.left = this.body[i][0] * this.width + 'px';
                this.body[i][3].style.top = this.body[i][1] * this.height + 'px';
                //把创建的每个div放到地图中
                map.ditu.appendChild(this.body[i][3]);
            }
        };
        //定义move方法,让蛇移动
        this.move = function () {
            //移动过程中,判断,如果蛇的坐标和食物的坐标完全一样,表示吃到食物
            if(this.body[0][0] == food.x && this.body[0][1] == food.y){
                //蛇变长
                this.body.push([0,0,'blue',null]);
                //从新让食物显示
                food.show();
                //让t变小,移动速度加快
                if(t > 150){
                    t -= 50;
                    dingshi();
                }
            }
            //除蛇头以外,其他节修改坐标等于它前一节的坐标即可。
            for(var i=this.body.length-1; i>0; i--){
                this.body[i][0] = this.body[i-1][0];
                this.body[i][1] = this.body[i-1][1];
            }
            //蛇头单独设置
            if(this.direction == 'right'){
                this.body[0][0] += 1; //向右移动,修改横坐标
            }else if(this.direction == 'left'){
                this.body[0][0] -= 1; //向左移动,修改横坐标
            }else if(this.direction == 'up'){
                this.body[0][1] -= 1; //向上移动,修改纵坐标
            }else if(this.direction == 'down'){
                this.body[0][1] += 1; //向下移动,修改纵坐标
            }

            //修改完坐标,让蛇从新显示
            this.show();
        };
    }
    //如果把成员方法写到原型对象上也是可以的。
    /*Snake.prototype = {
        show:function(){

        },
        move:function(){

        }
    };*/
    //实例化蛇
    var snake = new Snake();
    //让蛇显示
    snake.show();

    //定义一个时间,这个时间表示蛇移动的速度
    var t = 500;
    var timer; //它表示当前的定时器
    //定时器,让蛇移动
    function dingshi(){
        clearInterval(timer);
        timer = setInterval('snake.move()', t);
    }
    dingshi();

    //给页面绑定键盘事件
    document.onkeydown = function(evt){
        var e = window.event||evt;
        var keyCode = e.keyCode;
        if(keyCode == 37 && snake.direction != 'right'){
            snake.direction = 'left';
        }else if(keyCode == 38 && snake.direction != 'down'){
            snake.direction = 'up';
        }else if(keyCode == 39 && snake.direction != 'left'){
            snake.direction = 'right';
        }else if(keyCode == 40 && snake.direction != 'up'){
            snake.direction = 'down';
        }
    }
继续阅读
weinxin
加我微信
微信扫一扫,加我微信好友,共同交流,共同进步! (备注:焦国强博客)
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: