HTML5 canvas游戏开发实战 6 : 俄罗斯方块

最新推荐文章于 2024-05-02 14:20:30 发布
最新推荐文章于 2024-05-02 14:20:30 发布
阅读量2.4k 收藏 13
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/QFire/article/details/79278433
版权

6.1 游戏分析

   图片描画

   文字绘制

   循环播放事件

   键盘事件

   触屏事件

   游戏层次划分：背景层、进度条显示层、方块绘制层，方块预览层4层。

6.2 必要的JavaScript知识

   这款游戏的重点在于二维数组的应用，通过建立二维坐标数组，可实现方块的移动、变形以及判定。

   JS中定义二维数组的定义如下：

var a = new Array(

   new Array(0, 0);

   new Array(1,1);

);

6.3 游戏标题画面显示

   用LSprite对象的graphics属性和LTextField对象来制作一个游戏标题画面

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>俄罗斯方块</title>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-touch-fullscreen" content="yes" />
<script type="text/javascript" src="../lufylegend-1.7.6.min.js"></script> 
<script type="text/javascript" src="./js/Main.js"></script> 
<script type="text/javascript" src="./js/Box.js"></script> 
</head>
<body>
<div id="mylegend">loading……</div>
<script>
function doScroll() {
	if(window.pageYOffset === 0) {
		window.scrollTo(0, 1);
	}
}
window.onload = function() {
	setTimeout(doScroll, 100);
	//初始化
	init(30,"mylegend",320,480,main,LEvent.INIT);
}
window.onorientationchange = function() {
	setTimeout(doScroll, 100);
};
window.onresize = function() {
	setTimeout(doScroll, 100);
}
</script>
</body>
</html>


6.4 向游戏里添加方块

   准备4种不同颜色的方块图片

   方块类Box

function Box(){
	var self = this;
	self.box1=[[0,0,0,0],
		  [0,0,0,0],
		  [1,1,1,1],
		  [0,0,0,0]];
	self.box2=[[0,0,0,0],
		  [0,1,1,0],
		  [0,1,1,0],
		  [0,0,0,0]];
	self.box3=[[0,0,0,0],
		  [1,1,1,0],
		  [0,1,0,0],
		  [0,0,0,0]];
	self.box4=[[0,1,1,0],
		  [0,1,0,0],
		  [0,1,0,0],
		  [0,0,0,0]];
	self.box5=[[0,1,1,0],
		  [0,0,1,0],
		  [0,0,1,0],
		  [0,0,0,0]];
	self.box6=[[0,0,0,0],
		  [0,1,0,0],
		  [0,1,1,0],
		  [0,0,1,0]];
	self.box7=[[0,0,0,0],
		  [0,0,1,0],
		  [0,1,1,0],
		  [0,1,0,0]];
	self.box=[self.box1,self.box2,self.box3,self.box3,self.box4,self.box5,self.box6,self.box7];
}
Box.prototype = {
	getBox:function (){
		var self = this;
		var num=7*Math.random();
		var index=parseInt(num);
		var result = [];
		var colorIndex = 1 + Math.floor(Math.random()*4);
		var i,j;
		for(i=0;i<4;i++){
			var child = [];
			for(j=0;j<4;j++){
				child[j] = self.box[index][i][j]*colorIndex;
			}	
			result[i] = child;
		}
		return result;
	}
}

	//方块坐标数组初始化
	map=[
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0]
	];
   getNewBox函数的功能是将预览方块nextBox的值赋给当前下落的方块nowBox，然后重新获取预览方块数组。
   plusBox()函数中map数组和nodeList数组分别代表网格数组的值和它们对应位置所显示的图片，所以改变它们的值就可以使网格发生变化。

   minusBox函数移除方块

   当一个方块落到另一个方块上的时候，它就无法再继续往下落了。要实现此功能，每次循环的时候，必须在方块下落之前做一下判断。checkPlus

