ゲームプログラミング入門~その2~【シューティングゲーム】ミサイル発射機能作成

ゲームプログラミング入門~その2~【シューティングゲーム】ミサイル発射機能作成:


 ミサイル発射機能を作ってみました

「シューティングゲーム」に欠かせない「ミサイル発射機能」を作ってみたのですが、

プログラミング初心者なので、作り方にかなり悩みました。

「ロケットもどき」が「ミサイル」を撃てるようにしてみた。【ゲームプログラミング~その2~】

前回の機能の延長と考えていたのですが、思いのほか自分には難しかったです。

<!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> 
        <script> 
            //canvas要素のDOM(Document Object Model)を取得 
            var canvas = document.getElementById('screen'); 
            var context; 
            var selfBody; 
            var selfPosX = 20;      // ロケットの画面横方向の位置 
            var selfPosY = 190;     // ロケットの画面縦方向の位置 
            var selfSpeed = 10;     // ロケットのスピード 
 
            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]; 
            } 
 
            document.onkeydown = keyDown;   //キーダウンの検知設定 
            document.onkeyup = keyUp;       //キーアップの検知設定 
 
            //コンテキストの取得可否チェック 
            if(canvas.getContext){ 
 
                context = canvas.getContext('2d'); 
 
                window.onload = function() { 
                    selfBody = new Image(); 
 
                    selfBody.src = "rocket.png"; 
 
                    selfBody.onload = function(){ 
                        draw(context); 
                        startAnimation(); 
                    } 
                } 
            } 
 
            function startAnimation(){ 
                setInterval(draw, 33); 
            } 
 
            function draw(){ 
                // CANVASをクリア  
                context.fillStyle = "rgb(255, 255, 255)"; 
                context.fillRect(0, 0, frameWidth, frameHeight); 
                context.clearRect(0, 0, frameWidth, frameHeight); 
 
                // ミサイルを描画 
                drawMissile(); 
 
                // ロケットの移動と描画 
                move(); 
                context.drawImage(selfBody, selfPosX, selfPosY); 
            } 
 
            // ロケットの移動 
            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(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 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; 
                    } 
                } 
            }                  
        </script> 
        <div id="link"></div> 
    </body> 
</html> 

コメント

このブログの人気の投稿

投稿時間:2021-06-17 22:08:45 RSSフィード2021-06-17 22:00 分まとめ(2089件)

投稿時間:2021-06-20 02:06:12 RSSフィード2021-06-20 02:00 分まとめ(3871件)

投稿時間:2021-06-17 05:05:34 RSSフィード2021-06-17 05:00 分まとめ(1274件)