【JavaScript】シューティングゲームを作り方②【初学者向け】

// - 変数 -　//
var Canvas;
var info;
var ctx;
var Run = true;
var mouse = new Point();

var fire = false;
var Chara_Shot_Count = 10;

// - クラス -　//
// Character
function Chara(){
this.position = new Point();
this.size = 0;
}

Chara.prototype　= {
init:function(size){
//サイズ設定
this.size = size;
　}
}

// Point
function Point(){
this.x = 0;
this.y = 0;
}

function Chara_Shot(){
this.position = new Point();
this.size = 0;
this.speed = 0;
this.alive = false;
}

Chara_Shot.prototype = {
set:function(position,size,speed){
//座標
this.position.x = position.x
this.position.y = position.y
//サイズ
this.size = size;
//スピード
this.speed = speed;

// 生存フラグを立てる
this.alive = true;
},

　move:function(){
// 座標を真上にspeed分だけ移動
this.position.y -= this.speed;

// 一定以上の座標に到達⇒false
if(this.position.y < -this.size){
this.alive = false;
}
}
};

// - メイン -　//
window.onload = function(){

// スクリーンの初期化
Canvas = document.getElementById('screen');
Canvas.width = 256;
Canvas.height = 256;

// 2dコンテキスト
ctx = Canvas.getContext('2d');

//Chara_Shot　インスタンス化
var charaShot = new Array(Chara_Shot);
　for(i = 0; i < Chara_Shot_Count; i++){
charaShot[i] = new Chara_Shot();
}
console.log(Chara_Shot)

// イベントの登録
Canvas.addEventListener('mousemove', mouseMove);
window.addEventListener('keydown', keyDown);
Canvas.addEventListener('mousedown', mouseDown);

// その他のエレメント関連
info = document.getElementById('info');

// 自機初期化
var chara = new Chara();
chara.init(10);

// 画面を繰り返し呼び出す
(function(){
// HTMLを更新
info.innerHTML = mouse.x + ' : ' + mouse.y;

// screenクリア
ctx.clearRect(0, 0, Canvas.width, Canvas.height);

// パスの設定を開始
ctx.beginPath();

// 自機の位置を設定
chara.position.x = mouse.x;
chara.position.y = mouse.y;

// 自機を描くパスを設定
ctx.rect(chara.position.x, chara.position.y,30,30);

// 自機の色を設定する
ctx.fillStyle = "black";

// 自機を描く
ctx.fill();

// fireフラグ trueなら処理が進む
if(fire===true){
// すべての自機ショットを調査する
for(i = 0; i < Chara_Shot_Count; i++){
// 自機ショットが既に発射されているかチェック
if(charaShot[i].alive　=== false){
// 自機ショットを新しくセット
charaShot[i].set(chara.position, 5, 10);

// ループ抜ける
break;
}
}
// フラグをfalseにする
fire = false;
}


// パスの設定を開始
ctx.beginPath();

// すべての自機ショット(=10)を調査する
for(i = 0; i < Chara_Shot_Count; i++){
// 自機ショットが既に発射されているかチェック
if(charaShot[i].alive===true){
// 自機ショットを動かす
charaShot[i].move();

// 自機ショットを描くパスを設定
ctx.arc(
charaShot[i].position.x,
charaShot[i].position.y,
charaShot[i].size,
0, Math.PI * 2, false
);

// パスをセーブ
ctx.closePath();
}
}

// 自機ショットの色を設定する
ctx.fillStyle = "red";

// 自機ショットを描く
ctx.fill();

// フラグにより再帰呼び出し
if(Run){setTimeout(arguments.callee, 1000/30);}
})();
};


// 関数
function mouseMove(event){
// マウスカーソル座標の更新
mouse.x = event.clientX;
mouse.y = event.clientY;
}

function keyDown(event){
// キーコード取得
var ck = event.key;

// spaceKeyで画面が止まる
if(ck === " "){Run = false;}
}

function mouseDown(event){
// フラグを立てる
fire = true;
}

//今回で追加されたものだけ抜粋//
var fire = false
var Chara_Shot_Count = 10

// イベントの登録
Canvas.addEventListener('mousemove', mouseMove)
window.addEventListener('keydown', keyDown)
Canvas.addEventListener('mousedown', mouseDown)//⇦⇦⇦これが追加された

function mouseDown(event){
// フラグを立てる
fire = true;
}

function Chara_Shot(){
this.position = new Point();
this.size = 0;
this.speed = 0;
this.alive = false;
}

Chara_Shot.prototype = {
//setメソッド//
set:function(position,size,speed){
//座標
this.position.x = position.x
this.position.y = position.y

//サイズ・スピード
this.size = size;
this.speed = speed;

// 生存フラグを立てる
this.alive = true;
},
//moveメソッド//
　move:function(){
// 座標を真上にspeed分だけ移動させる
this.position.y -= this.speed;

// 一定以上の座標に到達していたら生存フラグを降ろす
if(this.position.y < -this.size){
this.alive = false;
}
}
}

var charaShot = new Array(CHARA_SHOT_MAX_COUNT)
for(i = 0; i < CHARA_SHOT_MAX_COUNT; i++){ 
charaShot[i] = new Chara_Shot()
}

// fireフラグ trueなら処理が進む
if(fire===true){
// すべての自機ショットを調査する
for(i = 0; i < Chara_Shot_Count; i++){
// 自機ショットが既に発射されているかチェック
if(charaShot[i].alive　=== false){
// 自機ショットを新規にセット
charaShot[i].set(chara.position, 5, 10);

// ループを抜ける
break;
}
}
// フラグを降ろしておく
fire = false;
}

// fireフラグ trueなら処理が進む
if(fire===true){
// すべての自機ショットを調査する 
for(i = 0; i < CHARA_SHOT_MAX_COUNT; i++){ 
// 自機ショットが既に発射されているかチェック 
if(charaShot[i].alive === false){

// すべての自機ショット(=10)を調べる
for(i = 0; i < Chara_Shot_Count; i++){
// 自機ショットが既に発射されているかチェック
if(charaShot[i].alive===true){
// 自機ショットを動かす
charaShot[i].move();

// 自機ショットを描くパスを設定
ctx.arc(
charaShot[i].position.x,
charaShot[i].position.y,
charaShot[i].size,
0, Math.PI * 2, false
);

// パスをセーブ
ctx.closePath();
}
}

// 自機ショットの色を設定する
ctx.fillStyle = "red";

// 自機ショットを描く
ctx.fill();