HTML5로 놀면서 배우기 (9) - 테트리스의 데이터 모델

1. 데이터 또는 인터페이스에서 시작

테트리스 미니 게임을 작성하려면 먼저 다음 문제를 고려해 보겠습니다.

1 , 무엇을 사용할지 블록 표현

2. 블록 색상 설정 및 변경 방법

3. 블록 이동 방법

4. 블록 제거 방법

잠시 후에 다시 아래를 살펴보세요. . . . . .

위 질문에 대해 생각해 보면 각 답변은 인터페이스, 컨트롤, 플랫폼과 관련이 있습니다. 즉, .Net을 사용하는 경우 각 답변은 컨트롤 사용 방법에 관한 것입니다. . 언어 및 개발 플랫폼을 통해 제어보다는 문제 자체에 더 집중할 수 있습니다.

기억하세요: 프로그램 = 데이터 구조 + 알고리즘

인터페이스는 데이터의 겉모습일 뿐이며, 데이터는 문제의 본질입니다.

아래에서는 테트리스 게임용 데이터 모델을 단계별로 구축해 보겠습니다. 전체 모델이 구축되면 인터페이스는 없지만 완전한 기능을 발휘하는 데 방해가 되지는 않습니다. 테트리스 게임. 일어난 모든 일이 명확했기 때문에 우리는 그것을 그리지 않았습니다. 물론, 다음 글에서는 인터페이스 문제에 대해 구체적으로 다루도록 하겠습니다.

2. "모양" 데이터 모델

테트리스는 지속적인 미니 게임이며, 가장 일반적인 버전에는 일반적으로 다음과 같은 7가지 모양이 포함됩니다. :

아래와 같이 선형, S자형, Z자형, L자형, 역L자형, T자형, 정사각형 등:

그렇다면 이 7가지 도형을 프로그램에서 어떻게 표현할까요? 각 도형은 네 개의 작은 사각형으로 구성되어 있으며 이를 네 점으로 표현할 수 있다는 것을 알아냈습니다.

그런데 또 질문이 나오네요. 네 점의 좌표는 무엇인가요? 내가 찾은 방법은 다음과 같습니다. 각 모양에는 고유한 좌표계가 있습니다. 예를 들어 S 모양은 다음 그림으로 표현할 수 있습니다.

이런 식으로 S자형 데이터 모델은 [ [ 0, -1 ], [ 0, 0 ], [ -1, 0 ], [ -1 4개 점의 배열로 표현될 수 있습니다. , 1 ] ] .

같은 방법을 사용하여 다른 모양의 배열 모델을 만든 다음 이 7개 모양의 배열 모델을 결합하여 큰 배열을 만들 수 있습니다.

또한 각 모양은 단색일 수도 있고 고유한 색상을 가질 수도 있습니다. 색상을 추가하면 프로그래밍이 복잡해지지만 그다지 많지는 않으므로 모델에서도 색상을 고려할 것입니다.

마지막으로, 도형 배열과 색상 배열에 적용하기 쉽도록 각 도형에 번호를 부여하는 것이 좋습니다.

위 분석을 완료한 후 모양 데이터 모델의 코드를 제공할 수 있습니다.

形状模型的代码 



Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->//各种形状的编号，0代表没有形状
NoShape=0;
ZShape=1;
SShape=2;
LineShape=3;
TShape=4;
SquareShape=5;
LShape=6;
MirroredLShape=7

//各种形状的颜色
Colors=["black","fuchsia","#cff","red","orange","aqua","green","yellow"];

//各种形状的数据描述
Shapes=[
    [ [ 0, 0 ],   [ 0, 0 ],   [ 0, 0 ],   [ 0, 0 ] ],
    [ [ 0, -1 ],  [ 0, 0 ],   [ -1, 0 ],  [ -1, 1 ] ],
    [ [ 0, -1 ],  [ 0, 0 ],   [ 1, 0 ],   [ 1, 1 ] ],
    [ [ 0, -1 ],  [ 0, 0 ],   [ 0, 1 ],   [ 0, 2 ] ],
    [ [ -1, 0 ],  [ 0, 0 ],   [ 1, 0 ],   [ 0, 1 ] ],
    [ [ 0, 0 ],   [ 1, 0 ],   [ 0, 1 ],   [ 1, 1 ] ],
    [ [ -1, -1 ], [ 0, -1 ],  [ 0, 0 ],   [ 0, 1 ] ],
    [ [ 1, -1 ],  [ 0, -1 ],  [ 0, 0 ],   [ 0, 1 ] ]
];