//进度条显示层，背景层，方块绘制层，方块预览层
var loadingLayer,backLayer,graphicsMap,nextLayer;
var imglist = {};
var imgData = new Array(
{name:"backImage",path:"./images/backImage.png"},
{name:"r1",path:"./images/r1.png"},
{name:"r2",path:"./images/r2.png"},
{name:"r3",path:"./images/r3.png"},
{name:"r4",path:"./images/r4.png"},
);
//方块类变量，用于生成新的方块
var BOX;
//当前方块的位置
var pointBox={x:0,y:0};
//当前方块，预览方块
var nowBox,nextBox;
//方块坐标数组
var map;
//方块数据数组
var nodeList;
//方块图片数组
var bitmapdataList;
//得分相关
var point=0,pointText;
//消除层数相关
var del=0,delText;
//方块下落速度相关
var speed=15,speedMax=15,speedText,speedIndex = 0;
//方块区域起始位置
var START_X1=15,START_Y1=20,START_X2=228,START_Y2=65;
function main() {
	//方块类变量初始化
	BOX = new Box();
	//方块坐标数组初始化
	map=[
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0]
	];
	backLayer = new LSprite();
	backLayer.graphics.drawRect(1,'#000000',[0,0,320,480],true,"#000000");
	addChild(backLayer);
	//进度条读取层
	loadingLayer = new LoadingSample1();
	backLayer.addChild(loadingLayer);
	LLoadManage.load(
		imgData,
		function(progress) {
			loadingLayer.setProgress(progress);
		},
	    gameInit
	);
}
//读取完所有图片，进行游戏标题画面的初始化工作
function gameInit(result) {
	//取得图片读取结果
	imglist = result;
	//移除进度条层
	backLayer.removeChild(loadingLayer);
	loadingLayer = null;
	//显示游戏标题
	var title = new LTextField();
	title.x = 50;
	title.y = 100;
	title.size = 30;
	title.color = "#ffffff";
	title.text = "俄罗斯方块";
	backLayer.addChild(title);
	//显示说明文字
	backLayer.graphics.drawRect(1,"#ffffff",[50,240,220,40]);
	var txtClick = new LTextField();
	txtClick.size = 18;
	txtClick.color = "#ffffff";
	txtClick.text = "点击页面开始游戏";
	txtClick.x = (LGlobal.width - txtClick.getWidth())/2;
	txtClick.y = 245;
	backLayer.addChild(txtClick);
	//添加点击事件，点击画面则游戏开始
	backLayer.addEventListener(LMouseEvent.MOUSE_UP,gameToStart);
}
//游戏画面初始化
function gameToStart(){
	backLayer.die();
	backLayer.removeAllChild();
	//背景图片显示
	var bitmap = new LBitmap(new LBitmapData(imglist["backImage"]));
	backLayer.addChild(bitmap);
	//得分表示
	pointText = new LTextField();
	pointText.x = 240;
	pointText.y = 200;
	pointText.size = 20;
	backLayer.addChild(pointText);
	//消除层数表示
	delText = new LTextField();
	delText.x = 240;
	delText.y = 290;
	delText.size = 20;
	backLayer.addChild(delText);
	//速度表示
	speedText = new LTextField();
	speedText.x = 240;
	speedText.y = 385;
	speedText.size = 20;
	backLayer.addChild(speedText);
	//将游戏得分，消除层数以及游戏速度显示到画面上
	showText();
	//方块绘制层初始化
	graphicsMap = new LSprite();
	backLayer.addChild(graphicsMap);
	//方块预览层初始化
	nextLayer = new LSprite();
	backLayer.addChild(nextLayer);
	//将方块的图片数据保存到数组内
	bitmapdataList = [
		new LBitmapData(imglist["r1"]),
		new LBitmapData(imglist["r2"]),
		new LBitmapData(imglist["r3"]),
		new LBitmapData(imglist["r4"])
	];
	//方块数据数组初始化
	nodeList = [];
	var i, j, nArr, bitmap;
	for (i=0; i<map.length; i++) {
		nArr = [];
		for (j=0; j<map[0].length; j++) {
			bitmap = new LBitmap(bitmapdataList[0]);
			bitmap.x = bitmap.getWidth()*j + START_X1;
			bitmap.y = bitmap.getHeight()*i + START_Y1;
			graphicsMap.addChild(bitmap);
			nArr[j] = {
				"index":-1,
				"value":0,
				"bitmap":bitmap
			};
		}
		nodeList[i] = nArr;
	}
	//预览层显示
	getNewBox();
	//将当前下落方块显示到画面上
	plusBox();
	//添加循环播放事件侦听
	backLayer.addEventListener(LEvent.ENTER_FRAME, onframe);
}
//游戏得分，消除层数以及游戏速度显示
function showText(){
	pointText.text = point;
	delText.text = del;
	speedText.text = speedMax - speed + 1;
}
//获取下一方块
function getNewBox() {
	if (nextBox == null) {
		nextBox = BOX.getBox();
	}
	nowBox = nextBox;
	pointBox.x = 3;
	pointBox.y = -4;
	nextBox = BOX.getBox();
	//
	nextLayer.removeAllChild();
	var i, j, bitmap;
	for (i=0; i<nextBox.length; i++) {
		for (j=0; j<nextBox[0].length; j++) {
			if (nextBox[i][j] == 0) {
				continue;
			}
			bitmap = new LBitmap(bitmapdataList[nextBox[i][j] -1]);
			bitmap.x = bitmap.getWidth()*j + START_X2;
			bitmap.y = bitmap.getHeight()*i + START_Y2;
			nextLayer.addChild(bitmap);
		}
	}
}
//添加方块
function plusBox() {
	var i, j;
	for (i=0; i<nowBox.length; i++) {
		for (j=0; j<nowBox[i].length; j++) {
			if (i+pointBox.y < 0 || i+pointBox.y >= map.length
				|| j+pointBox.x < 0 || j+pointBox.x >= map[0].length){
				continue;
			}
			map[i+pointBox.y][j+pointBox.x] = nowBox[i][j] + map[i+pointBox.y][j+pointBox.x];
			nodeList[i+pointBox.y][j+pointBox.x]["index"] = map[i+pointBox.y][j+pointBox.x] - 1;
		}
	}
}
//移除方块
function minusBox() {
	var i, j;
	for (i=0; i<nowBox.length; i++) {
		for (j=0; j<nowBox[i].length; j++){
			if (i+pointBox.y < 0 || i+pointBox.y >= map.length
				|| j+pointBox.x < 0 || j+pointBox.x >= map[0].length){
				continue;
			}
			map[i+pointBox.y][j+pointBox.x] = map[i+pointBox.y][j+pointBox.x] - nowBox[i][j];
			nodeList[i+pointBox.y][j+pointBox.x]["index"] = map[i+pointBox.y][j+pointBox.x] - 1;
		}
	}
}
//判断是否可移动，参数为当前方块在x轴和y轴移动的偏移量
function checkPlus(nx, ny){
	var i, j;
	for (i=0;i<nowBox.length;i++){
		for (j=0;j<nowBox[i].length;j++){
			if (i+pointBox.y + ny < 0) {
				continue;
			} else if (i+pointBox.y + ny >= map.length || j+pointBox.x + nx < 0 ||
				j+pointBox.x + nx >= map[0].length){
				//判断网格超出网格范围
				if (nowBox[i][j] == 0){
					continue;
				} else {
					return false;
				}
			}
			//判断网格的位置有方块，而将要移动到此位置的当前方块也不为空，则代表无法移动
			if (nowBox[i][j] > 0 && map[i+pointBox.y + ny][j+pointBox.x + nx] > 0){
				return false;
			}
		}
	}
	return true;
}
//绘制所有方块
function drawMap() {
	var i,j,box1 = 15;
	for (i=0;i<map.length;i++) {
		for (j=0; j<map[0].length; j++) {
			if (nodeList[i][j]["index"] >= 0){
				nodeList[i][j]["bitmap"].bitmapData = 
				   bitmapdataList[nodeList[i][j]["index"]];
			} else {
				nodeList[i][j]["bitmap"].bitmapData = null;
			}
		}
	}
}
//游戏结束
function gameOver() {
	backLayer.die();
	var txt = new LTextField();
	txt.color = "#ff0000";
	txt.size = 40;
	txt.text = "游戏结束";
	txt.x = (LGlobal.width - txt.getWidth())*0.5;
	txt.y = 200;
	backLayer.addChild(txt);
}
//循环播放
function onframe(){
	//首先，将当前下落方块移出画面
	minusBox();
	if (speedIndex ++ > speed){
		speedIndex = 0;
		//是否可下移一位
		if (checkPlus(0,1)) {
			pointBox.y++;
		} else {
			plusBox();
			if (pointBox.y < 0) {
				gameOver();
				return;
			}
			getNewBox();
		}
	}
	plusBox();
	drawMap();
}

