前言：
现在姐妹们对“js贪吃蛇”大致比较注重，朋友们都想要知道一些“js贪吃蛇”的相关知识。那么小编也在网上网罗了一些对于“js贪吃蛇””的相关文章，希望咱们能喜欢，大家一起来了解一下吧！今天带来一个纯javascript版贪吃蛇
先看效果图：
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";><html xmlns="; ><head><title>wujinjian </title><script type="text/javascript">var snake_arr=new Array();var snakeBodyW_H=20; //蛇身大小var direction="right";var sd; //速度var footDivObj;var mapDivObj;var footnum=0;var footMaxnum=10; //吃到10颗食物过关var timer;function resetStart(_sd,mode){ clearTimeout(timer); if(mode=="first") document.getElementById("tx_id").value="第 1 关"; for(var i=0;i <snake_arr.length;i++) { document.body.removeChild(snake_arr[i]); } snake_arr.splice(0,snake_arr.length); //删除所有的元素 footnum=0; direction="right"; isStop=false; sd=_sd; startGame();}function addSnakeBody(){ snake_arr[snake_arr.length]=createSnakeBody();}function createSnakeBody(){ var snakeDiv=document.createElement("div"); snakeDiv.style.position="absolute"; snakeDiv.style.left="120px"; snakeDiv.style.top="100px"; snakeDiv.style.width=snakeBodyW_H+"px"; snakeDiv.style.height=snakeBodyW_H+"px"; document.body.appendChild(snakeDiv); return snakeDiv;}function startGame(){ //初始化蛇身的个数，这里是3个 addSnakeBody(); addSnakeBody(); addSnakeBody(); snakeMove();}function snakeMove(){ timer=setTimeout("snakeMove()",sd); var last=snake_arr[snake_arr.length-1]; //把最后一个元素移到第一个 for(var i=snake_arr.length-1;i>0;i--) { snake_arr[i]=snake_arr[i-1]; snake_arr[i].style.backgroundColor="red"; snake_arr[i].style.border="white solid 1px"; } snake_arr[0]=last; var first=snake_arr[0]; var second=snake_arr[1]; first.style.backgroundColor="blue"; var _left=second.style.left.replace("px","")-0; var _top=second.style.top.replace("px","")-0; if(footDivObj==null) footDivObj=document.getElementById("food_div_id"); if(mapDivObj==null) mapDivObj=document.getElementById("map_id"); if(direction=="left") { first.style.left=_left-snakeBodyW_H+"px"; first.style.top=_top+"px"; //判断是否吃到食物 isDivSuperpose(first,footDivObj); //判断失败 isKill(first,mapDivObj); } else if(direction=="up") { first.style.left=_left+"px"; first.style.top=_top-snakeBodyW_H+"px"; isDivSuperpose(first,footDivObj); isKill(first,mapDivObj); } else if(direction=="right") { first.style.left=_left+snakeBodyW_H+"px"; first.style.top=_top+"px"; isDivSuperpose(first,footDivObj); isKill(first,mapDivObj); } else if(direction=="down") { first.style.left=_left+"px"; first.style.top=_top+snakeBodyW_H+"px"; isDivSuperpose(first,footDivObj); isKill(first,mapDivObj); } } function keyDown(e) { if(e.keyCode==37) //向左 { if(direction!=="right") direction="left"; } else if(e.keyCode==38) //向上 { if(direction!=="down") direction="up"; } else if(e.keyCode==39) //向右 { if(direction!=="left") direction="right"; } else if(e.keyCode==40) //向下 { if(direction!=="up") direction="down"; }}function isKill(snakeDivObj,_mapDivObj){ var snakeDivLeft = snakeDivObj.style.left.replace("px","")-0; var snakeDivTop = snakeDivObj.style.top.replace("px","")-0; var _mapDivLeft = _mapDivObj.style.left.replace("px","")-0; var _mapDivTop = _mapDivObj.style.top.replace("px","")-0; var _mapDivWidth = _mapDivObj.style.width.replace("px","")-0; var _mapDivHeight = _mapDivObj.style.height.replace("px","")-0; if(snakeDivLeft+snakeBodyW_H>_mapDivLeft+_mapDivWidth) { clearTimeout(timer); alert("失败！"); } else if(snakeDivLeft <_mapDivLeft) { clearTimeout(timer); alert("失败！"); } else if(snakeDivTop <_mapDivTop) { clearTimeout(timer); alert("失败！"); } else if(snakeDivTop+snakeBodyW_H>_mapDivTop+_mapDivHeight) { clearTimeout(timer); alert("失败！"); }}//食物function food(){ var randomnum1=Math.random(); var randomnum2=Math.random(); var foodx=Math.round(800 * randomnum1)+60; var foody=Math.round(400 * randomnum2)+60; if(foodx%snakeBodyW_H!=0) { foodx=foodx-foodx%snakeBodyW_H; } if(foody%snakeBodyW_H!=0) { foody=foody-foody%snakeBodyW_H; } if(footDivObj==null) footDivObj=document.getElementById("food_div_id"); footDivObj.style.left=foodx+"px"; footDivObj.style.top=foody+"px"; footnum=footnum+1; if(footnum==footMaxnum) { clearTimeout(timer); alert("恭喜你进入下一关"); { sd=sd-10; //速度 document.getElementById("tx_id").value="第 "+(document.getElementById("tx_id").value.split(" ")[1]-0+1)+" 关"; resetStart(sd,"next"); } }}//判断蛇是否吃到食物function isDivSuperpose(snakeDivObj,_footDivObj) { var rv=withInDivSuperpose(snakeDivObj,_footDivObj); if(rv=="-111") { var rv2=withInDivSuperpose(_footDivObj,snakeDivObj); if(rv2=="-111") { // no } else { //吃到食物 food(); addSnakeBody(); } } else { //吃到食物 food(); addSnakeBody(); }}function withInDivSuperpose(snakeDivObj,_footDivObj) { /*div_1*/ //左上角 var divLeftTopX_1=snakeDivObj.style.left.replace("px","")-0; var divLeftTopY_1=snakeDivObj.style.top.replace("px","")-0; //右下角 var divRightBottomX_1=snakeDivObj.style.width.replace("px","")-0 + divLeftTopX_1; var divRightBottomY_1=snakeDivObj.style.height.replace("px","")-0 + divLeftTopY_1; //左下角 var divLeftBottomX_1=divLeftTopX_1; var divLeftBottomY_1=divRightBottomY_1; //右上角 var divRightTopX_1=divRightBottomX_1; var divRightTopY_1=divLeftTopY_1; /*div_2*/ //左上角 var divLeftTopX_2=_footDivObj.style.left.replace("px","")-0; var divLeftTopY_2=_footDivObj.style.top.replace("px","")-0; //右下角 var divRightBottomX_2=_footDivObj.style.width.replace("px","")-0 + divLeftTopX_2; var divRightBottomY_2=_footDivObj.style.height.replace("px","")-0 + divLeftTopY_2; //左下角 var divLeftBottomX_2=divLeftTopX_2; var divLeftBottomY_2=divRightBottomY_2; //右上角 var divRightTopX_2=divRightBottomX_2; var divRightTopY_2=divLeftTopY_2; if(divLeftTopX_2>divLeftTopX_1 && divLeftTopY_2>divLeftTopY_1 && divLeftTopX_2 <divRightBottomX_1 && divLeftTopY_2 <divRightBottomY_1) { return "111"; } else if(divRightTopX_2 <divRightTopX_1 && divRightTopY_2>divRightTopY_1 && divRightTopX_2>divLeftBottomX_1 && divRightTopY_2 <divLeftBottomY_1) { return "222"; } else if(divRightBottomX_2>divLeftTopX_1 && divRightBottomY_2>divLeftTopY_1 && divRightBottomX_2 <divRightBottomX_1 && divRightBottomY_2 <divRightBottomY_1) { return "333"; } else if(divLeftBottomX_2 <divRightTopX_1 && divLeftBottomY_2>divRightTopY_1 && divLeftBottomX_2 >divLeftBottomX_1 && divLeftBottomY_2 <divLeftBottomY_1) { return "444"; } else if(divLeftTopX_2 <divLeftTopX_1 && divLeftTopY_2 <divLeftTopY_1 && divRightBottomX_2>divRightBottomX_1 && divRightBottomY_2>divRightBottomY_1) { return "555"; } return "-111";}</script></head><body onkeydown="keyDown(event)" style="overflow:hidden" scroll="no"><div id="map_id" style="position:absolute;left:60px;top:60px;height:460px;width:880px;background-color:rgb(223,223,223)"></div><div id="food_div_id" style="position:absolute;left:200px;top:200px;height:18px;width:18px;border:white solid 1px;background-color:red;"></div><input type="button" id="start_bt_id" value="Start" onclick="resetStart(100,'first')"><input type="text" id="tx_id" readonly></body></html> 版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #js贪吃蛇
