Shulou(Shulou.com)06/01 Report--

这篇文章主要为大家展示了"怎么用JavaScript做俄罗斯方块游戏"，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下"怎么用JavaScript做俄罗斯方块游戏"这篇文章吧。

最终游戏效果

一开始我们先搭个框架，以便后期使用

编写外部框架 *{ margin: 0; padding: 0;}#box{ width:320px; height:450px; position:absolute; margin:0 auto; left:0; top:20px; right:0; bottom:0; background:gray; border-radius:10px;}#mainDiv{ width:300px; height:400px; position:absolute; margin:0 auto; left:0; top:10px; right:0; bottom:0;}.bottom{ width:600px; height:30px; position:absolute; bottom:1px; right:1px;}.bottom .button1{ position: absolute; right: 55px; width: 50px; font-size: 14px;}.bottom .button2{ position: absolute; right: 5px; width: 50px; font-size: 14px;}.bottom .span1{ position: absolute; right: 155px; color: white; font-size: 8px;}.bottom .span2{ position: absolute; right: 255px; color: white; font-size: 8px;} 分数：0 时间：0 开始 结束

框架效果如下：

添加内部画布，以及绘制地图

首先创建线的构造函数Line

function Line(ctx,o){ this.x=0,//x坐标 this.y=0,//y坐标 this.startX=0,//开始点x位置 this.startY=0, //开始点y位置 this.endX=0,//结束点x位置 this.endY=0;//结束点y位置 this.thin=false;//设置变细系数 this.ctx=ctx; this.init(o); } Line.prototype.init=function(o){ for(var key in o){ this[key]=o[key]; } } Line.prototype.render=function(){ innerRender(this); function innerRender(obj){ var ctx=obj.ctx; ctx.save() ctx.beginPath(); ctx.translate(obj.x,obj.y); if(obj.thin){ ctx.translate(0.5,0.5); } if(obj.lineWidth){//设定线宽 ctx.lineWidth=obj.lineWidth; } if(obj.strokeStyle){ ctx.strokeStyle=obj.strokeStyle; } //划线 ctx.moveTo(obj.startX, obj.startY); ctx.lineTo(obj.endX, obj.endY); ctx.stroke(); ctx.restore(); } return this; }设定参数、执行绘制等相关方法

代码如下：

function Game(el){ this.renderArr=[];//待渲染对象存储数组 this.aliveModel=[];//用来存到底的model组合 this.score=0;//分数 this.time=0;//时间 this.moveCount=1;//计时控制器 } Game.prototype.init=function(el,score,time){ if(!el) return ; this.el=el; this.scoreEL=score; this.timeEL=time; var canvas = document.createElement('canvas');//创建画布 canvas.style.cssText="background:darkgrey;border:1px solid grey;";//设置样式 var W = canvas.width = 300; //设置宽度 var H = canvas.height = 400;//设置高度 el.appendChild(canvas);//添加到指定的dom对象中 this.ctx = canvas.getContext('2d'); this.canvas=canvas; this.w=W; this.h=H; this.disX=20;//每个格子的x方向大小 this.disY=20;//每个格子的y方向大小 this.maxX=15;//x方向格子总数 this.maxY=20;//y方向格子总数 this.control();// this.draw();//绘制 } //绘制地图 Game.prototype.createMap=function(){ var renderArr = this.renderArr; var disX = this.disX; var disY = this.disY; var maxX=this.maxX; var maxY=this.maxY; var rectW = this.w; var rectH = this.h; var rect=null; var color; for(var i=1;i>

How do I change the graph on the left to the graph on the right?

-------------------->>>

It's easy to see if you put numbers on it, 1 is still 1, 2 is still 2, and so on, except X\Y changes.

1 square: as long as x+2 can be moved to the specified position;

2 squares: x, y need to add 1

3 squares: y+2 is OK

4 squares: x-1 and y+1

Everything else is the same. Let's write about the method of deformation.

//7 1 deformation Model.prototype.transformQi1=function(){ var blocks = this.blocks,block2=blocks[1]; switch(this.dir){ case 1://vertical tran1(); this.dir=2; break; case 2://horizontal tran2(); this.dir=3; break; case 3://vertical tran3(); this.dir=4; break; case 4://horizontal tran4(); this.dir=1; break; } function tran1(){//becomes horizontal for(var i=0;i

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.