JavaScript 簡単ゲーム作成 ~~canvasを使った描画~~

JavaScript プログラミグ言語のサンプルプログラム

覚え書き程度ですが・・・

台から玉を発射して動く的に当てる

簡単ゲームを作っていきます。

HTMLを準備しよう!!

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”utf-8″ />
<script type=”text/javascript” src=”./sample.js”></script>
<title>シューティング</title>
</head>
<!– 最初の処理を呼び出す –>
<body onload=”init();”>
<div style=”text-align:center”>
<h1>シューティングゲーム</h1>
<p id=”info”>時間   得点  </p>
<!– キャンバスの設置 –>
<canvas id=”canvas” style=”background-color:#eee;” width=”640″ height=”480″></canvas>
</div>
</body>
</html>

canvas エリアを定義した、HTML

完成するとこんな感じです。

※この時点で、あれ?文字化けしたぞ!!

みたいな感じになるかも知れません。

そうなった場合、文字コードの箇所

charset=”utf-8″ ←ここです。

保存したテキストファイルの文字コードを確認してみて下さい。

TeraPadなどのテキストエディタで、文字コードは確認できます。

HTMLが準備できたら

作っていきます。

このまま、このHTMLファイルを使って記述してもいいし

上記例だと、sample.js といった別のファイルに記述してもいいです。

絶対にファイルを分けないとダメ!!

といった決まりもありません。

この程度の内容であれば、どちらでもよいでしょう。

あくまでも、個人で楽しむものですから・・・

HTMLファイルが準備できたら

玉を放つ台を作ってみましょう。

玉を出す台(砲台)

玉(ミサイル)

的(マト)

といった感じで、部分的に作りながら

少しづつ作りこんでいきましょう。

いきなり、サンプルコードの上から下まで

をマネして作るのではなく、

理解しながらといった作業をお勧めします。

コピペで作れて、\(^o^)/

ではなく、内容も確認しながら

といったことをするとスキルアップしていくことでしょう。

砲台の作成

砲台は、左右キーで動くようにしていきます。

が、、、まずは、描画するとこから

jsファイル側に記述して確認してみよう。

// 砲台
var batteryHeight = 12;
var batteryWidth = 40;
var batteryX = 0;//起動時処理:起動時にのみ実行される
function init() {
var cvs = document.getElementById(“canvas”);
var ctx = cvs.getContext(‘2d’);
batteryX = (cvs.width-batteryWidth) / 2;
draw();

}function draw() {
var cvs = document.getElementById(“canvas”);
var ctx = cvs.getContext(‘2d’);
ctx.clearRect(0, 0, cvs.width, cvs.height);
drawbattery();
}
// 砲台の描写
function drawbattery() {
var cvs = document.getElementById(“canvas”);
var ctx = cvs.getContext(‘2d’);
ctx.beginPath();
ctx.rect(batteryX, cvs.height-batteryHeight, batteryWidth, batteryHeight);
ctx.fillStyle = “#000000”;
ctx.fill();
ctx.closePath();
}

こんな感じになるとOK

色とかは、見栄えよく変えて下さい

m(__)m

スポンサーリンク




コメントの入力は終了しました。