見出し画像

やっぱりJavaScript! - やっぱりゲーム！1

donguri

JavaScriptでゲームを作る基本をまとめていきます。2Dグラフィックが使えるようになる"canvas"APIを使って簡単に動くものを作ってみます。
では参考サイト。ボールを動かすコードをReplitを使って確認しながらやっていきます。

基本のHTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>test</title>
</head>
<body>
<canvas id="canvas" width="480" height="320"　 style="background: #eee;" >
</body>
</html>

追加分は

<canvas id="canvas" width="480" height="320"　 style="background: #eee;" >

表示部分はwidth="480" height="320"として、色もCSSで
( style　="background: #eee;")でつけます。

この画面上に青丸を作ります。

var x = canvas.width/2;
var y = canvas.height-30;

ctx.beginPath();
ctx.arc(x, y, 10, 0, Math.PI*2);
ctx.fillStyle = "#0095DD";
ctx.fill();
ctx.closePath();

図形を表示するには表示したい座標の指定などが必要です。

ctx.arc(x, y, 10, 0, Math.PI*2);

ここでは青丸の図形を表示させていますが座標については上記、x,yで決めています。これは変数で初期値は

var x = canvas.width/2;
var y = canvas.height-30;

表示部分の横方向、真ん中(canvas.width/2)の縦方向、下から30px( canvas.height-30)の位置に指定しています。

これを動かすために、まず動く量を決めます。

var dx = 2;
var dy = -2;

そして、これを

 x += dx;
 y += dy;

として青丸の図形の座標xとyにプラスすると座標が書き換えられてボールの位置も変化するということです。

これを連続(ループ)して実行すると動いて見えるということです。

この記事が気に入ったらサポートをしてみませんか？