開始自己手寫一個好玩的俄羅斯方塊吧，上變形，左右移動，下加速，空格瞬移等功能，無聊的時候學習下canvas，f12 修改分數，體驗金手指的快樂吧

1、定義界面，和按鈕

上

下

左

右

2、js部分

1、先定義每個圖形的形狀和變化的形狀，這里是使用多維數組的方式去保存它圖形每個方塊的位置(當然這里也可以用循環的方式)

var data=[[[[1,0,0,0],[1,0,0,0],[1,1,0,0],[0,0,0,0]],[[1,1,1,0],[1,0,0,0],[0,0,0,0],[0,0,0,0]],[[1,1,0,0],[0,1,0,0],[0,1,0,0],[0,0,0,0]],[[0,0,1,0],[1,1,1,0],[0,0,0,0],[0,0,0,0]]],

[[[1,0,0,0],[1,1,0,0],[1,0,0,0],[0,0,0,0]],[[1,1,1,0],[0,1,0,0],[0,0,0,0],[0,0,0,0]],[[0,0,1,0],[0,1,1,0],[0,0,1,0],[0,0,0,0]],[[0,0,0,0],[0,1,0,0],[1,1,1,0],[0,0,0,0]]],

[[[0,1,0,0],[0,1,1,0],[0,0,1,0],[0,0,0,0]],[[0,1,1,0],[1,1,0,0],[0,0,0,0],[0,0,0,0]],[[0,1,0,0],[0,1,1,0],[0,0,1,0],[0,0,0,0]],[[0,0,0,0],[0,1,1,0],[1,1,0,0],[0,0,0,0]]],

[[[0,1,1,0],[0,1,1,0],[0,0,0,0],[0,0,0,0]],[[0,1,1,0],[0,1,1,0],[0,0,0,0],[0,0,0,0]],[[0,1,1,0],[0,1,1,0],[0,0,0,0],[0,0,0,0]],[[0,1,1,0],[0,1,1,0],[0,0,0,0],[0,0,0,0]]],

[[[0,0,1,0],[0,1,1,0],[0,1,0,0],[0,0,0,0]],[[1,1,0,0],[0,1,1,0],[0,0,0,0],[0,0,0,0]],[[0,0,1,0],[0,1,1,0],[0,1,0,0],[0,0,0,0]],[[1,1,0,0],[0,1,1,0],[0,0,0,0],[0,0,0,0]]],

[[[0,1,0,0],[0,1,0,0],[0,1,0,0],[0,1,0,0]],[[0,0,0,0],[1,1,1,1],[0,0,0,0],[0,0,0,0]],[[0,1,0,0],[0,1,0,0],[0,1,0,0],[0,1,0,0]],[[0,0,0,0],[1,1,1,1],[0,0,0,0],[0,0,0,0]]],

[[[1,1,0,0],[1,0,0,0],[1,0,0,0],[0,0,0,0]],[[1,1,1,0],[0,0,1,0],[0,0,0,0],[0,0,0,0]],[[0,0,0,0],[0,0,1,0],[0,0,1,0],[0,1,1,0]],[[0,0,0,0],[0,0,0,0],[1,0,0,0],[1,1,1,0]]]

];

2、定義圖形的位置和每幀下落的速度

var newX=120;//記錄這個圖形的左右位置

var count=0; //記錄下落的速度

var shape=0; //記錄形狀

var finallys=new Array(); //記錄落下后停止的位置

var re=6; //獲取隨機數方塊

var fat=1; //每幀的速度

var xyg=0; //下一個方塊

var dfen=0;//分數

//定義游戲界面

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

//下個方格的畫布

var c2=document.getElementById("Canvas");

var ctx2=c2.getContext("2d");

3、定義組成圖形的方法

//組成圖形的方法

