写这个系列文章是想通过几个案例来学习javascript html5 css3，其实这个小游戏谁都能做出来，但对于一个作为后端.net程序员的我来说还是有学习的必要，毕竟javascript的面向对象跟C# 截然不同，在接触javascript时，第一个感觉就是太灵活了，这是弱类型语言的弊端也是优势，灵活，意味着强大！只是调试起来很痛苦，记得在若干年前，调试javascript就等于慢性自杀。 对于80后的我来说，《小蜜蜂》是一个经典的游戏，小时候它陪伴我不知走过了多少个春秋... ... ok, let's go.

成品demo里，橙色方块代表小蜜蜂，黑色矩形代表接收蜂窝，点击Go按钮后，小蜜蜂们会定时往下飞，我们要通过左右键来控制蜂窝以接收小蜜蜂。

嗯，暂时就这么简单。

首先，我们要定义小蜜蜂、蜂窝等对象的显示区域：

bee-game-wrapper 为外围容器

bee-game-beesbox 为小蜜蜂活动区域

bee-game-bee 为小蜜蜂

bee-game-comb 为蜂窝活动区域

bee-game-comber 为蜂窝 样式就不解释啦。

嗯，这篇文章就到这里，下一节我们写javascript来实现图1的动态效果。

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

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

    接着上篇文章继续. 要实现上篇中gif图片的效果, 我们要写js, 算法并不是很复杂, 本次也仅仅展示了实现功能的代码, 并没有从面向对象的角度去构思或重构代码. 这里, 我们定义了一些变量, 用来定 ...

  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：nano 、cat和file

    nano 在 Linux 下面编辑文件通常我们会直接使用专门的命令行编辑器比如(emacs,vim,nano),涉及 Linux 上的编辑器的内容比较多,且非常重要. nano 是 linux 的一款 ...

  2. cinder 和 qt5 vs2015结合

    下载编译好的cinder_0.9.1_vc2013, 用vs2015打开 cinder_0.9.1_vc2013\proj\vc2013\cinder.sln 重新编译 由于我用的qt也是vs2015 ...

  3. selec2组件使用方法

    select2组件是一款代搜索功能的html下拉框辅助组件,官方 demo以及文档:http://select2.github.io/examples.html => 最简单的使用方法(前期绑定 ...

  4. [development][c++] C++构造函数调用构造函数

    构造函数调用构造函数是会问题的. 外层函数返回的内存, 与被调用的构造函数返回的内存并不是一个内存. 错误示例代码如下: msg_log(const char *name, const char* t ...

  5. PLSQL游标

    静态游标:结果集已经确实(静态定义)的游标.分为隐式和显式游标 隐式游标:所有DML语句为隐式游标,通过隐式游标属性可以获取SQL语句信息: 显式游标:用户显式声明的游标,即指定结果集.当查询返回结果 ...

  6. shiro默认过滤器

  7. python摸爬滚打之day14----内置函数,递归函数

    1.匿名函数 用一句话实现的简单函数. ret = lambda x : x ** 2      即 函数名 = lambda 形参 : 返回值 print(ret(5))  ----> 25 ...

  8. python摸爬滚打之day06----小数据池、编码解码

    1.小数据池 代码块:  一个模块, 一个函数, 一个类, 甚至每一个command命令都是一个代码块. 一个文件也是一个代码块.而不需要创建一个新的数据. 这样会节省更多的内存区域. 在cmd命令行 ...

  9. pyqt5-day1

    pyqt5做为Python的一个模块,它有620多个类和6000个函数和方法.这是一个跨平台的工具包,它可以运行在所有主要的操作系统,包括UNIX,Windows,Mac OS.pyqt5是双重许可. ...

  10. swift中 ？和 ！的区别

      可选类型(?)与强制解析运算符(!) ?是一种判断后再拆包的语法糖 !是一种强制拆包的语法糖   当你不确定有值的时候就可以用  ? 当你确定有值的时候可以用  !     ?的几种使用场景:1. ...