基于javascript實(shí)現(xiàn)貪吃蛇經(jīng)典小游戲
更新時(shí)間：2020年04月10日 08:46:28 作者：曲徑通幽~
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)貪吃蛇小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了JS實(shí)現(xiàn)貪吃蛇小游戲的具體代碼，供大家參考，具體內(nèi)容如下
<!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>
*{
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 id="board">
<li></li>
<li></li>
<li></li>
</div>
<div id="menu">
<button>開始游戲</button>
<button>暫停游戲</button>
<button onclick="afresh()">重新開始</button>
<button>游戲難度</button>
<dl>
<dd>菜鳥級(jí)</dd>
<dd>大師級(jí)</dd>
<dd>魔鬼級(jí)</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; //讓定時(shí)器不能連開
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(){ //設(shè)置難度的函數(shù)
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(){ //重新開始函數(shù)
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){ //方向控制函數(shù)
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){ //控制蛇身轉(zhuǎn)彎函數(shù)
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){ //生成食物函數(shù)
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(){ //判定勝負(fù)
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>
小編還為大家準(zhǔn)備了精彩的專題：javascript經(jīng)典小游戲匯總
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
輕松實(shí)現(xiàn)javascript數(shù)據(jù)雙向綁定
這篇文章教大家輕松實(shí)現(xiàn)javascript數(shù)據(jù)雙向綁定，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2015-11-11
這篇文章主要介紹了禁止按回車鍵提交表單的方法的相關(guān)資料,需要的朋友可以參考下2015-06-06
js頁(yè)面引導(dǎo)頁(yè)的實(shí)現(xiàn)思路總結(jié)
在同學(xué)們使用某些網(wǎng)站的新版本頁(yè)面的時(shí)候，經(jīng)常會(huì)出現(xiàn)一個(gè)類似于新手引導(dǎo)一樣的效果，本文主要介紹了js頁(yè)面引導(dǎo)頁(yè)的實(shí)現(xiàn)思路總結(jié)，感興趣的可以了解一下2023-04-04
微信小程序與公眾號(hào)實(shí)現(xiàn)數(shù)據(jù)互通的方法
這篇文章主要介紹了微信小程序與公眾號(hào)實(shí)現(xiàn)數(shù)據(jù)互通的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)側(cè)滑刪除功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06
div+css+js模擬tab切換效果 事件綁定 IE,firefox兼容
div+css+js模擬tab,這個(gè)版本,理論上可以添加無限個(gè)tab,而且,你只要管內(nèi)容的添加行了,不需要改JS2009-12-12
大家都知道js是單線程的，執(zhí)行起來是順序的，在順序的業(yè)務(wù)邏輯中當(dāng)然沒有問題，如果遇到可以并發(fā)執(zhí)行的業(yè)務(wù)邏輯，再排隊(duì)就很低級(jí)了！所以這里我們?cè)賮砗?jiǎn)單的談?wù)凧S中的異步以及如何異步。2016-08-08
這篇文章主要介紹了js顯示世界時(shí)間的方法,可現(xiàn)實(shí)世界各大城市的當(dāng)前時(shí)間,涉及JavaScript針對(duì)時(shí)間的獲取與運(yùn)算操作技巧,需要的朋友可以參考下2016-04-04
javascript把15位身份證轉(zhuǎn)成18的函數(shù)
非常不錯(cuò)的，看了這個(gè)大家就明白身份證的運(yùn)算規(guī)則了2008-10-10
深拷貝和淺拷貝是面試中經(jīng)常出現(xiàn)的,主要考察對(duì)基本類型和引用類型的理解深度,這篇文章主要給大家介紹了關(guān)于js深拷貝和淺拷貝的相關(guān)資料,需要的朋友可以參考下2022-10-10