HTML5遊戲開發之俄羅斯方塊(續)

2021-06-11 08:26:30 字數 3315 閱讀 2034

最近又通過一些時間的學習,將俄羅斯方塊遊戲進行了一些改進,主要包括:按鈕的布局、動畫的改進。

改進後的遊戲鏈結為:俄羅斯方塊遊戲鏈結

改進後的**分別在三個檔案中:tetris.html、mydraw.js和mytetris.css。**如下:

遊戲難度:

容易一般困難

背景**:

遊戲得分:

1.改變遊戲難度時,最好先暫停遊戲

2.awsd、方向鍵和如上按鈕皆可控制

spacing=20;//每一格的間距,也即乙個小方塊的尺寸

width=200;

height=400;

//各種形狀的編號,0代表沒有形狀,後面幾種其實沒用上

noshape=0;

zshape=1;

sshape=2;

lineshape=3;

tshape=4;

squareshape=5;

lshape=6;

mirroredlshape=7

//各種形狀的顏色

colors=["wheat","olive","chocolate","firebrick","sienna","darkblue","green","red"];

//各種形狀的資料描述

shapes=[

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

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

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

[ [ 0, -1 ], [ 0, 0 ], [ 0, 1 ], [ 0, 2 ] ],

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

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

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

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

];var ctx=document.getelementbyid("mycanvas").getcontext("2d");

ctx.strokestyle="snow";

var frameintv=null;//當前動畫迴圈

var tintv=null;

var framerate=40;

var downrate=500;

var t;//俄羅斯方塊

var score=0;//遊戲得分

function drawbackground()

ctx.moveto(0,0);

for (var j=0;j<=400;)

ctx.stroke();

ctx.closepath();

}function init()

function drawgame()

function playgame(s)

else

if (t==null)

tintv=setinterval("t.tetrisdown()",downrate);

frameintv=setinterval(drawgame,framerate);

s.value="暫停"; }}

function selectdifficulty(v)

else if ("normal"==v)

else if ("hard"==v) }

function bgmusicprocess()

else if (document.getelementbyid("bgmusicbtn").value=="關閉") }

//將形狀自身的座標系轉換為 map 的座標系,row col 為當前形狀原點在 map 中的位置

function translatetomap(data,row,col,space);

temp.row=data[i][1]*space+row;

temp.col=data[i][0]*space+col;

copy.push(temp);

} return copy;}/*

俄羅斯方塊向右旋轉輔助函式,實現map中的座標右旋

原始座標為(x0,y0),右旋後坐標為(x0',y0')(其中x0'=y0,y0'=-x0)-----> (1)

原始座標在map中的座標為(x1,y1)(其中x1=x0+col,y1=y0+row)---------> (2)

右旋後坐標在map中座標為(x1',y1')(其中x1'=x0'+col,y1'=y0'+row)---> (3)

由上述方程組不難得出:x1'=y1-row+col,y1'=-x1+row+col

*/function fuzhurotate(data,row,col);

temp.row=-data[i].col+row+col;

temp.col= data[i].row-row+col;

copy.push(temp);

} return copy;}/*

* 說明:由 m 行 line 組成的格仔陣

*/function mymap(w,h)

return false;

}//形狀在向下移動過程中發生碰撞,則將形狀加入到 map 中

var shiftrow = 0;

//對於形狀的四個點:

for(var i=0;i<4;i++)

//****************************************

//形狀被加入到 map 中後,要進行逐行檢測,發現滿行則消除

var myrow=height-spacing;

while ((myrow>=0)&&(!this.isemptyline(myrow)))

else

}}mymap.prototype.shiftmap=function(row){

for (var myrow=row; (myrow>=0)&&(!this.isemptyline(myrow)); myrow-=spacing)

{ var belowrow = this.mylines[myrow];

var uprow = this.mylines[myrow-spacing];

if (uprow<0)

{ for(var col=0;col

俄羅斯方塊遊戲

大二上學期前兩周的課程設計寫 更多的是借鑑 了乙個500多行的俄羅斯方塊遊戲,畢竟也是花了兩天時間把被人的看懂,然後花了兩天多的時間敲出來,又花了兩天時間寫了4000多字的專案報告,所有有必要在部落格中寫下來以留作紀念。struct block blocks 7 i 口 l 反l z 反z t 用十...

C 俄羅斯方塊遊戲

俄羅斯方塊是一款非常經典的老遊戲,相比現在的網路遊戲和大型遊戲而言,俄羅斯方塊非常小。不要看似小,要實現俄羅斯方塊的全部功能也不容易。先說說涉及的知識點 繼承 不同的方塊繼承於方塊類 多型 每種方塊都可以旋轉 初始化,但是每種方塊的旋轉都不一樣,採用抽象方法定義 簡單工廠設計模式 由工廠隨機建立方塊...

Canvas 遊戲 俄羅斯方塊

我第三個動畫遊戲終於可以玩了,demo 由於 wikipedia 的素材很像磚塊,我 裡就把 tetromino 稱為了磚塊 brick 整個拼板稱為牆面 wall 分別對應了遊戲中玩家控制目標和地圖。變形首先觀察 j 形狀轉置 t 和旋轉 r 的圖形,零表示空心部位,非零實心部位 j 1,0,0 ...