在JavaScript中,prototype对象是实现面向对象的一个重要机制。

每个函数就是一个对象(Function),函数对象都有一个子对象 prototype对象,类是以函数的形式来定义的。prototype表示该函数的原型,也表示一个类的成员的集合。

在游戏中,首先我们先想想地鼠拥有哪些属性:

(1)地鼠的编号

(2)地鼠图片所在的dom元素

(3)地鼠所在地洞的编号

(4)地鼠的类型(有效,无效)

定义一个名称为Mouse的函数(方法)初始化地鼠属性

var Mouse=function(type){
this.mouse=null;//地鼠所在的巢穴()dom元素
this.num=-1;//地鼠编号
this.hole=-1;//地鼠所在地洞编号
this.init(type);//初始化地鼠,有效地鼠,无效地鼠
}

为了方便和统一,有效的对地鼠拥有的属性进行操作和扩展,我们使用 prototype 属性来向函数(对象)Mouse扩展和添加属性:

Mouse.prototype={

	//地鼠类型,有效,无效,有效的被杀,无效的被杀

	mousetype: {
"num1": "0 0;height:100px;width:111px;",
"num2": "-14px -114px;height:100px;width:97px;",
"num3": "-8px -225px;height:100px;width:98px;",
"num4": "-14px -335px;height:100px;width:92px;",
"num5": "-8px -455px;height:100px;width:115px;",
"dot": "background:url(img/dot.png) no-repeat;width:115px;height:100px;",
"dotNo": "background:url(img/dotNo.png) no-repeat;width:115px;height:100px;",
},
}

在上面Mouse的函数中,我们可以看到地鼠的属性中,我们需要对地鼠所在的(巢穴)进行初始化和属性扩展:

(1)创建地鼠所在的(巢穴)dom元素

(2)巢穴中的地鼠的类型(有效,无效) 

(3)巢穴中的地鼠的状态(死,活)

(4)巢穴中地鼠的位置(出现,隐藏) 

(5)巢穴被袭击事件(单击事件)

综上我们可以得到这么一个init()函数

//初始化地鼠
//初始化地鼠
init : function(type){
type = type || 'num1';
var _this = this;
//创建地鼠的dom元素
this.mouse = document.createElement("div");
//扩展属性--地鼠类型
this.mouse.mousetype = type;
//扩展类型--属否活着
this.mouse.islive = true;
this.mouse.style.cssText = 'background:url(img/mouse.png) no-repeat;left:0;top:0px;\
position:relative;margin:auto;cursor:pointer;background-position:'+this.mousetype[type]+'';
//绑定地鼠被点击事件
this.mouse.onclick = function(e){_this.beat(e);};
},

  

在上面我们已经绑定了地鼠巢穴的单击事件,下面我们需要写单击事件的方法:

在单击时,我们需要判断巢穴中地鼠的状态,是死,是活,如果是死的那么单击无效。

//地鼠被点击
//地鼠被点击
beat:function(e){
if(this.mouse.islive==true){
this.mouse.islive=false;//杀死
this.onbeat();//地鼠被点中扩展方法
if(this.mouse.mousetype=='num2'||this.mouse.mousetype=='num3'){
this.mouse.style = this.mousetype['dotNo'];//显示被杀的场面
}
else{
this.mouse.style = this.mousetype['dot'];//显示被杀的场面
}
console.log(this.mouse.getAttribute("style")); }
},
//地鼠被点中扩展方法
onbeat:function(){},

地鼠被杀死后的扩展方法,我们可以去想衍生出很多有趣场面和特效,后面的游戏过程也会使用到,这里不扩展讲解

同时我们还知道我们的地鼠还具有动画属性,下面说说动画效果:

我们使用元素的绝对定位的top值来实现动画的隐藏和显示。

	//地鼠的动画
