基于js實現網頁版貪吃蛇游戲代碼



73 288 97



特效描述:基于js實現 網頁版 貪吃蛇游戲,基于js實現網頁版貪吃蛇游戲代碼

代碼結構

1. HTML代碼

		<div id="container">
			<div id="ground">
			</div>
			<div id="control">
				<span id="banner">JavaScript sneaker by 王潔</span>	
				<ul id="speed">
					<li >一級</li>
					<li >二級</li>
					<li >三級</li>
					<li id="sub-v">減速</li>
					<li id="add-v">加速</li>
				</ul>
				<span></span>
				<div id="buttons">
					<button id="start">開始</buutton>
					<button id="purse">暫停</button>			
				</div>
			</div>
			<div id="intro">
				<h4>游戲說明:</h4>
				<p>上下左右鍵控制蛇的轉向,當吃的食物達到一定數量計數值加倍,當吃到類蛇身的食物時蛇身剪短但計數仍增加
				</p>
			</div>
		</div>
		<script type="text/javascript">
		var oGround = document.getElementById('ground');
		var oControl = document.getElementById('control');
		var aSpan = oControl.getElementsByTagName('span');
		var oSubDiv = createDiv();
		oSubDiv.style.display = "none";
		oGround.appendChild(oSubDiv);
		//創建蛇
		var aSnaker = [];
			for(var i=3;i>0; i--){
				var oDiv = document.createElement('div');
				oDiv.style.left = i*20+'px';
				oDiv.style.top = '60px';
				oDiv.className = "block snake-block";
				if(i==3)
				oDiv.style.background = "url(img/head.png)";
				else if(i==2)
				oDiv.style.background = "url(img/body.png)";
				else 
				oDiv.style.background = "url(img/tail.png)";
				//oDiv.innerHTML = 4-i;
				aSnaker.push(oDiv);
				oGround.appendChild(oDiv);
			}
			var oFood;
			function divPos(){
				var iLeft,iTop;
				var flag = false;
				do{
					iLeft = parseInt(Math.random()*50)*20+'px';
					iTop = parseInt(Math.random()*25)*20+'px';
					for(var i=0;i<aSnaker.length;i++){
						if(iLeft==aSnaker[i].style.left && iTop==aSnaker[i].style.top){
							flag = true;
							break;
						}
					}
				}while(flag)
				return {iLeft:iLeft,iTop:iTop};
			}
			function createFood(){//創建食物
				oFood = document.createElement('div');
				oFood.style.left = divPos().iLeft;
				oFood.style.top = divPos().iTop;
				oFood.className = 'block food';
				oGround.appendChild(oFood);
			}
			createFood();
			function createDiv(){
				var oDiv = document.createElement("div");
				oDiv.className = "block";
				oDiv.style.background = "url(img/body.png)";
				oDiv.style.position = "absolute";
				return oDiv;
			}
			function addDiv(tailTop,tailLeft){
				var oDiv = createDiv();
				oDiv.style.top = tailTop +"px";
				oDiv.style.left = tailLeft+"px";
				oGround.appendChild(oDiv);
				aSnaker.splice(aSnaker.length-1,0,oDiv);
			}
			//食物添加到尾巴的前面后計算尾巴現在應有的坐標
			function priTail(headLeft,headTop,tailLeft,tailTop,moveDir){
			//	console.log(tailLeft+','+tailTop+','+headLeft+','+headTop);
					if(tailLeft == headLeft||moveDir=="right" || moveDir=="left"){
						if(tailTop>headTop)
							tailTop -= 20;
						else if(tailTop<headTop)
							tailTop += 20;
				//	console.log(tailLeft+','+tailTop+','+headLeft+','+headTop);
					}else if(tailTop == headTop||moveDir=="up" || moveDir=="down"){
						if(tailLeft >headLeft)
							tailLeft -= 20;
						else if(tailLeft>headLeft)
							tailLeft += 20;
				//	console.log(tailLeft+','+tailTop+','+headLeft+','+headTop);
					}		
					return {tailTop: tailTop,
						tailLeft:tailLeft};
			}
			//食物達到一定數量吃到SubDiv就減去一段身體,但計數值仍增長
			function subDiv(){
			}
			var sum = 0;//對吃的食物數計數
			var moveDir = 'right';
			function move(){
				//蛇身整體移動
				for(var i=aSnaker.length-1;i>0;i--){
					aSnaker[i].style.left = aSnaker[i-1].style.left;
					aSnaker[i].style.top = aSnaker[i-1].style.top;
					//console.log(i+','+aSnaker[i].style.left+','+aSnaker[i].style.top);
				}
				var snakeHead = aSnaker[0];
				var headLeft = parseInt(snakeHead.style.left);
				var headTop = parseInt(snakeHead.style.top);
				switch(moveDir){
					case "left":
						headLeft -= 20;
						break;
					case "right":
						headLeft += 20;
						break;
					case "up":
						headTop -= 20;
						break;
					case "down":
						headTop += 20;
						break;
				}
				snakeHead.style.left = headLeft+'px';
				snakeHead.style.top = headTop+'px';
				aSnaker[0].id = "h-"+moveDir;
				//與蛇身相撞結束游戲
				for(var i=1;i<aSnaker.length;i++){
						if(snakeHead.style.left==aSnaker[i].style.left && snakeHead.style.top==aSnaker[i].style.top){
							reStart();
						}
					}
				//撞墻游戲結束
				if(snakeHead.style.left < "0px"|| snakeHead.style.top < "0px" || snakeHead.style.top== "500px" || snakeHead.style.left == "1000px"){
					reStart();
				}
				var snakeTail = aSnaker[aSnaker.length-1];//獲取當前的尾巴
				//尾巴的轉向,根據前一個的位置設置方向
				if(snakeTail.style.top<aSnaker[aSnaker.length-2].style.top)
					snakeTail.id = "t-down";
				else if(snakeTail.style.top>aSnaker[aSnaker.length-2].style.top)
					snakeTail.id = "t-up";
				if(snakeTail.style.left>aSnaker[aSnaker.length-2].style.left)
					snakeTail.id = "t-left";
				else if (snakeTail.style.left<aSnaker[aSnaker.length-2].style.left)
					snakeTail.id = "";
				var tailLeft = parseInt(snakeTail.style.left);
				var tailTop = parseInt(snakeTail.style.top);
				//食物達到一定數量吃到SubDiv就減去一段身體,但計數值仍增長				
				var random = parseInt(Math.random()*8); 
				if(random==6 && sum>50 && oSubDiv.style.display=="none"){
					oSubDiv.style.display = "block";
					oSubDiv.style.left = divPos().iLeft;
					oSubDiv.style.top = divPos().iTop;
					//if(oSubDiv){
					if(snakeHead.style.left == oSubDiv.style.left && snakeHead.style.top == oSubDiv.style.top){
						console.log(aSnaker.length);
						snakeTail.style.left = aSnaker[aSnaker.length-2].style.left;
						snakeTail.style.top = aSnaker[aSnaker.length-2].style.top;
						aSnaker.splice(aSnaker.length-3,aSnaker.length-2);
						oSubDiv.style.display = "none";
						console.log(aSnaker.length);
					}
					var t=setTimeout('oSubDiv.style.display="none"',5000);
					//sum++;
				}
				//吃到的食物添加到尾巴的前面,分別改變尾巴和食物的定位坐標值
				if(snakeHead.style.left == oFood.style.left && snakeHead.style.top == oFood.style.top){
					tailLeft = snakeTail.style.left;
					tailTop = snakeTail.style.top;
					oFood.style.background = "url(img/body.png)";
					oFood.style.top = tailTop +"px";
					oFood.style.left = tailLeft+"px";
					sum++;
					aSnaker.splice(aSnaker.length-1,0,oFood);
					tailTop = priTail(headLeft,headTop,tailLeft,tailTop,moveDir).tailTop;	
					tailLeft = priTail(headLeft,headTop,tailLeft,tailTop,moveDir).tailLeft;
					if(sum>10&&sum<20){//食物達到一定數量有獎勵
						addDiv(tailTop,tailLeft);
						sum++;	
					}
					tailTop = priTail(headLeft,headTop,tailLeft,tailTop,moveDir).tailTop;	
					tailLeft = priTail(headLeft,headTop,tailLeft,tailTop,moveDir).tailLeft;
					if(sum>20&&sum<40){//繼續獎勵,不過吃的太多也會死的更快
						addDiv(tailTop,tailLeft);
						sum++;
					}
					aSpan[1].innerHTML = "已吃食物"+sum+"個";
					tailTop = priTail(headLeft,headTop,tailLeft,tailTop,moveDir).tailTop;	
					tailLeft = priTail(headLeft,headTop,tailLeft,tailTop,moveDir).tailLeft;
					snakeTail.style.left = tailLeft+'px';
					snakeTail.style.top = tailTop+'px';
					createFood();
				}
			}
			var timer;
			var timerFlag = true;
			var oStart = document.getElementById('start');
			oStart.onclick = function(){
				if((timerFlag&&oStart.innerHTML != "結束")||oPurse.innerHTML=="恢復"){
					oStart.innerHTML = "結束";
					openTimer();
					timerFlag = false;
				}
				else if(this.innerHTML =="結束"){
					clearInterval(timer);
					//reStart();
				}
			};
			var oPurse = document.getElementById('purse');
			oPurse.onclick = function(){
				if(!timerFlag&&this.innerHTML!="恢復"&&oStart.innerHTML=="結束"){ 
					this.innerHTML = "恢復";
					clearInterval(timer);
					timerFlag =!timerFlag;
				}else{
					oStart.onclick();
					this.innerHTML = "暫停";
					timerFlag = !timerFlag;
				}
			};
			var perTime = 300;
			function openTimer(){
				timer = setInterval(function(){//定時器
						move();
						//alert(oStart.innerHTML);
					}, perTime);
			}
			//設置時間間隔,以改變速度
			var oSpeed = document.getElementById('speed');
			var aLi = oSpeed.getElementsByTagName('li');
			for(var i=0;i<aLi.length;i++){//通過改變perTimer 改變時間
				(function(index){
				if(index<3){
					aLi[index].onclick = function(){
					clearInterval(timer);
						switch (index){
							case 0:
								perTime = 400;
								break;
							case 1:
								perTime = 200;
								break;
							case 2:
								perTime = 60;
								break;
						}
						if(oStart.innerHTML=="結束")
						openTimer();
					};
				}
				else if(index==3){
					aLi[index].onclick = function(){
						clearInterval(timer);
						if(perTime>=50){
							perTime += 50;
						}
						if(oStart.innerHTML=="結束")
						openTimer();
					};
				}
				else if(index == 4){
					aLi[index].onclick = function(){
						clearInterval(timer);
						if (perTime<1000) {
							perTime -=50;
						}
						if(oStart.innerHTML=="結束")
						openTimer();
					};
				}
				}
				)(i);
			}
			function reStart(){//重新開始
					clearInterval(timer);
					var msg = confirm("此次游戲失敗,要重新開始嗎?");
							//alert("Game Over");
							if(msg)
							window.location.reload();
				}
			document.onkeydown = function(e){//設置轉向
				e = e||window.event;
				var keyCode = e.which || e.keyCode;
				switch (keyCode){
					case 37:
						if(moveDir!="right"){
							moveDir = "left";
						}
					break;
					case 38:
						if(moveDir!="down"){
							moveDir = "up";
						}
					break;
					case 39:
						if(moveDir!="left"){
							moveDir = "right";
						}
					break;
					case 40:
						if(moveDir!="up"){
							moveDir = "down";
						}
					break;
				}
			}
		</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 小游戲 H5游戲 游戲源碼 手機游戲 微信游戲 網頁游戲 貪吃蛇 貪吃蛇游戲 H5貪吃蛇游戲 貪吃蛇游戲源碼
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子