热爱web前端
技术分享平台

javascript 面向对象进阶

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

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

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

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

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

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

4,积分

5,等级设定

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

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

    function Cell (){
}

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

    function Cell(){
          // view是 Cell 对象在页面中显示的根本,`this.`就是代表Cell这个对象
          this.view = document.createElement("div");
}

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

    function Cell(){
          // view是 Cell 对象在页面中显示的根本,`this.`就是代表Cell这个对象
          this.view = document.createElement("div");

          // 方块默认在 0排0列出现,为什么是0 而不是1,计算机中一般都是以0开始的,好吧,因为数组是从0开始的
          this.row =0;
          this.col =0;

          // color 你可能注意到,方块的颜色是不一样的,
          this.color="#000000"  // 默认是黑色,这个颜色是动态的
}

2.4 一个基本的方块对象

    // 构造函数一般用于对象的一些初始化操作,很多人喜欢用init 函数来初始化,你也可以直接在构造函数里面初始化
    // 注意代码和上面代码的不同
    function Cell(row,col,color){
          // view是 Cell 对象在页面中显示的根本,`this.`就是代表Cell这个对象
          this.view = document.createElement("div");

          // 方块默认在 0排0列出现,为什么是0 而不是1,计算机中一般都是以0开始的,好吧,因为数组是从0开始的
          this.row = row;
          this.col = col;
          // color 你可能注意到,方块的颜色是不一样的,
          // 这两个color 有啥区别呢,有区别,你可以粗暴的理解为 color是局部变量,这个函数执行完毕就会被销毁的东西,this. 是当前这个对象Cell
          this.color=color ;
}

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

var greenCell = new Cell(0,5,"green");
var redCell =new Cell (1,5,"red");
var blueCell =new Cell(2,5,"blue");
var yellowCell =new Cell(3,5,"yellow");// 终于凑够了四个颜色的方块,词穷,你们还可以创建出更多的

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

 
var cell = new Cell();// 默认是一个 在 0排0列黑色的方块,还记得吗?如果要让他变成绿色的呢?
// 变成绿色的
cell.color = "green"; 此时的cell 就是 Cell 构造函数里面的this,前提是 必须是new Cell;
//看看上面的代码写了两行,浪费内存啊,所以在2.4中通过参数传到构造函数里面,这些初始化的事情应该交给它来干

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

未经允许不得转载:前端网(w3cvip) » javascript 面向对象进阶

分享到:更多 ()

评论 2

评论前必须登录!

 

  1. #1

    面向对象有些难的哟、、、、

    • 琴歌

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

      琴歌2个月前 (12-28)