<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{ margin:0px; padding:0px; } #board{ width:300px; height:500px; border:5px solid #000; margin:50px auto 0px; position: relative; background: #cccccc91; } li:first-child{ position: absolute; width: 10px; height:10px; left: 100px; top: 200px; background:cornflowerblue; z-index: 1; } li{ position: absolute; width: 10px; height:10px; background: pink; list-style: none; } li:nth-child(2){ left: 100px; top: 210px; } li:nth-child(3){ left: 100px; top: 220px; } p{ width: 10px; height: 10px; position: absolute; box-shadow: 0px 0px 2px 2px #000; border-radius: 50%; } #menu{ width:300px; height:30px; border:5px solid #000; border-top:none; margin:0px auto; position: relative; } #menu>button{ border: 0px; width: 75px; display: block; float: left; height: 30px; cursor: pointer; outline: none; } button:nth-child(1){ background: pink; } button:nth-child(2){ background: skyblue; } button:nth-child(3){ background: orange; } button:nth-child(4){ background: rgb(25, 230, 6); } button:hover{ font-size: 18px; color: white; font-weight: bold; } dl{ width: 75px; position: absolute; right:0; bottom:30px; cursor:pointer; display: none; height: 90px; } dl>dd{ display: block; cursor:pointer; text-align: center; line-height: 30px; } dl>dd:nth-child(1){ height: 30px; background: rgba(212, 118, 9, 0.527); } dl>dd:nth-child(2){ height: 30px; background: rgb(142, 6, 253); } dl>dd:nth-child(3){ height: 30px; background: rgb(205, 9, 231); } </style> </head> <body> <div> <li></li> <li></li> <li></li> </div> <div> <button>开始游戏</button> <button>暂停游戏</button> <button>重新开始</button> <button>游戏难度</button> <dl> <dd>菜鸟级</dd> <dd>大师级</dd> <dd>魔鬼级</dd> </dl> </div> <script> var ele = document.querySelectorAll("li") var board = document.getElementById("board") var menu = document.querySelectorAll("button") var ddDom = document.querySelectorAll("dd") var locLogLeft = [] var locLogTop = [] var dir = "up" var upLock = true; //让定时器不能连开 var downLock = true; var leftLock = true; var rightLock = true; var level = 200; var count = 0; menu[0].onclick = function(){var result = game(dir,level);} //开始游戏 menu[1].onclick = function(){clearInterval(timer)} //暂停游戏 menu[3].onclick = function(){ //设置难度的函数 count++; if(count%2!=0){ document.getElementsByTagName("dl")[0].style.display="block"} else{ document.getElementsByTagName("dl")[0].style.display="none" } ddDom[0].onclick =function() { count++ level = 200; document.getElementsByTagName("dl")[0].style.display="none" } ddDom[1].onclick =function() { count++ level = 100; document.getElementsByTagName("dl")[0].style.display="none" } ddDom[2].onclick =function() { count++ level = 50; document.getElementsByTagName("dl")[0].style.display="none" } } function afresh(){ //重新开始函数 ele[0].style.left = "100px" ele[0].style.top = "200px" ele[1].style.left = "100px" ele[1].style.top = "210px" ele[2].style.left = "100px" ele[2].style.top = "220px" ele = document.querySelectorAll("li") for(var i = 3;i<ele.length;i++){ board.removeChild(ele[i]) } clearInterval(timer) locLogLeft = [] locLogTop = [] } var timer; foodFun() //游戏开始先生成一食物 document.onkeydown = function(e){ //方向控制函数 var e = e||window.event; var foodDom = document.getElementsByTagName("p")[0] var ele = document.querySelectorAll("li") if(e.keyCode == 87 && ele[0].offsetTop<=ele[1].offsetTop ){ rightLock = true; leftLock = true; if(!upLock == true){ return; } upLock = false; // clearInterval(timer) game("up",level) } if(e.keyCode == 83 && ele[0].offsetTop>=ele[1].offsetTop){ rightLock = true; leftLock = true if(!downLock == true){ return; } downLock = false; // clearInterval(timer) game("down",level) } if(e.keyCode == 68 && ele[0].offsetLeft>=ele[1].offsetLeft){ upLock = true downLock = true; if(!rightLock == true){ return; } rightLock = false; // clearInterval(timer) game("right",level) } if(e.keyCode == 65 && ele[0].offsetLeft<=ele[1].offsetLeft){ upLock = true; downLock = true; if(!leftLock == true){ return; } leftLock = false; // clearInterval(timer) game("left",level) } } function game(direction,speed){ //控制蛇身转弯函数 clearInterval(timer) timer = setInterval(function(e){ var e = e||window.event; var foodDom = document.getElementsByTagName("p")[0] var ele = document.querySelectorAll("li") if(direction == "down"){ dir = "down" locLogLeft = [] locLogTop = [] for(var i=0;i<ele.length;i++){ locLogLeft[i] = ele[i].offsetLeft; locLogTop[i] = ele[i].offsetTop; } ele[0].style.top = 10+ele[0].offsetTop + "px"; for(var i=1;i<ele.length;i++){ ele[i].style.left = locLogLeft[i-1]+"px"; ele[i].style.top = locLogTop[i-1]+"px"; } } if(direction == "up"){ dir = "up" locLogLeft = [] locLogTop = [] for(var i=0;i<ele.length;i++){ locLogLeft[i] = ele[i].offsetLeft; locLogTop[i] = ele[i].offsetTop; } ele[0].style.top = ele[0].offsetTop - 10 + "px"; for(var i=1;i<ele.length;i++){ ele[i].style.left = locLogLeft[i-1]+"px"; ele[i].style.top = locLogTop[i-1]+"px"; } } if(direction == "left"){ dir = "left" locLogLeft = [] locLogTop = [] for(var i=0;i<ele.length;i++){ locLogLeft[i] = ele[i].offsetLeft; locLogTop[i] = ele[i].offsetTop; } ele[0].style.left = ele[0].offsetLeft - 10 + "px"; for(var i=1;i<ele.length;i++){ ele[i].style.left = locLogLeft[i-1]+"px"; ele[i].style.top = locLogTop[i-1]+"px"; } } if(direction=="right"){ dir = "right" locLogLeft = [] locLogTop = [] for(var i=0;i<ele.length;i++){ locLogLeft[i] = ele[i].offsetLeft; locLogTop[i] = ele[i].offsetTop; } ele[0].style.left = 10+ele[0].offsetLeft + "px"; for(var i=1;i<ele.length;i++){ ele[i].style.left = locLogLeft[i-1]+"px"; ele[i].style.top = locLogTop[i-1]+"px"; } } isLost() if(parseInt(foodDom.style.left) == ele[0].offsetLeft && parseInt(foodDom.style.top) == ele[0].offsetTop ){ board.removeChild(foodDom) foodFun() var snakeBody = document.createElement("li") board.appendChild(snakeBody) ele = document.querySelectorAll("li") // console.log(ele,ele.length) ele[ele.length-1].style.left = ele[ele.length-2].offsetLeft+"px"; ele[ele.length-1].style.top = ele[ele.length-2].offsetTop+"px"; } },speed) } function foodFun(e){ //生成食物函数 var e = e||window.Element; var foodColorR = Math.floor((Math.random()*256)) var foodColorG = Math.floor((Math.random()*256)) var foodColorB = Math.floor((Math.random()*256)) var randomFoodX = Math.floor(Math.random()*(board.clientWidth/10)-1) var randomFoodY = Math.floor(Math.random()*(board.clientHeight/10)-1); var food = document.createElement("p") board.appendChild(food) var foodDom = document.getElementsByTagName("p")[0] foodDom.style.left=(randomFoodX+1)*10 +"px" foodDom.style.top=(randomFoodY+1)*10 +"px"; foodDom.style.backgroundColor = "rgb("+foodColorR+","+foodColorG+","+foodColorB+")" if(parseInt(foodDom.style.left) == ele[0].offsetLeft && parseInt(foodDom.style.top) == ele[0].offsetTop ){ foodFun() } } function isLost(){ //判定胜负 ele = document.querySelectorAll("li") if(ele[0].offsetLeft<0 || ele[0].offsetLeft>= board.clientWidth || ele[0].offsetTop<0||ele[0].offsetTop+10>board.clientHeight){ bump = false; alert("你失败了！") afresh() } for(var i=1;i<ele.length;i++){ if(ele[0].offsetLeft == ele[i].offsetLeft && ele[0].offsetTop == ele[i].offsetTop){ alert("你失败了！") afresh() } } } </script> </body> </html>
小编还为大家准备了精彩的专题：javascript经典小游戏汇总