js贪吃蛇小游戏

2022-05-24 08:58:52   文档大全网     [ 字体: ] [ 阅读: ]

#文档大全网# 导语】以下是®文档大全网的小编为您整理的《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.wddqxz.cn/ae01b6fd77eeaeaad1f34693daef5ef7bb0d127b.html

相关推荐