3. 모양 위치 지정 및 회전

1. 포지셔닝

위에서 각 모양이 자체 좌표계로 설명된다고 언급했는데, 포지셔닝을 정의하는 데 사용되는 전역 좌표계도 있습니다. 도형의 위치를 ​​지정하려면 도형의 네 점을 자체 좌표계 에서 전역 좌표계로 변환하는 방법이 필요합니다.

자체 좌표계에서 S 유형의 네 점의 좌표가 [ [ 0, -1 ], [ 0, 0 ], [ -1, 0 ], [ -1, 1 ] ]

전역 좌표계의 현재 위치는 [12,8]

그러면 전역 좌표계로 변환된 네 점의 좌표는 [ [ 0+ 12, -1+8 ] , [ 0+12, 0+8 ], [ -1+12, 0+8 ], [ -1+12, 1+8 ] ]

이런 식으로, S-type Convert의 전역 좌표를 완성했습니다.

여기서 주목해야 할 문제는 도형 자체의 좌표계를 (x, y)로 표현한 반면, 전역 좌표계는 (row, col)로 표현했기 때문에 좀 더 논리적으로 직관적입니다. 실제로 프로그래밍에서는 위와 같이 변환되지 않지만

[ [ -1+12, 0+8 ], [ 0+12, 0+8 ], [ 0+12, -1+ 8 ], [ 1+12, -1+8 ] ]

즉, 먼저 x를 열로, y를 행으로 변경한 다음 전역 좌표계로 변환합니다.

2. 회전

도형 자체의 좌표계와 도형의 원점을 중심으로 회전이 이루어집니다. 회전 후 점의 좌표와 회전 전 좌표의 관계는 다음과 같습니다(오른쪽으로 회전):

x' = y

y' = -x

참고 :블록 모양은 회전하지 않습니다.

위의 분석을 통해 도형을 전체적으로 배치하고 회전하는 데 사용되는 두 가지 전역 방법을 제공할 수 있습니다.

全局定位和旋转的代码 



Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->//将形状自身的坐标系转换为  Map 的坐标系，row col 为当前形状原点在 Map 中的位置
function translate(data,row,col){
    var copy=[];
    for(var i=0;i<4;i++){
        var temp={};
        temp.row=data[i][1]+row;
        temp.col=data[i][0]+col;
        copy.push(temp);
    }
    return copy;
}

//向右旋转一个形状：x&#39;=y, y&#39;=-x
function rotate(data){
    var copy=[[],[],[],[]];
    for(var i=0;i<4;i++){
        copy[i][0]=data[i][1];
        copy[i][1]=-data[i][0];
    }
    return copy;
}

4 공간 이동

前面我们说过，形状是由四个点组成的，而形状的移动空间也是由 m * n 个点组成的一个二维数组。

这里为了更直观的描述，我将 n 个点组成一条线 Line，再将 m 条 Line 组成形状的移动空间，我把它叫做 Map 。

我们有了这 m * n 个点有什么用呢？用处很简单，就是保存形状的编号，如果一个点没有被形状占用，则编号为 NoShape。这就是前面给出形状编号的用处，同时也是为什么要有一个 NoShape 编号的原因。

Map 应该具有什么功能呢？下面我列举了一些：

1、构造函数：这不用说了，n 个点组成一行 Line， m 行 Line 组成Map，每个点初始化成 NoShape

2、newLine：生成新的一行。为什么需要这个方法呢，因为除了构造函数中，游戏运行过程中我们也需要用到它，当一行或者几行被消除以后，我们需要在顶部假如一行或者几行新的Line

3、isFullLine(row)：这个方法用来判断第 row 行是否满了，每次一个形状落地后，就需要对每一行进行这个判断，满了当然是消除了。

4、isCollide(data): data 是一个定位后的形状数据，这样我们就可以检查这些数据是否超出移动空间的上下左右边界，另外还检查数据的四个点是否已经被占用，这就是碰撞检测。

5、appendShape(shape_id,data)：当一个形状落地以后，我们就应该将运行空间中某些点的值改变为这个形状的编号，我把这称为占用。

6、消除操作：这个功能没有单独列为一个方法，我把它放在 appendShape 方法中了。消除操作也很简单，发现某一行 isFullLine 了以后，在 lines 数组中移除这一行，并在 lines 数组的顶部加入一个空行即可。

有了上面的分析，我们就可以给出移动空间的代码了：

移动空间的代码 



Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->/*
 * 说明：由 m 行 Line 组成的格子阵
 */
