<html>
    <head>
        <style>canvas {border: 1px solid gray;}</style>
    </head>
    <body>
        <canvas id="screen"></canvas>
        <p id="info"></p>
    </body>
</html>
// - 変数 - //
var Canvas;
var info;
var ctx;
var Run = true;
var mouse = new Point();

var fire = false;//04のみ
var Chara_Shot_Count = 10;//04のみ

// - クラス - //
// 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;
}
//04追加分
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;

    // 一定以上の座標に到達していたら生存フラグを降ろす
    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');

  //charaShot インスタンス化
  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);//04のみ

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

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

 // 画面を繰り返し呼び出す
    (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){
    // すべての自機ショットを調査する
    for(i = 0; i < Chara_Shot_Count; i++){
        // 自機ショットが既に発射されているかチェック
        if(charaShot[i].alive === false){
            // 自機ショットを新規にセット
            charaShot[i].set(chara.position, 5, 10);

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

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

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.