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

本文分享了使用JavaScript实现经典游戏俄罗斯方块的过程,详细介绍了游戏逻辑、界面设计、背景音效等关键环节,以及遇到的问题与解决方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

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

开发软件和前端知识

网页编辑用到的软件是sublime,用到的前端知识主要是 HTML , CSSJavaScript。用到的模型是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真的难受。我也是前端菜鸟,如果有错误请在评论区指正。

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值