ゲームを作ろ!-MDN web docs(ブロック崩し)
サイトです。
早速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()
<script>の全体です。
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();;
これを実行をすれば丸いボールの表示はできました。次からは、これを動かしたいと思います。
この記事が気に入ったらサポートをしてみませんか?