1.了解贪吃蛇小游戏的构成。
地图、蛇、食物、规则
先写一个地图类
//地图类 (function() { //地图构造函数 宽,高,背景色 function MapS(width, height, bgColor) { this.width = width; this.height = height; this.bgColor = bgColor; } //Maps原型对象 MapS.prototype.init = function() { //创建div元素 var divMap = document.createElement('div'); //设置div的css属性 divMap.style.width = this.width + 'px'; divMap.style.height = this.height + 'px'; divMap.style.backgroundColor = this.bgColor; divMap.style.position = 'relative'; divMap.id = 'divMap'; //添加到body document.body.appendChild(divMap); } //将构造函数存储到window对象的属性中,公布到全局中 window.MapS = MapS; })();再来一个食物类
//食物类 (function() { var elements = []; //食物构造函数 function Food(width, height, bgColor) { this.width = width; this.height = height; this.bgColor = bgColor; this.x = 0; this.y = 0; } Food.prototype.init = function() { //生成食物之前先删除 remove(); //添加到map上 var divMap = document.getElementById('divMap'); console.log(divMap); //创建食物div var divFood = document.createElement('div'); //设置div样式 divFood.style.width = this.width + 'px'; divFood.style.height = this.height + 'px'; divFood.style.backgroundColor = this.bgColor; divFood.style.position = 'absolute'; //由于食物和蛇是一格一格的变换,用地图的宽度/食物的宽度,得到40格, //食物的范围0-39之间的格的坐标 this.x = parseInt(Math.random() * (divMap.offsetWidth / this.width)); //只要在dom树上时,才能通过offsetWidth,获取在网页中的尺寸 console.log(divFood.offsetWidth); console.log(this.x); this.y = parseInt(Math.random() * (divMap.offsetHeight / this.height)); console.log(this.y); //当前食物的格数*食物的宽度 = 食物的left坐标像素值 //console.log(this.Width); divFood.style.left = this.x * this.width + 'px'; divFood.style.top = this.y * this.height + 'px'; //添加到map中 divMap.appendChild(divFood); //添加到数组中 elements.push(divFood); } function remove(){ var divMap = document.getElementById('divMap'); for (var i = 0; i < elements.length; i++) { //从map中删除 divMap.removeChild(elements[i]); } //清空数组 elements.splice(0); } //公布到window上 window.Food = Food; })();再写一个蛇类
//蛇类 (function() { //存储蛇节div对象 var elements = []; function Snake(width, height, dir) { this.width = width; this.height = height; this.dir =dir; // 蛇身属性,用数组的形式分别存储默认的蛇头,蛇中,蛇尾三个对象,x,y格数坐标,背景色 this.snBody = [{ x: 3, y: 2, bgColor: 'red' }, { x: 2, y: 2, bgColor: 'yellow' }, { x: 1, y: 2, bgColor: 'greenyellow' }]; } //初始化 Snake.prototype.init = function() { //删除 remove(); var divMap = document.getElementById('divMap'); for(var i = 0; i < this.snBody.length; i++) { // this.snBody[i] //创建div var divSnake = document.createElement('div'); //设置div样式 divSnake.style.width = this.width + 'px'; divSnake.style.height = this.height + 'px'; divSnake.style.backgroundColor = this.snBody[i].bgColor divSnake.style.position = 'absolute'; divSnake.style.left = this.snBody[i].x * this.width + 'px'; divSnake.style.top = this.snBody[i].y * this.height + 'px'; //添加到divMap中 divMap.appendChild(divSnake); //添加到数组中 elements.push(divSnake); } } //移动 Snake.prototype.move = function() { /* * 蛇中坐标给蛇尾,蛇头坐标给蛇中 */ for(var i = this.snBody.length - 1; i > 0; i--) { this.snBody[i].x = this.snBody[i - 1].x; this.snBody[i].y = this.snBody[i - 1].y; } //蛇头的方向 switch (this.dir){ case 'right':this.snBody[0].x += 1; break; case 'left':this.snBody[0].x -= 1; break; case 'top':this.snBody[0].y -= 1; break; case 'bottom':this.snBody[0].y += 1; break; } //蛇头的x自加1 //console.log(this.snBody); } //当前自调用函数中的私有函数 function remove() { var divMap = document.getElementById('divMap'); //从map中删除,看不见了 for(var i = 0; i < elements.length; i++) { //从map中删除老蛇div divMap.removeChild(elements[i]); } //清空数组 elements.splice(0); } //公布到window上 window.Snake = Snake; })();定义游戏规则
//游戏类型 (function() { //当前作用域的局部变量,存储game的实例 var gameThis = null; //游戏构造函数 function Game() { //将其它三个类型的实例对象存储在game的属性中 //实例化地图对象 this.mapS = new MapS(800, 600, '#ccc'); //实例化食物对象 this.food = new Food(20, 20, 'green'); //实例化蛇 this.snake = new Snake(20, 20,'right'); } //初始化方法 Game.prototype.init = function() { //调用三个类型中的init初始化方法 //调用初始化方法 this.mapS.init(); //调用初始化 this.food.init(); this.snake.init(); } Game.prototype.rule = function() { var divMap = document.getElementById('divMap'); gameThis = this; console.log(gameThis); var timer = setInterval(function(){ gameThis.snake.move(); gameThis.snake.init();// console.log(this); //撞墙死 if(gameThis.snake.snBody[0].x < 0 || gameThis.snake.snBody[0].x >= divMap.offsetWidth/gameThis.snake.width ||(gameThis.snake.snBody[0].y < 0 )|| (gameThis.snake.snBody[0].y >= divMap.offsetHeight/gameThis.snake.height)){ clearInterval(timer); //弹出对话框 var dialogDiv = document.createElement('div'); dialogDiv.style.width = '300px'; dialogDiv.style.height = '200px'; dialogDiv.style.backgroundColor = 'rgba(255,0,0,.5)'; dialogDiv.style.position = 'absolute'; dialogDiv.style.left = '50%'; dialogDiv.style.marginLeft = '-150px'; dialogDiv.style.top = '50%'; dialogDiv.style.marginTop = '-100px'; document.body.appendChild(dialogDiv); var btn = document.createElement('button'); btn.innerText = '再来一次'; dialogDiv.appendChild(btn); btn.onclick = function(){ //window.location浏览器对象下的属性,也是个地址栏对象 //刷新 window.location.reload(); } } //吃食物随机生成新食物,长尾巴 if(gameThis.snake.snBody[0].x == gameThis.food.x && gameThis.snake.snBody[0].y == gameThis.food.y){ //生成新食物 gameThis.food.init(); var arrColor = ['#f40','gold','red','black','blue','purple']; var c = arrColor[parseInt(Math.random()*arrColor.length)]; //长尾巴 var obj = { bgColor:c } gameThis.snake.snBody.push(obj); } },100); } //键盘按下事件 document.onkeydown = function(e){ //console.log(gameThis); switch (e.keyCode){ case 37: gameThis.snake.dir = 'left'; break; case 38: gameThis.snake.dir = 'top'; break; case 39: gameThis.snake.dir = 'right'; break; case 40: gameThis.snake.dir = 'bottom'; break; default: break; } } //公布外界 window.Game = Game; })();最后，调用起来
//实例化游戏对象 var game = new Game(); //调用初始化方法 game.init(); //调用规则方法 game.rule();