思いついたときに書く不定期な日記です。 ヲタな話がメインです。その他ちょっとは役に立ちそうなことも書いてみようと思ってます。
シューティングゲーム風のものを作ってみた。
前回のものに付け足して作ったので、状態遷移とか全然作ってなくて
勝手に始まって死んだら頭に戻るだけw
本当は途中の段階を踏んで、確認して説明を残しながらと思ったんだけど、
敵、敵の弾、当たり判定を作ったら何となく出来たので(^_^;

でも、適当に作ってこれだけ動いてくれるなら、色々遊べそう。
次はもうちょい計画的に作ろう?

こちらからどうぞ。
爆発パターンとか全然入って無い寂しいものだけど…
スポンサーサイト
○JavaScriptでクラス

スプライトっぽいものを作りたいと思ったので、JavaScriptでクラスとか構造体とかってあるのかな?と調べてみたら、
どうやらJavaScriptでは関数と同じ扱いで出来るらしい。
ということでこんな風にしてみた。
//スプライト構造体風
var Sprite = function(ct,image){
this.ctx = ct; //コンテキスト
this.x = 0; //座標
this.y = 0;
this.img = image; //イメージ
this.flag = 1; //描画フラグ
this.Draw = function(){ //描画関数
if(this.flag>0){
this.ctx.drawImage(this.img,this.x-this.img.width/2,this.y-this.img.height/2);
}
}
}
構造体って書いてあるけど、中にメソッドも持てるのでクラスっぽく使える。
生成と呼び出しは
//スプライトを作って自機の絵を読み込む
imgFighter = new Image();        //イメージを作成
imgFighter.src="fighter.png";     //絵を読み込む
fighter = new Sprite(ctx,imgFighter);         //キャンバスのコンテキストとイメージを渡して生成
fighter.x = 160-12;
fighter.y = 380;
fighter.count = 0; //カウンタ

//自機の描画
fighter.Draw();

こんなんでいける。
とか、書いてるうちにリスト構造でつないだらとか、ワークとかタスクみたいに管理したら…とか思ったけど、
とりあえずはこの程度でやってみることにする。

動くものは こちら
ソースは↑ここから見て下さい。


最近メインで使ってるブラウザはChoromeなんだけど、速いしすっきりしてて使いやすいと思う。
それに、JavaScriptで何か作ろうと思った時は、メニューのツールからJavaScriptコンソールを立ち上げると
デバグが出来てすごく便利。
モベキマスソート作ったときもとても役に立った。
ブラウザをインストールするだけでこの開発環境が手に入るのは良いね。
(別にGoogleを宣伝する気はないけど)
まずは、格好悪い自機とショットの絵を描いた。

fighter.png shot.png

で、CANVASを真っ黒にして、ショットはオートで撃って、マウスで自機を動かすところまでやってみた。

こちら
(Chorome、Firefox、Safariでは動いたけど、IEはだめな模様)
↑IEはconstが使えないから動かなかったので、constを消したら動作した。

CANVAS内を左ボタンを押してる間だけマウスの動きに連動して自機が動く。
うまく説明できないけど、iPhoneの怒首領蜂とかエスプガルーダが良い感じだと思ったのでそれっぽくしてみた。
次からは説明を書いてみるつもり。
ちょっとゲームっぽいものを作ってみようかなと思ったときに、何がいいかな?と思った。
ダウンロードするものだと、環境で動いたり動かなかったりとか面倒そうだなと。
で、ちょっと調べてみたら、JavaScript+CANVAS もしくが SVG がいけそうな感じ。

ということで、まずはJavaScript+CANVASで遊んでみることにした。
HTML5+CANVASの時代も来そうだし。(ホントに?)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>CANVASテスト</title>
<script Language="JavaScript" src="ホニャララ.js"></script>
</head>
<body onload="Init()">
キャンバステスト<br>
<canvas id="canvas01" width="320" height="480"></canvas>
</body>
</html>

というhtmlで320x480のcanvasを作ってその中に何か描いてみることにする。
で、ホニャララ.jsのところの中身を書けばOK。

ちなみにCAVASのことはこちらのページを参考に

上記のhtmlでCANVASのIDを”canvas01”にしたので、こんな感じにすれば取得できる。
onload="Init()"で起動時にInit()が呼ばれるので

function Init()
{
//canvasを取得
canvas = document.getElementById('canvas01');
if(!canvas || !canvas.getContext){  //取得できなかったら終了
return false;
}
ctx = canvas.getContext('2d');    //コンテキスト
}

これで2Dコンテキストを取得して、それを使って描画する。