初试javascript :贪吃蛇啊

原创 2003年10月14日 00:57:00

好久没接触javascript,近日看了看,试试手

界面是参考 lxx8402的俄罗斯方块方法,觉得不错,借用了谢谢,不要P我

原码如下,写的仓促,也没有放积分,参数可以自己修改前面的默认值,

初次发布,恳请交流指教~~~*_*:

tcs.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<STYLE>
.btnup{
         border-left:solid #ffffff 1px;
         border-top:solid #ffffff 1px;
         border-right:solid #828486 1px;
         border-bottom:solid #828486 1px;
   font-size: 9pt;
   cursor:default
        }
tr{
  font-family:"宋体";
  font-size: 9pt;
  cursor: default
}
</STYLE>
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
var row = 25,col = 25,size=16;
var delay = 300;//移动延迟
var paused = false;
var end = false
var TimerID;
var s = new snake();
var n = new nut();
var nutad = new Array();
nutad[0] = -1;
nutad[1] = -1;
var Color = new Array(5);
Color[0] = "#d0d0d0";
Color[1] = "red";
Color[2] = "green"
Color[3] = "blue";
Color[4] = "yellow";
var move_direction = new Array();
var curr_direction = new Array();
move_direction[0] = 1;
move_direction[1] = 0;

//========================================
//定义果实
function nut()
{
 this.x = -1;
 this.y = -1;
}

function nut_show()
{
 if (this.x<0 || this.y < 0 )
  return;
 obj = document.all("Main" + this.x + "#" + this.y);
 obj.style.background = Color[2];
}

function nut_create()
{
 var inx = -1;
 var iny = -1;
 for(;;)
 {
  var cur = true;
  inx = Math.round(Math.random() * (row-1));
  iny = Math.round(Math.random() * (col-1));
  for (var i = 0; i<s.items.length ; i++)
  {
   if (s.items[i].x == inx && s.items[i].y == iny)
   {
    cur = false;
    break;
   }
  }
  if (cur)
  {
   break;
  }
 }
 this.x = inx;
 this.y = iny;
 nutad[0] = inx;
 nutad[1] = iny;
 this.show();
}

function nut_eated()
{
 if (this.x<0 || this.y < 0)
  return;
 obj = document.all("Main" + this.x + "#" + this.y);
 obj.style.background = Color[0];
}
nut.prototype.create = nut_create;
nut.prototype.show = nut_show;
nut.prototype.eated = nut_eated;

//========================================
//定义蛇体
function snake()
{
 this.items = new Array();
}

function snake_eat(nt)
{
 var s_length = this.items.length;
 this.items[s_length] = nt;
}

function snake_move(dir)
{
 this.destroy();
 var y = this.items[0].y;
 var x = this.items[0].x;
 var nx = x + dir[1];
 var ny = y + dir[0];
 if (nx <0 || nx >= row || ny <0 || ny >= col || crossed(nx,ny))
 {
  end = true;
  return;
 }
 caneat(nx,ny);
 for (var i = this.items.length-1 ; i>=0 ; i --)
 {

  if (i != 0)
  {
   this.items[i].move(this.items[i-1].x,this.items[i-1].y);
  }
  else
  {
   this.items[i].move(nx,ny);   
  }
 }
 this.reload();
}

function caneat(nx,ny)
{
 if (nx == nutad[0] && ny == nutad[1])
 {
  var lst = s.items[s.items.length-1];
  var nd = new snakeNode(lst.x,lst.y);
  s.eat(nd);
  n.eated();
  n.create();
 }

}
//禁止穿越自身节点
function crossed( nx,  ny )
{
 for (var i = 0; i<s.items.length; i++)
 {
  if (s.items[i].x == nx && s.items[i].y == ny)
  {
   return true;
  }
 }
 return false;
}

function snake_reload()
{
 for (var i = 0 ; i<this.items.length ; i ++)
 {
  var curNode = this.items[i];
  obj = document.all("Main" + curNode.x + "#" + curNode.y);
  obj.style.background = Color[1];
 }
}

