JavaScript·JavaScript高级教程 -- 追寻梦想＞编程乐园

JavaScript高级教程 - 第四课

作者： Thau

第七页：你的面向对象的虚拟宠物

　你现在骄傲地拥有了不是一只而是两只虚拟宠物。你的责任就是让它们保持健康。如果它们的健康值低于零, 它们就会死掉。按start 钮可以赋予它们生命.

也许你能猜到, 我并不是个称职的宠物饲养员, 我的可怜的宠物每次还没养大就死掉了。

虽然如此, 这整个都是用对象编出来的。每个宠物都是宠物对象的一个实例。每个宠物具有以下属性：

health健康
happiness快乐
hunger饥饿
age年龄
pet_name宠物的名字
form_number -表单号--宠物所在的HTML表单号。

下列方法能够影响这些属性：

play() - 增加快乐
feed() - 减少饥饿
medicate() - 增加一点健康
makeOlder() - 宠物长大
display() - 在状态框里显示宠物的信息。

把这些记在脑子里, 我们来创建宠物对象。首先我们来写一个构造函数。这里就是最基本的构造函数（即还没有加任何方法的代码）：

function Pet(the_pet_name, the_form_number)
{
  this.age = 0;
  this.hunger = Math.random() * 5;  
          // random number between 0 and 4.99
  this.health = Math.random() * 5 + 1 ;  
          // random number between 1 and 3.99
  this.happiness = Math.random() * 5;
  this.pet_name = the_pet_name;
  this.form_number = the_form_number;
  window.document.forms[the_form_number].pet_name.value = the_pet_name;
}

这个构造函数有两个参数：宠物名字和要显示其信息的表单号。要创建两个宠物, 我们这么做：

  
var pet1 = new Pet("barney",0);
var pet2 = new Pet("betty",1);

我们把构造函数写的能使每个宠物都不一样。用了 Math.random() 方法来产生一个0到1之间的随机数, Math.random()方法并不是完全随机的, 但在这里够用了, 它能保证给每个产生的宠物一个不同的饥饿, 健康和快乐的初始值。宠物的名字从参数传递过来, 年龄则设为0。最后两行设定了宠物使用的表单号, 并把宠物的名字写到相应的文本框去。记住?阂桓鲆趁娴牡谝桓霰淼タ梢员凰饕? window.document.forms[0],第二个可以索引为 window.document.forms[1], 依次类推。

我们已建立好了属性, 现在来看看方法。我并不打算把每个方法都展开讲, 而只把其中几个讲一讲：

function feed() { var meal_quality = Math.random() * 2; this.hunger = this.hunger - meal_quality; if (this.hunger <0) { this.hunger = 0; } this.display(); }

这是一个喂宠物的方法。如果你调用了 pet1.feed()方法,首先它会产生一个0到2之间的数, 然后把饥饿度减去这个数。我们确使饥饿度不小于0, 然后调用显示方法去显示信息。

显示方法的代码如下：

function display() {
  var the_string = "";
  if (this.health < min_health) {
    the_string = this.pet_name + " IS DEAD!";
  } else {
    the_string += "Happiness " + parseInt(this.happiness);
    the_string += ".  Health: " + parseInt(this.health);
    the_string += ".  Hunger: " + parseInt(this.hunger);
    the_string += ".  Age: " + parseInt(this.age);
    the_string += ".";
  }

  window.document.forms[this.form_number].pet_status.value = the_string;
}

This这个方法建立了一个字符串并把它显示到正确的文本框里, 表单号属性保证了状态信息放到合适的文本框。每当我们创建一个宠物, 我们就给它一个表单号 - 第一个宠物的表单号是0, 第二个宠物的表单号是1。使用这种表单号我们知道第一个宠物的状态应放在 window.document.forms[0].pet_status.value, 而第二个宠物的状态应放在window.document.forms [1].pet_status.value. 这个方法里的最后一行根据 this.form_number决定在哪个form放状态信息.

这个方法里的另一个有趣的地方是 parseInt函数. 由于使用了随机数, 象健康和快乐的值可能是 2.738993720. 它们是实数, 但是显得有点长, 所以parseInt函数把小数点后的数给拿掉了, 比如 parseInt(2.738)得到的结果是2。

第三个有趣的方法是makeOlder().它把宠物年龄增加一岁并让宠物更饿一点和更不高兴一点。这个方法通过setTimeout设成每秒被调用一次（我们在第三天的课里曾讲过怎么做的）：

function makeOlder()
{

  var max_hunger = 5;
  var good_happiness = 5; 

  if (this.health > min_health)
  {
      
    this.age +=1;
    this.happiness -= Math.random() * 2;
    this.hunger += Math.random() * 2;
    if (this.hunger > max_hunger)
    {
      this.health -= Math.random() * 2;
      this.happiness -= Math.random() * 2;
    }

  }

  this.display();
}

你能看到, 这个方法把宠物的年龄增加一岁, 把快乐值降低了一个随机数, 把饥饿度增加了一个随机数。然后又设定了一些规则（这儿只示意了一个）, 如“如果宠物真的饿极了, 就让它不快乐一点和不健康一点。

既然我们已经有了这些方法, 就把它放进到构造函数里去完成整个的虚拟宠物对象的创建：

function Pet(the_pet_name, the_form_number)
{
  this.age = 0;
  this.hunger = Math.random() * 5;  // random number between 0 and 4.99
  this.health = Math.random() * 3 +1 ;  // random number between 1 and 3.99
  this.happiness = Math.random() * 5;
  this.pet_name = the_pet_name;
  this.form_number = the_form_number;

  this.feed = feed;
  this.play = play;
  this.medicate = medicate;
  this.display = display;
  this.makeOlder = makeOlder;

  window.document.forms[the_form_number].pet_name.value = the_pet_name;
  this.display();
}

最后设定让makeOlder()方法每三秒种就调用一次。这个函数在你按动start按钮时被调用。


function moveTime()
{
  pet1.makeOlder();
  pet2.makeOlder();
  the_time_out = setTimeout("moveTime();", 3000);
}

你可以看到这个函数调用了每个宠物的makeOlder()方法, 并在三秒种后又调用了它自己。这个定时事件将一直持续下去直到用户通过clearTimeout(the_time_out)把它取消掉.

这个例子几乎用到了我们今天讲到的所有内容。如果你理解了, 你对JavaScript已经了解的很深入了。在我们进入最后一个话题之前再休息一下, 最后要讲的是：利用JavaScript 的快捷方式获取很难索引的对象。 >>

JavaScript高级教程
第一页 JavaScript高级教程- 第4天
第二页图象映射与JavaScript
第三页预装图象 - 是什么?
第四页预装图象 - 怎么做?
第五页对象的优点
第六页创建你自己的对象
第七页你的面向对象的虚拟宠物
第八页计算字符串
第九页获取难以索引的对象
第十页另一种获取难以索引的对象的手段
第十一页第四天课程复习

[第1课][第2课][第3课][第4课][第5课]

来源： Wired Digital Inc.