接着上篇文章继续.

要实现上篇中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. angular validation 使用总结

    我由于制作登陆界面,用到了angular-validation,结合ng-cookies,实现记住账户密码的功能.文档是https://github.com/hueitan/angular-valid ...

  2. 类Unix如何查看mysql的配置文件my.cnf

    mysql 配置文件 my.cnf是MySQL启动时加载的配置文件,一般会放在MySQL的安装目录中,用户也可以放在其他目录加载. 安装MySQL后,系统中会有多个my.cnf文件,有些是用户测试的. ...

  3. [daily][archlinux][mdadm][RAID] 软RAID

    一, 使用mdadm创建RAID 参考:https://wiki.archlinux.org/index.php/RAID 1.  安装 mdadm /home/tong [tong@TStation ...

  4. 《mongoDB》索引

    一:基础操作 创建单列索引 语法: >db.collection.createIndex(keys, options) 语法中 Key 值为你要创建的索引字段,1 为指定按升序创建索引,如果你想 ...

  5. python编码类型互转总结

    1.只有在unicode下才能将utf-8与gbk互转2.unicode是在内存中使用,bytes是文件存储和网络传输时使用-------------------------------------- ...

  6. 重写Object的equals方法

    Object的equals比较两个对象是否相同,没有重写时比较的是内存地址是否相同(==). 但我们有时候比较的是两个对象中的属性是否相同, 重写equals: package cn.sasa.dem ...

  7. CF1103D Professional layer dp

    正解:dp 解题报告: 传送门! 首先不难想到求个gcd,然后把gcd质因数分解成p1w1*p2w2*p3w3*...*pmwm 显然只要满足对每个p有一个ai%pj!=0就好,也就是说对每个pj找出 ...

  8. Python文件操作---正斜杠与反斜杠

    Python中的正斜杠与反斜杠 首先,"/"左倾斜是正斜杠,"\"右倾斜是反斜杠,可以记为:除号是正斜杠一般来说对于目录分隔符,Unix和Web用正斜杠/,Wi ...

  9. vue中的路由高亮

  10. jQuery UI 拖拽-拉伸

    jquery-ui实现 官网:http://www.runoob.com/jqueryui/example-resizable.html layui实现 demo:http://www.jq22.co ...