接着上篇文章继续.

要实现上篇中gif图片的效果, 我们要写js, 算法并不是很复杂, 本次也仅仅展示了实现功能的代码, 并没有从面向对象的角度去构思或重构代码.

这里, 我们定义了一些变量, 用来定义图形界面各个元素的尺寸以及其他参数.

实现的功能就是捕获用户的键盘事件, 39.37代表了键盘的左方向键和右方向键, 左右键按的时候改变comberLeftTimes值, 进而改变蜂窝的水平位置.

这里, 我们定义了游戏开始的触发事件, #flash就是那个按钮. 点击后游戏开始, 小蜜蜂源源不断的从上面飞下来. 每秒刷新下图形界面, flash方法则是刷新界面的主体. 后面还有makeBee和renderBees方法做支撑.

makeBee负责生产蜜蜂, 这里有个水平随机位置的算法, 很简单. renderBees则负责渲染界面, 也很简单.

最后, 到此为止, 一个小蜜蜂游戏的核心代码已经完成, 后面我们再面向对象的重构一下代码以及使用H5和CSS3的一些特性使游戏的颜值更高一些.

嘿嘿....

javascript 面向对象之路.2 - 小蜜蜂的更多相关文章

  1. javascript 面向对象之路.1 - 小蜜蜂

    写这个系列文章是想通过几个案例来学习javascript html5 css3,其实这个小游戏谁都能做出来,但对于一个作为后端.net程序员的我来说还是有学习的必要,毕竟javascript的面向对象 ...

  2. Javascript 面向对象编程—封装

      前  言 Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象.但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类) ...

  3. Javascript 面向对象编程—继承和封装

      前  言 Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象.但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类) ...

  4. 《JavaScript面向对象编程指南》读书笔记①

    概述 JavaScript快忘完了,想看一本专业书拾遗,所以看了这本<JavaScript面向对象编程指南>. 个人觉得这本书讲的很透彻很易懂,一些原来有疑惑的地方在这本书里面豁然开朗,看 ...

  5. 深入理解 JavaScript 面向对象

    我们在学习编程时,避免不了会接触一个概念,叫:面向对象编程(Object-oriented programming,缩写:oop) (不是搞对象那个对象哈),其实我们的编程方式,不止有面向对象,还有 ...

  6. JavaScript学习笔记(三)——this、原型、javascript面向对象

    一.this 在JavaScript中this表示:谁调用它,this就是谁. JavaScript是由对象组成的,一切皆为对象,万物皆为对象.this是一个动态的对象,根据调用的对象不同而发生变化, ...

  7. JavaScript学习总结(三)——this、原型、javascript面向对象

    一.this 在JavaScript中this表示:谁调用它,this就是谁. JavaScript是由对象组成的,一切皆为对象,万物皆为对象.this是一个动态的对象,根据调用的对象不同而发生变化, ...

  8. Javascript面向对象特性实现封装、继承、接口详细案例——进级高手篇

    Javascript面向对象特性实现(封装.继承.接口) Javascript作为弱类型语言,和Java.php等服务端脚本语言相比,拥有极强的灵活性.对于小型的web需求,在编写javascript ...

  9. javascript面向对象系列第四篇——选项卡的实现

    前面的话 面向对象的应用并非只是读几本书那么容易,需要有大量的工程实践做基础才能真正理解并学会使用它.本文将用面向对象的技术来制作一个简单的选项卡 图示说明 由图示结果看到,这是一个非常简单的选项卡. ...

随机推荐

  1. OLW Test

    第一篇使用Open Live Writer 发布测试. Code Insert: #include <stdio.h> main() { printf("Hello World! ...

  2. 函数调用的方法一共有 4 种,call,apply,bind

    1. 每个函数都包含两个非继承而来的方法:call()方法和apply()方法. 2. 相同点:这两个方法的作用是一样的. 都是在特定的作用域中调用函数,等于设置函数体内this对象的值,以扩充函数赖 ...

  3. Java 输入/输出——字节流和字符流

    1.流的分类 (1)输入流和输出流(划分输入/输出流时是从程序运行所在内存的角度来考虑的) 输入流:只能从中读取数据,而不能向其写入数据. 输出流:只能向其写入数据,而不能从中读取数据. 输入流主要由 ...

  4. Adobe Flex初记

    公司项目要用Flex,之前没有接触过,菜鸟只好白手起家,把项目拉下来的同时配置下Flex的环境,以下是一篇参考: http://blog.sina.com.cn/s/blog_4c4a24db0100 ...

  5. textfield内边距

    使用QMUITextField self.inputTf.textInset = UIEdgeInsetsMake(0, -6, 0, 10);

  6. Badboy测试工具官网下载以及安装导出Jmeter脚本

    首先打开浏览器,在百度上搜索“Badboy ”,默认搜索到的第一个就是官网地址: 1 也可以在其他软件下载网址上进行下载 2 点击进入后,官网左侧菜单中有“download”字样,或者官网右侧顶部也有 ...

  7. 集齐所有机制的按键控制LED驱动

    内核版本:linux2.6.22.6 硬件平台:JZ2440 驱动源码 final_key.c : #include <linux/module.h> #include <linux ...

  8. BeanFactoryPostProcessor vs BeanPostProcessor

    BeanFactoryPostProcessors affect BeanDefinition objects because they are run right after your config ...

  9. JS页面跳转代码怎么写?总结了5种方法

    我们在建站时有些链接是固定的,比如客服咨询链接,一般是第三方url,如果直接加上去不太专业,那么就想着用站内的页面做跳转,跳转用js比较多,那么JS页面跳转代码怎么写呢?ytkah在网上搜索了一下,大 ...

  10. java取得汉字拼音（pinyin4j）

    jar包:pinyin4j.jar 基本用法: String[] pinyin = PinyinHelper.toHanyuPinyinStringArray('重'); 例如“重”字,该方法返回一个 ...