接触js一周时随手写的贪吃蛇，然后就没再深入学习了，现在要重新学起

废话不多说，下面是源码，希望大牛们指出问题

  <html>
  <head>
  <meta charset="utf-8"/>
  <title>地图</title>
  <style>
  #mainDiv
  {
  width: 40%;
  margin: 40px auto;
  }
  .tableStyle
  {
  border-style: solid;
  border-color: black;
  border-width: thin;
  }
  .divStyle
  {
  color: black;
  background-color: black;
  overflow: hidden;
  }
  .snackStyle
  {
  color: crimson;
  background-color: crimson;
  overflow: hidden;
  }
  .headStyle
  {
  color: red;
  background-color: red;
  overflow: hidden;
  }
  .frogStyle
  {
  color: green;
  background-color: green;
  overflow: hidden;
  }
  .borderStyle
  {
  color: darkred;
  background-color: darkred;
  overflow: hidden;
  }
  </style>
  <script type="text/javascript">
  /*方向，1：向右、2：向下、3：向左、4：向上*/
  var direction=1;
  /*地图行列大小，以及单元格像素值*/
  var x,y,w,h;
  /*青蛙、头部、尾部单元格*/
  var frog,head,tail;
  /*速度*/
  var speed;
  /*计数器*/
  var count;
  /*初始化地图行列大小*/
  function getXY()
  {
  x=y=parseInt(document.getElementById("x").value.trim());
  w=h=550/x;
  }
  /*初始化地图*/
  function terrainFactory()
  {
  var div=document.getElementById("mainDiv");
  var table=document.createElement("table");
  table.setAttribute("cellspacing","0px");
  table.setAttribute("cellpadding","0px");
  table.className="tableStyle";
  for(var i=0;i<x;i++)
  {
  var tr=document.createElement("tr");
  for(var j=0;j<y;j++)
  {
  var td=document.createElement("td");
  var divChild=document.createElement("div");
  /*divChild.style.width="30px";
  divChild.style.height="30px";
  divChild.style.backgroundColor="red";*/
  if(i==0)
  {
  var name=""+j;
  }
  else
  {
  var name=""+(i*y+j);
  }
  divChild.innerHTML=name;
  divChild.setAttribute("id",name);
  divChild.setAttribute("style","width:"+w+"px;height:"+h+"px");
  divChild.className="divStyle";
  td.appendChild(divChild);
  tr.appendChild(td);
  }
  table.appendChild(tr);
  }
  div.appendChild(table);
  addBorder();
  }
  /*添加边框*/
  function addBorder()
  {
  var div=document.getElementById("mainDiv");
  var table=div.firstElementChild;
  /*第一行的td*/
  var tdFirstItems=table.firstElementChild.childNodes;
  /*更改第一行所有的边框*/
  for(var i=0;i<tdFirstItems.length;i++)
  {
  tdFirstItems[i].firstElementChild.className="borderStyle";
  }
  /*最后一行的td*/
  var tdLastItems=table.lastElementChild.childNodes;
  for(var i=0;i<tdLastItems.length;i++)
  {
  tdLastItems[i].firstElementChild.className="borderStyle";
  }
  /*左边和右边*/
  var trItems=table.childNodes;
  for(var i=1;i<trItems.length-1;i++)
  {
  /*左边框*/ trItems[i].firstElementChild.firstElementChild.className="borderStyle";
  /*右边框*/
  trItems[i].lastElementChild.firstElementChild.className="borderStyle";
  }
  }
  /*新建小蛇*/
  function snakeFactory()
  {
  direction=Math.floor(Math.random()*4)+1;
  var headNum=randomLocation(x-4,3,y-4,3);
  head=document.getElementById(""+headNum);
  head.className="headStyle";
  head.innerHTML=headNum;
  switch(direction)
  {
  /*向右*/
  case 1:
  var temp=document.getElementById(""+(headNum-1));
  temp.className="snackStyle";
  temp.innerHTML=headNum;
  tail=document.getElementById(""+(headNum-2));
  tail.className="snackStyle";
  tail.innerHTML=headNum-1;
  break;
  /*向下*/
  case 2:
  var temp=document.getElementById(""+(headNum-y));
  temp.className="snackStyle";
  temp.innerHTML=headNum;
  tail=document.getElementById(""+(headNum-2*y));
  tail.className="snackStyle";
  tail.innerHTML=headNum-y;
  break;
  /*向左*/
  case 3:
  var temp=document.getElementById(""+(headNum+1));
  temp.className="snackStyle";
  temp.innerHTML=headNum;
  tail=document.getElementById(""+(headNum+2));
  tail.className="snackStyle";
  tail.innerHTML=headNum+1;
  break;
  /*向上*/
  case 4:
  var temp=document.getElementById(""+(headNum+y));
  temp.className="snackStyle";
  temp.innerHTML=headNum;
  tail=document.getElementById(""+(headNum+2*y));
  tail.className="snackStyle";
  tail.innerHTML=headNum+y;
  break;
  }
  }
  /*新建青蛙*/
  function frogFactory()
  {
  var frogNum=randomLocation(x-2,1,y-2,1);
  frog=document.getElementById(""+frogNum);
  if(frog.className=="divStyle")
  {
  frog.className="frogStyle";
  }
  else
  {
  frogFactory();
  }
  }
  /*移动算法*/
  /*方向，1：向右、2：向下、3：向左、4：向上*/
  function move(num)
  {
  document.getElementById("model").nextElementSibling.innerHTML="速度为："+speed;
  switch(direction)
  {
  case 1:
  var headlocation=parseInt(head.innerHTML);
  /*吃青蛙*/
  if(document.getElementById(headlocation+1+"").className=="frogStyle")
  {
  eatFrog(headlocation+1);
  break;
  }
  /*撞墙或者撞到自己了*/ if(document.getElementById(headlocation+1+"").className=="borderStyle"||document.getElementById(headlocation+1+"").className=="snackStyle")
  {
  location.reload();
  }
  else
  {
  moveDetail(headlocation+1);
  }
  break;
  case 2:
  var headlocation=parseInt(head.innerHTML);
  /*吃青蛙*/
  if(document.getElementById(headlocation+y+"").className=="frogStyle")
  {
  eatFrog(headlocation+y);
  break;
  }
   
  /*撞墙或者撞到自己了*/ if(document.getElementById(headlocation+y+"").className=="borderStyle"||document.getElementById(headlocation+y+"").className=="snackStyle")
  {
  location.reload();
  }
  else
  {
  moveDetail(headlocation+y);
  }
  break;
  case 3:
  var headlocation=parseInt(head.innerHTML);
  /*吃青蛙*/
  if(document.getElementById(headlocation-1+"").className=="frogStyle")
  {
  eatFrog(headlocation-1);
  break;
  }
  /*撞墙或者撞到自己了*/
  if(document.getElementById(headlocation-1+"").className=="borderStyle"||document.getElementById(headlocation-1+"").className=="snackStyle")
  {
  location.reload();
  }
  else
  {
  moveDetail(headlocation-1);
  }
  break;
  case 4:
  var headlocation=parseInt(head.innerHTML);
  /*吃青蛙*/
  if(document.getElementById(headlocation-y+"").className=="frogStyle")
  {
  eatFrog(headlocation-y);
  break;
  }
  /*撞墙或者撞到自己了*/
  if(document.getElementById(headlocation-y+"").className=="borderStyle"||document.getElementById(headlocation-y+"").className=="snackStyle")
  {
  alert("GAME OVER!GG思密达!");
  location.reload();
  }
  else
  {
  moveDetail(headlocation-y);
  }
  break;
  }
  if(num==1)
  {
  count++;
  if(count%10==0)
  {
  speed-=10;
  }
  setTimeout("move(1)",speed);
  }
  else
  {
  setTimeout("move(0)",speed);
  }
  }
  /*吃青蛙*/
  function eatFrog(intLoction)
  {
  head.className="snackStyle";
  head.innerHTML=intLoction;
  head=document.getElementById(intLoction+"");
  head.className="headStyle";
  head.innerHTML=intLoction;
  frogFactory();
  }
  /*移动细节*/
  function moveDetail(intLoction)
  {
  head.className="snackStyle";
  head.innerHTML=intLoction;
  head=document.getElementById(intLoction+"");
  head.className="headStyle";
  head.innerHTML=intLoction;
  tail.className="divStyle";
  tail=document.getElementById(tail.innerHTML);
  }
  /*随机位置*/
  function randomLocation(x_big,x_small,y_big,y_small)
  {
  var smallNum=Math.floor(Math.random()*(y_big-y_small+1))+y_small;
  var bigNum=Math.floor(Math.random()*(x_big-x_small+1))+x_small;
  return y*bigNum+smallNum;
  }
  /*键盘监听*/
  /*方向，1：向右、2：向下、3：向左、4：向上*/
  function listenKey(event)
  {
  var value=event.keyCode;
  switch(value)
  {
  case 87:
  case 38:
  if(direction==1||direction==3)
  {direction=4;}
  break;
  case 65:
  case 37:
  if(direction==2||direction==4)
  {direction=3;}
  break;
  case 83:
  case 40:
  if(direction==1||direction==3)
  {direction=2;}
  break;
  case 68:
  case 39:
  if(direction==2||direction==4)
  {direction=1;}
  break;
  }
  }
  /*开始游戏*/
  function start(obj)
  {
  obj.setAttribute("disabled","disabled");
  getXY();
  terrainFactory();
  snakeFactory();
  frogFactory();
  if(document.getElementById("model").value.trim()=="常规模式")
  {
  speed=500;
  move(0);
  }
  else
  {
  speed=500;
  count=0;
  move(1);
  }
  }
  </script>
  </head>
  <body onkeyup="listenKey(event)">
  <div>
  <label>设置地图的边长：</label>
  <select id="x">
  <option>10</option>
  <option>11</option>
  <option>22</option>
  <option>25</option>
  <option>50</option>
  <option>55</option>
  <option>110</option>
  </select>
  <select id="model">
  <option>常规模式</option>
  <option>加速模式</option>
  </select>
  <label></label>
  <input type="button" value="开始游戏" onclick="start(this)" />
  </div>
  <div id="mainDiv">
  </div>
  </body>
  </html>