function constitute(){

var Arr=new Array(); // 存儲當前下來的方塊位置

var y=0; //記錄每個小方塊組成圖形的小方塊y下標--相加

for (var i=0;i

var x=0; //記錄每個小方塊組成圖形的小方塊x下標

for (var j=0;j

x+=20;

if(data[re][shape][i][j]==1&&Arr.length<4){ //每個圖形都是四個小方塊組成

ctx.strokeStyle = "#000";

ctx.strokeRect(x+newX,y+count,20,20);

ctx.fillStyle="#000000"; //定義顏色

ctx.fillRect(x+newX,y+count,19,19); //繪圖

var a={

xs:x+newX,

ys:y+count

};

Arr.push(a); //記錄圖形位置

if(Arr.length==4){ //圖形形成后調用掉落完成后重新調用

anew(Arr);

return Arr;

}

}

}

y+=20;

};

}

3、判斷掉落是否到底或者碰撞到上一個底部的方塊

//掉落完成后重新調用

function anew (arr){

var da=bottom(arr); //調用判斷是否到底

if(da==1){ //如果返回1 則已經是到底部，

finallys.push(arr); // 保存在底部的方塊，方便碰撞判斷

count=0; //恢復成原來的上下位置

newX=120; //恢復原來的左右位置

re=xyg; //當前的方塊變成上一個的下一個

xyg=Math.floor(Math.random()*7); //重新隨機獲取當前的下一個

ctx2.clearRect(0, 0, c.width,c.height); //清除畫布

xygs();//重新繪制預知框的

}

}

//判斷是否碰到下面的障礙物

function bottom(arr){ //判斷是否掉落底部//返回1表示可以保存起來

for (var i =0;i

if(arr[i].ys>=c.height-20){//首先判斷是否到界面的底部

/*console.log(arr);*/

return 1;

}

for (var t=0;t

for (var j=0;j

if(finallys[t][j].ys==arr[i].ys+20&&finallys[t][j].xs==arr[i].xs){

/*console.log(arr);*/

return 1;

}

}

}

}

return 0;

}

4、下落到底部后的方塊要保存起來，定義重新渲染的方法

//用來組成下標已經堆積的格子

function ground(finallys){

deletes();//判斷是否到達頂部了， 頂部了就直接清除重新開始

for (var i=0;i

for (var j=0;j

ctx.strokeStyle = "#000";

ctx.strokeRect(finallys[i][j].xs,finallys[i][j].ys,20,20);

ctx.fillStyle="#000000"; //定義顏色

ctx.fillRect(finallys[i][j].xs,finallys[i][j].ys,19,19); //畫圖

if(finallys[i][j].ys<=20){

this.finallys=new Array();

count=0;

constitute(); //調用組成畫布的方法

/*ctx.clearRect(0, 0, c.width,c.height); //清除畫布*/

return;

}

}

}

}

5、當橫向一行滿了后就可以清楚并得到對應的分數

//判斷是否組滿一行達到清除的位置

function deletes(){

var c=600;//當前橫向的寬度

var add=new Array;//記錄寬度的每個方塊

for (var i=0;i

c=c-20;

add.push(c);

}

for (var a=0;a

var cou=0;

for (var t=0;t

for (var j=0;j

if(add[a]==finallys[t][j].ys){

cou++;

}

}

}

if(cou>=20){ //如果橫向滿了調用清除的方法

qc(add[a]);//

cou=0;

}

}

}

//一行滿了后清除和上面的向下增加移動

function qc(add){

for (var t=0;t

for (var j=0;j

if(add==finallys[t][j].ys){

finallys[t].splice(j,1);

dfen=dfen+10;

j--;

}

}

}

for (var t=0;t

for (var j=0;j

if(finallys[t][j].ys

finallys[t][j].ys=finallys[t][j].ys+20;

}

}

}

}

6、碰撞檢測

//判斷不能掉出圍起來的范圍