function snake_destroy()
{
 for (var i = 0 ; i<this.items.length ; i ++)
 {
  var curNode = this.items[i];
  obj = document.all("Main" + curNode.x + "#" + curNode.y);
  obj.style.background = Color[0];
 }
}

function snake_clear()
{
 this.destroy();
 this.items = new Array();
}

snake.prototype.eat = snake_eat;
snake.prototype.move = snake_move;
snake.prototype.reload = snake_reload;
snake.prototype.destroy = snake_destroy;
snake.prototype.clear = snake_clear;

//蛇体节点
function snakeNode(x,y)
{
 this.id = 0;//编号
 this.x = x;//坐标X
 this.y = y;//坐标Y
 this.color = "#000000";
}

function snakeNode_setC(d_color)
{
 this.color = d_color;
}

function snakeNode_move(dx,dy)
{
 this.x = dx;
 this.y = dy;
}

snakeNode.prototype.setColor = snakeNode_setC ;
snakeNode.prototype.move = snakeNode_move ;

//========================================
//程序界面
//初始化主控制区
function DrawArea(row,col,name){
 var s = "<TABLE BORDER=1 cellspacing=0 cellpadding=1 bgcolor=" + Color[0] + ">";
 for(var i=0; i<row; i++){
  s = s + "<TR Height=" + size + ">";
  for(var j=0; j<col; j++){
   var id = name + i + "#" + j;
   s = s + "<TD Width=" + size + " class=btnup id=" + id;
   s = s + " style=/"background:" + Color[0] + "/">&nbsp;</TD>"
  }
  s = s + "</TR>";
 }
 s = s + "</TABLE>";
 return s;
}

//初始化
function Init(){
 MainArea.innerHTML = DrawArea(row,col,'Main');
}

//==================================
//程序控制区,用来接收输入、定义控制方法
//控制输入
function keyDown(){
 switch(event.keyCode)
 {
  case 37:
   if (curr_direction[0] != -1)
   {
   move_direction[0] = -1;
   move_direction[1] = 0;
   }
   break;
  case 38:
   if (curr_direction[1] != -1)
   {
   move_direction[0] = 0;
   move_direction[1] = -1;
   }
   break;
  case 39:
   if (curr_direction[0] != 1)
   {
   move_direction[0] = 1;
   move_direction[1] = 0;
   }
   break;
  case 40:
   if (curr_direction[1] != 1)
   {
   move_direction[0] = 0;
   move_direction[1] = 1;
   }
   break;
 }
}

function Begin()
{
 end = false;
 paused = false;
 s.clear();
 for (var i = 8; i >=0 ; i--)
 {
  sn = new snakeNode(0,i);
  s.eat(sn);
 }
 n.eated();
 n.create();
 move_direction[0] = 1;
 move_direction[1] = 0;
 curr_direction[1] = s.items[1].x - s.items[0].x;
 curr_direction[0] = s.items[1].y - s.items[0].y;
 Start();
}

//启动开关
function Start()
{
 if (end)
 {
  s.reload();
  alert("挂了!");
  return;
 }
 window.clearInterval(TimerID);
 TimerID = window.setInterval("Run()",delay);
}

//运行主体
var d = true;
function Run(){
 if(paused) return;
 if(true){
  window.clearInterval(TimerID);
  s.move(move_direction);
  curr_direction[1] = s.items[1].x - s.items[0].x;
  curr_direction[0] = s.items[1].y - s.items[0].y;
  Start();
 }
 }

//暂停开关
function Pause()
{
 if (paused)
 {
  paused = false;
  if (!end)
  {
   Run();
  }
 }
 else
 {
  paused = true;
 }
}

//结束
function Over()
{
 end = true;
}
//-->
</SCRIPT>
<BODY BGCOLOR="#FFFFFF" onload="Init()" onkeydown="keyDown()" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<TABLE border="0" cellspacing="0" cellpadding="0" align="center" width="80%">
  <TR>
