day4_7

JavaScript高级教程

JavaScript高级教程

JavaScript高级教程 - 第四课

MCHWEB

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

你现在骄傲地拥有了不是一只而是两只虚拟宠物。你的责任就
是让它们保持健康。如果它们的健康值低于零，它们就会死掉。
按 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课 ]