引言
??作為初學(xué)者，對函數(shù)運用和DOM的操作可能比較生疏。編寫大家都熟悉的貪吃蛇可以幫助我們快速熟練運用JS的基礎(chǔ)操作。本教程代碼并不是最優(yōu)代碼，僅供學(xué)習(xí)借鑒。
效果圖
ttc.gif
代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>貪吃蛇</title>
<style>
#gameScreen{
/*屏幕初始化*/
border: gray 20px solid;
position: relative;
margin: auto;
}
#gameStart{
/*開始按鈕初始化*/
width: 100px;
height: 50px;
margin: auto;
display: block;
}
#score{
/*積分初始化*/
position: relative;
left: 780px;
top:-35px;
width: 100px;
height: 50px;
font-size: 20px;
color: black;
}
</style>
</head>
<body>
<div id="gameScreen"></div>
<input type="button" id="gameStart" value="開始游戲">
<div id="score">積分:0</div>
<script>
//變量初始化
const sh_width = "30px",sh_height = "30px",sh_background = "url(\"shead.png\")",ss_background = "url(\"sbody.png\")";//蛇頭樣式
const fd_width = "30px",fd_height = "30px",fd_background = "url(\"food.png\")";//食物樣式
const sc_width = "600px",sc_height = "600px",sc_background = "white";//屏幕樣式
let direction = "left";//蛇頭方向
let speed = 30;//速度
let score = 0;//積分
let mvTime;//移動定時器
let snake = [];//蛇體數(shù)組
//邊界x,y
let aside_y = parseInt(sc_height)-parseInt(sh_height);
let aside_x = parseInt(sc_width)-parseInt(sh_width);
//獲取屏幕
const screen = document.getElementById("gameScreen");
//屏幕初始化
screenInit();
//開始游戲
gameBn = document.getElementById("gameStart");//獲取開始按鈕
gameBn.onclick = gameStart;
//監(jiān)測鍵盤
document.onkeydown = keyDown;
function gameStart(){
gameBn.disabled = "disabled";//禁用開始按鈕
//調(diào)用繪制蛇頭
paintHead();
//調(diào)用繪制食物
// setInterval(paintFood,300);
paintFood();
//蛇頭移動
mvTime = setInterval(snMove, 350);
console.log(screen.id)
}
function screenInit() {
//屏幕初始化
screen.style.width = sc_width;
screen.style.height = sc_height;
screen.style.background = sc_background;
screen.style.backgroundSize = "cover";
screen.style.backgroundRepeat = "no-repeat";
}
function paintHead(){
//繪制蛇頭
const snHead = document.createElement("div");//創(chuàng)建一個蛇頭元素
snake.push(snHead);
//蛇頭樣式
snHead.style.width = sh_width;
snHead.style.height = sh_height;
snHead.style.background = sh_background;
snHead.style.position = "absolute";
snHead.style.top = "300px";
snHead.style.left = "300px";
snHead.style.zIndex = "100";
snHead.setAttribute("id","snHead");
//添加到文檔結(jié)構(gòu)中
screen.appendChild(snHead);
}
function paintSnBd(){
//繪制蛇身
const snBody = document.createElement("div");//創(chuàng)建一個蛇身元素
snake.push(snBody);
//蛇身樣式
snBody.style.width = sh_width;
snBody.style.height = sh_height;
snBody.style.background = ss_background;
snBody.style.backgroundSize = "cover";
snBody.style.position = "absolute";
snBody.style.top = "400px";
snBody.style.left = "400px";
snBody.style.visibility = "hidden";
//添加到文檔結(jié)構(gòu)中
screen.appendChild(snBody);
}
function paintFood(){
let fd_top,fd_left;
// 食物坐標(biāo)
fd_top = parseInt(Math.random()*aside_y);
fd_left = parseInt(Math.random()*aside_x);
//保證蛇頭準(zhǔn)確吃到
fd_top = fd_top - fd_top % 30;
fd_left = fd_left - fd_left % 30;
//繪制食物
const fdHead = document.createElement("div");//創(chuàng)建一個食物元素
//食物樣式
fdHead.style.width = fd_width;
fdHead.style.height = fd_height;
fdHead.style.background = fd_background;
fdHead.style.backgroundSize = "100%";
fdHead.style.position = "absolute";
fdHead.style.top = fd_top.toString() + "px";
fdHead.style.left = fd_left.toString() + "px";
fdHead.setAttribute("id","food");
//添加到文檔結(jié)構(gòu)中
screen.appendChild(fdHead);
}
function eatFood(snHead){
//進(jìn)食
const food = document.getElementById("food");//獲取食物節(jié)點
const food_x = parseInt(food.style.left);//獲取食物x坐標(biāo)
const food_y = parseInt(food.style.top);//獲取食物y坐標(biāo)
const snHead_x = parseInt(snHead.style.left);//獲取蛇頭x坐標(biāo)
const snHead_y = parseInt(snHead.style.top);//獲取蛇頭y坐標(biāo)
//匹配食物坐標(biāo)是否蛇頭范圍內(nèi)
if(food_x >= snHead_x & food_x <= snHead_x + parseInt(sh_width) & food_y >= snHead_y & food_y <= snHead_y + parseInt(sh_height)){
//刪除食物節(jié)點，積分+1,繪制蛇身+1
console.log("已進(jìn)食");
screen.removeChild(food);
//積分
score += 1;
document.getElementById("score").innerText = "積分："+score;
//調(diào)用繪制蛇身
paintSnBd();
//重新繪制食物節(jié)點
paintFood();
}
}
function keyDown(event){
// 方向鍵控制元素移動函數(shù)
event = event || window.event;
switch(event.keyCode){
case 37:
direction ="left";//左
break;
case 38:
direction ="up";//上
break;
case 39:
direction = "right";//右
break;
case 40:
direction = "down";//下
break;
}
}
function snMove(){
//獲取蛇頭
const snHead = document.getElementById("snHead");
let snHead_x = snHead.style.left;
let snHead_y = snHead.style.top;
let old_x = snHead_x;
let old_y = snHead_y;
//判斷方向
switch(direction){
case "left":
console.log("往左走");
snHead.style.left = parseInt(snHead_x) - speed + "px";
break;
case "right":
console.log("往右走");
snHead.style.left = parseInt(snHead_x) + speed + "px";
break;
case "up":
console.log("往上走");
snHead.style.top = parseInt(snHead_y) - speed + "px";
break;
case "down":
console.log("往下走");
snHead.style.top = parseInt(snHead_y) + speed + "px";
break;
}
//蛇身跟進(jìn)
ctlBody(old_x,old_y);
//邊界監(jiān)測
aside(snHead);
//監(jiān)測進(jìn)食
eatFood(snHead);
}
function ctlBody(sold_x,sold_y) {
//蛇身控制
let old_x,old_y;
//遍歷蛇
for(let index in snake){
//使得蛇身跟進(jìn)蛇頭 蛇身n坐標(biāo)=蛇身n-1坐標(biāo)
if(index == 0){
continue;
}
//保存蛇體n原坐標(biāo)
old_x = snake[index].style.left;
old_y = snake[index].style.top;
//移動蛇體n至目標(biāo)坐標(biāo)
snake[index].style.left = sold_x;
snake[index].style.top = sold_y;
snake[index].style.visibility = "visible";
//將蛇體n原坐標(biāo)變?yōu)樯唧wn+1的目標(biāo)坐標(biāo)
sold_x = old_x;
sold_y = old_y;
}
}
function aside(snHead){
//邊界監(jiān)測
const snTop = parseInt(snHead.style.top);
const snLeft = parseInt(snHead.style.left);
if(snTop < 0 || snTop > aside_y || snLeft < 0 || snLeft > aside_x){
console.log("gameOver");
mvTime = clearInterval(mvTime);
}
}
</script>
</body>
</html>