6.5 控制方块的移动

   跨平台，同时给游戏添加键盘控制和触屏控制

   LGlobal.canTouch用来判断是否可以触屏的变量

   myKey.stepindex和myKey.step用来控制移动的频率

   changeBox函数方块旋转


   触屏控制

6.6 方块的消除和得分的显示

   当方块满一整行的时候，将其消除   

   moveLine(line)消除指定层的方块

   removeBox() 消除可消除的方块

   每消除100层，游戏速度就加快一点

//进度条显示层，背景层，方块绘制层，方块预览层
var loadingLayer,backLayer,graphicsMap,nextLayer;
var imglist = {};
var imgData = new Array(
{name:"backImage",path:"./images/backImage.png"},
{name:"r1",path:"./images/r1.png"},
{name:"r2",path:"./images/r2.png"},
{name:"r3",path:"./images/r3.png"},
{name:"r4",path:"./images/r4.png"},
);
//方块类变量，用于生成新的方块
var BOX;
//当前方块的位置
var pointBox={x:0,y:0};
//当前方块，预览方块
var nowBox,nextBox;
//方块坐标数组
var map;
//方块数据数组
var nodeList;
//方块图片数组
var bitmapdataList;
//得分相关
var point=0,pointText;
//消除层数相关
var del=0,delText;
//方块下落速度相关
var speed=15,speedMax=15,speedText,speedIndex = 0;
//方块区域起始位置
var START_X1=15,START_Y1=20,START_X2=228,START_Y2=65;
//控制相关
var myKey = {
	keyControl:null,
	step:1,
	stepindex:0,
	isTouchDown:false,
	touchX:0,
	touchY:0,
	touchMove:false
};
function main() {
	//方块类变量初始化
	BOX = new Box();
	//方块坐标数组初始化
	map=[
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0]
	];
	backLayer = new LSprite();
	backLayer.graphics.drawRect(1,'#000000',[0,0,320,480],true,"#000000");
	addChild(backLayer);
	//进度条读取层
	loadingLayer = new LoadingSample1();
	backLayer.addChild(loadingLayer);
	LLoadManage.load(
		imgData,
		function(progress) {
			loadingLayer.setProgress(progress);
		},
	    gameInit
	);
}
//读取完所有图片，进行游戏标题画面的初始化工作
function gameInit(result) {
	//取得图片读取结果
	imglist = result;
	//移除进度条层
	backLayer.removeChild(loadingLayer);
	loadingLayer = null;
	//显示游戏标题
	var title = new LTextField();
	title.x = 50;
	title.y = 100;
	title.size = 30;
	title.color = "#ffffff";
	title.text = "俄罗斯方块";
	backLayer.addChild(title);
	//显示说明文字
	backLayer.graphics.drawRect(1,"#ffffff",[50,240,220,40]);
	var txtClick = new LTextField();
	txtClick.size = 18;
	txtClick.color = "#ffffff";
	txtClick.text = "点击页面开始游戏";
	txtClick.x = (LGlobal.width - txtClick.getWidth())/2;
	txtClick.y = 245;
	backLayer.addChild(txtClick);
	//添加点击事件，点击画面则游戏开始
	backLayer.addEventListener(LMouseEvent.MOUSE_UP,gameToStart);
}
//游戏画面初始化
function gameToStart(){
	backLayer.die();
	backLayer.removeAllChild();
	//背景图片显示
	var bitmap = new LBitmap(new LBitmapData(imglist["backImage"]));
	backLayer.addChild(bitmap);
	//得分表示
	pointText = new LTextField();
	pointText.x = 240;
	pointText.y = 200;
	pointText.size = 20;
	backLayer.addChild(pointText);
	//消除层数表示
	delText = new LTextField();
	delText.x = 240;
	delText.y = 290;
	delText.size = 20;
	backLayer.addChild(delText);
	//速度表示
	speedText = new LTextField();
	speedText.x = 240;
	speedText.y = 385;
	speedText.size = 20;
	backLayer.addChild(speedText);
	//将游戏得分，消除层数以及游戏速度显示到画面上
	showText();
	//方块绘制层初始化
	graphicsMap = new LSprite();
	backLayer.addChild(graphicsMap);
	//方块预览层初始化
	nextLayer = new LSprite();
	backLayer.addChild(nextLayer);
	//将方块的图片数据保存到数组内
	bitmapdataList = [
		new LBitmapData(imglist["r1"]),
		new LBitmapData(imglist["r2"]),
		new LBitmapData(imglist["r3"]),
		new LBitmapData(imglist["r4"])
	];
	//方块数据数组初始化
	nodeList = [];
	var i, j, nArr, bitmap;
	for (i=0; i<map.length; i++) {
		nArr = [];
		for (j=0; j<map[0].length; j++) {
			bitmap = new LBitmap(bitmapdataList[0]);
			bitmap.x = bitmap.getWidth()*j + START_X1;
			bitmap.y = bitmap.getHeight()*i + START_Y1;
			graphicsMap.addChild(bitmap);
			nArr[j] = {
				"index":-1,
				"value":0,
				"bitmap":bitmap
			};
		}
		nodeList[i] = nArr;
	}
	//预览层显示
	getNewBox();
	//将当前下落方块显示到画面上
	plusBox();
	//添加循环播放事件侦听
	backLayer.addEventListener(LEvent.ENTER_FRAME, onframe);
	//添加鼠标按下，鼠标弹起和鼠标移动事件
	backLayer.addEventListener(LMouseEvent.MOUSE_DOWN,touchDown);
	backLayer.addEventListener(LMouseEvent.MOUSE_UP,touchUp);
	backLayer.addEventListener(LMouseEvent.MOUSE_MOVE,touchMove);
	if(!LGlobal.canTouch){
		//PC的时候，添加键盘事件 【上 下 左 右】
		LEvent.addEventListener(LGlobal.window,LKeyboardEvent.KEY_DOWN,onkeydown);
		LEvent.addEventListener(LGlobal.window,LKeyboardEvent.KEY_UP,onkeyup);
	}
}
//游戏得分，消除层数以及游戏速度显示
function showText(){
	pointText.text = point;
	delText.text = del;
	speedText.text = speedMax - speed + 1;
}
//获取下一方块
function getNewBox() {
	if (nextBox == null) {
		nextBox = BOX.getBox();
	}
	nowBox = nextBox;
	pointBox.x = 3;
	pointBox.y = -4;
	nextBox = BOX.getBox();
	//
	nextLayer.removeAllChild();
	var i, j, bitmap;
	for (i=0; i<nextBox.length; i++) {
		for (j=0; j<nextBox[0].length; j++) {
			if (nextBox[i][j] == 0) {
				continue;
			}
			bitmap = new LBitmap(bitmapdataList[nextBox[i][j] -1]);
			bitmap.x = bitmap.getWidth()*j + START_X2;
			bitmap.y = bitmap.getHeight()*i + START_Y2;
			nextLayer.addChild(bitmap);
		}
	}
}
//添加方块
function plusBox() {
	var i, j;
	for (i=0; i<nowBox.length; i++) {
		for (j=0; j<nowBox[i].length; j++) {
			if (i+pointBox.y < 0 || i+pointBox.y >= map.length
				|| j+pointBox.x < 0 || j+pointBox.x >= map[0].length){
				continue;
			}
			map[i+pointBox.y][j+pointBox.x] = nowBox[i][j] + map[i+pointBox.y][j+pointBox.x];
			nodeList[i+pointBox.y][j+pointBox.x]["index"] = map[i+pointBox.y][j+pointBox.x] - 1;
		}
	}
}
//移除方块
function minusBox() {
	var i, j;
	for (i=0; i<nowBox.length; i++) {
		for (j=0; j<nowBox[i].length; j++){
			if (i+pointBox.y < 0 || i+pointBox.y >= map.length
				|| j+pointBox.x < 0 || j+pointBox.x >= map[0].length){
				continue;
			}
			map[i+pointBox.y][j+pointBox.x] = map[i+pointBox.y][j+pointBox.x] - nowBox[i][j];
			nodeList[i+pointBox.y][j+pointBox.x]["index"] = map[i+pointBox.y][j+pointBox.x] - 1;
		}
	}
}
//判断是否可移动，参数为当前方块在x轴和y轴移动的偏移量
function checkPlus(nx, ny){
	var i, j;
	for (i=0;i<nowBox.length;i++){
		for (j=0;j<nowBox[i].length;j++){
			if (i+pointBox.y + ny < 0) {
				continue;
			} else if (i+pointBox.y + ny >= map.length || j+pointBox.x + nx < 0 ||
				j+pointBox.x + nx >= map[0].length){
				//判断网格超出网格范围
				if (nowBox[i][j] == 0){
					continue;
				} else {
					return false;
				}
			}
			//判断网格的位置有方块，而将要移动到此位置的当前方块也不为空，则代表无法移动
			if (nowBox[i][j] > 0 && map[i+pointBox.y + ny][j+pointBox.x + nx] > 0){
				return false;
			}
		}
	}
	return true;
}
//绘制所有方块
function drawMap() {
	var i,j,box1 = 15;
	for (i=0;i<map.length;i++) {
		for (j=0; j<map[0].length; j++) {
			if (nodeList[i][j]["index"] >= 0){
				nodeList[i][j]["bitmap"].bitmapData = 
				   bitmapdataList[nodeList[i][j]["index"]];
			} else {
				nodeList[i][j]["bitmap"].bitmapData = null;
			}
		}
	}
}
//游戏结束
function gameOver() {
	backLayer.die();
	var txt = new LTextField();
	txt.color = "#ff0000";
	txt.size = 40;
	txt.text = "游戏结束";
	txt.x = (LGlobal.width - txt.getWidth())*0.5;
	txt.y = 200;
	backLayer.addChild(txt);
}
//键盘按下事件
function onkeydown(event){
	if (myKey.keyControl != null) return;
	if (event.keyCode == 37) {
		myKey.keyControl = "left";
	} else if (event.keyCode == 38) {
		myKey.keyControl = "up";
	} else if (event.keyCode == 39) {
		myKey.keyControl = "right";
	} else if (event.keyCode == 40) {
		myKey.keyControl = "down";
	}
}
//键盘弹起事件
function onkeyup(event) {
	myKey.keyControl = null;
	myKey.stepindex = 0;
}
//方块变形
function changeBox() {
	var saveBox = nowBox;
	nowBox = [
	[0,0,0,0],
	[0,0,0,0],
	[0,0,0,0],
	[0,0,0,0],
	];
	var i, j;
	for (i=0; i<saveBox.length; i++){
		for (j=0; j<saveBox[1].length; j++) {
			nowBox[i][j] = saveBox[(3-j)][i];
		}
	}
	if (!checkPlus(0,0)){
		nowBox = saveBox;
	}
}
//鼠标按下
function touchDown(event){
	myKey.isTouchDown = true;
	myKey.touchX = Math.floor(event.selfX / 20);
	myKey.touchY = Math.floor(event.selfY / 20);
	myKey.touchMove = false;
	myKey.keyControl = null;
}
//鼠标弹起
function touchUp(event){
	myKey.isTouchDown = false;
	if(!myKey.touchMove)myKey.keyControl = "up";
}
//鼠标移动
function touchMove(event){
	if(!myKey.isTouchDown)return;
	var mx = Math.floor(event.selfX / 20);
	if(myKey.touchX == 0){
		myKey.touchX = mx;
		myKey.touchY = Math.floor(event.selfY / 20);
	}
	if(mx > myKey.touchX){
		myKey.keyControl = "right";
	}else if(mx < myKey.touchX){
		myKey.keyControl = "left";
	}
	if(Math.floor(event.selfY / 20) > myKey.touchY){
		myKey.keyControl = "down";
	}
}
//消除指定层的方块
function moveLine(line){
	var i;
	for (i=line; i>1; i--){
		for (j=0; j<map[0].length; j++){
			map[i][j] = map[i-1][j];
			nodeList[i][j].index = nodeList[i-1][j].index;
		}
	}
	for (j=0; j<map[0].length; j++){
		map[0][j] = 0;
		nodeList[0][j].index = -1;
	}
}
//消除可消除的方块
function removeBox(){
	var i,j,count = 0;
	for (i=pointBox.y; i<(pointBox.y+4); i++){
		if (i<0 || i>=map.length) continue;
		for (j=0; j<map[0].length; j++){
			if (map[i][j] == 0){
				break;
			}
			if (j==map[0].length - 1){
				moveLine(i);
				count++;
			}
		}
	}
	if(count == 0)return;
	del += count;
	if(count == 1){
		point += 1;
	}else if(count == 2){
		point += 3;
	}else if(count == 3){
		point += 6;
	}else if(count == 4){
		point += 10;
	}
	if(speed > 1 && del / 100 >= (speedMax - speed + 1)){
		speed--;
	}
	showText();
}
//循环播放
function onframe(){
	//首先，将当前下落方块移出画面
	minusBox();
	if(myKey.keyControl != null && myKey.stepindex-- < 0){
		myKey.stepindex = myKey.step;
		switch(myKey.keyControl){
			case "left":
				if(checkPlus(-1,0)){
					pointBox.x -= 1;
					if(LGlobal.canTouch || true){
						myKey.keyControl = null;
						myKey.touchMove = true;
						myKey.touchX = 0;
					}
				}
				break;
			case "right":
				if(checkPlus(1,0)){
					pointBox.x += 1;
					if(LGlobal.canTouch || true){
						myKey.keyControl = null;
						myKey.touchMove = true;
						myKey.touchX = 0;
					}
				}
				break;
			case "down":
				if(checkPlus(0,1)){
					pointBox.y += 1;
					if(LGlobal.canTouch || true){
						myKey.keyControl = null;
						myKey.touchMove = true;
						myKey.touchY = 0;
					}
				}
				break;
			case "up":
				changeBox();
				if(LGlobal.canTouch || true){
					myKey.keyControl = null;
					myKey.stepindex = 0;
				}
				break;
		}
	}
	if (speedIndex ++ > speed){
		speedIndex = 0;
		//是否可下移一位
		if (checkPlus(0,1)) {
			pointBox.y++;
		} else {
			plusBox();
			if (pointBox.y < 0) {
				gameOver();
				return;
			}
			removeBox();
			getNewBox();
		}
	}
	plusBox();
	drawMap();
}

   

