接着上篇文章继续.

要实现上篇中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. 解决sudo: npm: command not found

    sudo ln -s /opt/node-v11.4.0/bin/npm /usr/bin/npm sudo ln -s /opt/node-v11.4.0/bin/node /usr/bin/nod ...

  2. new malloc 区别

    http://www.cplusplus.com/reference/cstdlib/malloc/ http://www.cplusplus.com/reference/new/operator%2 ...

  3. Flink - FlinkKafkaProducer010

    https://ci.apache.org/projects/flink/flink-docs-release-1.3/dev/connectors/kafka.html 使用的方式, DataStr ...

  4. BTree和B+Tree详解

    https://www.cnblogs.com/vianzhang/p/7922426.html B+树索引是B+树在数据库中的一种实现,是最常见也是数据库中使用最为频繁的一种索引.B+树中的B代表平 ...

  5. 关于服务器时区BEIST-8、GMT-8、Asia/Shanghai、CST、GMT+8:00等缩写的含义

    http://www.talkwithtrend.com/Article/147961 AIX系统时区总结 字数 2078阅读 5844评论 0赞 0 前几天NTP的问题牵涉出时区问题,大家可能被眼花 ...

  6. Mongodb的下载和安装

    下载 下载地址:http://dl.mongodb.org/dl/win32/x86_64  说明:zip是解压版的,msi是安装版的:安装过程中不知道什么原因3.6.x版本的安装会时等待时间很长并且 ...

  7. kubernetes微服务部署

    1.哪些服务适合单独成为一个pod?哪些服务适合在一个pod中? message消息服务被很多服务调用   单独一个pod dubbo服务和web服务交互很高放在同一个pod里 API网关调用很多服务 ...

  8. inet_addr()和inet_ntoa()使用注意

    inet_addr():无法处理255.255.255.255,认为该ip为非法,返回-1 inet_ntoa():转换后地址存储在静态变量中,连续两次调用,第二次会覆盖第一次的值. 建议使用inet ...

  9. vue中watch的详细用法

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

  10. 【PyQt5-Qt Designer】制作炫酷的启动界面+进度条

    QProgressBar 进度条+QSplashScreen 启动界面 知识点: 1.进度条 #将进度条的最大值.最小值设置为相同时,产生跑马灯效果 self.progressBar.setMinim ...