JavaScript sneaker 貪吃蛇 html5 by 王潔

2024-09-05 12:21:10

字體：大中小

來源：轉載

供稿：網友

JavaScript sneaker by 王潔，HTML5結合JS共同來實現的，有5個級別的游戲難度可選擇。游戲控制說明：上、下、左、右鍵控制蛇的轉向，當吃的食物達到一定數量計數值加倍，當吃到類蛇身的食物時蛇身剪短但計數仍增加。

<!doctype html><html lang="en"><head><meta charset="utf-8"><title>js網頁版的貪吃蛇游戲</title><style type="text/css">#container{	width: 1000px;	margin: 0 auto;}#ground{	position: relative;	width: 1000px;	height: 500px;	background: #e6df6d;}#control{	width: 998px;	height: 60px;	line-height: 60px;	background: #cce290;}#banner{	float: left;	margin-left: 10px;	font: bold 18px;}#buttons{	float: right;	margin-right: 10px;}ul#speed{	float: left;	margin: 10px auto;	height: 40px;	line-height: 40px;	list-style: none;	text-align: center;}#speed li{	cursor: pointer;	background: #f6ff9f;	float: left;	width: 60px;	height: 100%;	margin-right: 12px;	border-radius: 30px;}#intro{	height: 50px;	width: 100%;	position: relative;	background:#cce290 url(/jscss/demoimg/201403//key.jpg) no-repeat;}#intro h4 {	float: left;	text-indent: 220px;}#intro p{	width: 600px;	position: absolute;	top: -10px;	left: 320px;	line-height: 20px;}.food{	position: absolute;	background: #8b0 url(/jscss/demoimg/201403//body.gif);}.block{	float: left;	width: 20px;	height: 20px;	overflow: hidden;}.snake-block{	position: absolute;	background: red;}#h-down,#t-down{	transform: rotate(90deg);	-ms-transform: rotate(90deg);/* IE 9 */	-webkit-transform: rotate(90deg);/* Safari and Chrome */	-o-transform: rotate(90deg);/* Opera */	-moz-transform: rotate(90deg);/* Firefox */}#h-up,#t-up{	transform: rotate(-90deg);	-ms-transform: rotate(-90deg);/* IE 9 */	-webkit-transform: rotate(-90deg);/* Safari and Chrome */	-o-transform: rotate(-90deg);/* Opera */	-moz-transform: rotate(- 90deg);/* Firefox */}#h-left,#t-left{	transform: rotate(180deg);	-ms-transform: rotate(180deg);/* IE 9 */	-webkit-transform: rotate(180deg);/* Safari and Chrome */	-o-transform: rotate(180deg);/* Opera */	-moz-transform: rotate(180deg);/* Firefox */}</style></head><body><div   class="70qarhlowxag"   id="container">	<div   class="70qarhlowxag"   id="ground">	</div>	<div   class="70qarhlowxag"   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   class="70qarhlowxag"   id="buttons">			<button id="start">開始</buutton>			<button id="purse">暫停</button>		</div>	</div>	<div   class="70qarhlowxag"   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(/jscss/demoimg/201403//head.png)";		else if(i==2)		oDiv.style.background = "url(/jscss/demoimg/201403//body.png)";		else		oDiv.style.background = "url(/jscss/demoimg/201403//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;iheadTop)					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;iaSnaker[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.left50 && 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(/jscss/demoimg/201403//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=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></body></html>

上一篇：網頁24點游戲

下一篇：閑來無事 HTML5雷電 -打飛機游戲