ゲームを作ろ！-MDN web docs(ブロック崩し)

2020年4月29日 20:57

サイトです。

早速MDN ブロックくずしを作っていきます。HTMLの基本コードです。

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
      Hello! 
</body>
</html>

これでブラウザで表示させると

Hello!

と表示されます。まず第一歩です。

ゲームは全て<canvas>要素に描画されるため、HTML文書構造は極めて簡潔です。好きなテキストエディタを使って新しいHTML文書を作成し、適当な場所にindex.htmlとして保存してください。そして、そのHTML文書に次のコードを追加します。

基本のコードにゲームを描画させる<canvas>と<script>を追記します。

<canvas id="myCanvas" width="480" height="320"></canvas>
<script>
	// JavaScriptのコードがここに入ります
</script>

サイトの表示を整えます。タイトルとスタイルを指定します。

<title>Gamedev Canvas Workshop</title>

<style>
  * { padding: 0; margin: 0; }
   canvas { background: #eee; display: block; margin: 0 auto; }
</style>

ここまでのコードは

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Gamedev Canvas Workshop</title>
   <style>
   	* { padding: 0; margin: 0; }
   	canvas { background: #eee; display: block; margin: 0 auto; }
   </style>
</head>
<body>
   
   <canvas id="myCanvas" width="480" height="320"></canvas>
<script>
	// JavaScriptのコードがここに入ります
</script>
</body>
</html>

これで、

こんな感じで土台が出来上がりました。

次にいよいよ<script>タグの中に命令(Javascript)を書いて図形などを表示させていきます。

まず、表示させる場所を指定します。

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

表示させたいcanvasの幅と高さから引用して指定します。

次に表示する命令を関数で作ります。

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

そして今作った関数を実行する命令。

draw()

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

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

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

}

draw()；；

これを実行をすれば丸いボールの表示はできました。次からは、これを動かしたいと思います。

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