1日目：画面だけ作る

さて、1日目です。TEN -10-を移植していきますが、最初から完璧を目指さないことが重要です。日曜しかプログラムを組まないわけなので（いわゆるサンデープログラマーというヤツです）、地道に作っていくことが重要です。特に、仕事で移植するわけではありませんから、気が向いたら作る、気乗りしなければやらないというので問題ありません。あくまでも、趣味の範疇なのですから。
ゲームを移植する際に、自分のやる気があがるのは（モチベーションが上がるのは）、ゲームの画面を作る時です。1980年代ではゲームのタイトル画面だけ作って満足みたいなユーザーも結構いました。まあ、そんなノリです。
でも、同じ画面を作るのはグラフィックも用意しないといけないし面倒なのでHTMLで簡単にできる範囲にします。一番簡単なのはinput要素でボタンにしてしまうことです。まあ、クリックできるボタンを並べるわけです。
オリジナルのTEN-10では横4×縦6に数値が並んでいます。この4×6の部分はオリジナルに忠実にしておきます。あとはHTMLでinput要素を並べればできあがりです。こういう部分は気にせずコピペ（コピー＆ペースト）でやります。プログラマなら、ちゃんとプログラムで生成すべし、と言われそうですが、とりあえず画面がでれば万事OK。
ということで以下が実際のソース。"サンプルを実行する"のリンクをクリックして実際の画面を見ることもできます。"サンプルをダウンロード"のリンクをクリックすればZIP圧縮されたHTMLファイルをダウンロードできます。



さすがにグラフィックがないと、かなり淋しい画面。画面見ただけでやる気をなくしそうな感じが...。でも、ここは将来豪華なグラフィックにするという妄想のもとに1日目は終わりにします。（烈車戦隊トッキュウジャーでも妄想というかイマジネーションが大事だと言ってるし。

[サンプルを実行する]

[サンプルをダウンロード]

HTMLファイルの内容

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TEN</title>
</head>
<body>
<h1>TEN</h1>
<form>
<!-- 1段目 -->
<input type="button" value="6">
<input type="button" value="7">
<input type="button" value="1">
<input type="button" value="6">
<br>
<!-- 2段目 -->
<input type="button" value="9">
<input type="button" value="3">
<input type="button" value="8">
<input type="button" value="2">
<br>
<!-- 3段目 -->
<input type="button" value="5">
<input type="button" value="7">
<input type="button" value="2">
<input type="button" value="6">
<br>
<!-- 4段目 -->
<input type="button" value="4">
<input type="button" value="4">
<input type="button" value="6">
<input type="button" value="8">
<br>
<!-- 5段目 -->
<input type="button" value="3">
<input type="button" value="4">
<input type="button" value="7">
<input type="button" value="2">
<br>
<!-- 6段目 -->
<input type="button" value="4">
<input type="button" value="5">
<input type="button" value="3">
<input type="button" value="8">
</form>
</body>
</html>