时间： 2024-10-11 01:38:54

接触js一周时随手写的贪吃蛇，然后就没再深入学习了，现在要重新学起的相关文章

原生js写的贪吃蛇网页版游戏

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>原生js写的贪吃蛇网页版游戏</title> </head> <body><div><A href="http://www.999jiujiu.com/">h

JavaScript与html5写的贪吃蛇完整代码

JavaScript与html5写的贪吃蛇完整代码 查看运行效果可访问http://www.codesocang.com/texiao/youxitexiao/2014/0402/7045.html# <!doctype html><html lang="en"><head><meta charset="utf-8"><title>js网页版的贪吃蛇游戏</title><style typ

如何用Python写一个贪吃蛇AI

前言 这两天在网上看到一张让人涨姿势的图片,图片中展示的是贪吃蛇游戏, 估计大部分人都玩过.但如果仅仅是贪吃蛇游戏,那么它就没有什么让人涨姿势的地方了. 问题的关键在于,图片中的贪吃蛇真的很贪吃XD,它把矩形中出现的食物吃了个遍, 然后华丽丽地把整个矩形填满,真心是看得赏心悦目.作为一个CSer, 第一个想到的是,这东西是写程序实现的(因为,一般人干不出这事. 果断是要让程序来干的)第二个想到的是,写程序该如何实现,该用什么算法? 既然开始想了,就开始做.因为Talk is cheap,要sho

