ブラウザ・ゲームを作ってみよう

この記事は「[【マイスター・ギルド】本物のAdvent Calendar 2022](https://adventar.org/calendars/7794)」1日目の記事です。

# ブラウザで動き、マウスクリックで遊ぶゲームを作ってみましょう。

[15Game](https://ja.wikipedia.org/wiki/15%E3%83%91%E3%82%BA%E3%83%AB) という、古典的なゲームです。
実物で遊んだ人も多いのではないでしょうか？
※１組だけコマを入れ換えて、相手に解かせる・・・というイタズラの経験は、ないですよね？
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784680/cfad1279-9072-50aa-6f04-24bc6beb6687.png)

## 開発環境
- ブラウザは、お好みのもので。Chrome での動作を確認しています。
- Windows の方は「メモ帳」を使います。
- Mac の方は「TextEdit」がありますね？
- スマホの方、すみませんがテキストエディタのアプリをインストールしてください。私は Android ですが、[ファイルマネージャ](https://play.google.com/store/apps/details?id=com.alphainventor.filemanager) を愛用しています。
- もちろん、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)">&nbsp;</td>
   </tr>
  </table>
 </body>
</html>
```
普通に打ち込むときも、似た行が多いので、コピペして修正すれば、打鍵数は減らせます。

保存するときに、「メモ帳」でしたら「ファイルの種類」を「すべての種類(\*.\*)」にして、ファイル名を「15Game.html」にしてください。
※Windows の場合、「拡張子を表示する」設定にしておくと、便利です。
※「15Game.html.txt」になってしまったら、「名前の変更」で修正してください。

## 遊び方
- 15Game.html をダブルクリックすると、ブラウザでゲームが始まります。
- 空白のマスの隣のコマをクリックしてください。空白のマスと入れ替わります。
- 最初、縦に並んでいた数字を、横から並ぶようにしてください。
- キレイに並び替えると、完成です。
- 完成判定はしていませんので、自己満足で！

# なぜ、こういうものを作ったか？
とあるところに出張授業で「プログラミング」を教えにいったのですが、セキュリティの関係でソフトをインストールできませんでした。
でも、メモ帳など、基本でインストールされているものは使えるでしょ？

プログラムってのは、変数があって、関数があって、制御構造があれば、それっぽく見えるので。
※繰り返しが見えない（マウスのイベント待ちループが、ブラウザ内部で実行されている）のが難点ですが。

## アルゴリズム（Javascript 部分）＋データ構造（HTML の body 部分）＝プログラム
これが、私の持論なので・・・
※1976年発行の本（和訳は1979年発行）が元ネタです。