引言
作为初学者，对函数运用和DOM的操作可能比较生疏。编写大家都熟悉的贪吃蛇可以帮助我们快速熟练运用JS的基础操作。本教程代码并不是最优代码，仅供学习借鉴。
效果图
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 = [];//蛇体数组
//边界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;
//监测键盘
document.onkeydown = keyDown;
function gameStart(){
gameBn.disabled = "disabled";//禁用开始按钮
//调用绘制蛇头
paintHead();
//调用绘制食物
// 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");//创建一个蛇头元素
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");
//添加到文档结构中
screen.appendChild(snHead);
}
function paintSnBd(){
//绘制蛇身
const snBody = document.createElement("div");//创建一个蛇身元素
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";
//添加到文档结构中
screen.appendChild(snBody);
}
function paintFood(){
let fd_top,fd_left;
// 食物坐标
fd_top = parseInt(Math.random()*aside_y);
fd_left = parseInt(Math.random()*aside_x);
//保证蛇头准确吃到
fd_top = fd_top - fd_top % 30;
fd_left = fd_left - fd_left % 30;
//绘制食物
const fdHead = document.createElement("div");//创建一个食物元素
//食物样式
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");
//添加到文档结构中
screen.appendChild(fdHead);
}
function eatFood(snHead){
//进食
const food = document.getElementById("food");//获取食物节点
const food_x = parseInt(food.style.left);//获取食物x坐标
const food_y = parseInt(food.style.top);//获取食物y坐标
const snHead_x = parseInt(snHead.style.left);//获取蛇头x坐标
const snHead_y = parseInt(snHead.style.top);//获取蛇头y坐标
//匹配食物坐标是否蛇头范围内
if(food_x >= snHead_x & food_x <= snHead_x + parseInt(sh_width) & food_y >= snHead_y & food_y <= snHead_y + parseInt(sh_height)){
//删除食物节点，积分+1,绘制蛇身+1
console.log("已进食");
screen.removeChild(food);
//积分
score += 1;
document.getElementById("score").innerText = "积分："+score;
//调用绘制蛇身
paintSnBd();
//重新绘制食物节点
paintFood();
}
}
function keyDown(event){
// 方向键控制元素移动函数
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;
}
//蛇身跟进
ctlBody(old_x,old_y);
//边界监测
aside(snHead);
//监测进食
eatFood(snHead);
}
function ctlBody(sold_x,sold_y) {
//蛇身控制
let old_x,old_y;
//遍历蛇
for(let index in snake){
//使得蛇身跟进蛇头 蛇身n坐标=蛇身n-1坐标
if(index == 0){
continue;
}
//保存蛇体n原坐标
old_x = snake[index].style.left;
old_y = snake[index].style.top;
//移动蛇体n至目标坐标
snake[index].style.left = sold_x;
snake[index].style.top = sold_y;
snake[index].style.visibility = "visible";
//将蛇体n原坐标变为蛇体n+1的目标坐标
sold_x = old_x;
sold_y = old_y;
}
}
function aside(snHead){
//边界监测
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>
