用JavaScript做一個(gè)貪吃蛇小游戲，無需網(wǎng)絡(luò) => 打開即可玩。
html代碼：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#game{
width: 344px;
background-color: #000;
padding: 20px 8px;
margin: 100px auto;
}
#score{
color: #B7D4A8;
text-align: center;
font-size: 20px;
font-weight: bold;
margin-bottom: 10px;
}
#bg{
width: 304px;
height: 304px;
background-color: #B7D4A8;
padding: 20px;
border-radius: 5%;
}
#main{
width: 300px;
height: 300px;
/* 設(shè)置邊框*/
border: 2px solid black;
position: relative;
}
#food, .part{
width: 8px;
height: 8px;
background-color: #000;
border: 1px solid #B7D4A8;
position: absolute;
top: 0;
left: 0;
}
#food{
top: 50px;
left: 100px;
}
</style>
<script>
/*
1.頁面的布局
- 注意事項(xiàng)：
背景顏色 #B7D4A8
窗口大?。?0的倍數(shù)）
蛇的大小 10px(可見框)
食物的大小 10px（可見框）
2.隨機(jī)設(shè)置食物的位置
修改食物的top和left值（范圍0-290）
并且必須是10的倍數(shù)
3.設(shè)置蛇的移動(dòng)
蛇的速度 10px
檢查蛇是否吃到食物（蛇頭的坐標(biāo)和食物一致）
記分
4.吃到食物蛇的身體要增加
- 設(shè)置身體的位置？
5.設(shè)置游戲的結(jié)束機(jī)制
- 撞墻
- 撞自己
*/
window.onload = function () {
//獲取食物的對象
var food = document.getElementById('food')
//獲取主窗口
var main = document.getElementById('main')
//獲取蛇頭
var head = document.getElementById('head')
//獲取蛇
var snake = document.getElementById('snake')
//獲取蛇的所有的部分
var parts = document.getElementsByClassName('part')
//創(chuàng)建一個(gè)變量，存儲(chǔ)最大的left和top
var MAXLEFT = main.clientWidth - 10 // 290
var MAXTOP = main.clientHeight - 10 // 290
//創(chuàng)建一個(gè)變量，表示蛇頭的運(yùn)動(dòng)方向
var dir = null
//創(chuàng)建一個(gè)變量，表示蛇的速度
var speed = 10
//創(chuàng)建一個(gè)變量，存儲(chǔ)用戶的分?jǐn)?shù)
var score = 0
//獲取分?jǐn)?shù)的span
var scoreText = document.getElementById('score_text')
//創(chuàng)建一個(gè)定時(shí)器用來控制蛇的運(yùn)動(dòng)
var timer = setInterval(function () {
//獲取蛇頭當(dāng)前的位置
var left = head.offsetLeft
var top = head.offsetTop
switch (dir) {
case 'ArrowDown':
case 'Down':
//向下
top += 10
if(parts[1] && top === parts[1].offsetTop){
top -= 20
}
break
case 'ArrowUp':
case 'Up':
//向上
top -= 10
if(parts[1] && top === parts[1].offsetTop){
top += 20
}
break
case 'ArrowLeft':
case 'Left':
//向左
left -= 10
//如果蛇頭的left值，和第二節(jié)身子的left一樣了，則說明蛇掉頭了
if(parts[1] && left === parts[1].offsetLeft){
left += 20
}
break
case 'ArrowRight':
case 'Right':
//向右
left += 10
if(parts[1] && left === parts[1].offsetLeft){
left -= 20
}
break
}
//檢查蛇是否撞墻
if(left < 0 || left > MAXLEFT || top < 0 || top > MAXTOP){
clearInterval(timer)
alert('撞墻了，游戲結(jié)束！')
return
}
//檢查蛇是否吃到食物
if(left === food.offsetLeft && top === food.offsetTop){
//進(jìn)入判斷，證明蛇吃到了食物（蛇頭與食物重合）
//加分
score++
// 000000001 00000000100
scoreText.innerHTML = ('00000000' + score).slice(-8)
//蛇變長..
//創(chuàng)建一個(gè)表示蛇的div
var body = document.createElement('div')
//設(shè)置class，part
body.className = 'part'
//設(shè)置蛇身體的位置, 獲取最后一個(gè)元素的位置
//parts是一個(gè)數(shù)組，里邊保存了蛇所有，包括蛇頭和身體
body.style.left = parts[parts.length - 1].offsetLeft + 'px'
body.style.top = parts[parts.length - 1].offsetTop + 'px'
//將身體添加到蛇里邊
snake.appendChild(body)
//改變食物的位置
changeFood(food)
}
//設(shè)置身體的位置，將當(dāng)前身體設(shè)置為它前一個(gè)身體的位置
for(var i=parts.length-1 ; i>0 ; i--){
var pLeft = parts[i-1].offsetLeft
var pTop = parts[i-1].offsetTop
//檢查蛇頭的坐標(biāo)是否和身體重合
if(left === pLeft && top === pTop){
//撞到自己了
clearInterval(timer)
alert('撞自己了，游戲結(jié)束！')
return
}
parts[i].style.left = pLeft + 'px'
parts[i].style.top = pTop + 'px'
}
//修改蛇的位置
head.style.left = left + 'px'
head.style.top = top + 'px'
},200)
//創(chuàng)建一個(gè)數(shù)組，存儲(chǔ)所有的方向鍵的值
var keys = ['ArrowDown','ArrowUp','ArrowLeft','ArrowRight','Right','Up','Left','Down']
//綁定一個(gè)鍵盤事件
document.onkeydown = function (event) {
//檢查用戶按的是否是方向鍵
if(keys.indexOf(event.key) !== -1){
//修改dir的值
dir = event.key
}
}
//定義一個(gè)函數(shù)，來隨機(jī)生成food的位置
function changeFood(food) {
//隨機(jī)生成left和top
// left 和 top 應(yīng)該是10的倍數(shù)
var left = Math.round(Math.random() * (MAXLEFT/10)) * 10
var top = Math.round(Math.random() * (MAXTOP/10)) * 10
//修改food的位置
food.style.left = left+'px'
food.style.top = top + 'px'
}
// setInterval(function () {
// changeFood(food)
// },500)
}
</script>
</head>
<body>
<div id="game">
<div id="score">
score:<span id="score_text">00000000</span>
</div>
<div id="bg">
<!--游戲的主窗口-->
<div id="main">
<!-- 創(chuàng)建表示蛇的元素-->
<div id="snake">
<div id="head" class="part"></div>
</div>
<!-- 定義食物-->
<div id="food"></div>
</div>
</div>
</div>
</body>
</html>
在瀏覽器打開該文件：
直接按上下左右鍵就可以玩起來了
撞墻了=>刷新網(wǎng)頁即可重新開始哦：
歡迎關(guān)注我的原創(chuàng)文章：小伙伴們！我是一名熱衷于前端開發(fā)的作者，致力于分享我的知識和經(jīng)驗(yàn)，幫助其他學(xué)習(xí)前端的小伙伴們。在我的文章中，你將會(huì)找到大量關(guān)于前端開發(fā)的精彩內(nèi)容。
學(xué)習(xí)前端技術(shù)是現(xiàn)代互聯(lián)網(wǎng)時(shí)代中非常重要的一項(xiàng)技能。無論你是想成為一名專業(yè)的前端工程師，還是僅僅對前端開發(fā)感興趣，我的文章將能為你提供寶貴的指導(dǎo)和知識。
在我的文章中，你將會(huì)學(xué)到如何使用HTML、CSS和JavaScript創(chuàng)建精美的網(wǎng)頁。我將深入講解每個(gè)語言的基礎(chǔ)知識，并提供一些實(shí)用技巧和最佳實(shí)踐。無論你是初學(xué)者還是有一定經(jīng)驗(yàn)的開發(fā)者，我的文章都能夠滿足你的學(xué)習(xí)需求。
此外，我還會(huì)分享一些關(guān)于前端開發(fā)的最新動(dòng)態(tài)和行業(yè)趨勢?；ヂ?lián)網(wǎng)技術(shù)在不斷發(fā)展，新的框架和工具層出不窮。通過我的文章，你將會(huì)了解到最新的前端技術(shù)趨勢，并了解如何應(yīng)對這些變化。
我深知學(xué)習(xí)前端不易，因此我將盡力以簡潔明了的方式解釋復(fù)雜的概念，并提供一些易于理解的實(shí)例和案例。我希望我的文章能夠幫助你更快地理解前端開發(fā)，并提升你的技能。文章來源：http://www.zghlxwxcb.cn/news/detail-841954.html
如果你想了解更多關(guān)于前端開發(fā)的內(nèi)容，不妨關(guān)注我的原創(chuàng)文章。我會(huì)不定期更新，為你帶來最新的前端技術(shù)和知識。感謝你的關(guān)注和支持，我們一起探討交流技術(shù)共同進(jìn)步，期待與你一同探索前端開發(fā)的奇妙世界！文章來源地址http://www.zghlxwxcb.cn/news/detail-841954.html
到了這里，關(guān)于JavaScript做一個(gè)貪吃蛇小游戲，無需網(wǎng)絡(luò)直接玩。的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
