水野翔太が2021年08月26日に更新

【JavaScript】JavaScriptを用いたブラウザゲームの作成

プログラミング能力向上のために「JavaScript」の学習を前期中に行った。
目標を「ブラウザゲームを作成すること」と設定し、ドットインストールの講座を参考としながらコーディングを進め、最終的にブラウザ上で遊べる「ハノイの塔」を作成した。
参考：はじめてのJavaScript (全8回) - プログラミングならドットインストール

作成したブラウザゲームについて

今回、ハノイの塔をブラウザゲームとして作成した。
ハノイの塔のルール
- 3本の杭と、中央に穴の開いた大きさの異なる複数の円盤から構成される。
- 最初はすべての円盤が左端の杭に小さいものが上になるように順に積み重ねられている。
- 円盤を一回に一枚ずつどれかの杭に移動させることができるが、小さな円盤の上に大きな円盤を乗せることはできない。
- 参考：ハノイの塔 - Wikipedia
このブラウザゲームは「HTML」「CSS」「JavaScript」の3つで構成されている。
「HTML」「CSS」はブラウザ上に表示される「見た目」を成形する役割があり、今回作成したものでは、ハノイの塔のゲーム画面全体や円盤の表示などを行っている。
「JavaScript」は円盤をクリックした際にほかの杭へと移動するなどの内部での処理を行っている。

作成した「JavaScript」


function change(pop){
    let popUfo="ufo"+pop;
    let popUfoElement =  document.getElementsByClassName(popUfo);
    popUfoElement[0].className="ufo99";
    let ufoTmp =  document.getElementsByClassName("ufoTmp");
    ufoTmp[0].classList.add(popUfo);
};

function deletetmp(push,index){
    let pushUfo="ufo"+push;
    
    let axisName = document.getElementsByClassName("axis");
    let childs=axisName[index].childNodes;
    console.log(childs);
    console.log(childs[1].className);
    
    let lastClass=null;
    childs.forEach(child => {
        if(child.className=="ufo99"){
            lastClass=child;
        }
    });

    lastClass.className=pushUfo;
    
    let ufoTmp =  document.getElementsByClassName("ufoTmp");
    ufoTmp[0].classList.remove(pushUfo);
};


function popush(index,input){
    if (!(tmp.length)){
        if(hanoi[index].slice(-1) != 99){
            //if(input=="pop")
            {
                tmp.push(hanoi[index].pop());
		change(tmp.slice(-1));
            }     
        }
    }else{
        if(hanoi[index].slice(-1) > tmp[0]){
            //if(input=="push")
            {
                hanoi[index].push(tmp.pop());
		deletetmp(hanoi[index].slice(-1),index);
            }
        }
    }
    console.log(end);
    console.log(hanoi[2]);
    if(end==hanoi[2].length){
    
        window.setTimeout(dispMsg, 250);
        function dispMsg(){
            alert('end');
        }
    }

};


function createGame(mode){
    let gameScreen=0;
    let createArray=[99];
    if(mode==0){
        gameScreen=5;
        createArray=[99,2,1,0];
    }else{
        gameScreen=7;
        createArray=[99,4,3,2,1,0];
    }
    let axisName = document.getElementsByClassName("axis");

    console.log(axisName);
    for (let axis = 0; axis < 3; axis++){
        for (let i =0 ; i < gameScreen; i++){
            let newChild = document.createElement("div")
            newChild.className="ufo99";
            axisName[axis].insertBefore(newChild,axisName[axis].firstchild);
        }
    }

    let ufo = gameScreen-2;
    let child=axisName[0].childNodes;
    for (let i =0 ; i < ufo; i++){
        child[child.length-ufo+i].className="ufo"+i;
    }
    let ufoTmp = axisName[1].childNodes[0];
    ufoTmp.className="ufoTmp";
    
    let buttons=document.querySelectorAll('#button');
    for(let i =0 ; i < buttons.length; i++){
        buttons[i].remove();
    }
    return createArray;
};

let tmp=[];
let end=99;
let hanoiArray0=[99];
let hanoiArray1=[99];
let hanoiArray2=[99];

let hanoi=[hanoiArray0,hanoiArray1,hanoiArray2];

const mode0 = () => {
    let mode=0;
    hanoi[0]=createGame(mode);
end=hanoi[0].length;
}
const mode1 = () => {
    let mode=1;
    hanoi[0]=createGame(mode);
end=hanoi[0].length;
}

const axis0 = () => {
    let index=0;
    popush(index);
}

const axis1 = () => {
    let index=1;
    popush(index);
}

const axis2 = () => {
    let index=2;
    popush(index);
}

console.log(hanoiArray0);

ハノイの塔の円盤の状態を常に配列によって管理している。
ブラウザ上でクリックがあった際には配列内の対応する数字を動かすことで、円盤の状態を配列上で表現している。
便利な関数を紹介
- 「classList.add()」「classList.remove()」
  - HTMLでは、要素に対してIDを複数付与することはできないが、classを複数追加することはできる。
  - 今回のゲームでは、classの変更を利用し、円盤の見た目上の移動をCSSに表現させた。
- 「insertBefore()」
  - ある要素に対して、その子要素となる要素を挿入する関数である。
- 「forEach()」
  - Pythonの「for 変数 in 配列」と同じ処理が行える関数である。
  - 配列の操作を簡潔に表現するために今回は使用した。

実際に作成したゲームのページ

操作について
- 1.難易度を選択する。
- 2.移動させたい円盤がある枠内をクリックして画面中央上に円盤を浮かせる。
- 3.円盤を移動させたい枠内をクリックして円盤を移動させる。
- ※詳細なルールはWikipediaを参照(ハノイの塔 - Wikipedia)
ゲームリンクはこちら(水野翔太.「【ハノイの塔】を作ってみました。」)

【JavaScript】JavaScriptを用いたブラウザゲームの作成

作成したブラウザゲームについて

作成した「JavaScript」

便利な関数を紹介

実際に作成したゲームのページ