| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" | |
| content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>Document</title> | |
| <script> | |
| var map = null; | |
| var food = null; | |
| var snake = null; | |
| var timer = null; | |
| var t = 500; | |
| //定义地图构造器（类） | |
| function Map(){ | |
| //地图有属性 | |
| this.width = 600; //单位像素 px | |
| this.height = 400; | |
| this.backgroundColor = '#dddddd'; | |
| this.position = 'relative'; | |
| //创建一个保存地图的成员属性 | |
| this._map = null; | |
| //创建地图的方法 | |
| this.show = function(){ | |
| this._map = document.createElement('div'); | |
| //设置div的属性 | |
| this._map.style.width = this.width + 'px'; | |
| this._map.style.height = this.height + 'px'; | |
| this._map.style.backgroundColor = this.backgroundColor; | |
| this._map.style.position = this.position; | |
| //将div放到body中 | |
| document.querySelector('body').appendChild(this._map); | |
| } | |
| } | |
| //定义食物构造器（类） | |
| function Food(){ | |
| //食物的属性 | |
| this.width = 20; //单位像素 px | |
| this.height = 20; | |
| this.backgroundColor = 'green'; | |
| //位置。。。 | |
| this.position = 'absolute'; | |
| this.x = 0; //x轴坐标 | |
| this.y = 0; //y轴坐标 | |
| //表示食物的属性 | |
| this._food = null; | |
| //创建并显示食物的方法 | |
| this.show = function(){ | |
| if(this._food === null){ | |
| this._food = document.createElement('div'); | |
| } | |
| this._food.style.width = this.width + 'px'; | |
| this._food.style.height = this.height + 'px'; | |
| this._food.style.backgroundColor = this.backgroundColor; | |
| this._food.style.position = this.position; | |
| //设置left和top属性前，先随机设置x和y的值 | |
| this.x = Math.floor(Math.random() * 30); | |
| this.y = Math.floor(Math.random() * 20); | |
| this._food.style.left = this.x * this.width + 'px'; | |
| this._food.style.top = this.y * this.height + 'px'; | |
| //给定完样式，让食物显示在地图上 | |
| map._map.appendChild(this._food); | |
| } | |
| } | |
| //定义蛇类 | |
| function Snake(){ | |
| //定义蛇的初始身体 | |
| //每个数组中的null表示当前这节蛇的dom对象，就是这节蛇的div | |
| this.body = [[3,2,'red',null],[2,2,'blue',null],[1,2,'blue',null]]; | |
| this.width = 20; | |
| this.height = 20; | |
| this.position = 'absolute'; | |
| this.direct = 'right'; | |
| //定义蛇的显示方法 | |
| 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.backgroundColor = this.body[i][2]; | |
| this.body[i][3].style.width = this.width + 'px'; | |
| this.body[i][3].style.height = this.height + 'px'; | |
| this.body[i][3].style.position = this.position; | |
| //div.style.left = 横坐标*宽度 | |
| 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'; | |
| //把这节蛇显示在地图上 | |
| map._map.appendChild(this.body[i][3]); | |
| } | |
| } | |
| //蛇移动 | |
| this.move = function(){ | |
| //判断是否吃到食物 | |
| if(this.body[0][0] == food.x && this.body[0][1] == food.y){ | |
| //增加body元素的个数 | |
| this.body.push([0,0,'blue',null]); | |
| //重新显示蛇 | |
| this.show(); | |
| //从新生成一个食物 | |
| food.show(); | |
| //修改t | |
| t -= 50; | |
| m(t); | |
| } | |
| //移动一次，实验一下 | |
| //this.body = [[4,2,'red'],[3,2,'blue'],[2,2,'blue']]; | |
| //写循环，除了蛇头，改变每节蛇的坐标（先改变蛇尾，依次向前改） | |
| 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]; //改变纵坐标 | |
| } | |
| //this.body[0][0] += 1; | |
| //单独设置蛇头 | |
| if(this.direct == 'right'){ | |
| this.body[0][0] += 1; | |
| }else if(this.direct == 'left'){ | |
| this.body[0][0] -= 1; | |
| }else if(this.direct == 'up'){ | |
| this.body[0][1] -= 1; | |
| }else if(this.direct == 'down'){ | |
| this.body[0][1] += 1; | |
| } | |
| //判断是否超过边界 | |
| if(this.body[0][1] < 0 || this.body[0][1] > 19 || this.body[0][0] < 0 || this.body[0][0] > 29){ | |
| alert('Game Over！刷新从新开始'); | |
| clearInterval(timer); | |
| return false; | |
| } | |
| //判断不能撞自己，可加可不加 | |
| for(var i=1; i<this.body.length; i++){ | |
| //在循环过程中判断，判断蛇头是否和身体的某一节坐标相同，坐标相同，表示相撞 | |
| if(this.body[0][0] == this.body[i][0] && this.body[0][1] == this.body[i][1]){ | |
| alert('太不小心了，怎么能吃自己呢'); | |
| clearInterval(timer); | |
| return false; | |
| } | |
| } | |
| this.show(); | |
| } | |
| //设置direct的值 | |
| this.setDirect = function(keyCode){ | |
| switch (keyCode){ | |
| case 37: | |
| this.direct = 'left'; | |
| break; | |
| case 38: | |
| this.direct = 'up'; | |
| break; | |
| case 39: | |
| this.direct = 'right'; | |
| break; | |
| case 40: | |
| this.direct = 'down'; | |
| break; | |
| } | |
| } | |
| } | |
| function m(t){ | |
| clearInterval(timer); | |
| timer = setInterval('snake.move()', t); | |
| } | |
| window.onload = function () { | |
| //实例化Map，调用创建地图方法 | |
| map = new Map(); | |
| map.show(); //调用show方法，创建地图 | |
| //实例化食物Food | |
| food = new Food(); | |
| food.show(); //显示食物 | |
| // | |
| snake = new Snake(); | |
| snake.show(); | |
| //每隔多少毫秒调用一次move | |
| m(t); | |
| //设置按键 | |
| document.body.onkeydown = function(event){ | |
| var e = window.event||event; | |
| var keyCode = e.keyCode; | |
| //37 、38、 39、 40 分别表示 左上右下 | |
| //调用setDirect | |
| snake.setDirect(keyCode); | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| </body> | |
| </html> |