文章详情

JS实现贪吃蛇小游戏

网络   03-03
财经 阅读 210286

贪吃蛇,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实现贪吃蛇小游戏

原文地址:https://www.cnblogs.com/codeumind/p/12757297.html

查看全文
其他推荐
《炉石传奇》乱象中如何下棋
如何利用SEO技术树立企业品牌形象
seo优化操作不要犯这些错误
谷歌的量子计算机开源项目OpenFermion
英雄联盟S11长矛
其他 软件 WEB开发 新闻动态 运营商 市场营销 有段子 苹果公司 投资 服务器 软件分享 股票 创业 新能源 非银金融行业 风投 金融 家常便饭 程序人生 基金 能源 数据库 债券 银行 沪指 保险 公益 盘面分析 新三板 贵金属 石油 期货 购房 P2P理财 社会保险 外汇 黄金 国内宏观 宏观经济 汇率
相关笔记
美指中国封锁其网站 威胁或交世贸组织解决
django-URL反向解析Reverse(九)
“分拆上市”盛宴开启!诱惑太大,高达数十倍的回报?战投纷纷“抢位”,专家:谨防灰色“套利”!
django-URL默认参数传递
针对Apache服务的优化与配置(一)——日志文件优化
手机 软件 苹果 iphone css 移动互联网 百度 php jquery https 通信 互联网电商 谷歌 阿里 编程语言 ajax core 接口 javascript nginx mysql 变量 诺基亚 程序员 data curl table 数组 select 社会万象 date 动态 base64 支付宝 大学 科学 虚拟机 list 新浪 line-height 滚动条 array column explorer 项目管理 coding file_get_contents 余额宝 租房 投连险