function  Map(w,h){
    //游戏区域的长度和宽度
    this.width=w;
    this.height=h;
    //生成 height 个 line 对象，每个 line 宽度为 width
    this.lines=[];
    for(var row=0;row<h;row++)
        this.lines[row]=this.newLine();
}

//说明：间由 n 个格子组成的一行
Map.prototype.newLine=function(){
    var shapes=[];
    for(var col=0;col<this.width;col++)
        shapes[col]=NoShape;
    return shapes;
}

//判断一行是否全部被占用
//如果有一个格子为 NoShape 则返回 false
Map.prototype.isFullLine=function(row){
    var line=this.lines[row];
    for(var col=0;col<this.width;col++)
        if(line[col]==NoShape)
            return false
    return true;
}
/*
 * 预先移动或者旋转形状，然后分析形状中的四个点是否有碰撞情况：
 *      1：col<0 || col>this.width 超出左右边界
 *      2：row==this.height ，说明形状已经到最底部
 *      3：任意一点的 shape_id 不为 NoShape ，则发生碰撞
 *  如果发生碰撞则放弃移动或者旋转
 */
Map.prototype.isCollide=function(data){
    for(var i=0;i<4;i++){
        var row=data[i].row;
        var col=data[i].col;
        if(col<0 || col==this.width) return true;
        if(row==this.height) return true;
        if(row<0) continue;
        else
            if(this.lines[row][col]!=NoShape)
                return true;
    }
    return false;
}

//形状在向下移动过程中发生碰撞，则将形状加入到 Map 中
Map.prototype.appendShape=function(shape_id,data){
    //对于形状的四个点：
    for(var i=0;i<4;i++){
        var row=data[i].row;
        var col=data[i].col;
        //找到所在的格子,将格子的颜色改为形状的颜色
        this.lines[row][col]=shape_id;
    }
    //========================================
    //形状被加入到 Map 中后，要进行逐行检测，发现满行则消除
    for(var row=0;row<this.height;row++){
        if(this.isFullLine(row)){
            //将满的那一行替换成新的空，这一步主要是为了显示效果，可以不要！
            //this.lines[row]=null;
            //重绘 Map 消除效果
            //onClearLine(row);
            //将满行删除
            this.lines.splice(row,1);
            //第一行添加新的一行
            this.lines.unshift(this.newLine());
            //重绘 Map 整行下落效果
            onDraw(this.lines);
        }
    }
}

五、游戏模型

我们有了游戏的数据模型，我们就可以读写他们了。所谓读好理解，所谓写就是改变他们，改变的方法当然是用户的操作了。

下面给出 GameModel 类，他维护三个主要的数据：

1、一个形状的编号，就是用户可以操作移动的那个形状

2、形状的全局位置，用 row col 表示

3、一个 Map，用它完成碰撞检测，添加等操作

另外，还抽象出几个用户的操作动作：

1、left：左移。将形状的全局坐标 col  减少 1 。请思考一下，这样就可以了吗？当然不行，我们还需要进行碰撞检测，如果已经在最左边，则放弃处理。

2、right：右移。同上。

3、rotate：旋转。同上。

4、down：下落。同上。下落过程中的碰撞检测有所不同，一旦发生碰撞，我们不能再放弃处理了，而是要将当前形状加入到空间中。

5、GameOver：下落过程中还需要进行一个检测就是游戏是否结束。如果当前形状在出生地点刚一下落就发生碰撞，说明已经到顶部了，则游戏结束。

有了上面的分析，我们就可以给出 GameModel 的代码：

GameModel 代码 



Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->/*
 * 说明：GameModel 类
 */
function GameModel(w,h){
    this.map=new Map(w,h);
    this.born();
}

//出生一个新的形状
GameModel.prototype.born=function(){
    //随机选择一个形状
    this.shape_id=Math.floor(Math.random()*7)+1;
    this.data=Shapes[this.shape_id];
    //重置形状的位置为出生地点
    this.row=1;
    this.col=Math.floor(this.map.width/2);
    //通知绘制移动效果，传回数据为形状的四个点在 Map 中的位置
    onMove(this.shape_id,this.map,translate(this.data,this.row,this.col));
}

//向左移动
GameModel.prototype.left=function(){
    this.col--;
    var temp=translate(this.data,this.row,this.col);
    if(this.map.isCollide(temp))
    //发生碰撞则放弃移动
        this.col++;
    else
    //通知绘制移动效果，传回数据为形状的四个点在 Map 中的位置
        onMove(this.shape_id,this.map,temp);
}

