言語村 トップページ






皇帝流
テトリスの作り方
トップページ




皇帝流テトリス





皇帝流テトリスの作り方

 その1へ戻る


その2 HTMLで枠組みを作ってみよう



すかじい うおっほん。
では、まずゲームを表示するためのHTML部分を見てみようかのう。
特に難しいことは行っておらんので、すぐに理解できると思うぞ。

<html>
<head>
<title>テトリスもどき</title>
<script language="JavaScript">
<!--

function Syokika() {
}
function Moveturn() {
}
function Moveleft() {
}
function Moveright() {
}
function Movedown() {
}

// -->
</script>
</head>
<body onload="Syokika()">
<form name="game">
<center>
<table>
<tr><td>
</td><td>
	<input type="text" name="SCORE" size="20">
</td><tr>
<tr><td valign="top">
	<textarea name="tugi" rows="4" cols="10"></textarea><br>
	Next<br><br>
	<input type="text" name="LEVEL" size="5"><br>
	Level
</td><td>
	<textarea name="gamen" rows="20" cols="20"></textarea>
	<table>
	<tr align="center">
	<td colspan="2">
		<input type="button" name="TURN" value="TURN" onclick="Moveturn()">
	</td>
	</tr>
	<tr align="center">
	<td>
		<input type="button" name="LEFT" value=" LEFT" onclick="Moveleft()">
	</td>
	<td>
		<input type="button" name="RIGHT" value="RIGHT" onclick="Moveright()">
	</td>
	</tr>
	<tr align="center">
	<td colspan="2">
		<input type="button" name="DOWN" value="DOWN" onclick="Movedown()">
	</td>
	</tr>
	</table>
</td></tr>
</table>
</center>
</form>
</body>
</html>

こんな感じじゃ。
<script language="JavaScript">
<!--

// -->
</script>
の部分には JavaScript が入るが、今はまだ入っておらん。
だから、これはまだ形だけで動かんのじゃ。

一つ注意する点が、FORMタグじゃ。
普通フォームには名前を付けないと思うが、JavaScriptでフォームを操作する時は、どこのフォームかを指定する必要があるので、FORMタグに「game」という名前を付けておる。

りな姫 JavaScript部分に function ってのが並んでいるんだけど、これは何?

すかじい
これは、JavaScriptの関数じゃ。今のところ中身は空っぽになっておる。
後々、この中にJavaScriptの命令を書き込んでいくことになる。
今回のプログラムには、HTMLから直接起動する関数が5つあるので、このように関数を設定しておかないと関数が見つからなくてエラーが出てしまうんじゃ。
HTMLのどの部分から関数が呼ばれているのか、HTMLを眺めると解ると思うぞ。

ひろちゃん皇帝 ええ〜っと、
<body onload="Syokika()">
ってところで関数が呼ばれているなあ。
<input type="button">
ってところから4つ呼ばれてる。

すかじい
そうじゃ。
<body onload="Syokika()"> の部分は、HTMLをすべて読み込み終わったときに呼ばれる関数じゃ。
<input type="button"> の部分は、ボタンを押した時に呼ばれる関数じゃ。
詳しいことは、後で話そう。

ちなみに、このHTMLをHTMLファイルにしてブラウザで見ると、こんなふうになるぞ。

Next


Level

ひろちゃん皇帝
すかじい、ボタン押してもゲームが始まらないんだけど・・・。

すかじい
ばかもん!!!
先ほど、これは形だけで動かんと言ったじゃろうが!
人の話はちゃんと聞きなさい!!



その3 初期化処理を組み込もうへ続く・・・