原生JS貪食蛇網頁代碼

2024-09-05 12:21:08

字體：大中小

來源：轉載

供稿：網友

基于JavaScript編寫實現的原生貪食蛇代碼，有些Bug啊，蛇不能回頭，這怎么玩啊，呵呵，作者給禁掉了，有興趣的自己修改吧，總體來說，挺簡潔的游戲界面，蛇的控制做的挺不錯，要有回頭路就好了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh"><head><title>JS貪食蛇游戲 作者:hsb008 QQ：416143054</title><meta http-equiv="content-type" content="text/html;charset=utf-8"><style type="text/css">body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0}html{color:#000;overflow-y:scoll;overflow:-moz-scrollbars-vertical}#con{width:400px; height:300px; position:absolute; left:50%; top:50%; margin-top:-150px; margin-left:-200px; background:#EFEFEF;}.snake{width:10px;height:10px;position:absolute;background:green;left:0;top:0}</style><script language="javascript">	// 作者: hsb008		// QQ: 416143054	var keyLeft = 37;	var keyUp = 38;	var keyRight = 39;	var keyDown = 40;	var i = 0, j = 0;	var Snake = function(id, foodId){		var l,r,u,d;		var failStr = "GAME OVER";		var speed = 100;		var flag = {x:0, y:0};		this._id = id;		this._foodId = foodId;		this._step = 10;		this._foodCount = 0;		this._nowPos = "";		this.init = function(){			var div = document.createElement("div");			div.id = this._id;			div.className = "snake";			$("con").appendChild(div);			this.food();			this._step = $(this._id).offsetWidth;			}			this.body = function(x, y){			var body = document.createElement("div");			body.id = "b" + i;			body.className = "snake";			body.style.marginLeft = x + "px";			body.style.marginTop = y + "px";			i++;			$("con").appendChild(body);			}			this.food = function(){			this._foodCount++;			var food = document.createElement("div");			food.className = "snake";			food.id = this._foodId;			flag.x = (parseInt(Math.random() * $("con").offsetWidth / this._step)) * this._step;			flag.y = (parseInt(Math.random() * $("con").offsetHeight / this._step)) * this._step;				food.style.marginLeft = flag.x + "px";				food.style.marginTop = flag.y + "px";				$("con").appendChild(food);			}			this.go = function(dir){				var self = this;				switch(dir){					case "DOWN" :						if(this._nowPos != "UP"){							this.clear();							d = setTimeout(function(){self.moveDown();}, speed);							this._nowPos = dir;						}						break;					case "UP" :						if(this._nowPos != "DOWN"){							this.clear();							u = setTimeout(function(){self.moveUp();}, speed);							this._nowPos = dir;						}						break;					case "LEFT":						if(this._nowPos != "RIGHT"){							this.clear();							l = setTimeout(function(){self.moveLeft();}, speed);							this._nowPos = dir;						}						break;					case "RIGHT":						if(this._nowPos != "LEFT"){							this.clear();							r = setTimeout(function(){self.moveRight();}, speed);							this._nowPos = dir;						}						break;					default:						break;				}			}			this.moveRight = function(){				var self = this;				if($(this._id).offsetLeft + $(this._id).offsetWidth < $("con").offsetWidth){					this.eat();					$(this._id).style.marginLeft = $(this._id).offsetLeft + this._step + "px";					this.clear();					r = setTimeout(function(){self.moveRight();}, speed);				}else{					this.fail();				}			}			this.moveDown = function(){				var self = this;				if($(this._id).offsetTop + $(this._id).offsetHeight < $("con").offsetHeight){					this.eat();					$(this._id).style.marginTop = $(this._id).offsetTop + this._step + "px";					this.clear();					d = setTimeout(function(){self.moveDown();}, speed);				}else{					this.fail();				}			}			this.moveLeft = function(){				var self = this;				if($(this._id).offsetLeft > 0){					this.eat();					$(this._id).style.marginLeft = $(this._id).offsetLeft - this._step + "px";					this.clear();					l = setTimeout(function(){self.moveLeft();}, speed);				}else{					this.fail();				}			}			this.moveUp = function(){				var self = this;				if($(this._id).offsetTop > 0){					this.eat();					$(this._id).style.marginTop = $(this._id).offsetTop - this._step + "px";					this.clear();					u = setTimeout(function(){self.moveUp();}, speed);				}else{					this.fail();				}			}			this.eat = function(){				this.body($(this._id).offsetLeft, $(this._id).offsetTop);				for(var n = j; n < i - 1; ++n){					try{						if(n < i - this._foodCount - 1){							$("con").removeChild($("b" + n));							j = n;						}else if($(this._id).offsetLeft == $("b" + n ).offsetLeft && $(this._id).offsetTop == $("b" + n).offsetTop){							this.fail();						}					}catch(e){					}				}					$("score").innerHTML = (this._foodCount - 1) * 10;	//$("f").innerHTML = "l:" + $(this._id).offsetLeft + ", l:" + $(this._id).offsetLeft + ", l:" + flag.x + ", l:" + flag.y;		if($(this._id).offsetLeft == flag.x && $(this._id).offsetTop == flag.y){				$("con").removeChild($(this._foodId));				this.food();				}			}			this.fail = function(){				this.clear();				alert(failStr);				window.location.reload();			}			this.clear = function(){				clearTimeout(u);				clearTimeout(d);				clearTimeout(l);				clearTimeout(r);			}		}		var startGame = function(){			var s = new Snake("s1", "f1");			s.init();			s.go("RIGHT");						document.onkeydown = function(e){				var event = e || window.event;				if(keyLeft == event.keyCode){					s.go("LEFT");				}else if(keyRight == event.keyCode){					s.go("RIGHT");				}else if(keyUp == event.keyCode){					s.go("UP");				}else if(keyDown == event.keyCode){					s.go("DOWN");				}			}		}		function $(id){			return document.getElementById(id);		}	</script><head><body><div   class="mwago20"   id="f"></div>	<div   class="200gc2m"   id="con">		<div style = "position:absolute;top:-50px; left:110px; font-size:12px"><input type="button" value="開始游戲" onclick="startGame()" />       得分: <span id="score">0</SPAN>
</div>
</div>
<div   id="22m0gk0"   class=page1>
<p align="center" class="pageLink"></p>
</div>

<div   id="qmekacq"   class="fenxiang">

<div style="text-align:left">上一篇：<a href='/wen/2024/09-05/1557808.html'>JS網頁游戲平臺-推箱子、坦克大戰、猜數字、賽車等代碼</a></div>
<br>
<div style="text-align:left">下一篇：<a href='/wen/2024/09-05/1557810.html'>一個JS寫的射擊游戲框架示例</a></div>
<br>
<script src=/d/js/acmsd/gao21.js></script>

</div>

<div   id="ic2uu0a"   class="pinglun">

<script>
		  function CheckPl(obj)
		  {
		  if(obj.saytext.value=="")
		  {
		  alert("您沒什么話要說嗎？");
		  obj.saytext.focus();
		  return false;
		  }
		  return true;
		  }
		  </script><form action="/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)">
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="plpost">

學習交流