//向右移动
GameModel.prototype.right=function(){
    this.col++;
    var temp=translate(this.data,this.row,this.col);
    if(this.map.isCollide(temp))
        this.col--;
    else
        onMove(this.shape_id,this.map,temp);
}

//旋转
GameModel.prototype.rotate=function(){
    //正方形不旋转
    if(this.shape_id==SquareShape) return;
    //获得旋转后的数据
    var copy=rotate(this.data);
    //转换坐标系
    var temp=translate(copy,this.row,this.col);
    //发生碰撞则放弃旋转
    if(this.map.isCollide(temp))
        return;
    //将旋转后的数据设为当前数据
    this.data=copy;
    //通知绘制移动效果，传回数据为形状的四个点在 Map 中的位置
    onMove(this.shape_id,this.map,translate(this.data,this.row,this.col));
}

//下落
GameModel.prototype.down=function(){
    var old=translate(this.data,this.row,this.col);
    this.row++;
    var temp=translate(this.data,this.row,this.col);
    if(this.map.isCollide(temp)){
        //发生碰撞则放弃下落
        this.row--;
        //如果在 1 也无法下落，说明游戏结束
        if(this.row==1) {
            //通知游戏结束
            //onGameOver();
            alert("Game Over")
            return;
        }
        //无法下落则将当前形状加入到 Map 中
        this.map.appendShape(this.shape_id,old);
        //出生一个新的形状
        this.born();
    }
    else
    //通知绘制移动效果，传回数据为形状的四个点在 Map 中的位置
        onMove(this.shape_id,this.map,temp);
}

六、一个简单的操作界面

虽然到现在为止，我们没有给出一行和界面有关的代码，但是整个游戏在逻辑上已经完全可以运行起来了，只是我们没有把他画出来而已，要想把他画出来也很简单。

注意上面给出的代码中很多地方调用了两个全局函数：onDraw 和 onMove ，这两个函数就是用来进行绘制的。

绘制的代码其实只占很少的一部分，其中一些绘图函数我为了方便对 HTML5 的 2D 函数进行了简单的封装，您完全可以用原生的 HTML5 函数，或者用您自己平台的绘图函数，因为他们本身不是太复杂。

另外有一个全局变量 Spacing ，他表示一个格子的宽度。

下面给出操作界面的代码：

界面操作代码 



Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->//每一格的间距，也即一个小方块的尺寸
Spacing=20;

//在内存中绘制一个小方块
function drawRect(color){
    var temp=new Surface(Spacing,Spacing,"rgba(255,255,255,0.2)");//背景色
    temp.fillRect(1, 1, Spacing-2, Spacing-2, color);//前景色
    return temp;
}

var display= Display.attach(document.getElementById("html5_09_1"));
var model = new GameModel(display.width/Spacing,display.height/Spacing);


function onDraw(map){
    //清屏
    display.clear();
    var lines=map.lines;
    //依次绘制每一个非空的格子
    for(var row=0;row<map.height;row++)
        for(var col=0;col<map.width;col++){
            var shape_id=lines[row][col];
            if(shape_id!=NoShape){
                var rect = drawRect(Colors[shape_id]);
                var y=row * Spacing;
                var x=col * Spacing;
                display.draw(rect, x, y);
            }
    }
}

function onMove(shape_id,map,data){
    onDraw(map);
    //绘制当前的形状
    for(var i=0;i<4;i++){
        var y=data[i].row * Spacing;
        var x=data[i].col * Spacing;
        var rect = drawRect(Colors[shape_id]);
        display.draw(rect, x, y);
    }
}

function down(){
    model.down();
}

function left(){
    model.left();
}

function right(){
    model.right();
}

function rotate_click(){
    model.rotate();
}

七、如何改进

到现在为止，程序已经基本能运行起来了，但是还没有加入键盘操作，另外还有一个很大的问题就是：程序有时候会“算死”。为什么会出现这个现象呢？

做个实验，不管你用什么平台，你用绘图函数，先清屏，然后随机绘制一条直线，连续循环1000次。你会发现，前面999次，并看不到清屏和绘制效果，而且程序都会失去响应，等到1000次完成后，你才能看到最后一条直线，程序重新接受响应。这就是“算死”，解决的方法就是把绘制动作放在计时器或者线程里面，到下一篇，我们会解决这个问题。

 

위 내용은 HTML5로 놀면서 배우기 (9) - 테트리스의 데이터 모델의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!