`
madbluesky
  • 浏览: 83046 次
  • 性别: 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>
分享到：
| 花了半天多时间写了个简陋版的贪吃蛇,哈哈 ...
评论
11 楼 seven_cuit 2009-11-26  
IE可以,Chrome下游戏无法启动
10 楼 keynescao 2009-11-25  
跑的速度有点快，不过还行。
9 楼 androidnew 2009-11-25  
现在都流行用js写游戏。。 赞一个
8 楼 cheney_love 2009-11-25  
楼主很强大
7 楼 madbluesky 2009-11-25  
是有点没对齐..而且连地图的表格都没生成.因为一开始写不写的完心里都没底,报着试试看的态度,一点点写的,写到后面算是写出来了,但是累的也不想动了,就没管了.
6 楼 jayliud 2009-11-25  
我想问楼主学习JS多久了？半天就可以写出来了，比较起来真让我汗颜呀。
5 楼 fandayrockworld 2009-11-25  
Darrick 写道
  楼上的 和 楼主.
  你们写代码. 都不写注释么?
 

哈哈，当时写的急，没整理思路，想到哪写到哪，就没写注释。
4 楼 Darrick 2009-11-25  
  楼上的 和 楼主.
  你们写代码. 都不写注释么?
 
3 楼 fandayrockworld 2009-11-25  
是啊，有点对不齐，我也做了一个，在我第一篇博文中。楼主看看吧，提点意见。
2 楼 dieslrae 2009-11-25  
不错，不过蛇和豆是位置还要再调一下，对得不是很齐
1 楼 dayone 2009-11-24  
挺不错，跑的挺快的~~~
发表评论

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

相关推荐

    Win32简陋版贪吃蛇

    【Win32简陋版贪吃蛇】是一个基于Windows 32位API开发的简易版经典游戏——贪吃蛇。这款游戏通常用C++语言编写，利用Windows编程接口来实现图形界面和用户交互。在Win32 API中，开发者可以调用一系列函数来创建窗口...

    一个简陋的贪吃蛇

    贪吃蛇代码，没写注释，但是程序的函数名可以很容易知道是什么意思

    WPF实现简陋版贪吃蛇

    在本文中，我们将深入探讨如何使用Windows Presentation Foundation (WPF) 技术，结合C#编程语言，实现一个简陋版的贪吃蛇游戏。WPF是.NET Framework的一部分，为构建具有丰富用户界面的桌面应用程序提供了强大的...

    自己写的一个贪吃蛇小程序

    自己用java写的一个贪吃蛇小程序，100来行代码，简单易懂~~~学习java的可以用来做个很好的参考~~~

    C#写的贪吃蛇游戏贪吃蛇游戏！

    在本项目中，我们讨论的是一个使用C#编程语言实现的经典小游戏——贪吃蛇。贪吃蛇游戏是一款风靡全球的简单却极具挑战性的游戏，它最初出现在早期的电子设备上，现在则被广泛移植到各种平台，包括PC、移动设备和网页...

    网络版贪吃蛇（java）

    总的来说，【网络版贪吃蛇（Java）】是一个很好的学习和实践Java网络编程的实例，对于提升Java开发者在网络编程领域的技能有极大的帮助。通过深入研究这个项目，你可以了解到如何构建一个实时的、多人参与的网络游戏...

    一个java版的贪吃蛇游戏.zip

    一个java版的贪吃蛇游戏.zip一个java版的贪吃蛇游戏.zip一个java版的贪吃蛇游戏.zip 一个java版的贪吃蛇游戏.zip一个java版的贪吃蛇游戏.zip一个java版的贪吃蛇游戏.zip 一个java版的贪吃蛇游戏.zip一个java版的...

    jQuery贪吃蛇网页版游戏代码

    jQuery贪吃蛇网页版游戏代码,贪吃蛇网页版游戏代码基于jquery.1.11.3.min.js制作，贪吃蛇游戏是一款经典的益智游戏，有PC和手机等多平台版本，既简单又耐玩.Query网页版贪吃蛇游戏，带得分排行榜，交互的贪吃蛇游戏...

    双人版贪吃蛇 mfc

    通过这个双人版贪吃蛇游戏，我们可以学习到MFC如何创建窗口、处理用户输入、绘制图形、实现多线程（以便两位玩家同时操作）以及分数系统的设计等C++编程技巧。同时，游戏的逻辑和算法也是软件工程中常见的问题解决...

    QT版贪吃蛇（升级版）

    QT版贪吃蛇是一款基于Qt框架开发的经典游戏，它的核心在于使用C++语言与Qt库进行编程，将贪吃蛇游戏的功能实现并封装为一个独立的类。在这款升级版中，开发者已经优化了代码结构，使得游戏的生成、设置和运行更加...

    Java版贪吃蛇游戏.zip

    Java版贪吃蛇游戏.zipJava版贪吃蛇游戏.zipJava版贪吃蛇游戏.zip Java版贪吃蛇游戏.zipJava版贪吃蛇游戏.zipJava版贪吃蛇游戏.zip Java版贪吃蛇游戏.zipJava版贪吃蛇游戏.zipJava版贪吃蛇游戏.zip Java版贪吃蛇游戏....

    贪吃蛇简易版代码C++.txt

    贪吃蛇简易版代码C++贪吃蛇简易版代码C++贪吃蛇简易版代码C++贪吃蛇简易版代码C++贪吃蛇简易版代码C++贪吃蛇简易版代码C++贪吃蛇简易版代码C++贪吃蛇简易版代码C++贪吃蛇简易版代码C++贪吃蛇简易版代码C++贪吃蛇简易...

    Q版贪吃蛇源码

    《Q版贪吃蛇源码解析与学习指南》 贪吃蛇是一款经典的电子游戏，以其简单易上手、趣味性强的特点深受玩家喜爱。本篇将深入解析基于Cocos2d-x框架开发的Q版贪吃蛇源码，帮助读者了解其背后的编程原理和技术实现。 ...

    C语言多功能高级版贪吃蛇

    【标题】"C语言多功能高级版贪吃蛇"是一个基于C语言编程的项目，它将经典游戏贪吃蛇提升到了一个更高的层次，可能包含了更复杂的功能和优化的算法。在C语言的基础上，开发者可能利用了指针、结构体、循环、条件判断...

    个人编写的贪吃蛇

    8. **代码组织**：一个良好的项目结构是关键，代码可能会被组织成多个类，如Snake类、Food类和Game类，每个类负责不同的功能，遵循面向对象编程的原则。 通过分析这个个人编写的贪吃蛇代码，我们可以学习到如何用...

    自己写的一个贪吃蛇游戏分享

    很久以前自己用c++在vs2008下实现的一个贪吃蛇游戏， 框架用的是win32， 绘图用的是简单的windows GDI， 用到了双画面缓冲， 很适合学游戏开发的初学者， 代码风格一般般， 如果有什么地方写得不好的话， 欢迎大家...

    用C#写的贪吃蛇

    【标题】"用C#写的贪吃蛇"是一款基于C#编程...总的来说，"用C#写的贪吃蛇"项目是一个结合了C#编程、游戏逻辑、多媒体处理和用户交互的综合实践案例，对于学习C#和游戏开发的初学者来说，这是一个很好的学习和参考资源。

    vb写的贪吃蛇，附带源码

    vb写的贪吃蛇vb写的贪吃蛇vb写的贪吃蛇vb写的贪吃蛇vb写的贪吃蛇vb写的贪吃蛇vb写的贪吃蛇vb写的贪吃蛇vb写的贪吃蛇vb写的贪吃蛇vb写的贪吃蛇vb写的贪吃蛇vb写的贪吃蛇vb写的贪吃蛇vb写的贪吃蛇vb写的贪吃蛇vb写的...

    用python写一个贪吃蛇小游戏

    用python写一个贪吃蛇小游戏，只需要短短十几行代码，就可以写出一个贪吃蛇小游戏

    API写的贪吃蛇，VC++6.0

    标题中的“API写的贪吃蛇，VC++6.0”指的是使用Windows API（Application Programming Interface）来编写的一个经典游戏——贪吃蛇，该程序是在Microsoft Visual C++ 6.0集成开发环境中编译和运行的。Windows API是...

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