テトリスの原則と具体的な手順の HTML5 JS 実装_html5 チュートリアルのスキル-H5 チュートリアル-php.cn

テトリスの原則と具体的な手順の HTML5 JS 実装_html5 チュートリアルのスキル

May 16, 2016 pm 03:48 PM

このゲームの実装の基本原則:

ゲーム領域は、限られたサイズの領域です。各長方形は 21×25 個あります。幅は 10 単位、高さは 6 単位です (キャンバスの絶対単位はピクセルではなく固定です)。

対応するデータと動作を含む RusBlock クラスを作成し、ゲーム領域にマークされた四角形を記録する 2 次元配列 aState[21][25] を作成します。

テトリスには 7 つのパーツがあり、各パーツが占める四角形の数と位置が異なるので、パーツクラスを作成し、7 つのパーツを格納する配列を作成します。パーツが占める四角形の数と位置。落下したパーツが最下位に到達すると、新しいパーツが生成され、そのパーツのマークされた四角形がゲーム領域の配列に割り当てられます。

ゲームループ機能で、落下部分、固定部分、次の落下部分を印刷します。

基礎知識:

HTML5 CSS JS
このゲームには 3 つのファイルが含まれています:

RusBlock.html: 要素の設定
RusBlock.css: スタイルの設定
RusBlock.js: スクリプトコントロール

ステップ 1: インターフェイスの設定とマテリアルの準備

RusBlock.html

コードをコピー

コードは次のとおりです。

<DOCTYPE html>
<head>
<title> /title>
<link rel=”stylesheet” type=”text/css” href=”RusBlock.css”>
<script type=”text/javascript”>
function ShareGame () {
var URL = “http://share.renren.com/share/buttonshare.do?link=” document.URL “&title=RusBlock”
window.showModalDialog([URL]); }
</script>
</head>
<body onkeyup=”loop” id=” Background-AudioPlayer ” preload=”auto”>
<source src=”audio/background.mp3″ type=”audio/mp3″/>
</audio><audio id=” GameOver-AudioPlayer” preload=”auto”>
</audio> =”Score-AudioPlayer” preload=”auto”>
<source src=”audio/score.mp3″ type=”audio/mp3″/>
</audio>< ;div id=”ゲームエリア”>
<div id=”ボタンエリア”>h1 id=”ゲーム名”>RusBlock
< ;button id=”Button-Game-Start” onclick=”GameStart()”>開始</button>
<button id=”Button-Game-End” onclick=”GameEnd()”>終了< ;/button>
<form id=”Form-Game-Level”>

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。