原生JS写贪食蛇游戏(一)

**

JS写贪食蛇游戏(一)

**

今天用js来实现贪食蛇游戏的基本玩法，往后博主会不定时更新贪食蛇的进阶模式
例如增添关卡、蛇加速、双人同屏操作等等
话不多说,开始吧

贪食蛇的基本思路：
1.构造两个对象：蛇、食物；
2.让蛇动起来；
3.设立游戏规则：蛇头碰到边界是gameOver，蛇头碰到自身时gameOver
4.蛇头与食物重合时身体伸长一节同时食物出现在别的地方

先搭好骨架，界面的样式可以随心所欲

然后在创建食物对象（为啥？因为它简单啊）

var map = document.getElementById('map');  //选中地图元素
function Food() {
            this.display = function () {
                var f = document.createElement('div');   //创建一个div块保存到f变量中
                this.flag = f;    //将节点保存到标记变量中，方便之后好删除
                f.style.width  ='10px';
                f.style.height = '10px';
                f.style.backgroundColor = 'white';
                f.style.borderRadius = '50%';
                f.style.position = 'absolute';
                this.x = Math.floor(Math.random()*80);
                this.y = Math.floor(Math.random()*40)；
                //食物的位置
                f.style.left=this.x*10+'px'; 
                f.style.top =this.y*10+'px';
                //将创建的div块添加到地图中去
                map.appendChild(f);
            }
        }
        /*你可以在后面用
        *var food =new Food();
        *food.display();
        *来验证代码的正确性
		*/

创建蛇对象

 function Snake() {
            this.direction = 'right';  //这是蛇的运动方向，以后我们只通过改变这个属性来改变它的方向
            this.body = [        //这是蛇的身体的缩小版坐标
                {x: 2, y: 0},		//先将它们保存在一个数组中
                {x: 1, y: 0},
                {x: 0, y: 0}
            ];
            this.display = function () {
                for (var i = 0; i < this.body.length; i++) {
                    if (this.body[i].x !=null) { 	/* 当蛇吃到食物时
                                                     *  会在body中push一组null值
                                                     * 即蛇新增的一节身体
												     *这里给有坐标的
													 *创造身体
													 */
                        var s = document.createElement('div');
                        this.body[i].flag = s;
                        s.style.width = '10px';
                        s.style.height = '10px';
                        s.style.backgroundColor = 'white';
                        s.style.borderRadius = '50%';
                        s.style.position = 'absolute';
                        s.style.left = 10 * this.body[i].x + 'px';
                        s.style.top = 10 * this.body[i].y + 'px';
                        map.appendChild(s);
                    }
                }
            }
        }

接下来让蛇动起来，在蛇对象中添加一个run的方法属性

this.run = function () { //把前一节的身体坐标传给它的后一节身体
                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;
                }
                //根据方向，来调整蛇头的坐标
                switch (this.direction) {
                    case 'right':
                        this.body[0].x += 1;
                        break;
                    case 'left':
                        this.body[0].x -= 1;
                        break;
                    case 'up':
                        this.body[0].y -= 1;
                        break;
                    case 'down':
                        this.body[0].y += 1;
                        break;
                }
                //删掉初始化的蛇，不然跑一路会创建一路的div块
                for (var i = 0; i < this.body.length; i++) {
                    if (this.body[i].flag != null) {
                        map.removeChild(this.body[i].flag);
                    }
                }

如此蛇还跑不起来，我们还要在对象之外添加几个方法来控制蛇运动的开始、暂停、方向

document.onkeydown = function (e) {
            var ev = e || window.event;
            switch (ev.keyCode) {
                case 38:
                    if (snake.direction != 'down') {   // 不允许返回，向上的时候不能向下
                        snake.direction = "up";
                    }
                    break;
                case 40:
                    if (snake.direction != "up") {
                        snake.direction = "down";
                    }
                    break;
                case 37:
                    if (snake.direction != "right") {
                        snake.direction = "left";
                    }
                    break;
                case 39:
                    if (snake.direction != "left") {
                        snake.direction = "right";
                    }
                    break;
            }
        }
        var snake = new Snake();
        var food =new Food();
        var btn =document.getElementById('btn');
        var btn1=document.getElementById('btn1');
        var timer;
        snake.display();
        food.display();
        btn.onclick = function () {
            timer = setInterval('snake.run()',100);
        }
        btn1.onclick = function () {
            clearInterval(timer);
        }

至此蛇已经能跑起来，我们再来将规则用代码实现
在蛇对象的run方法中写如下代码

//这个是蛇头碰到边界是gameOver
if (this.body[0].x<0 || this.body[0].x>79 ||this.body[0].y<0 || this.body[0].y>39) {
                    clearInterval(timer);    //清除掉定时器，即蛇停止运动
                    alert('傻啊,用头撞墙');   //弹出框
                    window.location.reload(); //刷新界面，当然也可以不用刷新
                    						  //
                }
                //蛇头碰到自身时gameOver
                for (var i=4;i

最后实现蛇吃食物自身生长
(这片代码大家多参悟参悟，也是写在蛇对象的run方法中)

if (this.body[0].x == food.x && this.body[0].y == food.y ) {  //当蛇头坐标与食物坐标重合时
                    this.body.push({x:null,y:null,flag:null}); //如上所说，加了一组null，这个在接下来调用
                    																//display方法时，系统会自动赋值，如此相当于
                    																//多了一组身体坐标，蛇就自动伸长啦
                    map.removeChild(food.flag); //一处被吃掉的食物
                    food.display(); //再随机创建一个食物
                }
 this.display();

好啦，简易版贪食蛇完成!

总代码如下