Warning: Undefined array key "steps" in /home/bubudoufu/bubudoufu.com/public_html/wp-content/plugins/amp/src/ReaderThemeSupportFeatures.php on line 501
JavaScriptで魔方陣(数字穴埋めパズル)を作ってみる - プログラミングを学習中の私が、アウトプットするためのサイト
サイトアイコン プログラミングを学習中の私が、アウトプットするためのサイト

JavaScriptで魔方陣(数字穴埋めパズル)を作ってみる

このページではソースコードの一部分を簡単な解説をしています。
作成したプログラムのコードはgithubにあります。
その他、作成したアプリやゲームの一覧はこちらにあります。

スポンサーリンク

概要

ドラッグ&ドロップAPIを使う練習の為に作成しました。並んでいる数字をドラッグ&ドロップで空いているマスに移動し、縦・横・斜め、どれを足しても同じ数にするパズルです。移動した数字を取り消すには×のパネルを取り消したい数字の上にドラッグ&ドロップして下さい。スタートボタンの横の数字を指定することで任意のマスの数で遊べます。大きい画面で遊びたい方はコチラからお願いします。Chromeブラウザとedgeブラウザで動作確認をしています。モバイル端末などでのタッチ操作では動作しません。

要素をドラッグできるようにする

要素をドラッグ出来る様にするにはdraggable属性をtrueに設定しondragstartのグローバルイベントハンドラを追加することで可能になります。今回作成したパズルでは、並んでいる数字の要素にdraggable属性とdragイベントのグローバルイベントハンドラを設定しています。

ドロップ先に渡すデータを設定する

dragイベントはイベントのデータ(テキスト、HTML、リンク、ファイルなど)を格納するdataTransferプロパティを持っています。今回作成したパズルでは、ドラッグされた要素のtextcontentプロパティをsetData()メソッドを使用してdataTransferプロパティへ格納しています。

ドロップできるようにする

ブラウザーは要素に何かがドロップされたとき、あらゆることが発生するのを防いでいます。この動作を変更して要素をドロップ可能にするには、ondragoverとondropイベントハンドラー属性を持たせなければいけません。今回作成したパズルでは、ドロップ先のtableタグのtd要素に二つのイベントハンドラー属性を持たせました。td要素にドロップをするとdataTransferプロパティへ格納されていたテキストをtd要素のtextcontentプロパティに設定します。

最後までお読みいただきありがとうございました。
作成したプログラムのコードはgithubにあります。
その他、作成したアプリやゲームの一覧はこちらにあります。

モバイルバージョンを終了