この記事は「【マイスター・ギルド】本物のAdvent Calendar 2022」1日目の記事です。
ブラウザで動き、マウスクリックで遊ぶゲームを作ってみましょう。
15Game という、古典的なゲームです。
実物で遊んだ人も多いのではないでしょうか？
※１組だけコマを入れ換えて、相手に解かせる・・・というイタズラの経験は、ないですよね？
開発環境
- ブラウザは、お好みのもので。Chrome での動作を確認しています。
- Windows の方は「メモ帳」を使います。
- Mac の方は「TextEdit」がありますね？
- スマホの方、すみませんがテキストエディタのアプリをインストールしてください。私は Android ですが、ファイルマネージャ を愛用しています。
- もちろん、vi や emacs、VS Code など、使い慣れたエディタがある方は、それを使ってもらってかまいません。
- cat や tee で書いている方は、それで・・・
プログラム作成！
以下のソースを、そのままエディタで打ち込みます。
面倒くさい人は、コピペでＯＫ。
15Game.html
<!DOCTYPE html>
<html lang="ja">
<head>
<title>15 Game</title>
<style type="text/css">
td {font-size: 64; border: solid 1px black; text-align: center; width: 80px;}
</style>
<script type="text/javascript">
var sp = String.fromCharCode(160);
function f(x,y) {
var id = document.getElementById('v' + x + y);
if((y > 0) && (document.getElementById('v' + x + (y-1)).innerText < 1)) {
document.getElementById('v' + x + (y-1)).innerText = id.innerText;
id.innerText = sp;
} else if((y < 3) && (document.getElementById('v' + x + (y+1)).innerText < 1)) {
document.getElementById('v' + x + (y+1)).innerText = id.innerText;
id.innerText = sp;
} else if((x > 0) && (document.getElementById('v' + (x-1) + y).innerText < 1)) {
document.getElementById('v' + (x-1) + y).innerText = id.innerText;
id.innerText = sp;
} else if((x < 3) && (document.getElementById('v' + (x+1) + y).innerText < 1)) {
document.getElementById('v' + (x+1) + y).innerText = id.innerText;
id.innerText = sp;
}
}
</script>
</head>
<body>
<table>
<tr>
<td id="v00" onClick="f(0,0)"> 1</td>
<td id="v01" onClick="f(0,1)"> 5</td>
<td id="v02" onClick="f(0,2)"> 9</td>
<td id="v03" onClick="f(0,3)">13</td>
</tr>
<tr>
<td id="v10" onClick="f(1,0)"> 2</td>
<td id="v11" onClick="f(1,1)"> 6</td>
<td id="v12" onClick="f(1,2)">10</td>
<td id="v13" onClick="f(1,3)">14</td>
</tr>
<tr>
<td id="v20" onClick="f(2,0)"> 3</td>
<td id="v21" onClick="f(2,1)"> 7</td>
<td id="v22" onClick="f(2,2)">11</td>
<td id="v23" onClick="f(2,3)">15</td>
</tr>
<tr>
<td id="v30" onClick="f(3,0)"> 4</td>
<td id="v31" onClick="f(3,1)"> 8</td>
<td id="v32" onClick="f(3,2)">12</td>
<td id="v33" onClick="f(3,3)"> </td>
</tr>
</table>
</body>
</html>
普通に打ち込むときも、似た行が多いので、コピペして修正すれば、打鍵数は減らせます。
保存するときに、「メモ帳」でしたら「ファイルの種類」を「すべての種類(*.*)」にして、ファイル名を「15Game.html」にしてください。
※Windows の場合、「拡張子を表示する」設定にしておくと、便利です。
※「15Game.html.txt」になってしまったら、「名前の変更」で修正してください。
遊び方
- 15Game.html をダブルクリックすると、ブラウザでゲームが始まります。
- 空白のマスの隣のコマをクリックしてください。空白のマスと入れ替わります。
- 最初、縦に並んでいた数字を、横から並ぶようにしてください。
- キレイに並び替えると、完成です。
- 完成判定はしていませんので、自己満足で！
なぜ、こういうものを作ったか？
とあるところに出張授業で「プログラミング」を教えにいったのですが、セキュリティの関係でソフトをインストールできませんでした。
でも、メモ帳など、基本でインストールされているものは使えるでしょ？
プログラムってのは、変数があって、関数があって、制御構造があれば、それっぽく見えるので。
※繰り返しが見えない（マウスのイベント待ちループが、ブラウザ内部で実行されている）のが難点ですが。
アルゴリズム（Javascript 部分）＋データ構造（HTML の body 部分）＝プログラム
これが、私の持論なので・・・
※1976年発行の本（和訳は1979年発行）が元ネタです。