web前端

javascript 面向对象进阶

当你知道如何创建类的时候,估计你也会急着知道 到底该在哪些地方使用。。下面我通过一个 俄罗斯方块小游戏来为 大家讲解,如何在实践中使用oop,这个游戏很简单,代码量很少,如果能好好掌握,会对你有不少帮助。大神请回避~~~

解决问题首先要做的就是设计这个游戏的结构,而不是一来就打开编辑器开始写代码。光靠意淫根本无法组织,只是一盘散沙。还是要在本子画画写写,有助于你快速理清问题。

一下先列出,要构建俄罗斯方块游戏所需要的东西,什么东西呢~~ ,当然是对象咯

1 ,格子(小方块),俄罗斯方块 由 四个小方块组成一个类似于 I O L S Z P 形状的玩意儿,这是组成俄罗斯方块的最基本元素

2, 格子的容器(墙) ,就像小学时候的生字本一样,一排有10个格子,一共有10排,这一页纸就可以理解为

3,几个按钮,分别是 暂停,开始,停止

4,积分

5,等级设定

6,预览下一个方块(俄罗斯方块一般右上角都会显示下一个方块的样子,好让你有个准备)

二:开始实现,游戏最基本的单元 格子,先定义一个 格子对象 Cell

2.1 定义好对象之后,这个对象并不具备任何功能,所以我们要思考游戏中的方块都有哪些功能。
2.2 如果要在html页面中,显示一个方块那么至少有一个 dom对象 div or span ...,代码完善下

2.3 位置,方块在画布上有一个坐标,可以用x 后者 y表示,这里使用 行 和列来表示 格式当前的位置

2.4 一个基本的方块对象

*到这里你已经创建了组成俄罗斯方块最基本的东西了先在浏览器控制台看看
编写代码,有个很重要的环节,就是单元测试,编写测试用例。而不是把整个游戏干完,在来测试,那时候可能问题,一大堆,你不知道从哪开始找~~

请看2.3中的代码,如果我要创建一个cell会是这样的

你可以打开浏览器在控制台中 直接输入 greenCell 回车看看会显示什么 再输入redCell 、bluCell、yellowCell、cell 来看看
***游戏代码量不多,但是对于新手需要慢慢消化,别着急。下次再更新,先消化下,你可以依葫芦画瓢,创建一些其他对象,就当时预习,或者举一反三 整写其他的多多消化
~~~ 未完待续

(0)
Loading收藏(52)

本文由 前端网(w3cvip) 作者:zuimeiaj 发表,转载请注明来源!

热评文章

发表评论

*

评论: 2 条评论,访客:1 条,博主:1 条

    • 琴歌
      琴歌 发布于:  回复

      这个其实不难的,你学习面向对象思想~~ 然后对这个就很清晰了~ 万物皆对象~~~~