写这个系列文章是想通过几个案例来学习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. [development][PCRE] old PCRE

    介绍, man手册 txt版 http://www.pcre.org/original/pcre.txt html版 http://www.pcre.org/original/doc/html/pcr ...

  2. [knowledge][lisp] lisp与AI

    https://blog.youxu.info/2009/08/31/lisp-and-ai-1/ https://blog.youxu.info/2010/02/10/lisp-and-ai-2/

  3. [daily][dpdk] 内核模块(网卡驱动)无法卸载

    由于程序的异常退出, 内核的引用计数没有被清除(我猜的). 所以驱动不能被卸载掉, 强制也不行. 如下: [root@localhost ~]# insmod /opt/scorpion/KingKo ...

  4. Servlet基本介绍和使用

    基本概念 Servlet又称为Java Servlet是一个基于java技术的web组件,运行在服务器端,用于生成动态的内容.Servlet是平台独立的java类,编写一个Servlet实际上就是按照 ...

  5. vue router拦截器的简单使用

    之前,为了实现router跳转的每个页面的url上都带上addressCode,然后用了一下router拦截器,很好用,当然也可以专门封装一个方法来实现(跳转的页面上带有addressCode),不过 ...

  6. java 线程 （二） 线程池

    package cn.sasa.demo2; import java.util.concurrent.ExecutorService; import java.util.concurrent.Exec ...

  7. CF891C Envy 最小生成树/虚树

    正解:最小生成树/虚树 解题报告: 传送门! sd如我就只想到了最暴力的想法,一点儿优化都麻油想到,,,真的菜到爆炸了QAQ 然后就分别港下两个正解QAQ 法一,最小生成树 这个主要是要想到关于最小生 ...

  8. IO和NIO

    一.创建IO System.out.println( "*************欢迎进入文件操作系统*************" ); System.out.println( & ...

  9. 使用natapp将本地服务映射到外网

    1.进入https://natapp.cn注册并登陆,然后下载客户端 2. 3. 4.打开客户端开启映射

  10. IntelliJ配置SpringMVC提示“found:java.lang.String required:java.lang.String”

    File->Invalid Cache&Restart 据说Android Studio也会出现这个问题,但是没遇到过 重启环境后,找不到Controller的问题也解决了