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

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.完整效果

Echarts制作游戏-经典俄罗斯方块相关推荐

「C/C++」有手就能学会系列——经典俄罗斯方块
小白手写游戏经典-俄罗斯方块儿时经典的掌机游戏,你还记得吗? 花式消行技巧,荣耀伙伴的最高纪录,仿佛又回到了纯真的战斗时代. 致敬俄罗斯方块之父"阿列克谢·帕基特诺夫",一起实现 ...
python编的俄罗斯方块游戏_手把手制作Python小游戏：俄罗斯方块(一)
手把手制作Python小游戏:俄罗斯方块1 大家好,新手第一次写文章,请多多指教 A.准备工作: 这里我们运用的是Pygame库,因为Python没有内置,所以需要下载如果没有pygame,可以到官 ...
python图形小游戏代码_手把手制作Python小游戏：俄罗斯方块(一)
手把手制作Python小游戏:俄罗斯方块1 大家好,新手第一次写文章,请多多指教 A.准备工作: 这里我们运用的是Pygame库,因为Python没有内置,所以需要下载如果没有pygame,可以到官 ...
经典俄罗斯方块游戏使用手册
本程序为一款经典俄罗斯方块游戏,玩家通过移动.旋转和摆放各种造型的方块,使之排列成完整的一行或多行并且消除得分:使用快速下降按钮,视高度额外加分.本游戏针对触摸屏操作进行优化,让您有酣畅淋漓的快感:同 ...
JAVA----继承练习（经典俄罗斯方块游戏）
思考:俄罗斯方块游戏的最小单元------单个方块游戏界面呈现---------四个各种形式的方块-------------抽象出长度为4的方块数组所以先建立方块类第一步:建立方块类型,并添加移 ...
如何正确制作游戏的HD重制版
译者:白糖本文作者在制作 Defender's Quest series 高清版本中积累了很多经验,在本文中,他将讨论将旧的低分辨率游戏高清重置时可能需要解决的种种问题,许多解决问题的方式在制作游戏 ...
c++ ea 代码生成_EA公司教AI制作游戏角色，行动流畅自然，全程无需人类介入
想开发出一款爆款游戏,是一件难度极高的事情,不仅要有精妙的内容设计,精致的光影效果,自然的动画建模,还要投入相当多的资金和时间.现在,美国游戏公司艺电(EA)正在与加拿大不列颠哥伦比亚大学(UBC)合 ...
python编程方块_趣味Python编程之经典俄罗斯方块
本帖最后由柠檬守护于 2016-10-23 14:14 编辑转载:http://www.linuxidc.com/Linux/2016-10/136205.htm 用python把经典俄罗斯方块 ...
人人都能当“苍天哥” 手把手教你制作游戏视频
作者:小M来源:家用电脑玩魔兽世界的朋友大多都知道苍天哥这个人物,苍天哥制作了一系列魔兽世界高端职业玩家的游戏视频,其幽默.搞笑的解说风格,广受玩家追捧,一时间成为网络热门人物,目前已经当上了好几个 ...

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

Echarts制作游戏-经典俄罗斯方块相关推荐

最新文章

热门文章