javascriptでゲームを作ってみた

JavaScript
nullkara001_test

こんな感じの簡単なシューティングゲームを作ってみました。
ソースはgithubに上げています。

nullkara/javascript001_testshoot
Contribute to nullkara/javascript001_testshoot development by creating an account on GitHub.
ぬるから
ぬるから

javascriptの環境構築~ブラウザ上で公開するまでの手順をメモしておきます。
(セキュリティ的にどうか?という観点は調べ切れていません。特にブラウザ公開手順は自己責任でお願いします。)

なお、Windows10環境で作業しました。


環境構築

javascript(以下js)は、ファイルさえ作ってしまえばブラウザで読み込ませれば動きます。
そのため環境構築で考える部分はエディターになります。

Windowsの場合、選択肢は様々あるかと思います。

Visual Studio IDE、コード エディター、Azure DevOps、App Center - Visual Studio
Visual Studio dev tools & services make app development easy for any platform & language. Try our Mac & Windows code editor, IDE, or Azure DevOps for free.

今回はVisual Studio Codeを使用しました。
VSCodeとかって呼ばれるエディターですが、無償でかなり優秀です。
私は今回初めて使いましたが、説明書等も読まずにすらっと使えました。UIも非常にいいと思います。
おススメです。

htmlファイルに関して

今回、.htmlと.jsの二つのファイルを作成し、jsはhtmlから読み込むことで実行させました。(htmlに直接埋め込む方法もあるらしいですが、今回は扱いません)

HTMLタグ

<!DOCTYPE HTML>
<HTML>
ここに色々書く
</HTML>

htmlはタグで挟むことによって記載します。
まずhtmlタグで挟んで、そこに色々書きます。

HEADタグ

<HEAD>
	<TITLE>nullkara001_test</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<SCRIPT TYPE="text/javascript" SRC="main.js"></SCRIPT>
</HEAD>

タイトルの情報等を記載します。
<TITLE>は、そのページのタイトルで、ブラウザのタグなんかに出てくる名前に関係します。
<META HTTP….は、文章の文字がUTF-8であることを記載しています。
<SCRIPT TYPE=…は、読み込むjsファイルを記載しています。

BODYタグ

<BODY CLASS="eeffee" onLoad="ldstart()">
	<H1>TEST_GAME</H1>
	<CANVAS ID="canvas_e" STYLE="background-color: #ffffff;" WIDTH="400" HEIGHT="300"></CANVAS><BR>
	<BUTTON ID="start" CLASS="std" onClick="clstart()">ゲーム開始</BUTTON>
	<BUTTON ID="rstart" CLASS="std" onClick="rclstart()">もう一回!</BUTTON><br>
</BODY>

jsが読み込まれたとき、jsにあるonLoad=””記載の関数が実行されます。
<H1>タグは見出しタグで、大きめに文字が表示されます。
CANVASのIDはキャンバスの名前になります。jsのコードで使うので、ユニークな名前を付けて下さい。
STYLE=”background-color:はキャンバスの背景色、WIDTHHEIGHTは大きさになります。jsの描画物はキャンパスに書くことになるので、キャンパスの大きさがゲーム画面の大きさとも言えます。
<br>は改行です。htmlの最もつらいところは、html内で改行してもブラウザ上では改行されないことです。改行させるには、この<br>タグを入れなければいけません。
<BUTTON ID….でボタンの設置です。

ぬるから
ぬるから

<br>は忘れがちなので気を付けましょう
(というか私がよく忘れます。)


JavaScriptファイルに関して

実装中に調べたことをメモしておきます。

関数

function AAAA(){}

上記の形式で記載します。
onClickの関数とonLoadの関数はどこかに作っておいてください。

引数や返り値がある場合は以下のように記載します。

//四角×四角の衝突判定
function atari(x1,y1,w1,h1,x2,y2,w2,h2){
    //中点に補正
    x1+=w1/2;
    y1+=h1/2;
    x2+=w2/2;
    y2+=h2/2;
    //衝突しているなら1を返す
    if(Math.abs(x1-x2) < w1/2 + w2/2 &&
        Math.abs(y1-y2) < h1/2 + h2/2 ){
        return 1;
      }
      return 0;
}