<TR valign="top" width="80%">
 <TD><SPAN ID="MainArea"></SPAN></TD>
 <TD align="center">
  <BUTTON ID="start" onclick="Begin()">Start</BUTTON><br>
  <BUTTON ID="pause" onclick="Pause()">pause</BUTTON><br>
  <BUTTON ID="over" onclick="Over()">End</BUTTON><br>
 </TD>
</TR>
</TABLE>
</BODY>
</HTML>

javascript--贪食蛇(完整版-逻辑思路)

逻辑思路: 创建表格,目的画线分割创建地图div,让蛇在上面移动创建所有的块,蛇头、身体、食物 创建的蛇头、身体、食物div,添加到地图中蛇头、身体、食物随机产生坐标设置蛇头的初始方向设置...
  • u012054869
  • u012054869
  • 2016年06月22日 15:21
  • 1435

如何用javascript写一个贪吃蛇

我原来用C语言,借助curses库实现了linux 终端下的贪吃蛇游戏。 这个javascript版本的贪吃蛇是http://www.veryhuo.com/game/tanchishe.html ...
  • wusuopuBUPT
  • wusuopuBUPT
  • 2014年03月26日 17:59
  • 1964

javascript之【贪吃蛇系列】第一弹:简单的贪吃蛇实现

参考博客:http://blog.csdn.net/sunxing007/article/details/4187038 以上博客是参考,毕竟第一次做,真让自己盲人摸象做不出来。 不过我在其上做了...
  • u010800530
  • u010800530
  • 2014年07月27日 19:11
  • 2336

【JavaScript】贪吃蛇

看起来好像很复杂的贪吃蛇,到底是怎么用JavaScript去实现的? 其实你只要会用setInterval去现实一个时钟,会使用JavaScript的键盘响应事件,会使用JavaScript去操作ht...
  • yongh701
  • yongh701
  • 2014年11月17日 14:41
  • 1650

js开发实现简单贪吃蛇游戏(20行代码)

曾经诺基亚的贪吃蛇风靡一时,在游戏匮乏的年代,用java实现太难,现在网页制作20行代码就做成一个简单的demo了,时代在进步啊 代码: 01 02 html>...
  • hj7jay
  • hj7jay
  • 2016年03月30日 09:45
  • 46245

超级简单的纯js 贪吃蛇,看一遍你也会写

继上午发布了一个,象棋小游戏,下午没事,又写了一个贪吃蛇,同样是利用canvas 画布完成. 贪吃蛇逻辑稍为比象棋复杂一些,需要加速,有不同的关卡设置,有食物,有障碍物     ...
  • long5305350
  • long5305350
  • 2015年03月04日 19:01
  • 2060

JS版本_贪吃蛇

用JS实现了贪吃蛇  有兴趣的可以增加计分功能....
  • CrazyCat8023
  • CrazyCat8023
  • 2015年11月29日 23:48
  • 384

利用Canvas+js实现贪吃蛇(1)

今天想写一个贪吃蛇的页面,于是就选择了Canvs,不过只实现蛇身的长度是1的情况,对于蛇身大于2的情况,我还没想出来 如何绘制蛇,等查资料后,再来实现 下面是源码部分: html: ...
  • u013742084
  • u013742084
  • 2016年06月12日 21:04
  • 1841

贪吃蛇游戏总结

初次接触C#,以贪吃蛇游戏揭开帷幕。    贪吃蛇游戏的设计主要涉及到蛇的产生、消除与显示,豆的产生、消除与显示,以及分数的增加,地板的显示等等。为此程序的设计包括以下几个方面:    (1)新建...
  • linxierr
  • linxierr
  • 2013年10月25日 16:05
  • 700

C语言-手把手教你写贪吃蛇AI(中)

1. 目标 这一部分主要是讲解编写贪吃蛇AI所需要用到的算法基础。 2. 问题分析 贪吃蛇AI说白了就是寻找一条从蛇头到蛇尾的一条最短路径,同时这条路径需要避开障碍物,这里仅有的障碍就是蛇身。而A...
  • kuweicai
  • kuweicai
  • 2017年03月28日 22:19
  • 2178
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:初试javascript :贪吃蛇啊
举报原因:
原因补充:

(最多只允许输入30个字)