javascript-貪吃蛇
阿新 • • 發佈：2018-12-11
html:
<body> <h2 style="margin-left: 200px ; margin-top: 15px">溫馨提示：蛇頭不能碰到自己的身體和最外面的邊框，否則遊戲結束！！</h2> <h2 style="margin-left: 200px">除開方向鍵，按任意鍵可以暫停（空格鍵）</h2> <h2 style="margin-left: 710px; margin-top: -29px">已得分：<span>0</span>分</h2> <div id="box1"></div> <button id="btn"><a href="snakes.html">New Game</a></button> <button id="difficult">困難</button> <button id="moment">一般</button> <button id="simple">簡單</button> <div id="box2">Game Over!！ 得分：<span>0</span>分</div> </body>
css:
<style type="text/css"> *{ margin: 0; padding: 0; text-decoration: none; box-sizing: border-box; } #box1{ position: absolute; left: 200px; top: 90px; width: 802px; height: 502px; border: 1px solid; overflow: hidden; } #btn{ position: absolute; left: 200px; top: 603px; } #simple{ position: absolute; left: 280px; top: 603px; } #moment{ position: absolute; left: 320px; top: 603px; } #difficult{ position: absolute; left: 360px; top: 603px; } #box2{ position: absolute; width: 800px; height: 100px; background-color: chartreuse; text-align: center; font-size: 50px; line-height: 100px; left: 201px; top: 230px; display: none; } </style>
script:
<script type="text/javascript"> function setCookie(key, val, day) { var date = new Date(); date.setTime(date.getTime() + day*24*3600*1000); document.cookie = key + '=' + val + ';expires=' + date.toString(); } function getCookie(key) { var cookies = document.cookie; var cookieArr = cookies.split('; '); for (var i=0; i<cookieArr.length; i++){ var arr = cookieArr[i].split('='); if (arr[0] == key){ return arr[1]; } } } function delCookie(key) { setCookie(key,'',-1); } window.onload = function(){ let box1=document.getElementById("box1"); //設定定時器時間，時間越短，移動速度越快 let interTime; if (getCookie('intertime')*1>0){ interTime = getCookie('intertime')*1; } else { interTime = 70; } console.log(interTime); //設定遊戲難度 let difficult=document.getElementById("difficult"); let moment=document.getElementById("moment"); let simple=document.getElementById("simple"); difficult.onclick=function(){ setCookie('intertime',30,7); interTime=30; } moment.onclick=function(){ setCookie('intertime',50,7); interTime=50; } simple.onclick=function(){ setCookie('intertime',70,7); interTime=70; } //畫蛇頭 let le=400; let top=200; // let le=Math.round((Math.random()*10+1)*20+300); // let top=Math.round((Math.random()*10+1)*20+150); let snakeHead=document.createElement("div"); snakeHead.style.width="20px"; snakeHead.style.height="20px"; snakeHead.style.position="absolute"; snakeHead.style.left=le+"px"; snakeHead.style.top=top+"px"; snakeHead.style.backgroundColor="blue"; snakeHead.style.borderRadius="50%"; box1.appendChild(snakeHead); //畫蛇尾巴 let arr=new Array(); for (let i=0;i<3;i++){ arr[i]=document.createElement("div"); arr[i].style.width="20px"; arr[i].style.height="20px"; arr[i].style.position="absolute"; arr[i].style.left=(le-20*(i+1))+"px"; arr[i].style.top=top+"px"; arr[i].style.backgroundColor="gray"; arr[i].style.borderRadius="50%"; box1.appendChild(arr[i]); } //隨機出現食物 let food; function createFood(){ let foodLeft=Math.round(Math.random()*760+20); let foodTop=Math.round(Math.random()*460+20); food=document.createElement("div"); food.style.width="20px"; food.style.height="20px"; food.style.position="absolute"; food.style.left=foodLeft+"px"; food.style.top=foodTop+"px"; food.style.backgroundColor="red"; food.style.borderRadius="40%"; box1.appendChild(food); } createFood(); //監聽鍵盤的上下左右按鍵，按下就開始以一定的速度開始移動 let index = -1; //初始化方向為向右 //0表示左，1表示上，2表示右，3表示下 let direction = 2; //左37 上38 右39 下40 let speed=20; let intervalLeft; let intervalTop; let intervalRight; let intervalBottom; document.onkeydown = function (event) { //清除其他的定時器 clearInterval(intervalTop); clearInterval(intervalRight); clearInterval(intervalBottom); clearInterval(intervalLeft); //尾巴移動函式 function move(le,to){ for (let j = arr.length - 1; j > 0; j--) { arr[j].style.left = arr[j - 1].style.left; arr[j].style.top = arr[j - 1].style.top; } arr[0].style.left = le + "px"; arr[0].style.top = to + "px"; } //判斷遊戲是否結束 function checkGame(){ //蛇頭遇到食物，食物消失，蛇尾加一 //遇到食物之前記錄蛇尾最後一個元素位置 let tailLeft=arr[arr.length-1].offsetLeft; let tailTop=arr[arr.length-1].offsetTop; if ((food.offsetLeft-15)<=snakeHead.offsetLeft && snakeHead.offsetLeft<=(food.offsetLeft+20) && (food.offsetTop-15)<=snakeHead.offsetTop && snakeHead.offsetTop<=(food.offsetTop+20)){ food.style.display="none"; arr.length++; let num=arr.length-1; arr[num] = document.createElement("div"); arr[num].style.width = "20px"; arr[num].style.height = "20px"; arr[num].style.position = "absolute"; arr[num].style.left = tailLeft + "px"; arr[num].style.top = tailTop + "px"; arr[num].style.backgroundColor = "gray"; arr[num].style.borderRadius = "50%"; box1.appendChild(arr[num]); //食物消失之後，再建立一個隨機的食物 createFood(); } // 判斷是否超出邊界，則遊戲結束 if (snakeHead.offsetLeft < -8 || snakeHead.offsetLeft>(box1.clientWidth-8) || snakeHead.offsetTop < -8 || snakeHead.offsetTop>(box1.clientHeight-8)){ document.onkeydown=null; //清除其他的定時器 clearInterval(intervalTop); clearInterval(intervalRight); clearInterval(intervalBottom); clearInterval(intervalLeft); document.getElementById("box2").style.display="block"; }else { //跟新分數 document.querySelectorAll("span")[0].innerHTML = (arr.length-3)*1; document.querySelectorAll("span")[1].innerHTML = (arr.length-3)*1; } // 蛇頭碰到蛇身子，則遊戲結束 let flag=false; for (let j=0;j<arr.length;j++){ for (let i=j;i<arr.length;i++){ if (arr[i].offsetLeft<=snakeHead.offsetLeft && snakeHead.offsetLeft<(arr[i].offsetLeft+20) && arr[i].offsetTop<=snakeHead.offsetTop && snakeHead.offsetTop<(arr[i].offsetTop+20)){ // console.log("蛇頭碰到蛇身子，則遊戲結束"); flag=true; //跟新分數 document.querySelectorAll("span")[0].innerHTML = (arr.length-3)*1; document.querySelectorAll("span")[1].innerHTML = (arr.length-3)*1; } } } if (flag){ document.onkeydown=null; //清除其他的定時器 clearInterval(intervalTop); clearInterval(intervalRight); clearInterval(intervalBottom); clearInterval(intervalLeft); document.getElementById("box2").style.display="block"; } } event = event || window.event; // alert(event.keyCode); index = event.keyCode; //左37/0 上38/1 右39/2 下40/3 if (index == 37 && (direction ==0 || direction == 1 || direction == 3)){ intervalLeft=setInterval(function () { //清除其他的定時器 clearInterval(intervalTop); clearInterval(intervalRight); clearInterval(intervalBottom); //記錄一下蛇頭的位置 let snakeHeadLeft=snakeHead.offsetLeft; let snakeHeadTop=snakeHead.offsetTop; snakeHead.style.left = snakeHead.offsetLeft - speed + "px"; move(snakeHeadLeft,snakeHeadTop); //判斷遊戲是否結束 checkGame(); direction = 0; },interTime); } else if (index == 38 && (direction == 0 || direction == 1 || direction ==2)){ intervalTop=setInterval(function () { //清除其他的定時器 clearInterval(intervalLeft); clearInterval(intervalRight); clearInterval(intervalBottom); //記錄一下蛇頭的位置 let snakeHeadLeft=snakeHead.offsetLeft; let snakeHeadTop=snakeHead.offsetTop; snakeHead.style.top = snakeHead.offsetTop - speed + "px"; move(snakeHeadLeft,snakeHeadTop); //判斷遊戲是否結束 checkGame(); direction = 1; },interTime); } else if (index == 39 && (direction == 1 || direction == 2 || direction ==3)){ intervalRight=setInterval(function () { //清除其他的定時器 clearInterval(intervalTop); clearInterval(intervalLeft); clearInterval(intervalBottom); //記錄一下蛇頭的位置 let snakeHeadLeft=snakeHead.offsetLeft; let snakeHeadTop=snakeHead.offsetTop; snakeHead.style.left = snakeHead.offsetLeft + speed + "px"; move(snakeHeadLeft,snakeHeadTop); //判斷遊戲是否結束 checkGame(); direction = 2; },interTime); } else if (index == 40 && (direction == 0 || direction == 2 || direction ==3)){ intervalBottom=setInterval(function () { //清除其他的定時器 clearInterval(intervalTop); clearInterval(intervalRight); clearInterval(intervalLeft); //記錄一下蛇頭的位置 let snakeHeadLeft=snakeHead.offsetLeft; let snakeHeadTop=snakeHead.offsetTop; snakeHead.style.top = snakeHead.offsetTop + speed + "px"; move(snakeHeadLeft,snakeHeadTop); //判斷遊戲是否結束 checkGame(); direction = 3; },interTime); } else if (index == 37 && direction ==2){ //說明向左走，按了向右的按鈕 intervalRight=setInterval(function () { //清除其他的定時器 clearInterval(intervalTop); clearInterval(intervalLeft); clearInterval(intervalBottom); //記錄一下蛇頭的位置 let snakeHeadLeft=snakeHead.offsetLeft; let snakeHeadTop=snakeHead.offsetTop; snakeHead.style.left = snakeHead.offsetLeft + speed + "px"; move(snakeHeadLeft,snakeHeadTop); //判斷遊戲是否結束 checkGame(); direction = 2; },interTime); } else if (index == 38 && direction == 3){ intervalBottom=setInterval(function () { //清除其他的定時器 clearInterval(intervalTop); clearInterval(intervalRight); clearInterval(intervalLeft); //記錄一下蛇頭的位置 let snakeHeadLeft=snakeHead.offsetLeft; let snakeHeadTop=snakeHead.offsetTop; snakeHead.style.top = snakeHead.offsetTop + speed + "px"; move(snakeHeadLeft,snakeHeadTop); //判斷遊戲是否結束 checkGame(); direction = 3; },interTime); } else if (index == 39 && direction == 0){ intervalLeft=setInterval(function () { //清除其他的定時器 clearInterval(intervalTop); clearInterval(intervalRight); clearInterval(intervalBottom); //記錄一下蛇頭的位置 let snakeHeadLeft=snakeHead.offsetLeft; let snakeHeadTop=snakeHead.offsetTop; snakeHead.style.left = snakeHead.offsetLeft - speed + "px"; move(snakeHeadLeft,snakeHeadTop); //判斷遊戲是否結束 checkGame(); direction = 0; },interTime); } else if (index == 40 && direction == 1){ intervalTop=setInterval(function () { //清除其他的定時器 clearInterval(intervalLeft); clearInterval(intervalRight); clearInterval(intervalBottom); //記錄一下蛇頭的位置 let snakeHeadLeft=snakeHead.offsetLeft; let snakeHeadTop=snakeHead.offsetTop; snakeHead.style.top = snakeHead.offsetTop - speed + "px"; move(snakeHeadLeft,snakeHeadTop); //判斷遊戲是否結束 checkGame(); direction = 1; },interTime); } } } </script>