基于JavaScript實(shí)現(xiàn)貪吃蛇游戲
本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)貪吃蛇游戲的具體代碼，供大家參考，具體內(nèi)容如下
1.結(jié)構(gòu)
創(chuàng)建一個(gè)盒子box作為蛇的身體，當(dāng)前盒子中只有一個(gè)子元素，代表此時(shí)蛇的長(zhǎng)度為1.在創(chuàng)建一個(gè)盒子food作為貪吃蛇的食物。
<div id='box'> <div></div></div><div id='food'></div>
2.CSS
設(shè)置蛇和食物的樣式，這里注意蛇和食物都是絕對(duì)定位。
<style> *{ padding: 0px; margin: 0px; } #box div{ width: 30px; height: 30px; box-sizing: border-box; background: green; border: 1px solid black; position: absolute; } #food{ width: 30px; height: 30px; background: brown; position: absolute; } </style>
3.腳本
獲取蛇的身體和每一個(gè)子元素
var box = document.getElementById('box');var boxs = document.getElementById('box').children;
定義蛇頭的位置
var snackX = 0;var snackY = 0;
獲取屏幕寬度和高度，以此來(lái)設(shè)定墻的邊界，以限制蛇的移動(dòng)范圍。
var cw = document.documentElement.clientWidth; var ch = document.documentElement.clientHeight; var minsnackX = 0; var maxsnackX = Math.floor(cw / boxs[0].offsetWidth)*boxs[0].offsetWidth; var minsnackY = 0; var maxsnackY = Math.floor(ch / boxs[0].offsetHeight)*boxs[0].offsetHeight;
定義初始的移動(dòng)方向。
var turn = 'right';
獲取食物元素，并設(shè)置食物的位置坐標(biāo)。
var foodele = document.getElementById('food'); var foodX,foodY;
蛇的初始化
for(var i = 0; i <6 ; i++){ box.appendChild(boxs[0].cloneNode(true)); }
刷新食物
function food(){ //此處的坐標(biāo)要先獲取頁(yè)面最大支持的蛇身體的塊數(shù)，然后在塊數(shù)中隨機(jī)，然后乘以塊數(shù)的大小， //因?yàn)樯叩囊苿?dòng)每一步都是固定的，想要判定食物和蛇頭重合就必須坐標(biāo)是整塊的倍數(shù)。 foodX = parseInt( Math.random()*Math.floor(cw / boxs[0].offsetWidth))*boxs[0].offsetWidth; foodY = parseInt( Math.random()*Math.floor(ch / boxs[0].offsetHeight))*boxs[0].offsetHeight; //判定當(dāng)食物的產(chǎn)生位置和蛇的任何一個(gè)位置重合時(shí)就重新生成食物。 for(var i = 0;i<boxs.length;i++){ if(foodX + 'px' === boxs[i].style.left && foodY + 'px' === boxs[i].style.top){ food(); } } foodele.style.left = foodX + 'px'; foodele.style.top = foodY + 'px'; }
調(diào)用food()方法 生成第一個(gè)食物
food();
設(shè)置定時(shí)器 每次執(zhí)行一次蛇的運(yùn)行方法
var timer = setInterval(function(){ snackMOve(); },150)
封裝一個(gè)蛇的運(yùn)動(dòng)方法
//移動(dòng)和判定邊界 function snackMOve(){//此處為判定方向 根據(jù)判定的方向，向改方向前進(jìn)一個(gè)方塊 switch(turn){ case 'right':snackX +=30;break; case 'left':snackX -=30;break; case 'bottom':snackY +=30;break; case 'top':snackY -=30;break; } //如果蛇越過(guò)了墻就從另一端出現(xiàn) if(snackX > maxsnackX){ snackX = 0; } if(snackX < minsnackX){ snackX = maxsnackX; } if(snackY > maxsnackY){ snackY = 0; } if(snackY < minsnackY){ snackY = maxsnackY; } //從最后一個(gè)開(kāi)始，每個(gè)元素跟隨上一個(gè)元素的位置 for(var i = boxs.length-1; i >0 ; i--){ boxs[i].style.left = boxs[i-1].style.left; boxs[i].style.top = boxs[i-1].style.top ; } //第一個(gè)也就是蛇頭的位置，永遠(yuǎn)是根據(jù)方向獲取的位置 boxs[0].style.left = snackX + 'px'; boxs[0].style.top = snackY + 'px' ; //判定吃到食物 就長(zhǎng)大和刷新 //當(dāng)蛇頭位置移動(dòng)之后與食物重合 那么刷新食物，并且在蛇的身體中插入一個(gè)克隆的元素，相當(dāng)于長(zhǎng)度+1 if(snackX === foodX && snackY === foodY){ food(); box.appendChild(boxs[0].cloneNode(true)); }else{ //判定撞死 //當(dāng)蛇頭與身體中的任何一個(gè)元素重合，那么判定結(jié)束游戲，停止定時(shí)器 for(var i = 1;i<boxs.length;i++){ if(snackX + 'px' === boxs[i].style.left && snackY + 'px' === boxs[i].style.top){ clearInterval(timer); alert('失敗'); } } } }
蛇的運(yùn)動(dòng)方向
document.onkeydown = function(eve){ var e = eve||event; var keyCode = e.keyCode||e.which; switch(keyCode){ case 37:if(turn === 'right'){break;}turn = 'left';break; case 38:if(turn === 'bottom'){break;}turn = 'top';break; case 39:if(turn === 'left'){break;}turn = 'right';break; case 40:if(turn === 'top'){break;}turn = 'bottom';break; } }
全部代碼
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <meta http-equiv='X-UA-Compatible' content='ie=edge'> <title>Document</title> <style> *{ padding: 0px; margin: 0px; } #box div{ width: 30px; height: 30px; box-sizing: border-box; background: green; border: 1px solid black; position: absolute; } #food{ width: 30px; height: 30px; background: brown; position: absolute; } </style></head><body> <div id='box'> <div></div> </div> <div id='food'></div> <script> var box = document.getElementById('box'); var boxs = document.getElementById('box').children; var snackX = 0; var snackY = 0; var cw = document.documentElement.clientWidth; var ch = document.documentElement.clientHeight; var minsnackX = 0; var maxsnackX = Math.floor(cw / boxs[0].offsetWidth)*boxs[0].offsetWidth; var minsnackY = 0; var maxsnackY = Math.floor(ch / boxs[0].offsetHeight)*boxs[0].offsetHeight; var turn = 'right'; var foodele = document.getElementById('food'); var foodX,foodY; for(var i = 0; i <6 ; i++){ box.appendChild(boxs[0].cloneNode(true)); } //隨機(jī)食物 function food(){ foodX = parseInt( Math.random()*Math.floor(cw / boxs[0].offsetWidth))*boxs[0].offsetWidth; foodY = parseInt( Math.random()*Math.floor(ch / boxs[0].offsetHeight))*boxs[0].offsetHeight; for(var i = 0;i<boxs.length;i++){ if(foodX + 'px' === boxs[i].style.left && foodY + 'px' === boxs[i].style.top){ food(); } } foodele.style.left = foodX + 'px'; foodele.style.top = foodY + 'px'; } food(); //設(shè)置定時(shí)器 移動(dòng) var timer = setInterval(function(){ snackMOve(); },150) //移動(dòng)和判定邊界 function snackMOve(){ switch(turn){ case 'right':snackX +=30;break; case 'left':snackX -=30;break; case 'bottom':snackY +=30;break; case 'top':snackY -=30;break; } //根據(jù)邊界歸零 if(snackX > maxsnackX){ snackX = 0; } if(snackX < minsnackX){ snackX = maxsnackX; } if(snackY > maxsnackY){ snackY = 0; } if(snackY < minsnackY){ snackY = maxsnackY; } for(var i = boxs.length-1; i >0 ; i--){ boxs[i].style.left = boxs[i-1].style.left; boxs[i].style.top = boxs[i-1].style.top ; } boxs[0].style.left = snackX + 'px'; boxs[0].style.top = snackY + 'px' ; //判定吃到食物 就長(zhǎng)大和刷新 if(snackX === foodX && snackY === foodY){ food(); box.appendChild(boxs[0].cloneNode(true)); }else{ //判定撞死 暫停計(jì)時(shí)器 刷新 for(var i = 1;i<boxs.length;i++){ // console.log(boxs[i].style.left); if(snackX + 'px' === boxs[i].style.left && snackY + 'px' === boxs[i].style.top){ clearInterval(timer); alert('失敗'); // console.log(1) } } } } //方向 document.onkeydown = function(eve){ var e = eve||event; var keyCode = e.keyCode||e.which; switch(keyCode){ case 37:if(turn === 'right'){break;}turn = 'left';break; case 38:if(turn === 'bottom'){break;}turn = 'top';break; case 39:if(turn === 'left'){break;}turn = 'right';break; case 40:if(turn === 'top'){break;}turn = 'bottom';break; } } </script></body></html>
總結(jié)
貪吃蛇的思路主要是有以下幾個(gè)部分
1.食物的隨機(jī)出現(xiàn)（不能隨機(jī)在蛇身上）2.定時(shí)器控制蛇的移動(dòng)3.墻的判定4.蛇的運(yùn)動(dòng)邏輯5.運(yùn)動(dòng)方向的判定6.吃到食物的判定7.蛇頭與身體的判定（即游戲結(jié)束的判定）
小編還為大家準(zhǔn)備了精彩的專(zhuān)題：javascript經(jīng)典小游戲匯總
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. moment轉(zhuǎn)化時(shí)間戳出現(xiàn)Invalid Date的問(wèn)題及解決2. python爬蟲(chóng)實(shí)戰(zhàn)之制作屬于自己的一個(gè)IP代理模塊3. WML的簡(jiǎn)單例子及編輯、測(cè)試方法第1/2頁(yè)4. 如何在jsp界面中插入圖片5. 開(kāi)發(fā)效率翻倍的Web API使用技巧6. ajax請(qǐng)求后臺(tái)得到j(luò)son數(shù)據(jù)后動(dòng)態(tài)生成樹(shù)形下拉框的方法7. Ajax返回值類(lèi)型與用法實(shí)例分析8. asp批量添加修改刪除操作示例代碼9. HTML 絕對(duì)路徑與相對(duì)路徑概念詳細(xì)10. .NET6打包部署到Windows Service的全過(guò)程
網(wǎng)公網(wǎng)安備