はじめに
こんにちは。@tdtigerです。
この記事は、はじめてのアドベントカレンダー Advent Calender 2025 のシリーズ4、21日目の記事です。
突然ですが、スライドパズルってありますよね。3×3のマス目上で、パネルを動かしていって数字を順番に並べるやつです。
今回は、「あれ、周期表でもできるんじゃね？」 という考えが突如舞い降りたので、作ってみました。
完成品
GIFも載せてるんですけど、表示されないことがあるので一応画像も。
遊び方は単純。ひたすらパネルをスライドしていって、周期表の復元を目指します。
7×18=126マスの中にある、125個のパネルをスライドしていきます。
全て揃えられたら「やったね😄」って感じです。(ちなみに、友人からクリア報告のDMが届きましたが、クリアタイムは1時間3分19秒でした。)
技術スタック
今回はサクッと作って簡単に共有できることを重視しました。
-言語 : JavaScript
-ライブラリ : p5.js
-デプロイ : GitHub Pages
ここで、p5.jsとは、簡潔にいうと「Web上で視覚的な表現を手軽に実現できるようになるJavaScriptライブラリ」です。
こちらの詳細に関しては、良質な解説記事がインターネット上に多く存在していますので、本記事では割愛させていただきます。
実装ポイントなど
データ構造
周期表のデータは、クラスと2次元配列により管理しています。
class Element{
constructor(name, num, name_ja){
this.name = name; // 元素記号
this.num = num; // 原子番号
this.name_ja = name_ja; // 日本語名
}
}
const TABLE = [
[new Element("H", 1, "水素"), new Element("", , ""), ...],
[new Element("Li", 3, "リチウム"), new Element("Be", 4, "ベリリウム"), ...],
...
];
空白の扱い
流石に空白を区別したらクリアがプレイ体験が最悪すぎると思ったので、空白は区別しないようにしています。見た目で全く区別することができないので。
そうじゃなくてもだるいですが。
レスポンシブ対応
PCでもスマホでも遊べるように、ウィンドウサイズに合わせてパネルの大きさを計算して調整するようにしました。
ローカルストレージによるセーブ機能
クリアするまでずっとブラウザを開きっぱなし。。。というのも難しいので、localStorageを利用して、盤面の状態と経過時間をJSONで保存するようにしています。
function SaveGame(){
let currentPassed = millis() - startTime;
let saveData = {
question: question,
emptyRow: emptyRow,
emptyCol: emptyCol,
passed: currentPassed,
cleared: isCleared
};
localStorage.setItem('periodicPuzzleSave', JSON.stringify(saveData));
}
おわりに
作ってみて、やっぱりただのだるいだけのゲームでしたね。作る前から分かってはいましたが。こんなんでも友達からクリア報告がくるととても嬉しくなりましたね。
今回の制作を通して初めてp5.jsを使ってみましたが、描画とかループ周りが簡単に記述できるので結構いいなと思いました。また何か機会があったら簡単なブラウザゲームを作るのに使ってみたいですね。
もしお時間と心に余裕がある方は、クリアを目指してみては...?
プレイはこちらから(再掲)
ここまで読んでいただきありがとうございました。