俄罗斯方块经典游戏——JS实现

俄罗斯经典游戏——JS实现

想着做一个前端网页游戏，就找了一个经典小游戏俄罗斯方块。游戏的逻辑实现可以用好多种语言C ，C++，JS。因为想要运用自己上半年学过的东西实现，就选择了JS。

开发软件和前端知识

网页编辑用到的软件是sublime,用到的前端知识主要是 HTML , CSS ，JavaScript。用到的模型是MVP模型。

接下来从以下几个方面介绍游戏的实现：

• 游戏逻辑
• 游戏界面设置
• 界面跳转实现
• 背景音效
• 难题及解决

1.游戏逻辑

游戏逻辑的实现主要是通过js实现，涉及到方块的产生，运动，方块到底部颜色变化，消行，计时计分器。
代码结构图：

• 方块的产生
  方块分为三种在css中实现，none，current,done对应的值为0 1 2。在css中设置三个方块的样式在网页界面中显示，none的位置代表没有方块，current代表正在下落的方块，done表示已经到底部的方块。方块的位置，主要通过二维数组及每个方块的宽度记录。方块的种类总共有7种，都放在squareFactory中。
• 方块的运动
  运动分为左移，右移，下落，旋转四部分，通过控制方向键实现，利用按键对应的ascii码实现。通过函数来实现，例如：

/ /左移的判断
Square.prototype.canLeft = function(isValid) {
   var test = {};
   test.x = this.origin.x;
   test.y = this.origin.y-1;//相应的检测的位置也要改变；
   return isValid(test, this.data);//返回的值可以确定是否可以下降；
}
Square.prototype.left = function() {
   this.origin.y = this.origin.y-1;
}

//调用左移函数
var left = function() {
		//判断是否能够下降
		if(cur.canLeft(isValid)) {
			// 进行下移函数是先清理数据，再设置原点；
			clearData();
			cur.left();
			setData();
			refreshDiv(gameData, gameDivs);
		}
	}

以上两个函数分别处于square.js和game.js. square.js中存放方块的运动的函数，在game.js中被调用。

• 方块到达底部的颜色变化以及消行
  设置一个函数去判断方块下面是否到达底部，如果有就返回改变方块，让done方块代替current，没有就返回继续下落。消行函数要判断数组中一行是否都有方块，如果有就调用清除数据函数进行清除。在消行函数中可以记录消行数传值给积分函数。
• 计时，计分器
  计时功能的实现通过利用方块的下落时间间隔，比如设置每隔200ms方块下落，在时间函数中计数有5个即为1s。还要给计时器中的时间设置一个上限，当时间等于上限时，游戏结束。计分主要是通过消行函数的传值实现的，设置一个addscore变量存放。
• 增加游戏难度
  利用计数器每隔10s调用一次从底部加一行方块的函数，产生一行随机方块，通过math.ceil实现.
  设置关卡，主要通过改变方块下落的速度实现。

for(var i=0; i<lineNum; i++)
		{
			var line = [];
			//每一行有十个方块，就生成十个
			for(var j=0; j<10; j++)
			{
				// 把生成的方块push到line数组中；
				line.push(Math.ceil(Math.random()*2)-1);
			}
			// 把每一行push到二维数组中；
			lines.push(line);
		}

2.游戏界面

游戏的界面通过二维数组实现，二维数组的建立在js中。在html中主要实现游戏的外框，以及界面的美化。
设置背景色，边框主要用css。用css3的知识设置一个3d按钮。还有信息界面，关卡界面…

涉及到的是简单的前端css，都可以实现。用到的position定位比较多，由于界面都要放在同一个位置，界面是否显示通过display实现，下来介绍界面的跳转。

3.界面的跳转

界面的跳转主要通过按钮的onclick事件调用函数。比如：点击开始游戏按钮，调用new game函数，让开始界面的display属性为none；开始界面的覆盖就消失，游戏界面显示。

<a href="#" class="btn3 btn" onclick="newGame()" >开始游戏</a>
<script>
 function newGame()
		{
			var local = new Local();
			local.start();
			// 开始界面消失
			begin.style.display="none";
			backgroundMusic.play();//背景音乐设置；
			backgroundMusic.style.loop="infinite";

		}
</script>

同样的，如果点击操作说明，就让开始界面display：none；操作说明界面为display：block;显示。

4.背景音效

游戏怎么能没有背景音乐，所以就去找俄罗斯方块经典的音乐，由于各种问题，找到的音频很短，但是可以用js的一个属性让背景音乐在开始之后结束之前循环播放loop:infinite;

<audio src="audio/tetris.mp3" id="backgroundMusic" loop="infinite" autostart="true"></audio>

要在js中建立一个变量比如backgroundmusic存放id，在开始游戏中调用backgroundmusic.play();开始播放。
在结束游戏的函数中用backgroundmusic.pause()结束。
还有方块固定到底部的声音，消行的声音，是在对应的函数中实现。这个不用loop:infinite;因为这个音效很短，而且只在函数实现时调用。

5.问题及解决

• 重新游戏页面刷新
  重新游戏的设置刚开始只是删除了数据，但是发现原有的方块并不会消失，只是在js中删除了数组，界面上依然存在，这个问题用了好几天的时间。最后大佬的帮助下找到了
  **location.reload(true);**可以实现从服务器端重新载入页面，浏览器重新从服务器请求资源,在http请求头中不会包含缓存标记。

location.reload(true);

推荐一篇博客：https://blog.youkuaiyun.com/sinat_17775997/article/details/80263724

location.replace()和location.reload()函数，二者有什么区别？
location.reload();有两个参数一个是默认的false，另一个是true。如果要从服务器端重新加载页面就选择true。
location.replace(url),该方法通过指定URL替换当前缓存在历史里（客户端）的项目，因此当使用replace方法之后，你不能通过“前进”和“后退”来访问已经被替换的URL。

总结

js真的是需要很强的逻辑思维，自己的知道的还是太少了。好多可以直接用的方法都不知道。还有就是写代码一定要认真！！！否则找bug真的难受。我也是前端菜鸟，如果有错误请在评论区指正。