广告小游戏 之 方块消除

前言

关于日常刷视频，刷朋友圈，总会碰到一些广告小游戏，而广告中的玩家还很菜。

那么今天做的游戏就是其中一个 —— 方块消除，来解剖一下这个小游戏。

一、游戏分析

玩家用手滑动屏幕，让游戏中的图案进行上下左右移动，当图案中的方块与上下左右边上的颜色一样时，则直接消除此方块，其他的方块会继续占据此位置。直到消除完图案中的所有小方块。

游戏中我们需要定义上下左右四个方向的颜色，用来渲染四边的边框以及游戏中边缘触碰判断，并且每个关卡所用的颜色都不一样，我们也要定义所用到的总颜色，最后就是图案总数据。

二、游戏布局

<div id="app">
	<div class="game">
		<div class="levelTip" v-if="!win">Level {{ levelIndex + 1 }}</div>
		<div class="levelTip" v-if="win">恭喜你，通过全部关卡！</div>
		<div class="box" 
			:style="{
				'border-top-color': getColor(colorVal[0]),
				'border-bottom-color': getColor(colorVal[1]),
				'border-left-color': getColor(colorVal[2]),
				'border-right-color': getColor(colorVal[3]),
			}"
		>
			<div class="list">
				<div class="tr" v-for="(item1, index1) in list">
					<div 
						class="td" 
						v-for="(item2, index2) in item1"
						:style="{'background-color': getColor(item2)}"
					></div>
				</div>
			</div>
		</div>
	</div>
</div>

样式可以直接在文章末尾完整代码获取

三、游戏实现

（1）定义图案数据

