「シューティングゲーム」がやっと完成しました！！

2度目のプログラミングチャレンジで、1か月ほどかけて、やっと「シューティングゲーム」が完成しました。

今回の学習では、エンジニアの友人にいろいろと教わりながら勉強＆作成できたので、途中で挫折しかけたのですが、何とか完成までたどり着くことができました。
→URL
今回作成したシューティングゲームのコードを下に書いておきたいと思います。
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta name="robots" content="noindex,nofollow">
        <title>WEB SCREEN GAME</title>
        <style>
            #screen {
                border: solid 1px #000000;
                background-color: #000000;
            }
            
        </style>
    </head>
    <body>
        <canvas id="screen" width="860" height="485"></canvas>
        <h2>操作方法</h2>
	<p>自機の操作 → 矢印キー</p>
        <p>ミサイルの発射 → Sキー</p>
        <p>※ゲームの時間制限はありません。自機と敵が衝突したらゲームオーバーになります。</p>
        <p>再度プレイする場合は、ブラウザの表示を更新してください。
        <script>
            //canvas要素のDOM(Document Object Model)を取得
            var canvas = document.getElementById('screen');
            var context;
            
            var bgImg1; // 背景画像１
            var bgImg2; // 背景画像２ 
            var bgImgs; // 背景画像配列

            var score = 0; // スコア
            var scoreImg;  // スコア画像
            var selfBody;  // 自機データ
            var selfPosX = 20;      // 自機の画面横方向の位置
            var selfPosY = 190;     // 自機の画面縦方向の位置
            var selfCenterPos = []; // 自機中心座標配列
            var selfSpeed = 10;     // 自機のスピード            
            var enemyBody; //敵データ
            
            var gameOverImg; // ゲームオーバー画像
            
            var playFlag = true; // ゲームプレイフラグ
            
            var frameWidth = 860;   // CANVAS横サイズ
            var frameHeight = 485;  // CANVAS縦サイズ
            
            //  キーボードの状態
            //              [ 上  ,   下 ,   右 ,   左 ] 
            var keyStatus = [false, false, false, false]

            // ミサイル
            var missiles = [];        // ミサイルデータ配列
            var missileSpeed = 30;    // ミサイルスピード
            var maxMissileCount = 5;  // ミサイル最大同時発射数

            // ミサイルデータの初期化
            for ( var i = 0; i < maxMissileCount; i++ ){
                //             状態 , x, y
                missiles[i] = [false, 0, 0];
            }

            var enemies = [];        // 敵データ配列
            var enemyCenterPos = []; // 敵データ中心座標配列
            var maxEnemyCount = 1;   // 最大表示敵数

            var enemyType = [];      // 敵タイプデータ配列
            //            X有効範囲, Y有効範囲, 画像file名, 獲得スコア
            enemyType[0] = [ 20, 20, "enemy_20x20.png", 1000];
            enemyType[1] = [ 50, 50, "enemy_50x50.png", 500];
            enemyType[2] = [ 80, 80, "enemy_80x80.png", 200];
            
            // 敵データの初期化
            for ( var i = 0; i < maxEnemyCount ; i++ ){
                enemies[i] = createEnemy();
            }            

            document.onkeydown = keyDown;   //キーダウンの検知設定
            document.onkeyup = keyUp;       //キーアップの検知設定
            
            //コンテキストの取得可否チェック
            if(canvas.getContext){

                context = canvas.getContext('2d');

                window.onload = function() {
                    // 画像オブジェクト作成
                    selfBody = new Image();
                    enemyBody = new Image();
                    gameOverImg = new Image();
                    scoreImg = new Image();
                    bgImg1 = new Image();
                    bgImg2 = new Image();

                    // 画像ファイル名設定
            	    selfBody.src = "rocket.png";
            	    gameOverImg.src = "gameover.png";
            	    scoreImg.src = "score.png";
                    bgImg1.src = "space1.jpg";
                    bgImg2.src = "space2.jpg";
                    
                    // 背景画像データ設定
                    bgImgs = [ [bgImg1, 0], [bgImg2, 860], [bgImg1, 1720] ] ;

                    selfBody.onload = function(){
                        draw(context);    //描画処理
                        startAnimation(); // 描画更新開始処理
                    }
                }
            }

            // 描画更新処理
            function startAnimation(){
                setInterval(draw, 33);
            }

            // 描画処理
            function draw(){
                if ( playFlag ){
                    // CANVASをクリア 
                    context.fillStyle = "rgb(255, 255, 255)";
                    context.fillRect(0, 0, frameWidth, frameHeight);
                    context.clearRect(0, 0, frameWidth, frameHeight);

                    drawSpace();   // 背景（宇宙）を描画

                    drawMissile(); // ミサイルを描画

                    move();        // ロケットの移動と描画
                    context.drawImage(selfBody, selfPosX, selfPosY);

                    drawEnemy();   // 敵の描画

                    judgementHitMissile(); // 当たり判定

                    drawScore(score); // スコアを描画

                    // ゲームオーバー判定
                    if( playFlag === false ){
                        // ゲームオーバー画像表示
                        context.drawImage(gameOverImg, (frameWidth/2)-(gameOverImg.width/2), (frameHeight/2)-(gameOverImg.height/2));
                    }
                }
            }
            
            // ロケットの移動
            function move(){
                if ( keyStatus[0] ){  // UP
                    if ( selfPosY > 0 ){ selfPosY -= selfSpeed; }
                }
                
                if ( keyStatus[1] ){  // DOWN
                    if ( selfPosY < 400 ){ selfPosY += selfSpeed; }
                }
                
                if ( keyStatus[2] ){  // RIGHT
                    if ( selfPosX < 775 ){ selfPosX += selfSpeed; }
                }
                
                if ( keyStatus[3] ){  // LEFT
                    if ( selfPosX > 0 ){ selfPosX -= selfSpeed; }
                }
            }
            
            // キーダウン
            function keyDown(e){
                if ( playFlag ){
                    if(e.keyCode === 38 ){ keyStatus[0] = true; } //UP KEY
                    else if(e.keyCode === 40 ){ keyStatus[1] = true; } //DOWN KEY
                    else if(e.keyCode === 39 ){ keyStatus[2] = true; } //RIGHT KEY
                    else if(e.keyCode === 37 ){ keyStatus[3] = true; } //LEFT KEY
                    else if(e.keyCode === 83 ){ missileLaunch(); } // ミサイルを発射
                }
            }
            
            // キーアップ
            function keyUp(e){
                if(e.keyCode === 38 ){ keyStatus[0] = false;} //UP KEY
                else if(e.keyCode === 40 ){ keyStatus[1] = false;} //DOWN KEY
                else if(e.keyCode === 39 ){ keyStatus[2] = false;} //RIGHT KEY
                else if(e.keyCode === 37 ){ keyStatus[3] = false;} //LEFT KEY
            }

            // 敵の描画
            function drawEnemy(){
                for( var i = 0; i < enemies.length; i++ ){
                    if( enemies[i][0] < -100 || enemies[i][1] < -100){
                        enemies[i] = createEnemy();
                    }
                    enemies[i][0] -= enemies[i][2];
                    enemies[i][1] += enemies[i][3];
                    enemyBody.src = enemies[i][4][2];
                    context.drawImage(enemyBody, enemies[i][0], enemies[i][1]);
                }
            }

            // 敵データを初期化
            function createEnemy(){
                return [
                    getRandVal(910, 1000),       // posX
                    getRandVal(10, 600),         // posY
                    getRandVal(3, 15),           // moveXspeed
                    -1 * getRandVal(1, 5),       // moveYspeed
                    enemyType[getRandVal(0, 2)]  // enemyTypeNum
                ];
            }
            
            // ミサイルを描画
            function drawMissile(){
                for ( var i = 0; i < missiles.length; i++ ){
                    if ( missiles[i][0] ){ // ミサイルが有効かどうか？
                        if( missiles[i][1] < 830 ){
                            missiles[i][1] += missileSpeed;

                            context.beginPath();

                            var missile = new Path2D();

                            missile.rect( missiles[i][1], missiles[i][2], 20, 2 );
                            context.fillStyle = "rgb(255, 255, 255)";
                            context.stroke(missile);
                            context.fill(missile);
                        } else {
                            missiles[i][0] = false; // ミサイルを無効化
                        }
                    }
                }
            }

            // ミサイルを発射
            function missileLaunch(){
                for ( var i = 0; i < missiles.length; i++ ){
                    if( missiles[i][0] === false ){ // ミサイルが有効かどうか？
                        missiles[i][0] = true; // ミサイルを有効化
                        missiles[i][1] = selfPosX + 60;
                        missiles[i][2] = selfPosY + 40;

                        return;
                    }
                }
            }

            // 乱数取得
            function getRandVal(min, max){
                return (Math.floor(Math.random() * (max - min + 1))) + min;
            }
            
            // 当たり判定(ミサイルと敵）
            function judgementHitMissile(){
                for ( var i = 0; i < enemies.length; i++ ){
                    // ミサイルと敵の当たり判定
                    for( var j = 0; j < missiles.length; j++ ){
                        if ( missiles[j][0] === true ){
                            // ミサイルのposXからエネミーのposXの差の絶対値が当たり判定値以内かどうか？
                            if( (enemies[i][0] < (missiles[j][1] + 20 )) && (missiles[j][1] < (enemies[i][0] + enemies[i][4][0]))){
                                // ミサイルのposYからエネミーのposYの差の絶対値が当たり判定値以内かどうか？
                                if( (missiles[j][2] > enemies[i][1]) && (missiles[j][2] < (enemies[i][1] +  enemies[i][4][1]))){
                                    // 当たり判定
                                    missiles[j][0] = false;
                                    score += enemies[i][4][3];
                                    enemies[i] = createEnemy();
                                }
                            }
                        }
                        
                        // 自機と敵の当たり判定
                        // 自機と敵の中心座標を計算
                        selfCenterPos[0] = selfPosX + 40;
                        selfCenterPos[1] = selfPosY + 40;
                        enemyCenterPos[0] = enemies[i][0] + (enemies[i][4][0] / 2); // center X
                        enemyCenterPos[1] = enemies[i][1] + (enemies[i][4][1] / 2); // center Y
                        
                        if ( enemies[i][0] > 0 && enemies[i][1] > 0 ){
                            if(abs(abs(selfCenterPos[0]) - abs(enemyCenterPos[0])) < 100){
                                // ミサイルのposYからエネミーのposYの差の絶対値が当たり判定値以内かどうか？
                                if(abs(abs(selfCenterPos[1]) - abs(enemyCenterPos[1])) < 100){
                                    // 当たり判定
                                    // 厳密な当たり判定
                                    var hitRange = ((enemies[i][4][0] / 2) + 40) * 0.7;
                                    if(strictHitJudge(selfCenterPos, enemyCenterPos , hitRange)){
                                         playFlag = false;
                                    }
                                }
                            }
                        }
                    }
                }
            }

            // スコアを表示
            function drawScore(score){
                // スコアラベルを描画
                context.drawImage(scoreImg, 0, 0);
                context.font = "30px Arial"; //フォントにArial,40pxを指定
                context.fillStyle = "white"; 
                context.fillText((("00000000"+score).slice(-8)),137,43);      //テキストを塗り潰しで描画
            }
            
            // スコアを表示
            function drawSpace(){
                // スコアラベルを描画
                for ( var i = 0; i < bgImgs.length; i++ ){
                    if( bgImgs[i][1] === -860){
                        if(bgImgs[i][0] === bgImg1 ){
                            bgImgs[i][0] = bgImg2;
                        } else if(bgImgs[i][0] === bgImg2 ){
                            bgImgs[i][0] = bgImg1;
                        }
                        bgImgs[i][1] = 1720;
                    }
                	context.drawImage(bgImgs[i][0], bgImgs[i][1], 0);
                	bgImgs[i][1]--;
                } 
            }
            
            // 絶対値を取得
            function abs(value){
                return Math.abs(value);
            }
            
            // 自機と敵の厳密当たり判定
            function strictHitJudge(selfCenterPos, enemyCenterPos , hitRange){
                var x = abs(abs(selfCenterPos[0]) - abs(enemyCenterPos[0]));
                var y = abs(abs(selfCenterPos[1]) - abs(enemyCenterPos[1]));
                var distance = Math.sqrt(Math.pow(x,2) + Math.pow(y,2));                
                if( hitRange > distance){ return true; } else { return false; };
            }
        </script>
        <div id="link"></div>
    </body>
</html>
#遊んでみたい方はこちら
→シューティングゲーム