[ブラウザゲームの作り方] Number-Place(数独)#2「Javascriptと構造化」

2023年5月21日

ゲーム プログラミング

eyecatch 前回作ったtableのマス目を、javascriptで構築してみたいと思います。

[更新] index.html

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> <title>NumberPlace</title> <link type='text/css' rel='stylesheet' href='style.css' /> <script type='module' src='main.js'></script> </head> <body> <h1>NumberPlace</h1> <div id='NumberPlace'></div> </body> </html>

[新規] main.js

import { View } from './js/view.js' export const Main = { stage_id : 'NumberPlace', } function init(){ Main.view = new View() } switch(document.readyState){ case 'complete': case 'interactive': init() break default: window.addEventListener('DOMContetLoaded' , init) break }

[新規] js/view.js

import { Main } from '../main.js' export class View{ constructor(){ if(!this.target){return} this.set_stage() } get target(){ return document.getElementById(Main.stage_id) } set_stage(){ const table = document.createElement('table') this.target.appendChild(table) this.set_row(table) } set_row(parent){ for(let i=0; i<9; i++){ const row = document.createElement('tr') parent.appendChild(row) this.set_cell(row) } } set_cell(parent){ for(let i=0; i<9; i++){ const cell = document.createElement('td') parent.appendChild(cell) } } }

解説とポイント

今回も表示すると、前回と同じ見た目になります。 でも、htmlファイルの中身が非常にスッキリとした事に気がつきましたか? tableの中身は9 x 9の単純な構造なので、9回ループするfor文を2重に書けばいいだけでした。 そして、今後機能追加をしていくと、javascriptファイルが膨れ上がる為、htmlで読み込むjavascriptファイルを、main.jsとしてindex.htmlのすぐ横に置いて、 機能を追加するたびに増えていくjavascriptファイルは、jsフォルダに入れ込むことにした。 今回は、table表示の処理をするview.jsを作ったという事なのである。

javascriptは、class構造が便利

もともと非同期関数を書くのが良いとされていましたが、javascriptでも、classが使えることになってから、他のプログラム言語と同じ様な間隔で書けることからソッチのほうが便利ということで、 今回はclass構造にしています。 ただし、デメリットがいくつかあって、超古いインターネットブラウザ(特にIE)では動かないという点と、 キャッシュがコントロールできなくなるので、都度スーパーリロードをしなければいけないという点。 古いブラウザに関しては、マイノリティは除外するという方針で、問題ないように思えますが、 キャッシュ問題は、現時点でいい方法がないので、プログラム更新の時にトラブルが起きる可能性もあるか〜と思ってしまった。

main.jsの説明

Mainというグローバル変数を作って、それをexportできるようにしている。 今後追加されていっくファイルなどから、このMain変数からいろいろな情報を取得できるようにしている。 そして、switch文で、判定している、document.readyStateは、ページの読み込みの状態で判別している。 interactiveは、DOM構造のHTMLが読み込まれた状態 completeは、画像ファイルなど、ページの全てのコンテンツ読み込みが完了している状態。 (ただし、動的に読み込まれるものは含まれない) それ以外は、loadingという値で、ページが読み込み途中の状態という事。 interactiveと、completeの状態は、そのまま普通に処理を実行しても問題ないが、 loadingの場合は、ページの読み込み後に処理をするために、addEventListenerでloadかDOMContetLoadedの処理を待って、スタートをすればいいという風に書かれている。 このやり方、インターネットブラウザツールだと、ホームページでもなんでも使える方法なので、是非覚えておきましょう。

view.jsの説明

class Viewでは、tableに9 x 9のマス目を作る2重ループ処理を、関数に分けて書いてあります。 それぞれ、trタグとtdタグを作っている程度の処理なので、読み解くのもカンタンだと思います。 classのgetterやsetterなどの使い方が分からない人は、事前にリファレンスサイトなどを見て学習しておくと、このソースの意味がわかりやすくなると思います。 getterの説明 https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/get setterの説明 https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/set

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。