接着上篇文章继续.

要实现上篇中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. cocoa开发Mac小试笔记

    急需纠正自己的错误认识,Mac开发和iOS开发UI显示.事件交互.生命周期等存在极大的差距 首先点击事件NSButton和UIButton完全是两个不同的东西 列表UITableView和NSTabl ...

  2. int 存储大小 数组元素个数

    为了得到某个类型或某个变量在特定平台上的准确大小,您可以使用 sizeof 运算符.表达式 sizeof(type) 得到对象或类型的存储字节大小.下面的实例演示了获取 int 类型的大小: 实例 # ...

  3. 2016年蓝桥杯省赛A组c++第1题

    /* 某君新认识一网友. 当问及年龄时,他的网友说: “我的年龄是个2位数,我比儿子大27岁, 如果把我的年龄的两位数字交换位置,刚好就是我儿子的年龄” 请你计算:网友的年龄一共有多少种可能情况? 提 ...

  4. [daily] 内存越界的分析与定位

    valgrind 自不必说 1.  Address Sanitize 很好有,只需要在gcc编译的时候,加上选项 -fsanitize=address 它的工程:https://github.com/ ...

  5. js日常

    JS中变量后面有个问号是什么意思? return n?n*arguments.callee(n-1):1;JS中变量后面有个问号是什么意思?然后 后面一个:1又是什么意思?     问号与冒号要连在一 ...

  6. 转：jdk动态代理实现

    原文链接: jdk动态代理 注:文章中用常用的流程实现 动态代理,流程逻辑比较清晰.文章后面对 “为什么要使用接口” 原理分析还未细看. jdk的动态代理为什么用接口,内部是什么原理呢?看了几篇文章貌 ...

  7. python摸爬滚打之day11----函数闭包,迭代器

    1.函数名 函数名就是一个变量名, 函数名存储的是该函数的内存地址.    函数名都可以进行哪些应用? 函数名可以赋值给其他的变量; 函数名可以作容器里的元素使用; 函数名可以当做形参传进另一函数; ...

  8. vue中watch的详细用法

    在vue中,使用watch来响应数据的变化.watch的用法大致有三种.下面代码是watch的一种简单的用法: <input type="text" v-model=&quo ...

  9. java JDBC (五) properties配置文件

    1.在src目录下创建文件 database.properties driver = com.mysql.jdbc.Driver url = jdbc:mysql://192.168.0.207:33 ...

  10. eslint 代码检测工具

    jshint 检测工具不够灵活下,道格拉斯(何许人也?json创造者,javascript重要任务,犀牛那本书就是他写的). 文档地址: 中文地址 English 安装 利用npm全局安装eslint ...