Echarts制作游戏-经典俄罗斯方块

最新推荐文章于 2022-09-12 07:36:39 发布
最新推荐文章于 2022-09-12 07:36:39 发布
阅读量850 收藏
点赞数 1
分类专栏： Echarts 文章标签： echarts javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45691307/article/details/120646319
版权

1.首先引入echarts.js

<script src="//cdn.staticfile.org/echarts/4.8.0/echarts.min.js"></script>

2.设置盒子app，并添加宽度和高度

<div id="app" style="width: 100%; height: 43.5rem;"></div>

3.利用echars绑定盒子id

<script>
	var myCharts = document.getElementById('app');
	var myChart = echarts.init(myCharts);
</script>

4.完整代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="//cdn.staticfile.org/echarts/4.8.0/echarts.min.js"></script>
		<title></title>
	</head>
	<body>
		<div id="app" style="width: 100%; height: 43.5rem;"></div>
		<script type="text/javascript">
			var myCharts = document.getElementById('app');
			var myChart = echarts.init(myCharts);
			var refreshT, fallBlockT;
			var fallTimout;
			var speed = 1000,
				downSpeed = 50,
				nomrlSpeed = 1000;
			var fallLine = 20,
				rlMove = 4,
				score = 0,
				death = false;
			var data = [],
				datas = [];
			Array.prototype.clone = function() {
				var a = [];
				for (var i = 0, l = this.length; i < l; i++) {
					if (this[i] instanceof Array) {
						a.push(this[i].clone());
					} else {
						a.push(this[i]);
					}
				}
				return a;
			};

			var model1 = {
				norBase: [
					[0, 0],
					[0, 1],
					[1, 0],
					[1, 1],
				],
				roate: function() {},
			};
			var model2 = {
				norBase: [
					[0, 0],
					[1, 0],
					[2, 0],
					[2, 1],
				],
				shapList: [
					[
						[0, 0],
						[1, 0],
						[2, 0],
						[2, 1],
					],
					[
						[0, 0],
						[0, 1],
						[0, 2],
						[1, 0],
					],
					[
						[0, 0],
						[0, 1],
						[1, 1],
						[2, 1],
					],
					[
						[0, 2],
						[1, 0],
						[1, 1],
						[1, 2],
					],
				],
				shapIndex: 0,
				roate: function() {
					this.shapIndex++;
					this.norBase = this.shapList[this.shapIndex % this.shapList.length].clone();
				},
			};
			var model3 = {
				norBase: [
					[0, 1],
					[1, 0],
					[1, 1],
					[2, 0],
				],
				shapList: [
					[
						[0, 1],
						[1, 0],
						[1, 1],
						[2, 0],
					],
					[
						[0, 0],
						[0, 1],
						[1, 1],
						[1, 2],
					],
					[
						[0, 1],
						[1, 0],
						[1, 1],
						[2, 0],
					],
					[
						[0, 0],
						[0, 1],
						[1, 1],
						[1, 2],
					],
				],
				shapIndex: 0,
				roate: function() {
					this.shapIndex++;
					this.norBase = this.shapList[this.shapIndex % this.shapList.length].clone();
				},
			};
			var model4 = {
				norBase: [
					[0, 0],
					[1, 0],
					[1, 1],
					[2, 1],
				],
				shapList: [
					[
						[0, 0],
						[1, 0],
						[1, 1],
						[2, 1],
					],
					[
						[0, 1],
						[0, 2],
						[1, 0],
						[1, 1],
					],
				],
				shapIndex: 0,
				roate: function() {
					this.shapIndex++;
					this.norBase = this.shapList[this.shapIndex % this.shapList.length].clone();
				},
			};
			var model5 = {
				norBase: [
					[0, 0],
					[0, 1],
					[1, 0],
					[2, 0],
				],
				shapList: [
					[
						[0, 0],
						[0, 1],
						[1, 0],
						[2, 0],
					],
					[
						[0, 0],
						[0, 1],
						[0, 2],
						[1, 2],
					],
					[
						[0, 1],
						[1, 1],
						[2, 1],
						[2, 0],
					],
					[
						[0, 0],
						[1, 0],
						[1, 1],
						[1, 2],
					],
				],
				shapIndex: 0,
				roate: function() {
					this.shapIndex++;
					this.norBase = this.shapList[this.shapIndex % this.shapList.length].clone();
				},
			};
			var model6 = {
				norBase: [
					[0, 0],
					[1, 0],
					[1, 1],
					[2, 0],
				],
				shapList: [
					[
						[0, 0],
						[1, 0],
						[1, 1],
						[2, 0],
					],
					[
						[0, 0],
						[0, 1],
						[0, 2],
						[1, 1],
					],
					[
						[1, 0],
						[0, 1],
						[1, 1],
						[2, 1],
					],
					[
						[0, 1],
						[1, 0],
						[1, 1],
						[1, 2],
					],
				],
				shapIndex: 0,
				roate: function() {
					this.shapIndex++;
					this.norBase = this.shapList[this.shapIndex % this.shapList.length].clone();
				},
			};
			var model7 = {
				norBase: [
					[-1, 0],
					[0, 0],
					[1, 0],
					[2, 0],
				],
				shapList: [
					[
						[-1, 0],
						[0, 0],
						[1, 0],
						[2, 0],
					],
					[
						[0, 0],
						[0, 1],
						[0, 2],
						[0, 3],
					],
				],
				shapIndex: 0,
				roate: function() {
					this.shapIndex++;
					this.norBase = this.shapList[this.shapIndex % this.shapList.length].clone();
				},
			};

			var models = [model1, model2, model3, model4, model5, model6, model7];

			var randModel = function() {
				var rnm = parseInt(Math.random() * 100) % 7;
				var mm = models[rnm];
				var ml = Math.random() * 6;
				for (var i = 0; i < ml; i++) {
					mm.roate();
				}
				return mm;
			};
			var firstBlock = randModel();
			// 全部方块
			for (var j = 0; j < 20; j++) {
				for (var i = 0; i < 10; i++) {
					data.push([i, j, 0]);
				}
			}

			option = {
				backgroundColor: '#d8d8d8',
				title: [{
						text: '经典俄罗斯方块小游戏',
						left: 640
					},
					{
						text: '    当前得分：0',
						left: 350,
						top: '20%',
					},
					{
						text: '   ← 左移动\r\n\r\n   → 右移动\r\n\r\n     ↓ 加速\r\n\r\n     ↑ 变形',
						left: 950,
						top: '20%',
					},
				],
				grid: {
					show: true,
					borderColor: '#000',
					z: 2,
					top: 55,
					left: 600,
					height: 560,
					width: 260,
				},
				legend: {
					show: false,
				},
				xAxis: {
					interval: 2,
					splitLine: {
						lineStyle: {
							type: 'dashed',
						},
					},
					max: 10,
					axisTick: {
						show: false,
					},
					axisLabel: {
						show: false,
					},
					axisLine: {
						show: false,
					},
				},
				yAxis: {
					interval: 2,
					splitLine: {
						lineStyle: {
							type: 'dashed',
						},
					},
					max: 20,
					axisTick: {
						show: false,
					},
					axisLabel: {
						show: false,
					},
					axisLine: {
						show: false,
					},
				},
				series: [{
						data: data,
						type: 'scatter',
						symbol: 'rect',
						symbolSize: function(v) {
							return v[2] * 26;
						},
						symbolOffset: [13, -13],
						label: {
							emphasis: {
								show: false,
							},
						},
						// 停止后方块属性
						itemStyle: {
							normal: {
								shadowBlur: 10,
								shadowColor: 'rgba(120, 36, 50, 0.5)',
								shadowOffsetY: 5,
								color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
										offset: 0,
										color: 'rgb(251, 61, 61)',
									},
									{
										offset: 1,
										color: 'rgb(204, 82, 12)',
									},
								]),
							},
						},
					},
					{
						data: datas,
						type: 'scatter',
						symbol: 'rect',
						symbolSize: function(v) {
							return v[2] * 26;
						},
						symbolOffset: [13, -13],
						label: {
							emphasis: {
								show: false,
							},
						},
						// 停止前方块属性
						itemStyle: {
							normal: {
								shadowBlur: 10,
								shadowColor: 'rgba(25, 100, 150, 0.5)',
								shadowOffsetY: 5,
								color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
										offset: 0,
										color: 'rgb(179, 168, 50)',
									},
									{
										offset: 1,
										color: 'rgb(26, 47, 140)',
									},
								]),
							},
						},
					},
				],
			};
			var touchDistortionOther = function() {
				var old_Pts = firstBlock.norBase.clone();
				firstBlock.roate();
				var isTouch = touchFallOther();
				firstBlock.norBase = old_Pts;
				firstBlock.shapIndex--;

				return isTouch;
			};

			var touchFallOther = function() {
				var pts = firstBlock.norBase.clone();

				for (var i = 0; i < pts.length; i++) {
					var da_i = pts[i][0] + rlMove;
					var da_j = pts[i][1] + fallLine;
					if (da_i < 0 || da_i >= 10) {
						return true;
					}
					if (option.series[0].data[da_j * 10 + da_i] && option.series[0].data[da_j * 10 + da_i][2] === 1) {
						return true;
					}
				}
				return false;
			};
			var touchLeftRightOther = function(lrOffset) {
				var pts = firstBlock.norBase.clone();
				var preLR_move = rlMove + lrOffset;

				for (var i = 0; i < pts.length; i++) {
					var da_i = pts[i][0] + preLR_move;
					var da_j = pts[i][1] + fallLine;
					if (da_i < 0 || da_i >= 10) {
						return true;
					}
					if (option.series[0].data[da_j * 10 + da_i] && option.series[0].data[da_j * 10 + da_i][2] === 1) {
						return true;
					}
				}
				return false;
			};
			var setScore = function() {
				for (var j = 0; j < 20; j++) {
					var rowBlok = 0;
					for (var i = 0; i < 10; i++) {
						rowBlok += option.series[0].data[j * 10 + i][2];
					}
					//当整行刚好填满就消除一行
					if (rowBlok == 10) {
						for (var k = j + 1; k < 20; k++) {
							for (var m = 0; m < 10; m++) {
								option.series[0].data[(k - 1) * 10 + m][2] = option.series[0].data[k * 10 + m][2];
							}
						}
						score++;
						option.title[1].text = '    当前得分：' + score;
						j--;
					}
				}
			};
			var checkDeath = function() {
				for (var i = 0; i < 10; i++) {
					if (option.series[0].data[19 * 10 + i][2] === 1) {
						death = true;
						option.title[1].text = '本轮游戏结束\r\n\r\n本轮游戏最后得分：' + score;
					}
				}
			};
			refreshT = function() {
				var pts = firstBlock.norBase.clone();

				if (fallLine < 0 || touchFallOther()) {
					for (i = 0; i < pts.length; i++) {
						var da_i = pts[i][0] + rlMove;
						var da_j = pts[i][1] + fallLine + 1;
						if (option.series[0].data[da_j * 10 + da_i]) {
							option.series[0].data[da_j * 10 + da_i][2] = 1;
						}
					}
					myChart.setOption(option);
					setScore();
					checkDeath();
					option.series[1].data = [];
					firstBlock = randModel();
					rlMove = 4;
					fallLine = 20;
					speed = nomrlSpeed;
				} else {
					for (var i = 0; i < pts.length; i++) {
						pts[i][0] += rlMove;
						pts[i][1] += fallLine;
						pts[i][2] = 1;
					}
					option.series[1].data = pts;
				}
				myChart.setOption(option);
			};

			fallBlockT = function() {
				if (death) return;
				fallLine--;
				refreshT();
				fallTimout = setTimeout(fallBlockT, speed);
			};
			fallBlockT();
			document.onkeydown = function(event) {
				if (event && event.keyCode === 37) {
					if (!touchLeftRightOther(-1)) {
						rlMove--;
						refreshT();
					}
				}
				if (event && event.keyCode === 40) {
					speed = downSpeed;
					clearTimeout(fallTimout);
					fallBlockT();
				}
				if (event && event.keyCode === 39) {
					if (!touchLeftRightOther(1)) {
						rlMove++;
						refreshT();
					}
				}
				if (event && event.keyCode === 38) {
					if (!touchDistortionOther()) {
						firstBlock.roate();
						refreshT();
					}
				}
			}
		</script>
	</body>
