【#第一文档网# 导语】以下是®第一文档网的小编为您整理的《js贪吃蛇小游戏》，欢迎阅读！
1 贪吃蛇分析 第一步：生成地图（二维数组） 第二步：贪吃蛇数组 x(1,2,3,4,5),y(1,1,1,1,1) 第三步：食物坐标 fx=13,fy=5 第四步：控制按钮，上下左右kcode 37,38,39.40 第五步：蛇的显示和擦除(先擦除，再移动，再显示) 第六步：判断游戏结束条件（1.过关，2.OVER） 第七步：吃完食物，蛇身长度+1 贪吃蛇项目 DOCTYPE html >
<html xmlns="#" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>title> <style type="text/css"> *{margin: 0px; padding: 0px;} .dia
{margin :1px;width:18px;height:18px;background:red;float: left;} .old
{margin :1px;width:18px;height:18px;background:white;float: left;} .food
{margin :1px;width:18px;height:18px;background:blue;float: left;} style> <script type="text/javascript">
var mapAry = new Array(); //地图数组 var maxX = 20; var maxY = 40;
//最大行数 //最大列数
var snakeX = [1,1,1,1,1]; //蛇的横坐标 var snakeY = [1,2,3,4,5]; //蛇的纵坐标 var foodX; var foodY;
//食物横坐标 //食物纵坐标
var kcode=39; var s;
//按键值 左37，上38，右
//自动移动事件
39，下40
//创建单个方块
function CreateDiv(obj,css){ }
var d = document.createElement(obj);
//创建一个
DIV元素
d.className = css; //设置样式
document.getElementById("main").appendChild(d); return d;
//游戏初始化
function Show(){
//初始化一个40x20的地图
for (var i=0; i<maxX; i++) { mapAry[i] = new Array(); for (var j=0; j<maxY; j++) { mapAry[i][j] = }
}
CreateDiv("div","old"); "dia";
}
//初始化蛇身
for (var i=0; i<snakeX.length; i++) { mapAry[snakeX[i]][snakeY[i]].className = }
//蛇开始移动
s = setInterval("sMove()", 200);
//初始化第一个食物 CreateFood();
//响应上下左右按键
document.onkeydown = keyDown;
//生成食物
function CreateFood(){ foodX = parseInt(window.Math.random()*maxX); foodY = parseInt(window.Math.random()*maxX);
//判断食物坐标，不能和蛇身重叠 var state = 0;
//食物是否和蛇身重叠的状
态 0.未重叠 1.重叠
do{ foodX = parseInt(window.Math.random()*maxX); foodY = parseInt(window.Math.random()*maxY); for (var i=0; i<snakeX.length; i++) { if(foodX==snakeX[i] && foodY==snakeY[i]){ state = 1; break; } } }while(state==1); // mapAry[foodX][foodY].className = "food"; }
//判断按下的哪个键 function keyDown(){ var k = event.keyCode;
//只允许输入上下左右四个键
if(k== 37 || k== 38 || k== 39 || k== 40){
//判断不能按反方向的键
if(!(kcode==37 && k==39 || kcode==38 && k==40 || kcode==39 && k==37 || kcode==40 && k==38)){ kcode = k; } } } "old"; "dia";
//蛇身擦除
function sReMove(){ for (var i=0; i<snakeX.length; i++) { mapAry[snakeX[i]][snakeY[i]].className = }
}
//蛇身显示
function sDisplay(){ for (var i=0; i<snakeX.length; i++) { mapAry[snakeX[i]][snakeY[i]].className = }
}
//蛇身移动
function sMove(){
//擦除蛇身 sReMove();
//保存蛇身的最后一位的坐标 var x = snakeX[0]; var y = snakeY[0];
//模拟毛毛虫的移动，从脚移动到头(头部不动) for (var i=0; i<snakeX.length-1; i++) { snakeY[i] = snakeY[i+1]; snakeX[i] = snakeX[i+1]; }
//根据kcode判断移动方向，根据方向设置头部的移动 if(kcode==37){ //向左 snakeY[snakeY.length-1]--; }
else if(kcode==38){ //向上 snakeX[snakeX.length-1]--; }
else if(kcode==39){ //向右 snakeY[snakeY.length-1]++; }
else if(kcode==40){ //向下 snakeX[snakeX.length-1]++; }
//判断是否吃到食物 if(EatFood()){
//蛇身数组长度加1
snakeX[snakeX.length] = snakeY[snakeY.length] =
snakeX[snakeX.length-1]; snakeY[snakeY.length-1];
本文来源：https://www.dywdw.cn/ae01b6fd77eeaeaad1f34693daef5ef7bb0d127b.html
下载此文档
搜索文档
阅读：
文档下载
2022-05-24
