js实现贪吃蛇⼩游戏代码（源码）<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>贪吃蛇游戏</title>
</head>
<script type="text/javascript">
//定义⼀个点对象
function Point(x,y){
this.x=x;
this.y=y;
return x;
}
return y;
}
}
//定义⽅向变量
var startDir=null;//蛇移动⽅向
var food;//定义存储⾷物节点的数组
var snakeloc;//定义⼀个存储蛇⾝节点的数组
/
/初始化地图
function initMap() {
var map = ElementById("map");//到跟节点
for (var i = 0; i < 20; i++) {
var tr = ateElement("tr");//创建节点
for (var j = 0; j < 20; j++) {
var td = ateElement("td");//创建节点
td.setAttribute("id", "td" + i +"_"+ j);//设置id值 ⽅便后续的查 设置值
tr.appendChild(td);//添加节点
}
map.appendChild(tr);//加⼊值
}
}
//初始化蛇
function initSnake(){
snakeloc=[];
var x=10;//设置蛇的x节点 中点
var y=10;//设置蛇的y节点 中点
var dir;//保存蛇运动的⽅向
var ElementById("td"+x+"_"+y);
var ElementById("td"+x+"_"+(y-1));
var ElementById("td"+x+"_"+(y+1));
/
/设置点的值
var point1=new Point(x,y-1);
var point2=new Point(x,y);
var point3=new Point(x,y+1);
//将点对象放⼊数组中去
snakeloc.push(point3);
snakeloc.push(point2);
snakeloc.push(point1);
//设置颜⾊
tdr.style.background="red";//设置节点为红⾊
tdm.style.background="blue";//设置节点颜⾊
tdl.style.background="blue";//设置节点颜⾊
}
//初始化⾷物
function initFood(){
var foodX;
var foodY;
var flag=0;//定义次数
while(true){
foodX = Math.floor(Math.random() * 20);
foodY = Math.floor(Math.random() * 20);
for(var i=0;i<snakeloc.length;i++){
/
/如果不和数组中的所有点都不重合，说明这个点可以⽤
if(snakeloc[i].getX()==foodX&&snakeloc[i].getY()==foodY){                        flag++;
break;
}
}
if(flag==0) break;
}
food=[ ];
food.push(new Point(foodX,foodY));//将⾷物坐标放⼊数组中去                var ElementById("td"+foodX+"_"+foodY);
td.style.background="black";
}
//监听蛇的移动
function snakeMove(){
document.οnkeydοwn=function(e){
if(e.keyCode>=37&& e.keyCode<=40){
var currentDir= e.keyCode;
//看看是否要改变⽅向 如果没有这⼀步可能会出现头和⾝体重合
if(startDir-currentDir!=2&¤tDir-startDir!=2){
startDir=currentDir;
}
switch(startDir){
case 37:moveLeft();break;
case 38:moveUp();break;
case 39:moveRight();break;
case 40:moveDown();break;
default:break;
}
}
if(eatFood()){
initFood();//就再创建⼀个⾷物
}else{
clearSnakeEnd();//清除蛇尾
}
/
/如果撞墙或者咬到⾃⼰
if(gameOver()){
alert("Game Over!");
return;
}
updateSnake();//调⽤显⽰蛇
}
}
//向上移动
function moveUp(){
var oldHead=snakeloc[0];//旧蛇头位置
/
/更新蛇坐标
for (var i = snakeloc.length ; i > 0; i--) {
snakeloc[i] = snakeloc[i - 1];
}
snakeloc[0]=new X()-Y());
}
//向下移动
function moveDown(){
var oldHead=snakeloc[0];//旧蛇头位置
//更新蛇坐标
for (var i = snakeloc.length ; i > 0; i--) {
snakeloc[i] = snakeloc[i - 1];
}
snakeloc[0]=new X()+Y());
}
//向左移动
function moveLeft(){
var oldHead=snakeloc[0];//旧蛇头位置
//更新蛇
for (var i = snakeloc.length ; i > 0; i--) {
snakeloc[i] = snakeloc[i - 1];
}
snakeloc[0]=new X(),Y()-1);
}
//向右移动
function moveRight(){
var oldHead=snakeloc[0];//旧蛇头位置
//更新蛇
for (var i = snakeloc.length ; i > 0; i--) {
snakeloc[i] = snakeloc[i - 1];
}
snakeloc[0]=new X(),Y()+1);
}
/
/消除蛇尾 即将它的颜⾊消掉
function clearSnakeEnd(){
var end=snakeloc.pop();//清楚蛇尾 返回蛇尾坐标
var ElementById("td"+X()+"_"+Y());
td.style.background="";//设置为⼀个字符串 即没有颜⾊
}
//更新蛇 显⽰蛇
function updateSnake(){
for(var i=1;i<snakeloc.length;i++){
var ElementById("td"+snakeloc[i].getX()+"_"+snakeloc[i].getY());            td.style.background="blue";
}
var ElementById("td"+snakeloc[0].getX()+"_"+snakeloc[0].getY());        th.style.background="red";
}
//检测蛇是否吃到⾷物
function eatFood(){
var foodX=food[0].getX();
var foodY=food[0].getY();
var headX=snakeloc[0].getX();
var headY=snakeloc[0].getY();
if(foodX==headX&&foodY==headY){
return true;
}
return false;
}
//游戏结束情况
function gameOver(){
//死的第⼀种情况 撞墙⽽死
var headX=snakeloc[0].getX();
var headY=snakeloc[0].getY();
if(headY>19||headY<0||headX<0||headX>19){
return true;
}
//死的第⼆种情况 咬死⾃⼰
for(var i=1;i<snakeloc.length;i++){
var ele=snakeloc[i];
X()==snakeloc[0].getX()&&Y()==snakeloc[0].getY()){
return true;
}
}
return false;
}
</script>
<body>
<table id="map" border="3" align="center" width="500px" height="500px" >        <caption >贪吃蛇游戏</caption>
</table>
</body>
<script type="text/javascript">
snakeMove();//移动⽅法的调⽤贪吃蛇的编程代码
initMap();//初始化地图
initSnake();//初始化蛇
initFood();//初始化⾷物
snakeMove();//移动
</script>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。