こんな感じの簡単なシューティングゲームを作ってみました。
ソースはgithubに上げています。
javascriptの環境構築～ブラウザ上で公開するまでの手順をメモしておきます。
(セキュリティ的にどうか？という観点は調べ切れていません。特にブラウザ公開手順は自己責任でお願いします。)
なお、Windows10環境で作業しました。
環境構築
javascript(以下js)は、ファイルさえ作ってしまえばブラウザで読み込ませれば動きます。
そのため環境構築で考える部分はエディターになります。
Windowsの場合、選択肢は様々あるかと思います。
今回は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:はキャンバスの背景色、WIDTHやHEIGHTは大きさになります。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 'ＭＳ ゴシック'";
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 )+1Math.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が若干ややこしいので気を付けましょう。
私は数時間ハマりました。
おわりに
今回はテストとして非常に簡単なものを作りました。
次回から、少しずつ本格的なものを作っていきたいと思います。
次回作に、乞うご期待！！
コメント