接着上篇文章继续.

要实现上篇中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. 【Linux】Linux 常用命令汇总

    查看软件xxx安装内容:dpkg -L xxx 查找软件库中的软件:apt-cache search 正则表达式 查找软件库中的软件:aptitude search 软件包 查找文件属于哪个包:dpk ...

  2. AndroidStudio_TextView

    写APP的工具为:AndroidStudio 主要在两种文件里编辑代码:.xml和.java(.xml里主要是调整布局相当于APP的前端 .java主要是写Java程序相当于APP的后端) 代码的调试 ...

  3. adg的数据传输应用三大模式转换

    1.最大可用性模式(Maximum Availability) 1)该模式提供了仅次于"最大保护模式"的数据保护能力: 2)要求至少一个物理备库收到重做日志后,主库的事务才能够提交 ...

  4. Java ServiceLoader(SPI)学习

    1. 几个不错的关于ServiceLoader的文章,大家可以先参考一下 1) http://www.myexception.cn/program/1355384.html 这篇的后面的问题分析不错 ...

  5. session操作类

    using System;using System.Web; /// <summary> ///session操作类 /// </summary> public class a ...

  6. $(this) 和 this 关键字在 jquery 中有何不同？

    $(this) 返回一个 jQuery 对象,你可以对它调用多个 jQuery 方法,比如用 text() 获取文本,用 val() 获取值等等. 而 this 代表当前元素,它是 javascrip ...

  7. TCP/IP具体解释--TCP首部的TimeStamp时间戳选项

    TCP应该是以太网协议族中被应用最为广泛的协议之中的一个,这里就聊一聊TCP协议中的TimeStamp选项.这个选项是由RFC 1323引入的,该C建议提交于1992年.到今天已经足足有20个年头.只 ...

  8. 27-5-LTDC控制LCD显示屏

    1.显示原理 (1).液晶显示是分2层显示的,配置层级结构体参数再将数据输出到混合器合成,显示再液晶上. (2).LTDC初始化结构体 控制 LTDC 涉及到非常多的寄存器,利用 LTDC 初始化结构 ...

  9. 查看Centos内存使用情况linux命令

    我们在使用centos版linux服务器的过程中,有时会出现卡顿的情况,这时我们可以通过查看一下内存的使用来判断发生了什么情况,那么如何查看centos内容使用情况呢?有几个方法可以尝试,跟着ytka ...

  10. git diff 与 git diff --cached的不用

    git diff比较的是工作目录中当前文件和暂存区域快照之间的差异, 也就是修改之后还没有暂存起来的变化内容.若要查看已暂存的将要添加到下次提交里的内容,可以用 git diff --cached 命 ...