c2游戏编程 p2讲义要点2 js游戏编程技术

c2游戏编程 p2讲义要点2 js游戏编程技术

项目架构Model,View,Control

1. Model
2. View
3. Contrl

1.Model

cnt=0; //时间轴的计数器，时间片 0,1,2,3，…

地图 map = new Array(); //地图二维数组 0表示没有格子，1表示有格子
七种基本类型：8个整数，表示4个小块的相对坐标
（x1,y1,x2,y2,x3,y3,x4,y4）

shapes=[
		[0,1,1,1,2,1,3,1 ],
		[ 1,0,1,1,1,2,2,2 ],
		[ 2,0,2,1,2,2,1,2 ],
		[ 0,1,1,1,1,2,2,2 ],
		[ 1,2,2,2,2,1,3,1 ],
		[ 1,1,2,1,1,2,2,2 ],
		[ 0,2,1,2,1,1,2,2 ]
	 ];

当前活动块，当前活动块的左上角坐标，种类id：七种的哪一种
block_ar=[ 0,0, 0,0 ,0,0 ,0,0];
block_id=1;
block_x=0;
block_y=0;
三种状态：简单的有限状态机，复杂的设计模式–状态模式
isover=0;
isNewBlock=0; //产生新块
ispause=0;

分数模块：

	 单独做出一个库文件
	 var score_v=0;

2.View

画布

<canvas width="260" height="450" id="tetris" style='float: left;'> </canvas>

绘图总入口:输出调试信息，画出所有元素

调试信息：时间片，方块坐标
A. 绘图总入口: 输出调试信息，画地图背景，画当前块，显示分数
function gamepaint()
B.封装paints方法：输出一个小正方形
function paintfr(x, y)
C.输出四个小正方形
function paintBlock()
D.格子地图
function paintMap()
调试：调试数据输出到网页
调试：调试数据输出到控制台 console.log(数据);
…

3.Control 鼠标键盘事件，业务逻辑

键盘事件
document.onkeydown =function(e) { 多分支 }
键盘事件的处理函数，单独做成一个库文件 control.js

功能： 处理上下左右按键
业务逻辑1：方块的产生
业务逻辑2： 刷新数据：

• 方块的移动、旋转；
• 判断能否移动；
• 刷新地图二维数组，下落结束，固定四个小正方形。
• 查找、消除一行
• 统计分数
• 产生新块

改变状态
状态：是否获胜，是否产生新块，是否暂停
isover=0;
isNewBlock=0; //产生新块
ispause=0;