`
madbluesky
  • 浏览: 81786 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

花了半天多时间写了个简陋版的贪吃蛇

游戏FirefoxChromerichfacesjQuery 
阅读更多
最近比较长一段时间都在学习js,也不知道自己学的怎么样,借这个游戏练练手,第一次写,虽然非常简陋,但还算能玩,小小满足一下继续努力,hoho!
  开始和暂停按空格,方向键控制方向.
----
做了一些修改,画上了表格,蛇跟实物跟格子对齐,增加闯关与积分功能,关数越高速度越快,食物位置也越靠边和角..
每过一关需按空格继续.. 
<head>
<meta content-type="text/html;charset=utf-8"/>
<style>
#table {
	position:absolute;
	left:0;
	top:0;
	z-index:6;
	width :100%;
	height:100%;
	border:"1px solid black";
}
#table td {
	width:18;
	height:18;
	background-color:yellow;
	padding:1;
}
#info {
	position:relative;
	top:-18;
	left:591;
	width :100;
	height:150;
	background-color:blue;
}
</style>
<script >
Game = {
	BlockWidth : 20,
	GameState :"pause",
	Level : 1,
	Scoure : 0,
	Option :{
		init:function(){
			this.speed = 200-(Game.Level-1)*50;
			//this.foodPositionLevel = 1; 
			this.foodNumOfsucced = 10+((Game.Level-1)*5);
			this.eatDeficultLevel = 16-Game.Level;
		}
	},
	Map : {
		init : function(left,top,width,height,foodNum){
			this.food = [];
			this.foodNum = foodNum;
			this.left = left;
			this.top = top;
			this.width = width;
			this.height = height;
			this.instance = document.createElement("div");
			this.instance.setAttribute("id","map");
			this.instance.style.position = "absolute";
			this.instance.style.left = left;
			this.instance.style.top = top;
			//this.instance.style.offsetWidth = width;
			//this.instance.style.offsetHeight = height;
			this.instance.style.width = width;
			this.instance.style.height = height;
			this.instance.style.backgroundColor = "gray";
			document.getElementById("adiv").appendChild(this.instance);
			var table = document.createElement("table");
			table.setAttribute("id","table");
			var frag = document.createDocumentFragment();
			frag.appendChild(table);
			for(var i = 0;i<600;i+=Game.BlockWidth){
				var row = table.insertRow(-1);
				for(var j =0;j<600;j+=Game.BlockWidth){
					var cell = row.insertCell(-1);
					//cell.innerHTML = "";
				}
			}
			this.instance.appendChild(frag);
		},
		createOrRefreshFood: function(){
			var ran;
			var tempRan;
			var foodPosLeft,foodPosTop;
			for(var i=0;i<this.foodNum;i++){
				if(!this.food[i]){
					this.food[i] = Game.Food.create(Game.BlockWidth-2,Game.BlockWidth-2,"red");
					this.instance.appendChild(this.food[i]);
				}
				//写了个关数越高,食物越靠近边沿的算法
				ran = Math.random();
				if(parseInt(ran*100) % 2 == 0 ){
					tempRan = (1/(Game.Level*2))*ran;
				}else{
					tempRan = 1-(1/(Game.Level*2))*ran;
				}
				if(parseInt(ran*1000) % 3 == 0 ){
					foodPosLeft = tempRan*(this.width-20) + this.left;
					foodPosLeft = foodPosLeft - foodPosLeft%20
					foodPosTop = ran*(this.height-20) + this.top;
					foodPosTop = foodPosTop - foodPosTop%20;
				}else if(parseInt(ran*1000) % 3 == 1){
					foodPosLeft = ran*(this.width-20) + this.left;
					foodPosLeft = foodPosLeft - foodPosLeft%20;
					foodPosTop = tempRan*(this.height-20) + this.top;
					foodPosTop = foodPosTop - foodPosTop % 20;
				}else{
					foodPosLeft = tempRan*(this.width-20) + this.left;
					foodPosLeft = foodPosLeft - foodPosLeft%20;
					foodPosTop = tempRan*(this.height-20) + this.top;
					foodPosTop = foodPosTop - foodPosTop % 20;
				}
				this.food[i].style.left = foodPosLeft;
				this.food[i].style.top = foodPosTop;
			}
		}
	},
	Food : {
		create : function(width,height,color){
					this.width = width;
					this.height = height;
					this.color = color;
					this.instance = document.createElement("div");
					this.instance.style.position = "absolute";
					this.instance.style.zIndex = "9";
					this.instance.style.width = width;
					this.instance.style.height = height;
					this.instance.style.backgroundColor = color;
					return this.instance;
				}
	},
	Snack : {
		init: function(defaultFoodNum){
			this.foodNum = defaultFoodNum;
			this.foodNumOfEat = 0;
			this.instance = [];
			this.derect = -1; // -1 = left,1=right,-2=up,2=down
			this.instance[0] = document.createElement("div");
			this.instance[0].style.position = "absolute";
			this.instance[0].style.backgroundColor = "black";
			this.instance[0].style.zIndex = "9";
			this.instance[0].style.width = Game.BlockWidth;
			this.instance[0].style.height = Game.BlockWidth;
			this.instance[0].style.left = 200;
			this.instance[0].style.top = 200;
			this.tail = null;
			this.instance[0].style.border = "2px  solid   white";
			Game.Map.instance.appendChild(this.instance[0]);
			for(var i=1;i<this.foodNum;i++){
				this.instance[i] = this.instance[0].cloneNode(true);
				this.instance[i].style.width = Game.BlockWidth;
				this.instance[i].style.height = Game.BlockWidth;
				this.instance[i].style.left = (parseInt(this.instance[i-1].style.left)+ Game.BlockWidth);
				this.instance[i].style.top = 200;
				this.instance[i].style.backgroundColor = "black";
				this.instance[i].style.border = "2px  solid   white";
				//this.instance[i].style.borderColor = "red";
				Game.Map.instance.appendChild(this.instance[i]);
			}
		},
		move:function(derect){
			if(derect + this.derect!=0){
				this.derect = derect;
			}
			var head = {};
			head.left = parseInt(this.instance[0].style.left);
			head.top = parseInt(this.instance[0].style.top);
			switch (this.derect){
					case -1:{ 
						this.instance[0].style.left = parseInt(this.instance[0].style.left)-Game.BlockWidth;
						break;
						}
					case 1:{
						this.instance[0].style.left = parseInt(this.instance[0].style.left)+Game.BlockWidth;
						break;
					}
					case -2:{
						this.instance[0].style.top = parseInt(this.instance[0].style.top)-Game.BlockWidth;
						break;
					}
					case 2:{
						this.instance[0].style.top = parseInt(this.instance[0].style.top)+Game.BlockWidth;
						break;
					}
				}
			if(this.tail!=null){
					this.foodNum++;
			}
			if(this.foodNum>1){
				for(var i=this.foodNum-1;i>1;i--){
					this.instance[i].style.left = this.instance[i-1].style.left;
					this.instance[i].style.top = this.instance[i-1].style.top;
				}
				if(this.tail!=null){
					Game.Map.instance.appendChild(this.tail);
					this.tail = null;
				}
				this.instance[1].style.left = head.left;
				this.instance[1].style.top = head.top;
			}
			if(this.isFull()){
				alert("恭喜您,顺利闯过第"+Game.Level+"关");
				clearInterval(Game.timing);
				if(Game.Level>5){
					alert("you win!");
				}else{
					Game.Level++;
					$("act").innerHTML = Game.Level;
					Game.Option.init();
				}
			}else if(this.isDead()){
				clearInterval(Game.timing);
				window.onkeydown = null;
				alert("you fail");
			}else{
				this.eat();
			}
		},
		eat : function(){
			var map = Game.Map;
			var head = this.instance[0];
			for(var i=0;i<map.food.length;i++){
				if(Math.abs(parseInt(this.instance[0].style.left)-parseInt(map.food[i].style.left))<=Game.Option.eatDeficultLevel 
					&& Math.abs(parseInt(this.instance[0].style.top)-parseInt(map.food[i].style.top))<=Game.Option.eatDeficultLevel) {
					//alert("eat!");
					this.tail = this.instance[this.instance.length] = this.instance[0].cloneNode(true);	
					var foodEated = map.food[i];
					for(var j=i+1;j<map.food.length;j++){
						map.food[j-1] = map.food[j];
					}
					map.food.length--;
					foodEated.parentNode.removeChild(foodEated);
					this.foodNumOfEat++;
					//alert(Game.Scoure);
					Game.Scoure = Game.Scoure + (100*Game.Level);
					//alert($("scoure"));
					$("scoure").innerHTML = ""+Game.Scoure;
					break;
				}
			}
			if(map.food.length<=0){
				map.createOrRefreshFood(map.foodNum);
			}
		},
		isFull : function(){
			//alert(this.foodNumOfEat);
			//alert(Game.foodNumOfsucced);
			return this.foodNumOfEat >= Game.Option.foodNumOfsucced;
		},
		isDead : function(){
			var map = Game.Map;
			if(
				parseInt(this.instance[0].style.left) < map.left 
				|| parseInt(this.instance[0].style.left) >= (map.left+map.width)
				|| parseInt(this.instance[0].style.top) < map.top 
				|| parseInt(this.instance[0].style.top) >= (map.top + map.height) ) {
				return true;
				}
			for(var i=1;i<this.foodNum;i++){
				if(this.instance[0].style.left == this.instance[i].style.left 
					&& this.instance[0].style.top == this.instance[i].style.top){
						return true;	
					}
			}
		}
	},
	GameStart :function(level){
		this.Map.init(0,0,600,600,1);
		this.Map.createOrRefreshFood();
		this.Snack.init(6);
		this.Option.init(level);
		var gameItsSelf = this;
		//if(!window.onkeydown){
		//	window.onkeydown = document.body.onkeydown;
		//}
		//alert(document.body.onkeydown);
		window.onkeydown = document.body.onkeydown = function(event){
			event = window.event||event;
			var keyCode = event.keyCode;
			//alert(keyCode);
			if(keyCode==32){
				//alert("暂停");
				if(Game.GameState=="pause"){
					Game.GameState = "alive";
					window.clearInterval(Game.timing);
					Game.timing = window.setInterval(bindParamsToFun(Game.Snack,Game.Snack.move,Game.Snack.derect),Game.Option.speed);
				}else{
					Game.GameState = "pause";
					window.clearInterval(Game.timing);
				}
			}else if(Game.GameState =="alive"){
				var tempDirect;
				switch (keyCode) {
					case 37:{
						//$("debug").innerHTML +="X";
						tempDirect = -1;
						if(tempDirect!=Game.Snack.derect){
							window.clearInterval(Game.timing);
							Game.timing = window.setInterval(bindParamsToFun(Game.Snack,Game.Snack.move,tempDirect),Game.Option.speed);
						}
						break;
						}
					case 38:{
						//$("debug").innerHTML +="y";
						tempDirect = -2;
						if(tempDirect!=Game.Snack.derect){
							window.clearInterval(Game.timing);
							Game.timing = window.setInterval(bindParamsToFun(Game.Snack,Game.Snack.move,tempDirect),Game.Option.speed);
						}
						break;
						}
					case 39:{
						tempDirect = 1;
						if(tempDirect!=Game.Snack.derect){
							window.clearInterval(Game.timing);	
							Game.timing = window.setInterval(bindParamsToFun(Game.Snack,Game.Snack.move,tempDirect),Game.Option.speed);
						}
						break;
						}
					case 40: {
						tempDirect = 2;
						if(tempDirect!=Game.Snack.derect){
							window.clearInterval(Game.timing);
							Game.timing = window.setInterval(bindParamsToFun(Game.Snack,Game.Snack.move,tempDirect),Game.Option.speed);
						}
						break;
						}
					default :
						break;
				}
			}
		}
	}
}
function bindParamsToFun(obj,fun){ 
	var args = Array.prototype.slice.call(arguments).slice(2); 
	return function(){ 
	fun.apply(obj,args); 
	}; 
}
function $(id){
	return document.getElementById(id);
}
window.onload = function(){
	Game.GameStart();
	}
//window.onload = function(){
//	alert(document.getElementById("theBody"));
//}
</script>
</head>
<body id="theBody">
	<div id="adiv" width="1000" height="1000">
		<div id="info">
			<table>
				<tr>
					<td>关数 :</td>
					<td><span id="act">0</span></td>
				</tr>
				<tr>
					<td>分数 :</td>
					<td><span id="scoure">0</span></td>
				</tr>
			</table>
		</div>
	</div>
</body>
分享到：
| 花了半天多时间写了个简陋版的贪吃蛇,哈哈 ...
评论
31 楼 yose 2009-12-21  
持续关注~~~
希望有优良版本出现
30 楼 yose 2009-12-21  
有问题呀！
楼主。

蛇会跑到界外去呀
29 楼 luckaway 2009-12-02  
写的不错--OO
28 楼 jssanshengshi 2009-12-02  
没写过多少js，发现很强大，值得学习
27 楼 hit.java 2009-12-01  
牛逼啊真的
26 楼 jimphei 2009-11-27  
再一次汗颜了，楼主很强大
25 楼 madbluesky 2009-11-27  
鹤惊昆仑 写道
this.instance[0].style.position = "absolute"; 
this.instance[0].style.backgroundColor = "black"; 
this.instance[0].style.zIndex = "9"; 
this.instance[0].style.width = Game.BlockWidth; 
this.instance[0].style.height = Game.BlockWidth; 
this.instance[0].style.left = 200; 
this.instance[0].style.top = 200;

上面的这种写法效率很不好，可以使用style.cssText（firefox等也支持这一事实标准）一次赋值或者指定class，样式分离。或者可以考虑使用with(this.instance[0].style){...}这种写法，代码也会简省不少。


说的有道理,我对css不熟悉,所以只是一些能用的写法,以后得加强css的学习.
对于with没实际使用过,从看到过的对于with的讨论来说,我对with持非常谨慎的态度,如果只是代码量的问题,为宁愿多写一点代码
24 楼 poster214 2009-11-27  
js原來都能做遊戲了，長見識，搞了一年javae開發完全沒接觸過js（平時公司讓用richfaces），看來有必要從基礎學期了
23 楼 鹤惊昆仑 2009-11-27  
this.instance[0].style.position = "absolute"; 
this.instance[0].style.backgroundColor = "black"; 
this.instance[0].style.zIndex = "9"; 
this.instance[0].style.width = Game.BlockWidth; 
this.instance[0].style.height = Game.BlockWidth; 
this.instance[0].style.left = 200; 
this.instance[0].style.top = 200;

上面的这种写法效率很不好，可以使用style.cssText（firefox等也支持这一事实标准）一次赋值或者指定class，样式分离。或者可以考虑使用with(this.instance[0].style){...}这种写法，代码也会简省不少。
22 楼 darklipeng 2009-11-27  
IE8测试可以玩，lz加油！
21 楼 01404421 2009-11-27  
jayliud 写道
Sucraygen 写道
楼主很厉害，学习了，忽然发现自己搞WEB 2年了，js还是停留在初级阶段。。。

同感我也是07年就开始接触JS现在要我做个东东还是搞不出来，杯具呀。

根据代码可以看出LZ编程的功底还是不错的，我接触JS也两年多了，可是仍停留在最基础的应用上面...
20 楼 jayliud 2009-11-27  
Sucraygen 写道
楼主很厉害，学习了，忽然发现自己搞WEB 2年了，js还是停留在初级阶段。。。

同感我也是07年就开始接触JS现在要我做个东东还是搞不出来，杯具呀。
19 楼 tuoxie007 2009-11-27  
good!
18 楼 madbluesky 2009-11-26  
Firefox/3.0.2 跟ie6应该是可以访问的，其他的没测试..
添加一些游戏设置其实都比较好加的,什么时候有时间再完善一下吧,这个其实写的非常粗糙只能是勉强能运行而已
17 楼 it577net 2009-11-26  
ff3.5 in u9.10 can,others not
16 楼 prowl 2009-11-26  
我电脑里的所有浏览器都不能玩。。

ie8 ff3.5 chrome3 opera10.1
15 楼 Sucraygen 2009-11-26  
楼主很厉害，学习了，忽然发现自己搞WEB 2年了，js还是停留在初级阶段。。。
14 楼 lucky16 2009-11-26  
现在看见了JS的坦克，泡泡堂，有创意，但是只能说是练练手，真用它实现，我觉得都不是很完美啊，要是你这个贪吃蛇再在游戏设置上完善一下就perfect了，呵呵，我前段时间就简单的学习了一下jQuery，也没有花多大心思在上面，有解决不了的问题还要靠大家帮一下~呵呵
13 楼 kuchaguangjie 2009-11-26  
不错，哈哈
12 楼 phpxiaoxin 2009-11-26  
挺不错的，我研究一下也写一个再做上点效果
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics