コメント：Tetrisには7つの部分があり、各部品は長方形の異なる数と位置を占有するため、コンポーネントクラスを作成してから、7つの部品を保存する配列を作成します。各パーツには、コンポーネントが占める長方形の数と位置を保存する配列が含まれています。以下は詳細な紹介です
このゲームの実装の基本原則：ゲーム領域は限られたサイズの領域です。このゲームのゲーム領域には21×25の長方形があり、各長方形の幅は10単位で、高さは6単位です（キャンバスの絶対ユニットは固定されています、非ピクセル）。
Rusblockクラスを作成して、対応するデータと動作を含め、2次元配列ASTATE [21] [25]を作成して、ゲームエリアにマークされた長方形を記録します。
Tetrisには7つの部分があり、各部品は長方形の異なる数と位置を占有するため、コンポーネントクラスを作成してから、7つの部品を保存する配列を作成します。各パーツには、コンポーネントが占める長方形の数と位置を保存する配列が含まれています。落下部品が終了すると、新しい部分が生成され、パーツのマークされた長方形がゲーム領域の配列に割り当てられます。
ゲームループ機能では、落下部品が印刷され、すでに固定された部品が印刷され、落下部品が印刷されます。
基本知識：
HTML5 CSS JS
このゲームには3つのファイルが含まれています。
rusblock.html：要素の設定
rusblock.css：セットスタイル
rusblock.js：スクリプトコントロール
ステップ1：インターフェイス設定と材料の準備
rusblock.html
<！doctype html>
<html>
<head>
<title> rusblock </title>
<link rel = styleSheet type = text/css href = rusblock.css>
<script type = text/javascript>
function sharegame（）{
var url =？link = + document.url +＆title = rusblock;
window.showmodaldialog（[url]）;
}
</script>
</head>
<body onkeyup = action（event）>
<audio loop = loop id = background-audioplayer preload = auto>
<source src = audio/background.mp3″ type = audio/mp3″/>
</audio>
<audio id = gameover-audioplayer preload = auto>
<source src = audio/gameover.ogg type = audio/ogg>
</audio>
<audio id = score-audioplayer preload = auto>
<source src = audio/score.mp3″ type = audio/mp3″/>
</audio>
<div id = game-area>
<div id = button-area>
<h1 id = game-name> rusblock </h1>
<ボタンID = button-game-start onclick = gamestart（）> start </button>
<ボタンID = button-game-end onclick = gameend（）> end </button>
<form id = form-game-level>
<選択id = select-game-level>
<オプション値= 500″ selected = selected> easy </option>
<オプション値= 300″>通常</option>
<オプション値= 200″> hard </option>
</select>
</form>
<button onclick = sharegame（）id = button-game-share> share to renren </button>
</div>
<canvas id = game-canvas> </canvas>
<div id = score-area>
<h2>スコア</h2>
<p id = game-score> 0 </p>
</div>
</div>
<script type = text/javascript src = rusblock.js> </script>
</body>
</html>
ステップ2：スタイル
rosblock.css
体 {
背景色：灰色;
テキストアライグ：センター;
フォントファミリー： 'Times New Roman';
背景画像：url（）;
}
H1＃game-name {
背景色：白。
幅：100％;
font-size：x-large;
}
H2、＃ゲームスコア{
font-size：x-large;
背景色：白。
}
＃game-area {
位置：絶対;
左：10％;
幅：80％;
高さ：99％;
}
Canvas＃Game-Canvas {
背景色：白。
幅：80％;
高さ：98％;
フロート：左;
}
＃button-area、＃score-area {
幅：10％;
高さ：100％;
フロート：左;
}
＃button-game-start、＃button-game-end、＃button-game-share、＃select-game-level {
幅：100％;
高さ：10％;
フォントサイズ：大きい;
境界線幅：3px;
背景色：白。
}
＃select-game-level {
幅：100％;
高さ：100％;
font-size：x-large;
ボーダーカラー：灰色;
}
ステップ3：JSコードを書きます
rusblock.js
Rusblockクラスに含まれるメンバー解析：
データ：
ncurrentcomid：現在のドロップコンポーネントのID
Astate [21] [25]：ゲームエリア状態を保存する配列
CurrentCom：現在下落している部分
Nextcom：次の部分
PTINDEX：ゲーム領域に比べて現在下落している部分のインデックス
関数：
newNextCom（）：新しい次のコンポーネントを生成します
nextcomtocurrentcom（）：次のコンポーネントから現在のコンポーネントにデータを転送します
Candown（）：現在のコンポーネントがまだ落ちるかどうかを判断します
Cannew（）：新しいコンポーネントを生成できるかどうかを判断します
左（）：現在のコンポーネントは左に移動します
右（）：現在のコンポーネントは右に移動します
ROTATE（）：現在のコンポーネントは時計回りに回転します
acceleratet（）：現在のコンポーネントは下方に加速します
disaber（）：行を排除します
CheckFail（）：ゲームが失敗するかどうかを判断します
INVALIDATERECT（）：現在のコンポーネントの領域を更新します
完了：デモをダウンロードします