俄罗斯经典游戏——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真的难受。我也是前端菜鸟,如果有错误请在评论区指正。