以前写的一个面向对象的贪吃蛇游戏

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title> 贪吃蛇 </title>
<style>
#mapbox {
  font-family: 宋体; font-size: 17px; line-height:100%;
  height:360; width:430;
}
</style>

<script language="JavaScript">
/
//     贪吃蛇      //
//   OO+TextBox    //
//  程序作者:海浪  //
/

var map;
var gott;

function play()
{
  clearInterval(gott);
  map = new mapClass(25,20);
  document.onkeydown = keydown;
  gott = setInterval("map.snake.go()",150);
}

function keydown(e)
{
  e = e||event;
  switch (e.keyCode)
  {
    case 38: map.snake.refx(0); break;
    case 39: map.snake.refx(1); break;
    case 40: map.snake.refx(2); break;
    case 37: map.snake.refx(3); break;
    case 17: map.snake.stoporrun(); break;
  }
}



function mapClass(x,y)
{
  this.x = x;
  this.y = y;
  this.sq = "■";
  this.sk = " ";
  this.marr = [];
  for(var iy=0; iy<this.y; iy++)
  {
    this.marr[iy] = [];
    for(var ix=0; ix<this.x; ix++)
      this.marr[iy][ix] = (ix==0||iy==0||ix==this.x-1||iy==this.y-1)?this.sq:this.sk;
  }
  this.snake = new snakeClass(this);
  this.bean = new beanClass(this);
  this.bean.newbean();
  this.bean.addn();
}

mapClass.prototype.write = function()
{
  var str = "";
  for(var ii=0; ii<this.y; ii++)
    str += this.marr[ii].join("")+"<br />";
  document.getElementById("mapbox").innerHTML = str;
}

mapClass.prototype.rexy = function(x,y,s)
{
  var str = s || this.sk;
  this.marr[y][x] = str;
}

mapClass.prototype.jcxy = function(x,y,s)
{
  var str = s || this.sk;
  return this.marr[y][x] == str;
}



function snakeClass(po)
{
  this.parent = po;
  this.mt = "●";
  this.boarr = [];
  this.bolength = 4;
  this.fang = 1;
  this.fangtt = 1;
  this.stop = false;
  this.boarr[0] = this.addbody(3,5);
  this.parent.rexy(this.boarr[0].x,this.boarr[0].y,this.mt);
}

snakeClass.prototype.go = function()
{
  if(this.stop) return;
  this.fang = this.fangtt;
  var x = this.boarr[0].x + [0,1,0,-1][this.fang];
  var y = this.boarr[0].y + [-1,0,1,0][this.fang];
  var chi = this.parent.jcxy(x,y,this.parent.bean.mt);
  if(!this.parent.jcxy(x,y) && !chi)
  {
    clearInterval(gott);
    alert("Game Over!");
    return;
  }
  if(chi)
  {
    this.bolength++;
    this.parent.bean.addn();
    this.parent.bean.newbean();
  }
  this.parent.rexy(x,y,this.mt);
  this.boarr = [].concat(this.addbody(x,y),this.boarr);
  if(this.boarr.length>this.bolength)
  {
    var tb = this.boarr.pop();
    this.parent.rexy(tb.x,tb.y);
  }
  this.parent.write();
}

snakeClass.prototype.addbody = function(x,y)
{
  return { x:x, y:y };
}

snakeClass.prototype.refx = function(n)
{
  if(Math.abs(this.fang-n)!=2)
    this.fangtt=n;
}

snakeClass.prototype.stoporrun = function()
{
  this.stop = !this.stop;
}



function beanClass(po)
{
  this.parent = po;
  this.mt = "◎";
  this.sne = -100;
}

beanClass.prototype.addn = function()
{
  this.sne+=100;
  document.getElementById("fan").innerHTML = this.sne;
}

beanClass.prototype.newbean = function()
{
  var x = Math.floor(Math.random()*(this.parent.x-2))+1;
  var y = Math.floor(Math.random()*(this.parent.y-2))+1;
  if(this.parent.jcxy(x,y))
    this.parent.rexy(x,y,this.mt);
  else
    this.newbean();
}
</script>
</head>

<body>
<center>
<h2>贪吃蛇</h2><hr>
<div id="mapbox"></div>
<input type="button" value="开始" οnclick="play()"> 得分:<span id="fan"></span>
<hr>
程序作者:海浪
</center>
</body>
</html>


以前写的一个面向对象的贪吃蛇游戏,修改了一下,以适应新的浏览器

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
利用面向对象的方法,实现贪吃蛇。 1. 利用面向对象的思想实现——一个食物对象、一个蛇对象、一个游戏总控对象。 2. 在使用××.prototype= {}重原型对象的时候,一定要加上一句constructor:该对象。不然会造成实例化出来的实例的constructor为object。 3. 在underscore中,使用_.random(a,b)即可获得a-b中的一个随机数。 4. 在求食物的随机位置的时候,用到了panel.clientHeight/this.height - 1) * this.height。 原理是使用盒子的高度/小球的高度,可以算得最多放多少个小球。因为要控制小球不能超过边界,所以总数量要减去1,数量×高度即为随机位置的最大值。 5. 在蛇对象中,用body数组存放蛇身体每一个部分对象。蛇的绘制过程就是遍历body,在面板上绘制。 6. 蛇的移动分为两部分。 ① 蛇节移动到前一个蛇节的位置。直到蛇头后一个蛇节移动到蛇头的位置。 ② 根据direction判断蛇头如何移动。 注意:在游戏绘制的过程中,界面的每一次绘制都要**删除**之前的绘制,不然会叠加到一起。 7. 在蛇的闭包中建一个局部数组,存储蛇对象,可以更加方便的删除操作。 8. 只有在原型对象中的方法和属性,外界是可以调用的。 9. 蛇的移动(动画)必然需要定时器协助。定时器的时间,即象征着刷新速度,也就是难度。 10. this所在的函数在哪一个对象中,this就指向谁。单独一个函数的时候,如果调用之前对象的this,需要备份指针(将对象的this赋值给另一个变量)。 11. JavaScript原生的键盘按下事件(keydown) 中,事件有一个keyCode属性,其值代表按下的键。其中:37—left、38—top、39—right、40—bottom。 12. 边界控制。通过判断蛇头与最大X和Y的关系,判断是否碰到边界。 13. confirm()方法用于显示一个带有指定消息和确认及取消按钮的对话框。 14. window.location.reload(); 重新加载当前文档 15. window.close() 方法用于关闭浏览器窗口。 16. 与食物的碰撞检测:如果蛇头和食物坐标重叠,将蛇尾添加到body中。并重新绘制一个食物点,将之前的食物删掉。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

天际的海浪

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值