写这个系列文章是想通过几个案例来学习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. ES6：export default 和 export 区别

    export default 和 export 区别: 1.export与export default均可用于导出常量.函数.文件.模块等 2.你可以在其它文件或模块中通过import+(常量 | 函 ...

  2. onload和DOMContentLoaded

    执行时间 onload必须等到页面内包括图片的所有元素加载完毕后才能执行. DOMContentLoaded是DOM结构绘制完毕后就执行,不必等到加载完毕. 编写个数不同 onload不能同时编写多个 ...

  3. Python内置模块:random,os,sys,和加密模块hashlib

    random import random    # 导入模块 随机数 import random # 内置的 print(random.random()) #0-1 之间随机小数(18位有效数字) p ...

  4. ansible源码安装

    一.升级python 笔者系统为centos6.5,系统默认安装python2.6,虽然ansible官方文档要求python版本为2.6或2.7,然而许多人都说使用2.6可能出现一系列问题,所以作者 ...

  5. 使用Nginx搭建集群

    反向代理: 1.首先启动一个项目,启动后可以通过http://localhost:8080/getResult访问到接口,如图: 2.修改nginx配置文件,监听www.ouyan.com的80端口, ...

  6. sql server 复制常见问题及查看

    1.SQL Server同步复制问题排查方法http://blog.csdn.net/roy_88/article/details/41481059 2.[同步复制常见错误处理1]当IDENTITY_ ...

  7. pymongo模块 目录

    MongoDB pymongo模块 MongoDB pymongo模块 查询 MongoDB pymongo模块 插入数据 MongoDB pymongo模块 更新数据 MongoDB pymongo ...

  8. 前端 chrome查看html样式基本操作

    Chrome浏览器是世界上HTML5支持最好的浏览器.提供了非常好的开发工具,非常适合我们开发人员使用.审查元素功能的快捷键是F12. 按检查或者F12 鼠标点击找标签 chorme审查元素的使用 - ...

  9. python 合并列表 从大到小排序

    #!/usr/bin/env python # -*- coding: utf-8 -*- a = [1,2,3,4,5] b = [6,7,8,9,10] a.extend(b) a.reverse ...

  10. gitlab+jenkins多项目，多依赖，继承等上下级项目关系的自动部署

    案例: 现有三个项目,Common,entity,serviceAPIentity依赖于Common,serviceAPI依赖于entity,也就是说common的下级项目是entity,而entit ...