JavaScriptでゲームを作る方法。
JavaScriptはホームページを便利に、ある時は面白い仕組みを作ることができるものです。ホームページの表示はHTMLという言葉で作り上げることができ、動きをJavaScriptが担います。
JavaScriptにはフレームワークもありますが、基本の動かし方を知っておくと他の方法にも繋げて考えられると思います。
参考サイトです。
ゲームを作る時に大事なのはゲームはスタートした時点から何かしらの操作を受け付けて、自分の意図で動かし得点などを書獲得する、もしくはゲームは終わらないように操作していきます。
特に画面が動くというところが魅力的なところではないでしょうか？
それの仕組みをつくればどんなプログラム言語でもゲームを作ることができます。
まず画面に何かを表示させる必要があります。以下はホームページの表示するためのコードです。基本のHTMLに"<canvas>"でidを指定します。この場合は"myCanvas"がJavascriptに繋ぐ大事なキーワードとなります。JSBinを使って試しながらやっていきます。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Javascriptの練習</title>
</head>
<body>
<canvas id = "myCanvas"></canvas>
</body>
</html>Javascript
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 50, 50);実行結果は
四角が表示されました。表示の仕組みは"Canvas"というものを使っています。
次に、画面が動くというのはどんな状態かというと、ある物体の位置、場所がある一定の時間後違う場所に移っているというのが連続的になるとある物体が動いているように見えます。
今、表示している赤四角の位置(座標)はどうなっているかというと
ctx.fillRect(10, 10, 50, 50);
→ ctx.fillRect(x座標, y座標, 横の長さ, 縦の長さ);
Canvasの座標は表示画面の左上が"0"となるので、この場合は左端が起点となり左端(x座標)からの距離が"10"、上端(y座標)からの距離が"10"のところ表示されているということです。表示される四角の起点ですがこれも左上になります。
動かすためにはx座標とy座標を変化させれば良いので、x座標とy座標には今は実数が入っているのでこれを変数に変えてやれば良いことになります。
変数宣言して四角の座標を今定義した変数にします。
let x = 10
let y = 10
ctx.fillRect(x, y, 50, 50);変数をいろいろ変化させてみると、いろんなところで表示されることがわかります。変数全体は
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
let x = 10;
let y = 10;となります。
次に機能、役割がわかりやすいように関数にまとめていきます。最初は描画。画面に表示させるためのコードをまとめます。
function draw(){
ctx.fillStyle = 'red';
ctx.fillRect(x, y, 50, 50);
}これで全体は以下となります。
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
let x = 10;
let y = 10;
function draw(){
ctx.fillStyle = 'red';
ctx.fillRect(x, y, 50, 50);
}
draw()関数は関数定義してやったあと
draw()と書いてやれば実行されるようになります。
この場合四角が表示されるようになります。この時点でx,yの座標をいろいろ変えてやるといろんな場所に表示されます。draw()関数の完成です。
あとは連続して表示させるようにしたいので更新すると今作ったdraw()関数と数値が変わる、座標の変数を変化させるコードを入れたupdate()関数を作ります。
function update(){
draw()
x += 2
}先ほど作ってdraw()関数とx座標が更新されるたびに"2"ごと大きくなる
x += 2
ように設定してあります。
これを動かすために
update()と追記して実行しても何も起こりません。連続して動かす命令がないからです。
連続して動かす命令として今回は
setInterval() ・・・ 指定した時間ごとに関数を実行します。
を使います。
setInterval(update, 10);とするとupdate関数を10ミリ秒ごとに実行しなさいという命令になります。
実行するとなんとか動いていることがわかります。この場合だと連続して実行されるので、動く前の描画もそんまま残っているので、見た目は連続して描画されている状態です。
四角が移動しているように見せるには直前のもは一度綺麗にクリアすると新しい描画のみになるので物体が動いているということが見てわかるよになります。その画面のクリアの方法は
ctx.clearRect(0, 0, canvas.width, canvas.height);
これをupdate()に入れ込むと
function update(){
ctx.clearRect(0, 0, canvas.width, canvas.height);
draw()
x += 2
}となります。
これで四角が右方向へ自動的に動きます。
全体のコードです。
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
let x = 10;
let y = 10;
function draw(){
ctx.fillStyle = 'red';
ctx.fillRect(x, y, 50, 50);
}
function update(){
ctx.clearRect(0, 0, canvas.width, canvas.height);
draw()
x += 2
}
setInterval(update, 10);もう少し整理しましょう。
update()にdraw()関数を入れて実行しましたが、さらに機能的に関数を分けます。update()には更新が必要なもののみにして作った関数をまとめて実行する形にします。
function draw(){
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'red';
ctx.fillRect(x, y, 50, 50);
}
function update(){
x += 2
}
function loop(){
draw()
update()
}
setInterval(loop, 10);こんな形になります。機能で明確に分けることができました。あと修正できることとしては"requestAnimationFrame()"を"setInterval()"の代わりに使うことです。
早速使ったコードですが、最後のloop()関数と次のsetIntervalを変更します。
function loop(){
draw()
update()
requestAnimationFrame(loop);
}
requestAnimationFrame(loop);この記事が気に入ったらサポートをしてみませんか？