html5消除方块游戏总结-对象

  在短短2周内,做了2个项目,虽然时间很紧凑,很累,但我觉得这很充实,在每次的实战项目演练过程中都能发现许多平常不遇到的问题,也只有实际操作项目,才能让我所学知识活学活用,并且能够更快的适应实际工作中的项目。

  这周做的是一个小游戏,一个小人物根据相同的颜色来消除方块的项目,虽然做游戏的时间很短暂,但我觉得我收获颇丰,不断的学习,让我觉得更踏实,虽然累,我也觉得很值得,这次项目主要让我们理解和使用面向对象编程这个概念。

  对象是一个抽象的概念,是一种面对人的思维方式,人有特征,就如对象里的属性,而人有行为,就如对象里的方法;

  但是怎样理解一个抽象的东西呢,在我理解看来对象就像是汽车厂里的图纸,他只是一种概念性东西,只能提供思路,让我们有一个明确方向,而要让对象实则化--即产生实例就需要new一个,这是js里对象产生实例对重要一点,我们通常叫new一个(var objs = new obj());这里的实例就像是汽车厂里的每个车间生产的零件一样,根据图纸来生产出各种零件,但是光有图纸是不能够产生零件的,这里就还需要一个最重要的东西,那就是产生这个零件所需要的机器,这个机器就类似于js里面的原型,这是产生实例的一个重要工具。

  那么在js里,如何产生实例呢?在这里,就需要用原型命令了(obj.prtottype.属性);

  所以,对象-原型-实例 这三者之间的关系就很直观了,也容易理解。

  这次游戏在学习除了面向对象以外,还学习了其中面向对象最重要一个就是-继承

  何为继承,继承就是对我们对象里重复的属性代码进行一个封装,可以充分利用资源的扩展性和重用性;

  设定为父元素,然后当有子元素时,子元素就继承父元素里面的一些属性,这里有两种方法进行操作:

   1. 对象冒充法(要检验是否是真正的子元素只需在后面打印:obj.instanceof 父元素);
             name, age是父元素的属性;
             1. 方法1:
                 1. this.inhert=obj;
                 2. this.inhert(name, age);
                 3. delete this.inhert;
             
             2. 方法2:obj.call(this,name,age)
             3. 方法3:obj.apply(this,[name,age])
             4. call和apply差别就是最后传递参数的差别,一个是数组 一个是逗号隔开;
         2. 真实继承法
             1. 子元素.prototype = new 父元素

时间: 2025-01-16 14:35:40

html5消除方块游戏总结-对象的相关文章

Html5消除方块游戏总结-其他

学习了最重要的-面向对象后,在这次游戏里,我还学习了其他重要的知识,以及对以前知识进行回顾和复习. 首先这次游戏大量运用了面向对象这个概念,我们把游戏的子弹.图形.玩家.背景都想像成一个对象角色,那么有对象就有他特有的属性. 这次的游戏制作是以个人为单位,每个人都坐一样的游戏,登陆页面采用了css和html5代码技术,并且在起背景图方面利用css3的动画效果做了一个不断滚动的动画效果,在第二个页面给玩家提供了选取道具的界面,这个界面也采用了css.html5技术,外加一个点击事件,利用对象原理,

第八讲:HTML5中canvas实现小球击打小方块游戏

源代码:http://download.csdn.net/detail/liumingm900913/7469969 游戏开发流程: 1.创建画布: 将画布放在div标签里面,这样可以控制画布居中的位置,在对div标签加上一些样式,利于观看 <div id="main"> <!--将画布嵌在div块里面,使其可以居中--> <canvas id="liuming_canvas" width="300px" heigh

用cocos2d-html5做的消除类游戏《英雄爱消除》(2)——Block设计实现

Block可以说是这个游戏的核心类,它除了包含自身的一些属性和方法外还添加了对触摸事件的响应. 我们先来看下源码吧 /** * Power by html5中文网(html5china.com) * author: jackyWHJ */ var Block = cc.Sprite.extend({ id:0, name:"", active:true, pointX:0, pointY:0, beginPoint:null, flash:false, ctor:function (a

HTML5“爱心鱼”游戏总结

HTML5“爱心鱼”游戏总结 目录 1.页面搭建 2.画蓝色的海洋 3.画随海水摆动的漂浮物 4.画随海水摆动的海葵 5.画静态的大鱼 6.鼠标控制大鱼的游向 7.给大鱼加基本动画(眼睛眨动,尾巴不停的摇摆) 8.画静止的小鱼 9.小鱼跟随大鱼游动 10.给小鱼加基本动画(眼睛眨动,尾巴不停的摇摆) 11.画果实 12.大鱼吃果实.大鱼喂小鱼 13.特效(大鱼吃果实产生白色涟漪,大鱼喂小鱼产生橙色涟漪) 14.游戏分值计算和小鱼生命值判断 15.游戏开始前的处理 16.游戏结束后的处理 游戏演示

用cocos2d-html5做的消除类游戏《英雄爱消除》——概述

在bbs.html5china.com论坛学习了MV和老马的小熊蘑菇后我也自己模仿他们做了这样子一个游戏,权当技术交流学习,现在附上游戏截图和源码. 游戏截图: 1.系统菜单界面: 2.游戏界面 3.游戏结束界面: 4.游戏设置页面 这是一款休闲型的游戏,移动方块,相同的方块在一起就会消除,计算消除整个屏幕方块所需要画的时间,时间越短成绩越好.下面附上源码链接: http://files.cnblogs.com/jackyWHJ/HeroLikeClear.zip 接下来会把几个主要功能写个教程

用cocos2d-html5做的消除类游戏《英雄爱消除》(3)——游戏主界面

游戏主界面,同时也是主程序,包括sprite的生成加入以及游戏状态的控制. 下面同样贴下源码再讲解; /** * Power by html5中文网(html5china.com) * author: jackyWHJ */ var STATE_PLAYING = 0; var STATE_GAMEOVER = 1; var g_sharedGameLayer; var GameLayer = cc.Layer.extend({ _time:0, _timeLabel:null, _timeSt

用cocos2d-html5做的消除类游戏《英雄爱消除》(4)——游戏结束

游戏结束界面: 在前面几个教程中,这个界面的创作所需要的知识点基本我们都讲过了,这里就说下用户数据的缓存吧,也是先来看下源码 /** * Power by html5中文网(html5china.com) * author: jackyWHJ */ var GameOver = cc.Layer.extend({ init:function () { var bRet = false; if (this._super()) { var sp = cc.Sprite.create(s_b05);

用cocos2d-html5做的消除类游戏《英雄爱消除》(1)——系统主菜单

系统主菜单如下图所示: 首先,介绍下这个主菜单,它包含了一个动画logo以及一个按钮选项,动画logo每隔1秒钟切换一张图片,点击相应的按钮选项会切换不同的游戏场景. 下面看下这个界面的源码: /** * Power by html5中文网(html5china.com) * author: jackyWHJ */ cc.dumpConfig(); var winSize; var SysMenu = cc.Layer.extend({ _hero:null, _logo:null, _logo

经典 HTML5 &amp; Javascript 俄罗斯方块游戏

Blockrain.js 是一个使用 HTML5 & JavaScript 开发的经典俄罗斯方块游戏.只需要复制和粘贴一段代码就可以玩起来了.最重要的是,它是响应式的,无论你的显示屏多么宽都能自动匹配.你可以自定义你想要的颜色以适应您的网站,也可以调整方块落下的速度. 在线演示      源码下载 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中