animation : function(speed){ speed = speed == 'fast'?20:speed == 'normal'?30:50; var obj = this.mouse,ost = obj.style,oTop = 0,cut=5,_this = this;
//让地鼠从地洞冒出来
var show = function(top){ top = top-cut; if(top >= -40&&top<oTop){
obj.style = 'background:url(img/mouse.png) no-repeat;left:0;top:0px;\
position:relative;margin:auto;cursor:pointer;background-position:'+_this.mousetype[obj.mousetype]+'';
ost.top = top + 'px';
setTimeout(function(){show(top);},speed);
}
else
{
setTimeout(function(){hide(-40);},speed*10);
}
},
//扩展方法:地鼠动画结束后
onend : function(){},

上面最好有一个onend动画结束的扩展方法,后面的游戏的过程中会用到,我们也可以在这个方法自定义

在游戏中我们需要一个重置让所有的地鼠回滚到洞穴里

//重置地鼠,当地鼠滚回洞里的时候
//重置地鼠,当地鼠滚回洞里的时候
reset : function(){
this.mouse.islive =true;
this.mouse.style= 'background:url(img/mouse.png) no-repeat;left:0;top:0px;\
position:relative;margin:auto;cursor:pointer;background-position:'+this.mousetype[this.mouse.mousetype]+'';
this.onend();
},

  

打地鼠游戏(2)之定义地鼠函数及函数原型 prototype的更多相关文章

  1. 团队项目——打地鼠游戏(SPEC)系统性能评估测试

    1.SPEC测试的目标: 本轮测试的目的是测试打地鼠游戏的需求以及确保每个需求都能得到满足的方法.编写此需求说明书是为了使用户和开发人员对所开发的系统有一致的理解.通过阅读此说明书,开发人员可以了解当 ...

  2. 无聊的人用JS实现了一个简单的打地鼠游戏

    直入正题,用JS实现一个简单的打地鼠游戏 因为功能比较简单就直接裸奔JS了,先看看效果图,或者 在线玩玩 吧 如果点击颜色比较深的那个(俗称坏老鼠),将扣分50:如果点击颜色比较浅的那个(俗称好老鼠) ...

  3. 410 for 循环 运算 改变循环的控制流 死循环 遍历数组 定义方法 有名函数匿名函数 定义函数的方法取值 date math 局部变量 函数 局部与全局变量 次幂/随机数/取绝对值/向上取整/平方根

    for(1.表达式1;2.表达式2;3.表达式3){ 4.循环体语句; } 先执行1 ,在执行2, 表达式, 如果2结果为false,退出循环 如果2是true 执行4 在执行3 执行2 举例打印1- ...

  4. Angular4 自制打地鼠游戏

    前端工程师新手一枚,之前一直做些小设计,以及静态页面的编写工作.刚刚接触 Angular 没有多久,四个月前对于 Javascript也只是会写 alert 之流,现在进步算是很大,下面是自制的打地鼠 ...

  5. Android 多线程 打地鼠游戏

    前言:最近比较喜欢多线程了,看到了一些线程案例,这里总结一下打地鼠游戏的整个过程. 1.首先是主活动要加载的布局,我一般就喜欢早点把这个写上,这样就好在主活动中玩弄这些控件了.闲话不多说,一个Fram ...

  6. iOS版打地鼠游戏源码

    打地鼠游戏源码,游戏是一款多关卡基于cocos2d的iPad打地鼠游戏源码,这也是一款高质量的打地鼠游戏源码,可以拥有逐步上升的关卡的设置,大家可以在关卡时设置一些商业化的模式来盈利的,非常完美的一款 ...

  7. 打地鼠游戏iOS源码项目

    打地鼠游戏源码,游戏是一款多关卡基于cocos2d的iPad打地鼠游戏源码,这也是一款高质量的打地鼠游戏源码,可以拥有逐步上升的关卡的设置,大家可以在关卡时设置一些商业化的模式来盈利的,非常完美的一款 ...

  8. 将对象的所有属性名放到一个数组中 || 获得对象的所有属性名 || return;不具有原子性 || 怎样自己制作异常|| 判断对象有没有某个属性 || 当传递的参数比需要的参数少的时候,没有的值会被赋予undefined || 获得函数实际传递的参数 || 怎么用函数处理一个对象 || 用一个名字空间定义一个模块所有的函数 || 给一个对象添加方法

    获得对象的所有属性名 || 将对象o的所有属性名放到数组中 var o = {x:1,y:2,z:3}; var arr = []; var i = 0; for(arr[i++] in o){};/ ...

  9. 打地鼠游戏ios源码

    打地鼠游戏源码,游戏是一款多关卡基于cocos2d的iPad打地鼠游戏源码,这也是一款高质量的打地鼠游戏源码,可以拥有逐步上升的关卡的设置,大家可以在关卡时设置一些商业化的模式来盈利的,非常完美的一款 ...

  10. Android打地鼠游戏源码带道具购买的Android游戏开发

    这是一款基于安卓的打地鼠游戏,界面简洁,有level模式打地鼠和无尽模式打地鼠两种游戏模式,并可以通过商店使用金币进行道具的购买,道具可以让你更容易通关:同时金币可以在游戏通关的时候获取.工程中有较为 ...

随机推荐

  1. PAT天梯赛L1-002 打印漏斗

    题目链接:点击打开链接 本题要求你写个程序把给定的符号打印成沙漏的形状.例如给定17个"*",要求按下列格式打印 ***** *** * *** ***** 所谓"沙漏形 ...

  2. 重温Observer模式--热水器·改

    引言 在 C#中的委托和事件 一文的后半部分,讲述了Observer(观察者)模式,并使用委托和事件实现了这个模式.实际上,不使用委托和事件,一样可以实现Observer模式.在本文中,我将使用GOF ...

  3. iOS 9开发小技巧

    http://www.cocoachina.com/ios/20151217/14733.html 前言 "小黄鸭"法不仅适用于debug,也适用于学习新知识.表达是最好的吸收.本 ...

  4. LeetCode191 Number of 1 Bits. LeetCode231 Power of Two. LeetCode342 Power of Four

    位运算相关 三道题 231. Power of Two Given an integer, write a function to determine if it is a power of two. ...

  5. 如何处理iOS中照片的方向

    使用过iPhone或者iPad的朋友在拍照时不知是否遇到过这样的问题,将设备中的照片导出到Windows上时,经常发现导出的照片方向会有问题,要么横着,要么颠倒着,需要旋转才适合观看.而如果直接在这些 ...

  6. python 终端编码

  7. HZOJ trade

    强烈谴责$skyh$的没$\Huge 脸$行为. 很经典的可反悔贪心,然而我一直以为是sbdp还一直想着怎么优化…… 正常的贪心肯定是不对的. 但是由于A-C=A-B+B-C, 所以用一个小根堆维护, ...

  8. sql —— order by

    用于对结果集进行排序. 原表: 根据成绩这列数据进行升序排序: 根据成绩这列数据进行降序排序:

  9. UVa 10285【搜索】

    UVa 10285 哇,竟然没超时!看网上有人说是记忆化搜索,其实不太懂是啥...感觉我写的就是毫无优化的dfs暴力....... 建立一个坐标方向结构体数组,每个节点dfs()往下搜就好了. #in ...

  10. HDU 5673 Robot【卡特兰数】

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5673 题意: 有一个机器人位于坐标原点上.每秒钟机器人都可以向右移到一个单位距离,或者在原地不动.如 ...