写这个系列文章是想通过几个案例来学习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. iOS循环引用常见场景和解决办法

    好多场景会导致循环引用,例如使用Block.线程.委托.通知.观察者都可能会导致循环引用. 1.委托 遵守一个规则,委托方持有代理方的强引用,代理方持有委托方的弱引用. 实际场景中,委托方会是一个控制 ...

  2. present simple, continuous, and be going to 三者区别

    https://www.youtube.com/watch?v=a03VKQL0dZg&list=PLZOJurmtexYozmvQGAJnVg3lgiZw0mj-y HOW TO USE F ...

  3. C-Free 5 安装 [Error] G__~1.EXE: (x86)\C-FREE~1\mingw\mingw32\bin\: No such file or directory

    解决[Error] g++.exe: 5\mingw\include: No such file or directory - 陆总的博客 - CSDN博客 https://blog.csdn.net ...

  4. 分析SignalTap的仿真结果

    写在前面:本博客为本人原创,严禁任何形式的转载!本博客只允许放在博客园(.cnblogs.com),如果您在其他网站看到这篇博文,请通过下面这个唯一的合法链接转到原文! 本博客全网唯一合法URL:ht ...

  5. 重读《深入理解Java虚拟机》四、虚拟机如何加载Class文件

    1.Java语言的特性 Java代码经过编译器编译成Class文件(字节码)后,就需要虚拟机将其加载到内存里面执行字节码所定义的代码实现程序开发设定的功能. Java语言中类型的加载.连接(验证.准备 ...

  6. java多线程和.net多线程区别与联系

    在网上搜了好多,没有搜到这方面的内容,自己浅薄写点吧. 1..net和java的主线程和子线程,原理是类似的 (1).当子线程是前台线程时,主线程结束,子线程并未结束(还将继续运行,即进程未结束) ( ...

  7. 前端 HTML 标签里 特殊符号

    特殊符号 浏览器在显示的时候会移除源代码中多余的空格和空行. 所有连续的空格或空行都会被算作一个空格.需要注意的是,HTML代码中的所有连续的空行(换行)也被显示为一个空格. <!DOCTYPE ...

  8. 卸载postgresql数据库

    卸载postgresql数据库有两种方法,第一种一个个包卸载,第二种全部卸载.做这些之前请先做好备份,以防意外! 1.1.查询出postgres数据库,用命令rpm -qa |grep postgre ...

  9. 20170728 Celery项目 后台处理SQL SERVER的一个异常

    -- 1. 感觉是访问DB 失败了,失败原因不明确 -- 2. 考虑解决问题的解决办法,后台记录异常,并重新发送任务. 具体如何来实现

  10. cxGrid常用属性设置

    OptionsView部分 是否使用表头分组:cxGrid1DBTableView1.OptionsView.GroupByBox 单元格高度自适应:cxGrid1DBTableView1.Optio ...