js制作贪吃蛇小游戏
Posted ironman725
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js制作贪吃蛇小游戏相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #map{ width: 800px; height: 800px; background-color: black; position: relative; } </style> </head> <body> <div id="map"></div> <script> ((function(){ function Food(width,height,color,x,y){ this.width = width || 20; this.height = height || 20; this.color = color || "blue"; this.x = x || 0; this.y = y || 0; this.element = document.createElement("div") } Food.prototype.init = function(map){ var div = this.element; div.style.width = this.width +"px"; div.style.height = this.height+"px"; div.style.backgroundColor = this.color; div.style.position = "absolute"; //设置随机坐标 this.x = Math.floor(Math.random()*(map.offsetWidth/this.width))*this.width; console.log(this); this.y = Math.floor(Math.random()*(map.offsetHeight/this.height))*this.height; div.style.left = this.x+"px"; div.style.top = this.y +"px"; map.appendChild(div); } window.Food = Food; })()); //小蛇的构造函数 ((function(){ var elements = [];//专门存放蛇的部位 function Snake(width,height,direction){ this.width = width || 20; this.height = height || 20; //方向 this.direction = direction || "right"; //小蛇的身体刻度 this.body = [ {x:3,y:1,color:"red"},//小蛇的头部 {x:2,y:1,color :"orange"},//身体 {x:1,y:1,color:"orange"}//身体 ] } //2.在原型对象上初始化小蛇 Snake.prototype.init = function(map){ //先删再创建 remove(); //2.遍历的创建div for(var i = 0; i < this.body.length;i++){ //每一个部位的刻度 var obj = this.body[i] //创建div并且添加样式 var div = document.createElement("div"); div.style.width = this.width+"px"; div.style.height = this.height+"px"; div.style.position = "absolute"; div.style.backgroundColor = obj.color //设置坐标 div.style.left = obj.x*this.width+"px"; div.style.top = obj.y*this.height+"px"; map.appendChild(div); //把蛇添加到数组里--->目的:为了删除 elements.push(div); } } //3.添加方法---移动小蛇 Snake.prototype.move = function(food,map){ //3.1.改变小蛇身体的坐标,因为小蛇的头部去判断方向 for(var i = this.body.length-1; i > 0;i--){ //当i=2;让第三块的x坐标等于第二块的x坐标 this.body[i].x = this.body[i-1].x; this.body[i].y = this.body[i-1].y; } //3.2判断小蛇头部的坐标,分析:小蛇往上走,y轴减一 switch (this.direction){ case"right": this.body[0].x++;//小蛇的头部 break; case"left": this.body[0].x--; break; case"top": this.body[0].y--; break; case"bottom": this.body[0].y++; } //3.3最后,判断小蛇是否吃到食物-->即判断头部坐标和食物的坐标一致 //头部的坐标 var headX = this.body[0].x*this.width; var headY = this.body[0].y*this.height; //食物的坐标 var foodX = food.x; var foodY = food.y; if(headX == foodX && headY == foodY){ //追加一个蛇的身体到body的最后 var last =this.body[this.body.length-1];//复制小蛇的尾巴 this.body.push({ x:last.x, y:last.y, color:last.color }) //食物吃完了要刷新位置 food.init(map) } } //4.封装删除小蛇的函数 function remove(){ //先删尾,尾巴现出来 for(var i = elements.length-1;i >=0;i--){ //数组里的每一个部位 var ele = elements[i] //在map中删除div ele.parentNode.removeChild(ele); //删数组中的div elements.splice(i,1); } } window.Snake = Snake; })()); //游戏对象 ((function () { var that; //1.游戏的构造函数 function Game(map){ this.food = new Food();//食物对象 this.snake = new Snake();//小蛇对象 this.map = map; that = this; } //2.初始化游戏 Game.prototype.init = function(){ this.food.init(this.map); this.snake.init(this.map); //调用 this.runSnake(this.map) //调用按键方法 this.bindKey(); } //3.添加方法使小蛇自动跑起来 Game.prototype.runSnake = function(map){ var timeId = setInterval(function(){ that.snake.move(that.food,that.map); that.snake.init(map); //判断横纵坐标的最大最小值 var maxX = map.offsetWidth / that.snake.width; var maxY = map.offsetHeight /that.snake.height; //蛇头的坐标 var headX = that.snake.body[0].x; var headY = that.snake.body[0].y; if(headX < 0 || headX >= maxX){ clearInterval(timeId); alert("太菜了") } if(headY < 0 || headY >= maxY){ clearInterval(timeId); alert("太菜了") } },50) } //4.设置用户的按键,来改变小蛇移动的方向 Game.prototype.bindKey = function(){ document.addEventListener("keydown",function(e){ switch (e.keyCode){ case 37: that.snake.direction = "left"; break; case 38: that.snake.direction = "top"; break; case 39: that.snake.direction = "right"; break; case 40: that.snake.direction = "bottom"; break; } }) } window.Game = Game; })()); var game = new Game(document.getElementById("map")); game.init(); // var food = new Food(); // var map = document.getElementById("map") // food.init(map); // var snake = new Snake(); // snake.init(map); // snake.move(); // setInterval(function(){ // snake.init(map); // snake.move(); // },200) </script>
以上是关于js制作贪吃蛇小游戏的主要内容，如果未能解决你的问题，请参考以下文章