/**
 *  配置说明：
 * 		1、colorStr 存放当前关卡需要用到的所有颜色
 *  	2、colorVal 存放上下左右颜色四个值，按照顺序，分别是0上、1下、2左、3右
 * 		3、data  存放图案数据
 * */
 // 关卡1
 const level_01 = {
 	colorStr: ['#f7f6f2', '#312d2c', '#6b8d96', '#d5c9cd', '#cee2ed'],
 	colorVal: [1, 2, 3, 4],
 	data: [
 		[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
 		[0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0],
 		[0,0,0,0,0,0,1,2,2,2,2,2,2,2,2,1,1,0,0,0,0,0,0],
 		[0,0,0,0,0,1,2,2,2,2,2,2,2,2,2,2,2,1,0,0,0,0,0],
 		[0,0,0,0,1,2,2,2,2,2,2,2,2,2,2,2,2,2,1,0,0,0,0],
 		[0,0,0,0,1,2,2,2,2,1,1,2,2,2,2,2,2,2,1,0,0,0,0],
 		[0,0,0,0,1,2,2,2,1,3,3,1,2,2,2,2,2,2,1,0,0,0,0],
 		[0,0,0,0,1,2,2,1,3,3,3,1,2,2,2,2,2,2,1,0,0,0,0],
 		[0,0,0,0,1,2,1,3,3,3,3,3,1,2,2,2,2,2,1,0,0,0,0],
 		[0,0,0,0,0,1,1,3,3,3,3,3,3,1,2,2,2,1,0,0,0,0,0],
 		[0,0,0,0,0,1,4,1,3,3,4,1,3,1,2,1,1,1,0,0,0,0,0],
 		[0,0,0,0,0,1,3,3,3,3,3,3,3,3,1,3,3,1,0,0,0,0,0],
 		[0,0,0,0,0,1,3,3,3,3,3,3,3,3,3,3,3,1,0,0,0,0,0],
 		[0,0,0,0,0,1,3,3,3,3,3,3,3,3,3,3,1,0,0,0,0,0,0],
 		[0,0,0,0,0,1,3,3,1,1,3,3,3,3,1,1,0,0,0,0,0,0,0],
 		[0,0,0,0,0,1,3,3,3,3,3,3,3,1,1,1,1,0,0,0,0,0,0],
 		[0,0,0,1,1,1,1,3,3,3,3,3,1,1,1,1,4,1,1,0,0,0,0],
 		[0,0,1,1,1,1,4,1,1,1,1,1,1,1,1,4,1,1,1,1,1,0,0],
 		[0,1,1,1,1,1,4,1,2,1,1,1,2,1,1,4,1,1,1,1,1,1,0],
 		[0,1,1,1,1,1,4,1,1,2,1,2,1,1,4,1,1,1,1,1,1,1,0],
 		[0,1,1,1,1,1,4,1,1,1,2,1,1,1,4,1,1,1,1,1,1,1,0],
 		[0,1,1,1,1,1,4,1,1,1,1,1,1,1,4,1,1,1,1,1,1,1,0],
 		[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
 	]
 };

渲染出来的效果

还有其他关卡可以自己定义，定义自己喜欢的样式。目前我的代码中提供了三种图案。

（2）定义基本参数

levels: levels,					// 全部关卡
levelIndex: 0,					// 当前关卡
dirs: [0, 1, 2, 3],				// 上下左右
dir: null,						// 运动的方向
timer: null, 					// 定时器
win: false,						// 是否通过全部关卡

因为是关卡游戏，所以每局的游戏数据，都会根据levelIndex来进行改变，这时候我们就可以用计算属性来进行监听。

computed: {
	// 根据关卡值，来获取当前关卡所需的数据
	list() {
		return this.levels[this.levelIndex].data;
	},
	// 根据关卡值，来获取当前关卡所需的颜色 —— 值
	colorVal() {
		return this.levels[this.levelIndex].colorVal;
	},
	// 根据关卡值，来获取当前关卡所需的总颜色 —— 字符串
	colorStr() {
		return this.levels[this.levelIndex].colorStr;
	}
}

我们在视图中渲染的时候，还需要根据颜色值，来获取颜色

// 获取颜色
getColor(colorIndex) {
	return this.colorStr[colorIndex];
}

（3）监听键盘上下左右

当我们点击一个方向时，只有当图案运行到边界，并且停止后，才可以继续改变方向，运动期间是不可点击的。

onKeyDown() {
	document.addEventListener('keydown', e => {
		if(this.dirs.includes(this.dir)) {
			return;
		}
		if(e.keyCode == 38) { this.dir = 0; }
		if(e.keyCode == 40) { this.dir = 1; }
		if(e.keyCode == 37) { this.dir = 2; }
		if(e.keyCode == 39) { this.dir = 3; }
	})
}

（4）图案移动

这里我们可以先让图案上下左右移动，然后再去做消除处理

onTimer() {
	if(this.timer) {
		clearInterval(this.timer);
		this.timer = null;
	}
	this.timer = setInterval(() => {
		if(this.dirs.includes(this.dir)) {
			if(this.dir == 0) { this.onMoveUp(); } 
			else if(this.dir == 1) { this.onMoveDown(); } 
			else if(this.dir == 2) { this.onMoveLeft(); } 
			else if(this.dir == 3) {this.onMoveRight(); }
			this.$forceUpdate();
		}
	}, 1000 / 75);
}

当我按上，图案就会全部上去

// 上  
onMoveUp() {
	let bool = false;
	for(let i = 0; i < this.list.length; i++) {
		for(let j = 0; j < this.list[0].length; j++) {
			let val = this.list[i][j];
			if(this.colorVal.includes(val) && i - 1 >= 0 && this.list[i - 1][j] == 0) {
				this.list[i][j] = 0;
				this.list[i - 1][j] = val;
				bool = true;
			}
			// 如果小块到达边缘，颜色一样，则消除
			if(i == 0 && this.colorVal.includes(val) && val == this.colorVal[this.dir]) {
				this.list[i][j] = 0;
			}
		}
	}
	if(!bool) { 
		this.dir = null;
		this.isWin(); 
	}
}

bool = 作用是为了防止用户频繁操作方向，必须等一个方向运动完，才可以进行下一个方向的移动。

这里我就只贴一个方向的代码。其他三个方向也是一样的逻辑操作，只是循环的方向不一样。具体代码可看我gitee中完整代码。

（5）判断是否通过当前关卡

这里我们只要找到二维数组中是否存在 != 0的方块

isWin() {
	let bool = false;
	for(let i = 0; i < this.list.length; i++) {
		for(let j = 0; j < this.list[0].length; j++) {
			if(this.list[i][j] !== 0) {
				bool = true;
			}
		}
	}
	if(!bool) {
		console.log(`通过关卡：Level ${this.levelIndex + 1}`);
		this.dir = null;
		clearInterval(this.timer);
		this.timer = null;
		this.changeLevel();
	}
}

（6）下一关

// 切换关卡
// 如果是最后一关，则游戏结束
// 如果不是最后一关，则关卡+1，重新启动计时器
changeLevel() {
	if(this.levelIndex == this.levels.length - 1) {
		this.win = true;
	} else {
		this.levelIndex++;
		this.onTimer();
	}
}

总结

这个小游戏整体不难，但是很好玩。对游戏感兴趣的可以看看其他小游戏文章。

方块消除-完整代码 - gitee

谢谢观看！！