</html>

5.完整效果
在这里插入图片描述

起风了快回家了
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
用 ECharts 实现的这个令人惊喜的游戏！
OwmiObjective_C的博客
09-17 105
通过 ECharts，开发者可以轻松创建各种类型的图表，展示游戏中的数据和效果，同时还能够处理数据和用户交互等功能。近期，一款令人陶醉的游戏悄然走红，它以其可可爱爱的画风和有趣的玩法吸引了无数玩家的关注。在实际的游戏中，开发者可以根据需求使用 ECharts 提供的丰富功能来创建各种类型的图表，如折线图、饼图、雷达图等，以展示游戏中的数据和效果。除了图表的展示外，ECharts 还提供了一些其他功能，如数据的处理和转换、事件的处理和响应等。接下来，我们定义了图表的配置项，包括图表类型、数据等。
Echart围棋小游戏
06-03
使用Html5,Javascript,Echart制作的围棋游戏，浏览地址https://gallery.echartsjs.com/editor.html?c=x-4qnSInEU
[转][Echarts]俄罗斯方块
weixin_30752377的博客
12-10 145
app.title = '俄罗斯方块'; var refreshT,fallBlockT; var fallTimout; var speed = 1000, downSpeed = 30, nomrlSpeed = 1000; var fallLine = 20, rlMove = 4,score = 0,death=false; var data = [] ,data2 = ...
教你用 ECharts 轻松做一个Flappy Bird小游戏
华为云官方博客
05-12 932
echarts是一个很强大的图表库，除了我们常见的图表功能，还可以自定义图形，这个功能让我们可以很简单地在画布上绘制一些非常规的图形，基于此，我们来玩一些花哨的：做一个Flappy Bird小游戏。
echarts之随机方块
极简
09-13 1866
一、效果图 二、代码 本例是echatrs中的热力图实现的。<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>随机方块</title> <style> #echart { width: 600px;
俄罗斯方块-微信小游戏-项目源码
05-11
这是一个微信小游戏项目源码，是经典怀旧的俄罗斯方块游戏，适合新手入门参考学习，下面还有↓ ...② 俄罗斯方块-单机游戏-微信小程序项目开发入门https://blog.csdn.net/zs1028/article/details/128383343
PyQt-经典小游戏俄罗斯方块
最新发布
03-04
俄罗斯方块是一款风靡全球的经典游戏，其简单的规则、挑战性的难度和极具吸引力的游戏性使其成为了无数玩家钟爱的经典之作。而现在，通过PyQt框架的支持，这款经典小游戏焕发出新的生机与活力，为玩家们提供了全新的...
java实现游戏-俄罗斯方块
07-30
这是一个使用java实现的简单小游戏，俄罗斯方块（曾经风靡世界近半世纪的经典小游戏）。 ———————————————————————————————————————— 功能尚不完善，但是可以作为基础参考，...
经典小游戏 - 俄罗斯方块完整源码
05-12
俄罗斯方块完整源码
VB游戏特效---俄罗斯方块
05-07
摘要:VB源码,游戏编程,俄罗斯方块,VB游戏源码　再发一个VB游戏代码---俄罗斯方块，呵呵，相信大家都对这款游戏相当熟悉了，小时候经常玩的益智游戏。在编写的时候，里面有一个位图函数，函数作用：位操作位图，实现...
eCharts格网统计图
10-27
eCharts格网统计图，Binning on Map，格网统计图是一种将统计数据汇总到格网当中显示的统计图表，它的使用范围相当广泛。可以使用一点的监测值代表一个网格区域的值。可以不用使用插值而得到整个面的统计值。
echarts的各种demo
10-23
echarts的各种demo,下载后会觉得物有所值
jquery+echarts俄罗斯方块小游戏代码
ICode联盟
09-12 127
jquery+echarts俄罗斯方块小游戏代码。
Echarts 图形设计
m0_38103047的博客
04-13 255
&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;    &lt;meta charset="utf-8"&gt;    &lt;title&gt;ECharts&lt;/title&gt;    &lt;!-- 引入 echarts.js --&gt;    &lt;script type="text/javascri
javascript俄罗斯方块 面向对象编程（jQuery）（附带百度网盘链接）
weixin_45851686的博客
09-11 1249
这个俄罗斯方块游戏是通过javascript面向对象编程的方法编写，代码结构分为游戏类（Game.js），方块类（block.js）,地图类（Map.js）,方块形状对象类（blockjson.js） ，话不多说，直接源码了。(粘贴源码，引入正确路径即可运行) 目录 1.html&css页面搭建： 2.游戏类 Game.js: 3.方块类 block.js： 4.地图类：map.js 5.方块形状对象类blockjson.js: 6.百度网盘链接： 游戏页面 ind...
C#写一个“高逼格”的俄罗斯方块
李豆豆的博客
05-29 5583
首先附上代码地址：http://download.csdn.net/detail/liyuxing6639801/9855551         C#基础基本为0，希望通过一个简单的实际操作学一点C#相关知识，给小白身份“上点色”，于是在网上找了“陈广俄罗斯方块”的视屏，讲的较为详细。视屏之后自己增加了部分计分功能，选关功能，同时做了界面和音频的添加（为了加点逼格）。 下面是开始界面，提供选关
Echarts 3d地球toolstips实现
hlsblog的专栏
09-28 1283
最近用echarts做了个3d地球项目，网上找了很多都没有找到适合的教程，只能自己手动写一个了。完整项目详见：https://github.com/hlsblog/3dEarth 本项目支持事件悬停，地球上点鼠标经过显示自定义tooltips。 1）引用echarts的js： <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <script src="htt
Echarts图
期待王教授
09-30 1195
根据Echarts官网的讲解，我把Echarts的使用归结为一下的几个步骤，同时这些步骤相应的实现对应到Statics文件夹下的Echarts.js，该文件的主要代码目录如下： [javascript] view plain copy Var ECharts={      ChartConfig:function(container,option
echarts
Blank_Block_的博客
10-20 178
1.在页面写切换事件时，需要将图表重新resize()一下； 2.在写图表时，里面有数据正负数不同效果时，可以在数据里面做判断，再讲样式以对象的形式写进去，比如
Eclipse小游戏-俄罗斯方块
05-21
好的，我可以为您提供一些关于Eclipse小游戏-俄罗斯方块的指导。 首先，您需要安装Eclipse开发环境以及Java开发工具包。然后，您需要根据游戏规则和界面设计开发游戏。 以下是一些可能有用的指导： 1. 游戏规则 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值