JS实现贪吃蛇小游戏

Posted 2021-02-27 codeumind

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS实现贪吃蛇小游戏相关的知识，希望对你有一定的参考价值。

贪吃蛇，JS实现

html代码部分

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box{
			width: 800px;
			height: 800px;
			background-color: #ccc;
			position: relative;
			position: absolute;
		}
	</style>
</head>
<body>
	<div class="box"></div>
	
	<script type="text/javascript" src="Food.js"></script>
	<script type="text/javascript" src="Snack.js"></script>
	<script type="text/javascript" src="Game.js"></script>
	<script type="text/javascript">
		var gm=new Game();
		gm.init(document.querySelector(".box"));
	</script>
</body>
</html>

JS部分

食物代码

//自调用函数加载该代码
(function(){
	//用来临时存放食物
	var elements=[];

	//食物的构造函数
	function Food(width,height,color){
		//给食物的属性赋值
		this.width=width||20;
		this.height=height||20;
		this.color=color||"green";
		this.x=0;
		this.y=0;
	}

	//初始化方法，用来把实例化的食物显示在屏幕上
	Food.prototype.init=function(map){
		remove();
		var div = document.createElement("div");
		//宽高，左上间距都需要加px，切记
		div.style.width=this.width+"px";
		div.style.height=this.height+"px";
		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";
		div.style.top=this.y+"px";
		div.style.backgroundColor=this.color;
		div.style.position = "absolute";
		map.appendChild(div);
		elements.push(div);
	}

	function remove(){
		for(var i =0;i<elements.length;i++){
			elements[0].parentNode.removeChild(elements[0]);
			elements.splice(0,1);
		}
	}

	window.Food=Food;
}());

小蛇代码

//自调用函数加载代码
(function(){
	var elements=[];
	//小蛇构造函数
	function Snack(width,height,length){
		that=this;
		this.width=width;
		this.height=height;
		this.position="absolute";
		this.direction="right";
		this.x=0;
		this.y=0;
		this.body = [];
		for(var i =0;i<length;i++){
			var obj="";
			if(i==0){
				obj = ‘{"x":‘+(length+2-i).toString()+‘,"y":2,"color":"red"}‘
			}else{
				obj = ‘{"x":‘+(length+2-i).toString()+‘,"y":2,"color":"orange"}‘
			}
			this.body.push(JSON.parse(obj));	
		}	
	}

	//小蛇的初始化
	Snack.prototype.init=function(map){
		remove();
		for(var i =0;i<this.body.length;i++){
			var div = document.createElement("div");
			div.style.width=this.width+"px";
		    div.style.height=this.height+"px";
		    this.x=this.body[i].x*this.width;
		    this.y=this.body[i].y*this.height;
		    div.style.left=this.x+"px";
		    div.style.top=this.y+"px";
		    div.style.backgroundColor=this.body[i].color;
		    div.style.position = "absolute";
		    map.appendChild(div);
		    elements.push(div);
		}
	}

	Snack.prototype.run=function(food,map){
		var timeID = setInterval(function(){
			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 "top":
					    this.body[0].y-=1;
					    break;
					case "bottom":
					    this.body[0].y+=1;
					    break;
			}


			//判断失败条件
			var max_x=map.offsetWidth/this.width;		
			var max_y=map.offsetHeight/this.height;
			var head_x=this.body[0].x;	
			var head_y=this.body[0].y;	
			if(head_x<0||head_x>=max_x||head_y<0||head_y>=max_y){
				clearInterval(timeID);
				alert("Gamne Over");
			}

			//判断进食条件
			if(food.x==head_x*this.width&&food.y==head_y*this.width){
				food.init(map);
				var last = this.body[this.body.length-1];
				var addone = {"x":last.x,"y":last.y,"color":last.color}
				this.body.push(addone);
		    }


			this.init(map);
		}.bind(that),200)	
	}


	//键盘控制小蛇移动
	Snack.prototype.bindKey=function(){
		document.addEventListener("keydown",function(e){
		    switch(e.keyCode){
		    	case 37:this.direction="left";break;
		    	case 38:this.direction="top";break;
		    	case 39:this.direction="right";break;
		    	case 40:this.direction="bottom";break;
		    }
	    }.bind(that),false)
	}


	function remove(){
		for(var i =0;i<elements.length;i++){
			elements[i].parentNode.removeChild(elements[i]);
		}
		elements.splice(0,elements.length);
	}

	window.Snack=Snack;

}());

游戏部分的封装代码

(function(){
	function Game(map){
		this.food=new Food(40,40,"green");
		this.snack=new Snack(40,40,2);
	    this.map=map;
	}
	Game.prototype.init=function(map){
		this.food.init(map);
		this.snack.init(map);
		this.snack.run(this.food,map);
		this.snack.bindKey();

	}
	window.Game=Game;
}())

tips

该程序需要理解封装的意义和作用，以及实现逻辑
注意this所指代的对象是谁
.bind()来修改this的指向

以上是关于JS实现贪吃蛇小游戏的主要内容，如果未能解决你的问题，请参考以下文章

JS贪吃蛇小游戏

HTML+CSS+JS实现 ❤️贪吃蛇游戏源码❤️

Web前端---HTML+CSS+JS实现的贪吃蛇游戏

用HTML做一个贪吃蛇?

js+jQuery实现贪吃蛇小游戏