使用Python写一个贪吃蛇

参考代码http://blog.csdn.net/leepwang/article/details/7640880 我在程序中加入了分数显示,三种特殊食物,将贪吃蛇的游戏逻辑写到了SnakeGame的类中,而不是在Snake类中. 特殊食物: 1.绿色:普通,吃了增加体型 2.红色:吃了减少体型 3.金色:吃了回到最初体型 4.变色食物:吃了会根据食物颜色改变蛇的颜色 #coding=UTF-8from Tkinter import *from random import randintimpo

一个用Jquery+HTML写的贪吃蛇半成品

一直想用JQUERY+HTML+CSS完成一个游戏,就从经典的贪吃蛇入手了.直接上码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <

我也来写一个贪吃蛇

最近工作量好大,好忙,趁周末练练手,花了近3小时写了一个贪吃蛇. 实现贪吃蛇的功能很简单. 我就分享一下我实现贪吃蛇看起来在界面上移动并且吃食物长大的原理. 我建了一个数组list_arr[]来保存贪吃蛇所在的每个格子的id,并建了2个全局变量x和y,监听贪吃蛇头的位置,当然x和y也是贪吃蛇的起始位置. 那么贪吃蛇移动实际上就是每次从list_arr[]里取出第一个元素(list_arr.shift()方法),取出的第一个元素也可以认为是贪吃蛇的尾巴,然后把这个元素(也就是格子的id)代表的格子

用Python写一个贪吃蛇

最近在学Python,想做点什么来练练手,命令行的贪吃蛇一般是C的练手项目,但是一时之间找不到别的,就先做个贪吃蛇来练练简单的语法. 由于Python监听键盘很麻烦,没有C语言的kbhit(),所以这条贪吃蛇不会自己动,运行效果如下: 要求:用#表示边框,用*表示食物,o表示蛇的身体,O表示蛇头,使用wsad来移动 Python版本:3.6.1 系统环境:Win10 类: board:棋盘,也就是游戏区域 snake:贪吃蛇,通过记录身体每个点来记录蛇的状态 game:游戏类 本来还想要个foo

用Js写的贪吃蛇游戏

<!doctype html> <html> <head><title>snake</title> <script> function Snake(canvas){ this.canvas = canvas; this.length = 0; this.direction = 'down'; this.body = [], this.head = function(){ return this.length == 0 ? null :

使用Html5+JS做的贪吃蛇小游戏

学习了Html5的Canvas的使用,和JS创建对象,做了一个贪吃蛇小游戏,来巩固JS面向对象编程和Canvas的用法. Node.js 1 /** 2 * 格子类,组成贪吃蛇和舞台 3 */ 4 function Node(x,y){ 5 this.x=x; 6 this.y=y; 7 /** 8 * 比较两个格子是否重合 9 */ 10 this.equals=function(x,y){ 11 return this.x==x&&this.y==y; 12 } 13 } Snake.