html5 的小游戏开发
html5 给出了很多新特性，使我们开发更方便，最近我也看了一些这方面的知识，做一个小游戏给大家看一下吧
在示例当中使用了一个第三方JS库jCanvaScript ，主要就是用来操作canvas原素的。大家可以看一下。
本文用一个简单的俄罗斯方块入门，简单的了解一下。
俄罗斯方块我把他划为四个部份，积分管理。创建随机图形和区域重绘。
创建一个图形区域用来放做面板并初始化方块数组
function main()
{
j1=jc.rect(0,0,90,600,'#a31b58',1);
j2=jc.rect(90,0,330,600,"#ffeeee",1);
for(var i=0;i<11;i++)
{
varray[i]=new Array();
for(var j=0;j<20;j++)
{
varray[i][j]=0;
}
}
//feng();
}
j1=jc.rect(0,0,90,600,'#a31b58',1);
j2=jc.rect(90,0,330,600,"#ffeeee",1);
for(var i=0;i<11;i++)
{
varray[i]=new Array();
for(var j=0;j<20;j++)
{
varray[i][j]=0;
}
}
//feng();
}
创建一个图形，使用两个参数，第一个参数控制图形形状，第二个参数控制图形的方向，代码如下
//创建一个图形
function showrevw(v,xing)
{
var GA=new Array();
if(v==0)
{
//正方型
GA[0]=[1,1];
GA[1]=[1,1];
}
else if(v==1)
{
//长条
if(xing==0||xing==2)
{
GA[0]=[1,1,1,1];
}
else
{
GA[0]=[1];
GA[1]=[1];
GA[2]=[1];
GA[3]=[1];
}
}
else if(v==2)
{
//土字型
if(xing==0)
{
GA[0]=[0,1,0];
GA[1]=[1,1,1];
}
else if(xing==1)
{
GA[0]=[1,0];
GA[1]=[1,1];
GA[2]=[1,0];
}
else if(xing==2)
{
GA[0]=[1,1,1];
GA[1]=[0,1,0];
}
else
{
GA[0]=[0,1];
GA[1]=[1,1];
GA[2]=[0,1];
}
}
else if(v==3)
{
//Z字型
if(xing==0||xing==2)
{
GA[0]=[1,1,0];
GA[1]=[0,1,1];
}
else
{
GA[0]=[0,1];
GA[1]=[1,1];
GA[2]=[1,0];
}
}
else if(v==4)
{
//反Z字型
if(xing==0||xing==2)
{
GA[0]=[0,1,1];
GA[1]=[1,1,0];
}
else
{
GA[0]=[1,0];
GA[1]=[1,1];
GA[2]=[0,1];
}
}
else if(v==5)
{
//7字型
if(xing==0)
{
GA[0]=[1,1];
GA[1]=[0,1];
GA[2]=[0,1];
}
else if(xing==1)
{
GA[0]=[0,0,1];
GA[1]=[1,1,1];
}
else if(xing==2)
{
GA[0]=[1,0];
GA[1]=[1,0];
GA[2]=[1,1];
}
else if(xing==3)
{
GA[0]=[1,1,1];
GA[1]=[1,0,0];
}
}
else if(v==6)
{
//反7型
if(xing==0)
{
GA[0]=[1,1];
GA[1]=[1,0];
GA[2]=[1,0];
}
else if(xing==1)
{
GA[0]=[1,1,1];
GA[1]=[0,0,1];
}
else if(xing==2)
{
GA[0]=[0,1];
GA[1]=[0,1];
GA[2]=[1,1];
}
else if(xing==3)
{
GA[0]=[1,0,0];
GA[1]=[1,1,1];
}
}
return GA;
function showrevw(v,xing)
{
var GA=new Array();
if(v==0)
{
//正方型
GA[0]=[1,1];
GA[1]=[1,1];
}
else if(v==1)
{
//长条
if(xing==0||xing==2)
{
GA[0]=[1,1,1,1];
}
else
{
GA[0]=[1];
GA[1]=[1];
GA[2]=[1];
GA[3]=[1];
}
}
else if(v==2)
{
//土字型
if(xing==0)
{
GA[0]=[0,1,0];
GA[1]=[1,1,1];
}
else if(xing==1)
{
GA[0]=[1,0];
GA[1]=[1,1];
GA[2]=[1,0];
}
else if(xing==2)
{
GA[0]=[1,1,1];
GA[1]=[0,1,0];
}
else
{
GA[0]=[0,1];
GA[1]=[1,1];
GA[2]=[0,1];
}
}
else if(v==3)
{
//Z字型
if(xing==0||xing==2)
{
GA[0]=[1,1,0];
GA[1]=[0,1,1];
}
else
{
GA[0]=[0,1];
GA[1]=[1,1];
GA[2]=[1,0];
}
}
else if(v==4)
{
//反Z字型
if(xing==0||xing==2)
{
GA[0]=[0,1,1];
GA[1]=[1,1,0];
}
else
{
GA[0]=[1,0];
GA[1]=[1,1];
GA[2]=[0,1];
}
}
else if(v==5)
{
//7字型
if(xing==0)
{
GA[0]=[1,1];
GA[1]=[0,1];
GA[2]=[0,1];
}
else if(xing==1)
{
GA[0]=[0,0,1];
GA[1]=[1,1,1];
}
else if(xing==2)
{
GA[0]=[1,0];
GA[1]=[1,0];
GA[2]=[1,1];
}
else if(xing==3)
{
GA[0]=[1,1,1];
GA[1]=[1,0,0];
}
}
else if(v==6)
{
//反7型
if(xing==0)
{
GA[0]=[1,1];
GA[1]=[1,0];
GA[2]=[1,0];
}
else if(xing==1)
{
GA[0]=[1,1,1];
GA[1]=[0,0,1];
}
else if(xing==2)
{
GA[0]=[0,1];
GA[1]=[0,1];
GA[2]=[1,1];
}
else if(xing==3)
{
GA[0]=[1,0,0];
GA[1]=[1,1,1];
}
}
return GA;
}
创建随即图形
function createrandomrect()
{
var v = Math.floor(Math.random() * (7));
v=parseInt(v);
return v;
//jc.
}
function createrandomxing()
{
var v= Math.floor(Math.random() * (4));
v=parseInt(v);
return v;
}
var v = Math.floor(Math.random() * (7));
v=parseInt(v);
return v;
//jc.
}
function createrandomxing()
{
var v= Math.floor(Math.random() * (4));
v=parseInt(v);
return v;
}
1创建当前图形并刷新
function CreateXing(tr)
{
//delxing();
var GA=null;
if(!xing.isxing)
{
xing.rect=createrandomrect();
xing.xing=createrandomxing();
GA = showrevw(xing.rect,xing.xing);
xing.x=5;xing.y=0;
xing.oldxing = creater(xing.x+xing.left,xing.y,GA,xing.oldxing);
xing.isxing=1;
}
else
{
if(tr)
{
xing.isxing=0;
delxing();
//CreateXing();
}
else
{
GA = showrevw(xing.rect,xing.xing);
creater(xing.x+xing.left,xing.y,GA,xing.oldxing);
}
}
xing.Ga=GA;
}
//delxing();
var GA=null;
if(!xing.isxing)
{
xing.rect=createrandomrect();
xing.xing=createrandomxing();
GA = showrevw(xing.rect,xing.xing);
xing.x=5;xing.y=0;
xing.oldxing = creater(xing.x+xing.left,xing.y,GA,xing.oldxing);
xing.isxing=1;
}
else
{
if(tr)
{
xing.isxing=0;
delxing();
//CreateXing();
}
else
{
GA = showrevw(xing.rect,xing.xing);
creater(xing.x+xing.left,xing.y,GA,xing.oldxing);
}
}
xing.Ga=GA;
}
绘制图形
//创建矩形
function creater(x,y,ga,oldxing)
{
var vrects=null;
var ixxx=0;
var gawlength=ga.length;
var gahlength=ga[0].length;
if(oldxing!=null)
{
for(var i=0;i<gawlength;i++)
{
for(var j=0;j<gahlength;j++)
{
if(ga[i][j]==1)
{
oldxing[ixxx]._x=(x+i)*rectlength;
oldxing[ixxx]._y=(y+j)*rectlength;
ixxx++;
}
}
}
}
else
{
vrects = new Array();
for(var i=0;i<gawlength;i++)
{
for(var j=0;j<gahlength;j++)
{
if(ga[i][j]==1)
{
vrects[ixxx]=jc.rect((x+i)*rectlength,(y+j)*rectlength,rectlength,rectlength,"#303030",1);
vrects[ixxx].up();
ixxx++;
}
}
}
}
//var vtrect = jc.rect(x*rectlength,y*rectlength,rectlength,rectlength,"#12f456");
return vrects;
function creater(x,y,ga,oldxing)
{
var vrects=null;
var ixxx=0;
var gawlength=ga.length;
var gahlength=ga[0].length;
if(oldxing!=null)
{
for(var i=0;i<gawlength;i++)
{
for(var j=0;j<gahlength;j++)
{
if(ga[i][j]==1)
{
oldxing[ixxx]._x=(x+i)*rectlength;
oldxing[ixxx]._y=(y+j)*rectlength;
ixxx++;
}
}
}
}
else
{
vrects = new Array();
for(var i=0;i<gawlength;i++)
{
for(var j=0;j<gahlength;j++)
{
if(ga[i][j]==1)
{
vrects[ixxx]=jc.rect((x+i)*rectlength,(y+j)*rectlength,rectlength,rectlength,"#303030",1);
vrects[ixxx].up();
ixxx++;
}
}
}
}
//var vtrect = jc.rect(x*rectlength,y*rectlength,rectlength,rectlength,"#12f456");
return vrects;
}
按键检测（32=空格，37左，39右）
function anjian(keycode)
{
if(keycode==32)
{
xing.xing=(xing.xing+1==4)?0:xing.xing+1;
}
else if(keycode==37)
{
if(xing.x!=0)
xing.x=xing.x-1;
}
else if(keycode==39)
{
if(xing.Ga)
if(xing.Ga.length+xing.x<11)
xing.x=xing.x+1;
}
CreateXing();
{
if(keycode==32)
{
xing.xing=(xing.xing+1==4)?0:xing.xing+1;
}
else if(keycode==37)
{
if(xing.x!=0)
xing.x=xing.x-1;
}
else if(keycode==39)
{
if(xing.Ga)
if(xing.Ga.length+xing.x<11)
xing.x=xing.x+1;
}
CreateXing();
}
得分和得分后的重绘
function reData()
{
var b=false;
if(xing.Ga)
{
var tga=xing.Ga;
var galength = tga.length;
var gaitemlength=tga[0].length;
for(var i=0;i<galength;i++)
{
for(var j=gaitemlength;j>0;j--)
{
var XG=tga[i][j-1];
if(XG)
{
if(varray[xing.x+i][xing.y+j]||xing.y+j==20)
{
drowmain(tga);
b=true;
break;
}
}
}
if(b)
break;
}
}
return b;
}
function drowmain(GA)
{
var tga=xing.Ga;
var galength = tga.length+xing.x;
var gaitemlength=tga[0].length+xing.y;
for(var i=xing.x;i<galength;i++)
{
for(var j=xing.y;j<gaitemlength;j++)
{
if(GA[i-xing.x][j-xing.y])
varray[i][j]=1;
}
}
if(oldmain!=null)
{
var olength=oldmain.length;
for(var i=0;i<olength;i++)
{
oldmain[i].del();
}
}
var vvlength=varray.length;
var vvitemlength=varray[0].length;
var arrayObj=new Array();
var temparray = arraytodaoarray(varray);
var v=0;
for(var i=0;i<vvitemlength;i++)
{
var b=true;
for(var j=0;j<vvlength;j++)
{
if(!varray[j][i])
{
b=false;
break;
}
}
if(b)
{
v++;
for(var j=0;j<vvlength;j++)
{
varray[j].splice(i,1);
varray[j].unshift(0);
}
}
}
feng(v);
//for(var v)
oldmain = creater(3,0,varray,null);
}
var oldtext=0;
function arraytodaoarray(arr)
{
var alength=arr.length;
var aitemlength=arr[0].length;
var array=new Array(aitemlength);
for(var i=0;i<aitemlength;i++)
{
array[i]=new Array();
for(var j=0;j<alength;j++)
{
array[i][j]=arr[j][i];
}
}
return array;
}
var oldmain =0;
var oldtext=0;
var fengs=0;
function feng(v)
{
fengs+=v*v*100;
if(oldtext)
{
oldtext.del();
}
oldtext = jc.text("得分:"+(fengs),20,100,'#ff0000', 0);
{
var b=false;
if(xing.Ga)
{
var tga=xing.Ga;
var galength = tga.length;
var gaitemlength=tga[0].length;
for(var i=0;i<galength;i++)
{
for(var j=gaitemlength;j>0;j--)
{
var XG=tga[i][j-1];
if(XG)
{
if(varray[xing.x+i][xing.y+j]||xing.y+j==20)
{
drowmain(tga);
b=true;
break;
}
}
}
if(b)
break;
}
}
return b;
}
function drowmain(GA)
{
var tga=xing.Ga;
var galength = tga.length+xing.x;
var gaitemlength=tga[0].length+xing.y;
for(var i=xing.x;i<galength;i++)
{
for(var j=xing.y;j<gaitemlength;j++)
{
if(GA[i-xing.x][j-xing.y])
varray[i][j]=1;
}
}
if(oldmain!=null)
{
var olength=oldmain.length;
for(var i=0;i<olength;i++)
{
oldmain[i].del();
}
}
var vvlength=varray.length;
var vvitemlength=varray[0].length;
var arrayObj=new Array();
var temparray = arraytodaoarray(varray);
var v=0;
for(var i=0;i<vvitemlength;i++)
{
var b=true;
for(var j=0;j<vvlength;j++)
{
if(!varray[j][i])
{
b=false;
break;
}
}
if(b)
{
v++;
for(var j=0;j<vvlength;j++)
{
varray[j].splice(i,1);
varray[j].unshift(0);
}
}
}
feng(v);
//for(var v)
oldmain = creater(3,0,varray,null);
}
var oldtext=0;
function arraytodaoarray(arr)
{
var alength=arr.length;
var aitemlength=arr[0].length;
var array=new Array(aitemlength);
for(var i=0;i<aitemlength;i++)
{
array[i]=new Array();
for(var j=0;j<alength;j++)
{
array[i][j]=arr[j][i];
}
}
return array;
}
var oldmain =0;
var oldtext=0;
var fengs=0;
function feng(v)
{
fengs+=v*v*100;
if(oldtext)
{
oldtext.del();
}
oldtext = jc.text("得分:"+(fengs),20,100,'#ff0000', 0);
}
博客园春华秋实原创，转载请注明出处。
页面重绘区域
function startShow()
{
//jc.rect(x, y, radius,radius, color,filled)
j1.focus()
.keydown(function(key){
anjian(key.code);
});
if(5-level==0)
{
level=0;
}
else
{
xing.y=xing.y+1;
}
var tr =reData();
feng(0);
CreateXing(tr);
{
//jc.rect(x, y, radius,radius, color,filled)
j1.focus()
.keydown(function(key){
anjian(key.code);
});
if(5-level==0)
{
level=0;
}
else
{
xing.y=xing.y+1;
}
var tr =reData();
feng(0);
CreateXing(tr);
}
项目开始结束
function onload_1()
{
jc.start(idCanvas, true);
main();
interval_1 = setInterval(startShow, 200);
}
function start_1(idCanvas)
{
if(interval_1)return;
onload_1();
}
function stop_1(idCanvas)
{
clearInterval(interval_1);
interval_1 = 0;
jc.clear(idCanvas);
{
jc.start(idCanvas, true);
main();
interval_1 = setInterval(startShow, 200);
}
function start_1(idCanvas)
{
if(interval_1)return;
onload_1();
}
function stop_1(idCanvas)
{
clearInterval(interval_1);
interval_1 = 0;
jc.clear(idCanvas);
}
全部代码
test.html
<html>
<head>
<!--we include library here:-->
<script type="text/javascript" src="jCanvaScript.js"> </script>
<!--and here is our code:-->
<script type="text/javascript">
//创建一个图形
function showrevw(v,xing)
{
v=1;
var GA=new Array();
if(v==0)
{
//正方型
GA[0]=[1,1];
GA[1]=[1,1];
}
else if(v==1)
{
//长条
if(xing==0||xing==2)
{
GA[0]=[1,1,1,1];
}
else
{
GA[0]=[1];
GA[1]=[1];
GA[2]=[1];
GA[3]=[1];
}
}
else if(v==2)
{
//土字型
if(xing==0)
{
GA[0]=[0,1,0];
GA[1]=[1,1,1];
}
else if(xing==1)
{
GA[0]=[1,0];
GA[1]=[1,1];
GA[2]=[1,0];
}
else if(xing==2)
{
GA[0]=[1,1,1];
GA[1]=[0,1,0];
}
else
{
GA[0]=[0,1];
GA[1]=[1,1];
GA[2]=[0,1];
}
}
else if(v==3)
{
//Z字型
if(xing==0||xing==2)
{
GA[0]=[1,1,0];
GA[1]=[0,1,1];
}
else
{
GA[0]=[0,1];
GA[1]=[1,1];
GA[2]=[1,0];
}
}
else if(v==4)
{
//反Z字型
if(xing==0||xing==2)
{
GA[0]=[0,1,1];
GA[1]=[1,1,0];
}
else
{
GA[0]=[1,0];
GA[1]=[1,1];
GA[2]=[0,1];
}
}
else if(v==5)
{
//7字型
if(xing==0)
{
GA[0]=[1,1];
GA[1]=[0,1];
GA[2]=[0,1];
}
else if(xing==1)
{
GA[0]=[0,0,1];
GA[1]=[1,1,1];
}
else if(xing==2)
{
GA[0]=[1,0];
GA[1]=[1,0];
GA[2]=[1,1];
}
else if(xing==3)
{
GA[0]=[1,1,1];
GA[1]=[1,0,0];
}
}
else if(v==6)
{
//反7型
if(xing==0)
{
GA[0]=[1,1];
GA[1]=[1,0];
GA[2]=[1,0];
}
else if(xing==1)
{
GA[0]=[1,1,1];
GA[1]=[0,0,1];
}
else if(xing==2)
{
GA[0]=[0,1];
GA[1]=[0,1];
GA[2]=[1,1];
}
else if(xing==3)
{
GA[0]=[1,0,0];
GA[1]=[1,1,1];
}
}
return GA;
}
//创建矩形
function creater(x,y,ga,oldxing)
{
var vrects=null;
var ixxx=0;
var gawlength=ga.length;
var gahlength=ga[0].length;
if(oldxing!=null)
{
for(var i=0;i<gawlength;i++)
{
for(var j=0;j<gahlength;j++)
{
if(ga[i][j]==1)
{
oldxing[ixxx]._x=(x+i)*rectlength;
oldxing[ixxx]._y=(y+j)*rectlength;
ixxx++;
}
}
}
}
else
{
vrects = new Array();
for(var i=0;i<gawlength;i++)
{
for(var j=0;j<gahlength;j++)
{
if(ga[i][j]==1)
{
vrects[ixxx]=jc.rect((x+i)*rectlength,(y+j)*rectlength,rectlength,rectlength,"#303030",1);
vrects[ixxx].up();
ixxx++;
}
}
}
}
//var vtrect = jc.rect(x*rectlength,y*rectlength,rectlength,rectlength,"#12f456");
return vrects;
}
function simpleExample()
{
start_1();
}
var interval_1=0;
var idCanvas='canvas_1';
function startShow()
{
//jc.rect(x, y, radius,radius, color,filled)
j1.focus()
.keydown(function(key){
anjian(key.code);
});
if(5-level==0)
{
level=0;
}
else
{
xing.y=xing.y+1;
}
var tr =reData();
feng(0);
CreateXing(tr);
}
var level=1;
var varray=new Array();
var j1=null;
var j2=null;
function main()
{
j1=jc.rect(0,0,90,600,'#a31b58',1);
j2=jc.rect(90,0,330,600,"#ffeeee",1);
for(var i=0;i<11;i++)
{
varray[i]=new Array();
for(var j=0;j<20;j++)
{
varray[i][j]=0;
}
}
//feng();
}
function reData()
{
var b=false;
if(xing.Ga)
{
var tga=xing.Ga;
var galength = tga.length;
var gaitemlength=tga[0].length;
for(var i=0;i<galength;i++)
{
for(var j=gaitemlength;j>0;j--)
{
var XG=tga[i][j-1];
if(XG)
{
if(varray[xing.x+i][xing.y+j]||xing.y+j==20)
{
drowmain(tga);
b=true;
break;
}
}
}
if(b)
break;
}
}
return b;
}
function drowmain(GA)
{
var tga=xing.Ga;
var galength = tga.length+xing.x;
var gaitemlength=tga[0].length+xing.y;
for(var i=xing.x;i<galength;i++)
{
for(var j=xing.y;j<gaitemlength;j++)
{
if(GA[i-xing.x][j-xing.y])
varray[i][j]=1;
}
}
if(oldmain!=null)
{
var olength=oldmain.length;
for(var i=0;i<olength;i++)
{
oldmain[i].del();
}
}
var vvlength=varray.length;
var vvitemlength=varray[0].length;
var arrayObj=new Array();
var temparray = arraytodaoarray(varray);
var v=0;
for(var i=0;i<vvitemlength;i++)
{
var b=true;
for(var j=0;j<vvlength;j++)
{
if(!varray[j][i])
{
b=false;
break;
}
}
if(b)
{
v++;
for(var j=0;j<vvlength;j++)
{
varray[j].splice(i,1);
varray[j].unshift(0);
}
}
}
feng(v);
//for(var v)
oldmain = creater(3,0,varray,null);
}
var oldtext=0;
function arraytodaoarray(arr)
{
var alength=arr.length;
var aitemlength=arr[0].length;
var array=new Array(aitemlength);
for(var i=0;i<aitemlength;i++)
{
array[i]=new Array();
for(var j=0;j<alength;j++)
{
array[i][j]=arr[j][i];
}
}
return array;
}
var oldmain =0;
var oldtext=0;
var fengs=0;
function feng(v)
{
fengs+=v*v*100;
if(oldtext)
{
oldtext.del();
}
oldtext = jc.text("得分:"+(fengs),20,100,'#ff0000', 0);
}
//var crrindex=0;
function anjian(keycode)
{
if(keycode==32)
{
xing.xing=(xing.xing+1==4)?0:xing.xing+1;
}
else if(keycode==37)
{
if(xing.x!=0)
xing.x=xing.x-1;
}
else if(keycode==39)
{
if(xing.Ga)
if(xing.Ga.length+xing.x<11)
xing.x=xing.x+1;
}
CreateXing();
}
function createrandomrect()
{
var v = Math.floor(Math.random() * (7));
v=parseInt(v);
return v;
//jc.
}
function createrandomxing()
{
var v= Math.floor(Math.random() * (4));
v=parseInt(v);
return v;
}
var rectlength=30;
var xing={x:0,y:0,isxing:0,oldxing:null,xing:0,rect:0,left:3,Ga:null};
//变型 参数1，旧矩形，2形状，3，变型数
function bianxing(xrect,x,y)
{
}
// var oldxing=null;
function delxing()
{
if(xing.oldxing)
{
xing.oldxing[0].del();
xing.oldxing[1].del();
xing.oldxing[2].del();
xing.oldxing[3].del();
xing.oldxing=null;
}
}
var gameData=new Array();
function CreateXing(tr)
{
//delxing();
var GA=null;
if(!xing.isxing)
{
xing.rect=createrandomrect();
xing.xing=createrandomxing();
GA = showrevw(xing.rect,xing.xing);
xing.x=5;xing.y=0;
xing.oldxing = creater(xing.x+xing.left,xing.y,GA,xing.oldxing);
xing.isxing=1;
}
else
{
if(tr)
{
xing.isxing=0;
delxing();
//CreateXing();
}
else
{
GA = showrevw(xing.rect,xing.xing);
creater(xing.x+xing.left,xing.y,GA,xing.oldxing);
}
}
xing.Ga=GA;
}
//function
function onload_1()
{
jc.start(idCanvas, true);
main();
interval_1 = setInterval(startShow, 200);
}
function start_1(idCanvas)
{
if(interval_1)return;
onload_1();
}
function stop_1(idCanvas)
{
clearInterval(interval_1);
interval_1 = 0;
jc.clear(idCanvas);
}
</script>
<head>
<body onLoad="simpleExample()">
<canvas height="600" tabIndex="0" width="430" id="canvas_1"></canvas>
</body>
</html>
<!--we include library here:-->
<script type="text/javascript" src="jCanvaScript.js"> </script>
<!--and here is our code:-->
<script type="text/javascript">
//创建一个图形
function showrevw(v,xing)
{
v=1;
var GA=new Array();
if(v==0)
{
//正方型
GA[0]=[1,1];
GA[1]=[1,1];
}
else if(v==1)
{
//长条
if(xing==0||xing==2)
{
GA[0]=[1,1,1,1];
}
else
{
GA[0]=[1];
GA[1]=[1];
GA[2]=[1];
GA[3]=[1];
}
}
else if(v==2)
{
//土字型
if(xing==0)
{
GA[0]=[0,1,0];
GA[1]=[1,1,1];
}
else if(xing==1)
{
GA[0]=[1,0];
GA[1]=[1,1];
GA[2]=[1,0];
}
else if(xing==2)
{
GA[0]=[1,1,1];
GA[1]=[0,1,0];
}
else
{
GA[0]=[0,1];
GA[1]=[1,1];
GA[2]=[0,1];
}
}
else if(v==3)
{
//Z字型
if(xing==0||xing==2)
{
GA[0]=[1,1,0];
GA[1]=[0,1,1];
}
else
{
GA[0]=[0,1];
GA[1]=[1,1];
GA[2]=[1,0];
}
}
else if(v==4)
{
//反Z字型
if(xing==0||xing==2)
{
GA[0]=[0,1,1];
GA[1]=[1,1,0];
}
else
{
GA[0]=[1,0];
GA[1]=[1,1];
GA[2]=[0,1];
}
}
else if(v==5)
{
//7字型
if(xing==0)
{
GA[0]=[1,1];
GA[1]=[0,1];
GA[2]=[0,1];
}
else if(xing==1)
{
GA[0]=[0,0,1];
GA[1]=[1,1,1];
}
else if(xing==2)
{
GA[0]=[1,0];
GA[1]=[1,0];
GA[2]=[1,1];
}
else if(xing==3)
{
GA[0]=[1,1,1];
GA[1]=[1,0,0];
}
}
else if(v==6)
{
//反7型
if(xing==0)
{
GA[0]=[1,1];
GA[1]=[1,0];
GA[2]=[1,0];
}
else if(xing==1)
{
GA[0]=[1,1,1];
GA[1]=[0,0,1];
}
else if(xing==2)
{
GA[0]=[0,1];
GA[1]=[0,1];
GA[2]=[1,1];
}
else if(xing==3)
{
GA[0]=[1,0,0];
GA[1]=[1,1,1];
}
}
return GA;
}
//创建矩形
function creater(x,y,ga,oldxing)
{
var vrects=null;
var ixxx=0;
var gawlength=ga.length;
var gahlength=ga[0].length;
if(oldxing!=null)
{
for(var i=0;i<gawlength;i++)
{
for(var j=0;j<gahlength;j++)
{
if(ga[i][j]==1)
{
oldxing[ixxx]._x=(x+i)*rectlength;
oldxing[ixxx]._y=(y+j)*rectlength;
ixxx++;
}
}
}
}
else
{
vrects = new Array();
for(var i=0;i<gawlength;i++)
{
for(var j=0;j<gahlength;j++)
{
if(ga[i][j]==1)
{
vrects[ixxx]=jc.rect((x+i)*rectlength,(y+j)*rectlength,rectlength,rectlength,"#303030",1);
vrects[ixxx].up();
ixxx++;
}
}
}
}
//var vtrect = jc.rect(x*rectlength,y*rectlength,rectlength,rectlength,"#12f456");
return vrects;
}
function simpleExample()
{
start_1();
}
var interval_1=0;
var idCanvas='canvas_1';
function startShow()
{
//jc.rect(x, y, radius,radius, color,filled)
j1.focus()
.keydown(function(key){
anjian(key.code);
});
if(5-level==0)
{
level=0;
}
else
{
xing.y=xing.y+1;
}
var tr =reData();
feng(0);
CreateXing(tr);
}
var level=1;
var varray=new Array();
var j1=null;
var j2=null;
function main()
{
j1=jc.rect(0,0,90,600,'#a31b58',1);
j2=jc.rect(90,0,330,600,"#ffeeee",1);
for(var i=0;i<11;i++)
{
varray[i]=new Array();
for(var j=0;j<20;j++)
{
varray[i][j]=0;
}
}
//feng();
}
function reData()
{
var b=false;
if(xing.Ga)
{
var tga=xing.Ga;
var galength = tga.length;
var gaitemlength=tga[0].length;
for(var i=0;i<galength;i++)
{
for(var j=gaitemlength;j>0;j--)
{
var XG=tga[i][j-1];
if(XG)
{
if(varray[xing.x+i][xing.y+j]||xing.y+j==20)
{
drowmain(tga);
b=true;
break;
}
}
}
if(b)
break;
}
}
return b;
}
function drowmain(GA)
{
var tga=xing.Ga;
var galength = tga.length+xing.x;
var gaitemlength=tga[0].length+xing.y;
for(var i=xing.x;i<galength;i++)
{
for(var j=xing.y;j<gaitemlength;j++)
{
if(GA[i-xing.x][j-xing.y])
varray[i][j]=1;
}
}
if(oldmain!=null)
{
var olength=oldmain.length;
for(var i=0;i<olength;i++)
{
oldmain[i].del();
}
}
var vvlength=varray.length;
var vvitemlength=varray[0].length;
var arrayObj=new Array();
var temparray = arraytodaoarray(varray);
var v=0;
for(var i=0;i<vvitemlength;i++)
{
var b=true;
for(var j=0;j<vvlength;j++)
{
if(!varray[j][i])
{
b=false;
break;
}
}
if(b)
{
v++;
for(var j=0;j<vvlength;j++)
{
varray[j].splice(i,1);
varray[j].unshift(0);
}
}
}
feng(v);
//for(var v)
oldmain = creater(3,0,varray,null);
}
var oldtext=0;
function arraytodaoarray(arr)
{
var alength=arr.length;
var aitemlength=arr[0].length;
var array=new Array(aitemlength);
for(var i=0;i<aitemlength;i++)
{
array[i]=new Array();
for(var j=0;j<alength;j++)
{
array[i][j]=arr[j][i];
}
}
return array;
}
var oldmain =0;
var oldtext=0;
var fengs=0;
function feng(v)
{
fengs+=v*v*100;
if(oldtext)
{
oldtext.del();
}
oldtext = jc.text("得分:"+(fengs),20,100,'#ff0000', 0);
}
//var crrindex=0;
function anjian(keycode)
{
if(keycode==32)
{
xing.xing=(xing.xing+1==4)?0:xing.xing+1;
}
else if(keycode==37)
{
if(xing.x!=0)
xing.x=xing.x-1;
}
else if(keycode==39)
{
if(xing.Ga)
if(xing.Ga.length+xing.x<11)
xing.x=xing.x+1;
}
CreateXing();
}
function createrandomrect()
{
var v = Math.floor(Math.random() * (7));
v=parseInt(v);
return v;
//jc.
}
function createrandomxing()
{
var v= Math.floor(Math.random() * (4));
v=parseInt(v);
return v;
}
var rectlength=30;
var xing={x:0,y:0,isxing:0,oldxing:null,xing:0,rect:0,left:3,Ga:null};
//变型 参数1，旧矩形，2形状，3，变型数
function bianxing(xrect,x,y)
{
}
// var oldxing=null;
function delxing()
{
if(xing.oldxing)
{
xing.oldxing[0].del();
xing.oldxing[1].del();
xing.oldxing[2].del();
xing.oldxing[3].del();
xing.oldxing=null;
}
}
var gameData=new Array();
function CreateXing(tr)
{
//delxing();
var GA=null;
if(!xing.isxing)
{
xing.rect=createrandomrect();
xing.xing=createrandomxing();
GA = showrevw(xing.rect,xing.xing);
xing.x=5;xing.y=0;
xing.oldxing = creater(xing.x+xing.left,xing.y,GA,xing.oldxing);
xing.isxing=1;
}
else
{
if(tr)
{
xing.isxing=0;
delxing();
//CreateXing();
}
else
{
GA = showrevw(xing.rect,xing.xing);
creater(xing.x+xing.left,xing.y,GA,xing.oldxing);
}
}
xing.Ga=GA;
}
//function
function onload_1()
{
jc.start(idCanvas, true);
main();
interval_1 = setInterval(startShow, 200);
}
function start_1(idCanvas)
{
if(interval_1)return;
onload_1();
}
function stop_1(idCanvas)
{
clearInterval(interval_1);
interval_1 = 0;
jc.clear(idCanvas);
}
</script>
<head>
<body onLoad="simpleExample()">
<canvas height="600" tabIndex="0" width="430" id="canvas_1"></canvas>
</body>
</html>
这只是一个简单的例子。还有很多没有完善，但可以给你们一个灵感通过他来实现自己的一些想法。
谢谢阅读本文，文人表达能力有限无法说的太全面。
博客园春华秋实原创，转载请注明出处。
