自调用函数—食物，定义食物构造函数,然后创建对象，为原型添加初始化的方法(作用：在页面上显示这个食物)，私有的函数—删除食物，把Food暴露给window,外部可以使用
自调用函数—小蛇，定义小蛇构造函数,然后创建对象，为原型添加初始化的方法(小蛇初始化和小蛇动起来两个)，私有的函数—删除小蛇，把Snake暴露给window,外部可以使用
自调用函数—游戏对象，游戏的构造函数，初始化游戏-----可以设置小蛇和食物显示出来，添加原型方法—设置小蛇可以自动的跑起来，添加原型方法—设置用户按键,改变小蛇移动的方向，把Game暴露给window,外部就可以访问Game对象了
初始化游戏对象，初始化游戏—开始游戏
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>.map {width: 800px;height: 600px;background-color: #ccc;position: relative;}</style>
</head>
<body>
<div class="map"></div>
<script>// 自调用函数---食物(function () {var elements = [];//用来保存每个小方块食物的//食物就是一个对象,有宽,有高,有颜色,有横纵坐标,先定义构造函数,然后创建对象function Food(x, y, width, height, color) {//横纵坐标this.x = x || 0;this.y = y || 0;//宽和高this.width = width || 20;this.height = height || 20;//背景颜色lor = color || "green";}//为原型添加初始化的方法(作用：在页面上显示这个食物)//因为食物要在地图上显示,所以,需要地图的这个参数(map---就是页面上的.class=map的这个div)Food.prototype.init = function (map) {//先删除这个小食物//外部无法访问的函数remove();//创建divvar div = ateElement("div");//把div加到map中map.appendChild(div);//设置div的样式div.style.width = this.width + "px";div.style.height = this.height + "px";div.style.backgroundColor = lor;//先脱离文档流div.style.position = "absolute";//随机横纵坐标this.x = parseInt(Math.random() * (map.offsetWidth / this.width)) * this.width;this.y = parseInt(Math.random() * (map.offsetHeight / this.height)) * this.height;div.style.left = this.x + "px";p = this.y + "px";//把div加入到数组elements中elements.push(div);};//私有的函数---删除食物的function remove() {//elements数组中有这个食物for (var i = 0; i < elements.length; i++) {var ele = elements[i];//找到这个子元素的父级元素,然后删除这个子元素veChild(ele);//再次把elements中的这个子元素也要删除elements.splice(i, 1);}}//把Food暴露给Window,外部可以使用window.Food = Food;}());// 自调用函数---小蛇(function () {var elements = [];//存放小蛇的每个身体部分//小蛇的构造函数function Snake(width, height, direction) {//小蛇的每个部分的宽this.width = width || 20;this.height = height || 20;//小蛇的身体this.body = [{x: 3, y: 2, color: "red"},//头{x: 2, y: 2, color: "orange"},//身体{x: 1, y: 2, color: "orange"}//身体];//方向this.direction = direction || "right";}//为原型添加方法--小蛇初始化的方法Snake.prototype.init = function (map) {//先删除之前的小蛇remove();//===========================================//循环遍历创建divfor (var i = 0; i < this.body.length; i++) {//数组中的每个数组元素都是一个对象var obj = this.body[i];//创建divvar div = ateElement("div");//把div加入到map地图中map.appendChild(div);//设置div的样式div.style.position = "absolute";div.style.width = this.width + "px";div.style.height = this.height + "px";//横纵坐标div.style.left = obj.x * this.width + "px";p = obj.y * this.height + "px";//背景颜色div.style.backgroundColor = lor;//方向暂时不定//把div加入到elements数组中----目的是为了删除elements.push(div);}};//为原型添加方法---小蛇动起来ve = function (food, map) {//改变小蛇的身体的坐标位置var i = this.body.length - 1;//2for (; 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 "top":this.body[0].y -= 1;break;case "bottom":this.body[0].y += 1;break;}//判断有没有吃到食物//小蛇的头的坐标和食物的坐标一致var headX=this.body[0].x*this.width;var headY=this.body[0].y*this.height;//判断小蛇的头的坐标和食物的坐标是否相同if(headX==food.x&&headY==food.y){//获取小蛇的最后的尾巴var last=this.body[this.body.length-1];//把最后的蛇尾复制一个,重新的加入到小蛇的body中this.body.push({x:last.x,y:last.y,lor});//把食物删除,重新初始化食物food.init(map);}};//删除小蛇的私有的函数=============================================================================function remove() {//删除map中的小蛇的每个div,同时删除elements数组中的每个元素,从蛇尾向蛇头方向删除divvar i = elements.length - 1;for (; i >= 0; i--) {//先从当前的子元素中找到该子元素的父级元素,然后再弄死这个子元素var ele = elements[i];//从map地图上删除这个子元素veChild(ele);elements.splice(i, 1);}}//把Snake暴露给window,外部可以访问window.Snake = Snake;}());//自调用函数---游戏对象(function () {var that = null;//该变量的目的就是为了保存游戏Game的实例对象-------//游戏的构造函数function Game(map) {this.food = new Food();//食物对象this.snake = new Snake();//小蛇对象this.map = map;//地图that = this;//保存当前的实例对象到that变量中-----------------此时that就是this}//初始化游戏-----可以设置小蛇和食物显示出来Game.prototype.init = function () {//初始化游戏//食物初始化this.food.init(this.map);//小蛇初始化this.snake.init(this.map);//调用自动移动小蛇的方法========================||调用了小蛇自动移动的方法this.runSnake(this.food, this.map);//调用按键的方法this.bindKey();//========================================};//添加原型方法---设置小蛇可以自动的跑起来Game.prototype.runSnake = function (food, map) {//自动的去移动var timeId = setInterval(function () {//此时的this是window//移动小蛇ve(food, map);//初始化小蛇this.snake.init(map);//横坐标的最大值var maxX = map.offsetWidth / this.snake.width;//纵坐标的最大值var maxY = map.offsetHeight / this.snake.height;//小蛇的头的坐标var headX = this.snake.body[0].x;var headY = this.snake.body[0].y;//横坐标if (headX < 0 || headX >= maxX) {//撞墙了,停止定时器clearInterval(timeId);alert("游戏结束");}//纵坐标if (headY < 0 || headY >= maxY) {//撞墙了,停止定时器clearInterval(timeId);alert("游戏结束");}}.bind(that), 150);};//添加原型方法---设置用户按键,改变小蛇移动的方向Game.prototype.bindKey = function () {//获取用户的按键,改变小蛇的方向document.addEventListener("keydown", function (e) {//这里的this应该是触发keydown的事件的对象---document,//所以,这里的this就是document//获取按键的值switch (e.keyCode) {case 37:this.snake.direction = "left";break;case 38:this.snake.direction = "top";break;case 39:this.snake.direction = "right";break;case 40:this.snake.direction = "bottom";break;}}.bind(that), false);};//把Game暴露给window,外部就可以访问Game对象了window.Game = Game;}());//初始化游戏对象var gm = new Game(document.querySelector(".map"));//初始化游戏---开始游戏gm.init();</script>
</body>
</html>
显示结果
本文发布于:2024-02-02 13:04:50，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170685028943990.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
