简单的js贪食蛇。

最新推荐文章于 2024-01-28 17:49:34 发布

窗边的橘猫

最新推荐文章于 2024-01-28 17:49:34 发布

阅读量101

点赞数

本文链接：https://blog.csdn.net/qq_44811890/article/details/109121547

版权

HTML5 JavaScript 游戏开发贪食蛇自调用函数

关键词由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.map {
				width: 800px;
				height: 600px;
				background-color: #CCC;
				position: relative;
				/*让地图脱离文档流*/
			}
			/*简单的设置所使用的背景图，让地图脱离文档流，在实现过程中，食物小蛇才可以在屏幕上移动。*/
		</style>
</head>
<body>
<div class="map"></div>
<script type="text/javascript">
//通过自调用函数实现食物。
(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;
	this.color=color||"blue";
}
//为Food添加初始化方法，添加在原型方法中，需要在地图中显示，所以方法的参数是map；
Food.prototype.init=function(map){
//在地图中添加一个div的元素设置为食物。
var div=document.createElement("div");
map.appendChild(div);
//添加完食物基础div以后需要设置食物的基本样式。
div.style.width=this.width+"px";
div.style.height=this.height+"px";
div.style.backgroundColor=this.color;
//食物必须脱离文档流。
div.style.position="absolute";
//产生随机坐标。
this.x=parseInt(Math.random()*(map.offsetWidth/this.width))*this.width;
//parseInt()向下取整函数，Math.random（）用于产生随机数，之后判断在地图的宽度上可以产生多少个食物，下面高度同理。
this.y=parseInt(Math.random()*(map.offsetHeight/this.height))*this.height;
div.style.left=this.x+"px";
div.style.top=this.y+"px";
//将div添加到elements数组中。当食物被吃掉以后，删除了再创建一个。
elements.push(div);
};
//设置删除函数，用于删除被吃掉的食物，直接删除是无法完成的，所以通过数组elements，找到食物的父元素，然后再删除掉食物（父元素的子元素）；设立为私有函数，只能在自调用函数中使用。
function remove(){
//for循环判断数组中食物的个数。
for( var i=0;i<elements.length;i++){
var ele=elements.[i];
//找到子元素的父元素，然后再删掉子元素。
ele.parentNode.removeChild(ele);
//然后从数组中删除食物元素。
elements.splice(i,1);//方法作用，从当前位置删除n个元素，i是位置，1是从这个位置删除的个数。
}
};
//在自调用函数中所有的变量都是局部变量，只能在自调用函数中去调用，如果需要在外部使用就需要将想使用的参数，暴露给window，然后局部变量就会变成一个全局变量。自调用函数以外都可以使用。
window.Food=Food;
}());
//通过自调用函数设计小蛇。
(function (){
//同样设置elements数组存放小蛇，在小蛇移动过程中，需要不停的删除创建，不然就是只有蛇头在动，
var elements=[];
function Snake(width,height,direction){
//蛇的大小和食物差不多
this.width=width||20;
this.height=height||20;
this.direction=direction||"right";
//设置小蛇身体的初始样式，
this.body=[
{x:3,y:2,color:"skyblue"},
{x:2,y:2,color:"pink"},
{x:1,y:2,color:"pink"}
];
}
//为蛇添加初始化方法，添加到原型方法中，
Snake.prototype.init=function (map){
//小蛇的建立是一个不断删除不断创建的过程，每一次移动的小蛇都是删除了原来的小蛇， 然后在原来的基础上再次创建一个小蛇。所有小蛇的基础是在一个for循环中。 所以在使用这个函数过程中，需要先删除再创建。
remove();
for(var i=0;i<this.body.length;i++){
//首先数组中的每一个元素都是对象。
var obj=this.body[i];
var div=document.createElement("div");
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";
div.style.top=obj.y*this.height+"px";
div.style.backgroundColor=obj.color;
elements.push(div);//将小蛇的每一个部分都添加到数组中，为了方便寻找和删除；
}
};
//为小蛇添加移动方法添加到原型中去。
Snake.prototype.move=function (food,map){
//改变蛇身体坐标的位置,
var i=this.body.length-1;
//下面是一个倒循环，小蛇的移动是从最后一个开始的。将前一个部分的坐标赋值给后一个，那么最后一个部分就是前进了一个单位。
for( ;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 "bottom":
	this.body[0].y +=1;
	break;
case "top":
	this.body[0].y -=1;
	break;
}
//判断了蛇的移动，然后就是蛇的吃食物。
//也就是判断蛇头的坐标和食物的坐标是否重合。
var headX=this.body[0].x * this.width;
var headY=this.body[0].y * this.height;
//然后用if循环判断。并且吃到食物以后，增加身体的长度。
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,
color:last.color
});
//然后再创建食物进入地图中。
food.init(map);
}
};
//在移动的过程中不断的删除小蛇。
function remove(){
var i=elements.length-1;
for( ; i>=0;i--){
var ele=elements[i];
ele.parentNode.removeChild(ele);
elements.splice(i,1);
}
}
//将snake暴露给window；
window.Snake=Snake;
}());
//自调用函数创建游戏对象函数。
(function(){
var that=null;//为了方便在后面代码中使用this调用游戏的实例对象。
function Game(map){
this.food=new Food();
this.snake=new Snake();
this.map=map;
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 timId=setInterval(function(){
//当前函数中使用的this指的是window对象，所以在函数后面加入.bind(that)， 将函数中的this指向变成game对象。
this.snake.move(food,map);
this.snake.init(map);
//以食物大小为基础，maxx是最大横坐标。。之后同理。
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("game over!!!!!!");
}
if(headY=0||headY>=maxY){
clearInterval(timeId);
alert("game over！！！");
}
}.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>
<script
</html>

这是一个简单的贪食蛇代码，主要用自调用函数，里面具体的对象是食物对象，小蛇对象，和游戏对象。在给对象中添加相应的方法。
食物对象：食物的创建，食物的随机产生，
小蛇对象：小蛇的移动，小蛇的吃食物。
游戏对象中添加了食物对象的实例，小蛇对象的实例。然后添加相应的游戏创建方法，游戏操作方法。

窗边的橘猫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单的js贪食蛇。

<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .map { width: 800px; height: 600px; background-color: #CCC; position: relative; /*让地图脱离文档流
复制链接

扫一扫