CopperDong
关注
  • 0
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5 游戏开发实战 ｜ 俄罗斯方块_俄罗斯方块h5
2401_84165953的博客
04-27 426
如图4所示，T形的数据模型可以表示为4个点组成的数组：［ ［-1，0］，［0，0］，［1，0］ ，［0，1］ ］。■ 图4 T形形状坐标系可以用同样的方法建立其他形状的数组模型，然后再将这7个形状的数组模型合起来组成一个大的数组。另外，每个形状可以是单色，也可以有自己的颜色。增加颜色会增加编程的复杂度，但是也增加不了多少，所以该模型中也会考虑颜色。最后，最好给每个形状一个编号，这样方便在形状数组和颜色数组中应用它们。完成上面的分析后，就可以给出形状数据模型的代码了。俄罗斯方块游戏面板屏幕。
(附源码)HTML+JavaScript+Canvas编写2D小游戏
最新发布
qq_43059415的博客
06-16 1257
（附源码）使用HTML+JavaScript+Canvas编写2D小游戏。第一次写文章，可能有些地方存在问题，如有不对的地方也请帮忙指出，谢谢。
HTML5 游戏开发实战 ｜ 俄罗斯方块_俄罗斯方块h5(1)
2401_84165919的博客
04-27 383
x’=yy’=-x注意，正方形形状不发生旋转。根据上面的分析，可以使用两个全局方法，用来对形状进行全局定位和旋转。translate(data.row.col)函数将形状自身的坐标系转换为屏幕的全局坐标系，（row,col）为当前形状原点在屏幕中的位置。每种形状向右旋转就会形成一个新的形状，rotate(data)函数可以得到当前形状的方块旋转后的坐标数组。3． 游戏流程俄罗斯方块游戏就是用一个定时器控制方块下落并重绘的过程，用户可以利用键盘输入改变方块状态。
HTML5 Canvas游戏开发实战 PDF扫描版
weixin_39037804的博客
08-23 316
HTML5 Canvas游戏开发实战主要讲解使用HTML5 Canvas来开发和设计各类常见游戏的思路和技巧，在介绍HTML5 Canvas相关特性的同时，还通过游戏开发实例深入剖析了其内在原理，让读...
HTML5 游戏开发实战 ｜ 俄罗斯方块
不断学习，不断进步，提高自己
07-02 3176
俄罗斯方块是一款风靡全球的电视游戏机和掌上游戏机游戏，它曾经造成的轰动与造成的经济价值可以说是游戏史上的一件大事。这款游戏看似简单但却变化无穷，游戏过程仅需要玩家将不断下落的各种形状的方块移动、翻转，如果某一行被方块充满了，那就将这一行消掉；而当窗口中无法再容纳下落的方块时，就宣告游戏结束。
我的新书《HTML5 Canvas游戏开发实战》
热门推荐
lufy小屋
04-17 3万+
本书简介本书主要讲解使用HTML5 Canvas来开发和设计各类常见游戏的思路和技巧，在介绍HTML5 Canvas相关特性的同时，还通过游戏开发实例深入剖析了其内在原理，让读者不仅知其然，而且知其所以然。在本书中，除了介绍了HTML5 Canvas的基础API之外，还重点阐述了如何在JavaScript中运用面向对象的编程思想来进行游戏开发。本书在介绍每个游戏开发的过程时，都会包括游戏分析、开发
HTML5 Canvas游戏开发实战
weixin_33739523的博客
01-12 267
《HTML5 Canvas游戏开发实战》 基本信息 作者： 张路斌 丛书名： 实战系列 出版社：机械工业出版社 ISBN：9787111419129 上架时间：2013-4-15 出版日期：2013 年4月 开本：16开 页码：336 版次：1-1 所属分类：计算机 更多关于 》》》《HTML5 Canvas游戏开发实战》 内容简介 计算机书籍 　　《html5 ...
HTML5 游戏开发实战 ｜ 俄罗斯方块_俄罗斯方块h5，大数据开发自定义View详解
2401_84185106的博客
04-17 651
这里需要注意一个问题，形状自身坐标系是用(x，y)描述的，而全局坐标系为了逻辑上更直观，是用(row，col)描述的，所以在实际编程中并不是像上面那样转换的，而是：［［-1+12，0+8］,［0+12，0+8］,［0+12，-1+8］,［1+12，-1+8］］即先将x变为col，y变为row，再转换为全局坐标系。它当前在屏幕上全局坐标系位置为：［12,8］，则4个点转换为全局坐标系的坐标为：［［0+12，-1+8］,［0+12，0+8］,［-1+12，0+8］,［-1+12，1+8］］。
HTML5游戏实战之俄罗斯方块
一个20年码农的博客空间
07-08 1万+
先说几句废话，写这篇文章前也思考了很久，最近这几年很少在博客上写文章了，感觉年龄越大越懒得写东西了，不过思前想好，还是决定写出来。还是以前的心态，做份记录，未来可以回顾。同时也希望能给初学者写一篇好的教程。 现在HTML5炒得的确很火，我就不解释为什么了，文章里会有很多处用“不解释，百度吧", 大家别见怪。这篇文章主要是讲解如何设计和实现一款经典的俄罗斯方块游戏， 并且是基于HTML5的Canv...
2024年HTML5 游戏开发实战 ｜ 俄罗斯方块_俄罗斯方块h5(1)
2401_84166376的博客
05-02 1000
(4) 玩家可以看到游戏的积分。本文开发俄罗斯方块游戏程序，俄罗斯方块游戏的运行界面如上图所示。
HTML5 canvas俄罗斯方块小游戏.zip
01-02
在俄罗斯方块游戏中，我们需要处理以下几个核心概念： 1. **方块的定义**：游戏中的每个方块由四个小正方形组成，有不同的形状，如直线、L形、Z形等。在Canvas中，我们可以通过坐标和颜色来描绘这些方块。 2. **...
HTML 5 CANVAS游戏开发实战
12-28
HTML 5 CANVAS游戏开发实战HTML 5 CANVAS游戏开发实战HTML 5 CANVAS游戏开发实战
HTML 5 CANVAS游戏开发实战_高清完整版
12-17
总之，“HTML 5 CANVAS游戏开发实战_高清完整版”会引导读者从基础到实践，掌握HTML5 Canvas的游戏开发技巧，包括基本绘图、游戏逻辑、性能优化等多个方面，为Web游戏开发打下坚实基础。通过学习和实践，你将能够...
从零开始学微信小程序开发：1
Just for fun的专栏
01-06 1万+
1.1、安装 1.2、创建项目     登录开发工具：     添加项目：有本地小程序项目和公众号网页开发           无AppID的开发者也可以使用开发工具      主要文件：如果创建时选中“quick start项目”，一共有2个目录和3个文件，最关键也是必不可少的，是app.js, app.json和app.wxss           .js是脚本文件，.js
微信小程序开发详解 7 微餐厅 -- 餐饮管理系统
Just for fun的专栏
01-20 9309
试想我们到餐馆消费，拿出手机扫一下二维码就可以排号、查看排队情况、查看菜单、点菜、买单，是不是很方便快捷？对餐厅的管理者来说，不需要开发或购买专门的排队软件，不需要添加额外的硬件设施，让用户扫一扫即可排号、点菜，随用随走。用户使用过小程序后，使用记录会留在微信的小程序列表中，方便用户再次使用，这又能增加回头客。 7.1 项目部署    服务器端提供餐桌管理、排队管理、菜单管理等管理后台，同时为
从零开始学微信小程序开发：4 美化UI界面 5 保存数据到本地
Just for fun的专栏
01-06 6217
本章重新设计一个界面、功能都更强的计算器小程序 4.1 计算器功能需求     功能如下： 能进行加、减、乘、除运算能对输入的数值进行正负号取反运算可以输入小数输入数据的过程中可删除输入的最后一位可清除输入的数据能查看历史数据       创建一个名为ch04的项目       添加calc目录       calc.json { "backgroundTextSty
从零开始学微信小程序开发：9 与后台交互
Just for fun的专栏
01-07 4958
9.1 网络访问API      wx.request接口函数：参数为一个Object对象，有以下属性： url：开发者服务器接口地址data：header：设置请求的header，不能设置Referermethod：请求的方法success：fail：complete：结束的回调函数    一个小程序同时只能有5个网络请求连接。 获取HTML数据
微信小程序开发详解 6 测测你是三国杀中的谁---调查测试类小程序
Just for fun的专栏
01-20 2894
“我应该是金庸小说中的谁？”这类游戏能带动用户的好奇心，并激起用户的分享欲望，从而成为一款长盛不衰的小游戏。    这类游戏的特点很明显： 有一系列调查问卷供用户回答，通常是选择一个选项或分数。根据用户的选择跳到下一题目最后显示答案，告诉用户的测试结果。     本章将介绍一个通用解决方案，所有题目和答案都以JSON格式存储。这样读者只需修改JSON文件的文案就能创建一个全新的测
HTML5游戏开发实战指南：6款入门级作品
"HTML5 Game Development by Example: Beginner's Guide" 是一本由 Makzan 出版的实用教程，旨在帮助初学者通过最新的 HTML5、Canvas、CSS 和 JavaScript 技术开发游戏。这本书提供了六个具体的实战项目，让读者逐步...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值