引数や返り値に型宣言はいらないっぽいです。
(というより、jsは全体的に型がなくても動きますよね….。C++ずっと使ってたので違和感がすごいです。)

配列宣言

msx=[-1,-1,-1]
ent=[]
ent.push(-1);

msx=[-1,-1,-1]で-1要素が3つの配列ができます。
また、entのように後からpushで要素を増やすこともできます。(配列は可変長)

array=new(5)とかで要素数5の配列を作れる(そうです)。

for文

for(var i=0;i<enmax;i++){}

C++とほぼ変わらないですね。
配列全てに対してforを行うならforEachが便利そうです。

キャンバス情報取得

	let canvas = document.getElementById('canvas_e');   
        let ctx    = canvas.getContext('2d'); 

onLoadの関数で行うといいと思います。(実行時に一回だけ行いたい)
htmlで定義したキャンバスの情報を拾います。この情報をグローバル変数に保存し、描画処理等の際に使います。

canvas_eの部分はCANVAS IDで定義した名前に応じて変えてください。

ボタンの表示・非表示

document.getElementById('rstart').style.display = "none";
document.getElementById('rstart').style.display = "block";

noneで非表示、blockで表示です。
初期状態はblockになっているため、初期状態で表示させたくないものはonLoadの関数でnoneにしましょう。

描画関係の処理

mp.ctx.clearRect(0, 0, mp.canvas.width, mp.canvas.height);
mp.ctx.fillStyle = "rgb(255, 0, 255)";
mp.ctx.font = "15px 'MS ゴシック'";
mp.ctx.fillRect(xx,yy,sizesize,sizesize);
mp.ctx.fillText("level:"+String(lev), 10, 60);

キャンバス情報取得で取得したキャンバスに対して描画します。
clearRectで初期化。fillStyleで、その後の描画物の色を変更。fontでfillTextなどのフォント変更。fillRectで塗りつぶした四角を描画。fillTextで文字列の描画。
たくさん種類があるので、必要に応じてググるといい感じだと思います。

キーボード処理

document.onkeydown = function(e) {}
document.onkeyup = function(e) {}

キーを押したときにonkeydownが離したときにonkeyupが呼ばれます。
あるキーの押下フラグを、onkeydownでtrueにしてonkeyupでfalseにすると、同時押しや押しっぱなしが検知できるようになります。(trueの間はキーが押されている。といえます。)

ランダム

Math.floor( Math.random() * 5 )+1

Math.random()で0~0.9999….のランダム数を出力します。
それに5を掛けてMath.floorで整数にキャストすることで、0~4のランダム数が出力されます。
上記コードの場合、+1しているため1~5のランダム数になります。

メインループ

function main(){
    //ゲームオーバーでない限り続ける
    if(gameover==0){
        cnt++;
        mymove();
        draw();
        myshot();
        enmove();
        colmyem();
        //これを入れるとループされる
        requestAnimationFrame( main );
    }
    else{
    }
}

onClickの関数でmain()を呼ぶと、requestAnimationFrameによってmain()が一定周期で呼び出だされるようになります。

サーバーにアップロード

xserverの場合、public_htmlフォルダの下に置けばいいです。
public_htmlの下のaaa/bbbフォルダにmain.htmlとmain.jsを置いた場合、URLは

http://ドメイン/aaa/bbb/main.html

となります。
htmlとjsでフォルダを分ける場合、htmlのパスを適切なものに変えましょう。

ぬるから
ぬるから

ファイルの置き場所とURLが若干ややこしいので気を付けましょう。
私は数時間ハマりました。


おわりに

今回はテストとして非常に簡単なものを作りました。
次回から、少しずつ本格的なものを作っていきたいと思います。

ぬるから
ぬるから

次回作に、乞うご期待!!

コメント

タイトルとURLをコピーしました