javascript 面向对象之路.1 - 小蜜蜂
写这个系列文章是想通过几个案例来学习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 - 小蜜蜂的更多相关文章
- javascript 面向对象之路.2 - 小蜜蜂
接着上篇文章继续. 要实现上篇中gif图片的效果, 我们要写js, 算法并不是很复杂, 本次也仅仅展示了实现功能的代码, 并没有从面向对象的角度去构思或重构代码. 这里, 我们定义了一些变量, 用来定 ...
- Javascript 面向对象编程—封装
前 言 Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象.但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类) ...
- Javascript 面向对象编程—继承和封装
前 言 Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象.但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类) ...
- 《JavaScript面向对象编程指南》读书笔记①
概述 JavaScript快忘完了,想看一本专业书拾遗,所以看了这本<JavaScript面向对象编程指南>. 个人觉得这本书讲的很透彻很易懂,一些原来有疑惑的地方在这本书里面豁然开朗,看 ...
- 深入理解 JavaScript 面向对象
我们在学习编程时,避免不了会接触一个概念,叫:面向对象编程(Object-oriented programming,缩写:oop) (不是搞对象那个对象哈),其实我们的编程方式,不止有面向对象,还有 ...
- JavaScript学习笔记(三)——this、原型、javascript面向对象
一.this 在JavaScript中this表示:谁调用它,this就是谁. JavaScript是由对象组成的,一切皆为对象,万物皆为对象.this是一个动态的对象,根据调用的对象不同而发生变化, ...
- JavaScript学习总结(三)——this、原型、javascript面向对象
一.this 在JavaScript中this表示:谁调用它,this就是谁. JavaScript是由对象组成的,一切皆为对象,万物皆为对象.this是一个动态的对象,根据调用的对象不同而发生变化, ...
- Javascript面向对象特性实现封装、继承、接口详细案例——进级高手篇
Javascript面向对象特性实现(封装.继承.接口) Javascript作为弱类型语言,和Java.php等服务端脚本语言相比,拥有极强的灵活性.对于小型的web需求,在编写javascript ...
- javascript面向对象系列第四篇——选项卡的实现
前面的话 面向对象的应用并非只是读几本书那么容易,需要有大量的工程实践做基础才能真正理解并学会使用它.本文将用面向对象的技术来制作一个简单的选项卡 图示说明 由图示结果看到,这是一个非常简单的选项卡. ...
随机推荐
- angularjs 异步请求无法更新数据
angularjs 有个问题就是第二次ajax请求数据再次赋值给 $scope.data,需要更新视图数据的时候,却不能更改视图数据,这个是因为angularjs的$watch不能监听到JS对$sco ...
- dp单调性优化
跟着书上的思路学习dp的单调性优化觉得还是很容易想的. 数据范围: dp,数据范围是百万,这应该是O(n)的算法了. 首先不难想到设f[i]表示到第i个百米所能达到的最大能量,那么f[n]即为所求. ...
- ascii码值
ascii码值#0 空值 即null#8 退格键#13 回车键
- LeetCode 349 Intersection of Two Arrays 解题报告
题目要求 Given two arrays, write a function to compute their intersection. 题目分析及思路 给定两个数组,要求得到它们之中共同拥有的元 ...
- telnet测试端口的使用
端口开启后会跳转到 :
- Numpy 机器学习三剑客之Numpy
NumPy是Python语言的一个扩充程序库.支持高级大量的维度数组与矩阵运算,此外也针对数组运算提供大量的数学函数库.Numpy内部解除了Python的PIL(全局解释器锁),运算效率极好,是大量机 ...
- 【PyQt5-Qt Designer】按钮系列
[PyQt5-Qt Designer]按钮系列 复选框(QCheckBox) 效果如下: 参考: https://zhuanlan.zhihu.com/p/30509947 完整代码: from Py ...
- import Vue form 'vue’的意思
1.import Vue form ‘vue’ 写全的话是import Vue from ‘…/nodemouls/vue/list/vue.js’: 此时在webpack.base.conf.js中 ...
- CentOS 系列安装 Docker
CentOS6对于 CentOS6,可以使用 EPEL 库安装 Docker,命令如下$ sudo yum install http://mirrors.yun-idc.com/epel/6/i386 ...
- 前端 HTML body标签相关内容 常用标签 表单标签 form 表单控件分类
表单控件分类 input标签: input标签 type属性的text,password,button按钮,submit按钮 input标签placeholder属性 标签上显示内容 input标签 ...