その１へ戻る
その２ 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から直接起動する関数が５つあるので、このように関数を設定しておかないと関数が見つからなくてエラーが出てしまうんじゃ。
HTMLのどの部分から関数が呼ばれているのか、HTMLを眺めると解ると思うぞ。
|
ええ〜っと、
<body onload="Syokika()">
ってところで関数が呼ばれているなあ。
<input type="button">
ってところから４つ呼ばれてる。
|
すかじい
そうじゃ。
<body onload="Syokika()"> の部分は、HTMLをすべて読み込み終わったときに呼ばれる関数じゃ。
<input type="button"> の部分は、ボタンを押した時に呼ばれる関数じゃ。
詳しいことは、後で話そう。
ちなみに、このHTMLをHTMLファイルにしてブラウザで見ると、こんなふうになるぞ。
ひろちゃん皇帝
すかじい、ボタン押してもゲームが始まらないんだけど・・・。
すかじい
ばかもん！！！
先ほど、これは形だけで動かんと言ったじゃろうが！
人の話はちゃんと聞きなさい！！
その３ 初期化処理を組み込もうへ続く・・・
|