function crash(count,e){ //count 下落的位置， e 表示當前是什么按鈕操作

var newCount=0; //判斷是否有下降的數據有就下降

if(count!=0){

newCount=count;

}

var y=0; //記錄組成形狀的位置--相加

var r=0;

var make=-1;

for (var i=0;i

var x=0;

for (var j=0;j

x+=20;

if(data[re][shape][i][j]==1){

//防止變形的時候溢出

if(e==38&&x+newX<0||x+newX>c.width-20){

if(x+newX<0){

newX=newX+20;

r=1;

}else{

newX=newX-20;

r=2;

}

}

if(e==38){

if(y+count>c.height-20){

if(shape!=0){

shape=shape-1;

}else{

shape=3;

}

}

}

防止突出右邊

if(e==39&&c.width-20

make=1;

}

//防止突出左邊

if(e==37&&x+newX-20<0){

make=1;

}

if(y+newCount>c.height-20){

count=count-20;

}

var ys=(y+count)%20; //下落的時候可能會一直按著 速度快會直接插到下面，所以這里要求余，當到這個方塊的位置的時候取整判斷

var es=20-ys;

var newCount=y+count+es;

for (var t=0;t

for (var j1=0;j1

if(finallys[t][j1].ys==newCount&&finallys[t][j1].xs==x+newX+20&&e==39){

newX=newX-20;

}

if(finallys[t][j1].ys==newCount&&finallys[t][j1].xs==x+newX-20&&e==37){

newX=newX+20;

}

if(finallys[t][j1].ys+20==newCount&&finallys[t][j1].xs==x+newX&&e==38){

if(shape!=0){

shape=shape-1;

}else{

shape=3;

}

if(r==1){

newX=newX-20;

}

if(r==2){

newX=newX+20;

}

}

}

}

}

}

y+=20;

};

if(e==39&&make==-1){

newX=newX+20;

}

if(e==37&&make==-1){

newX=newX-20;

}

}

7、按鈕操作

$(document).keydown(function(e){ //電腦鍵盤的

if(e.keyCode==39){ //右

crash(count,e.keyCode);//判斷是否可以加到右邊

}else if(e.keyCode==37){ //左

//判斷是否可以加到左邊

crash(count,e.keyCode);

}else if(e.keyCode==40){ //下

var i=count%10;

count=count-i;

fat=10;

}else if(e.keyCode==38){ //上

shape++;

if(shape>3){

shape=0;

}

crash(count,e.keyCode); //防止變形溢出

}else if(e.keyCode==32){

var i=count%20;

count=count-i;

for (var t=0;t<400;t++) {

count=count+10;

var arr=constitute();

var e=bottom(arr);

if(e==1){

break;

}

}

}

});

手機端的按鈕

function under(){

var i=count%10;

count=count-i;

fat=10;

setTimeout(function(){

fat=1;

},100)

}

document.οnkeyup=function(){

fat=1;

}

function tops(){

shape++;

if(shape>3){

shape=0;

}

crash(count,38); //防止變形溢出

}

function lefts(){

//判斷是否可以加到左邊

crash(count,37);

}

function rights(){

crash(count,39);//判斷是否可以加到右邊

}

8、定義繪制預知框的方法，如上面繪制的方法一樣，只是對應的canvas不同

//預知框里面的繪制

function xygs(){

var y=0; //記錄組成形狀的位置--相加

for (var i=0;i

var x=0;

for (var j=0;j

x+=20;

if(data[xyg][shape][i][j]==1){

ctx2.strokeStyle = "#000";

ctx2.strokeRect(x+30,y+50,20,20);

ctx2.fillStyle="#000000"; //定義顏色

ctx2.fillRect(x+30,y+50,19,19); //畫圖

}

}

y+=20;

};

}

9、開始運行的方法

function dy(){

ctx.clearRect(0, 0, c.width,c.height); //清除畫布

constitute(); //調用組成畫布的方法

count=count+fat; // 下落的速度

ground(finallys); //調用已經在底部的方塊的方法

ctx.font="20px 微軟雅黑";

ctx.fillText("得分："+dfen+"",20,30);

requestAnimationFrame(dy); //調用循環運行

}

requestAnimationFrame(dy); //開始運行每一幀

if(finallys.length==0){ //獲取第一個預知框

xyg=Math.floor(Math.random()*7);//隨機獲取

xygs();//調用預知框的渲染

}

constitute()//開始繪制

總結

以上是生活随笔為你收集整理的俄罗斯小方块游戏html,通过h5的canvas手写一个俄罗斯方块小游戏的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。