#「敵キャラクター」が出現できるようになりました

ゲーム制作も４週目に入りやっと「敵キャラクター」を描画できるようになりました。

といっても、わからない点はエンジニアの友人に聞きながら作っていったので、すべて自分の力で作成できたわけではありません。

プログラミングなどの専門スキルは「わからないことを聞ける人」がいることが大事だな～と実感しました。

→「敵キャラ」が動くようにしてみた。【ゲームプログラミング～その３～】

次は、「あたり判定」や「スコア機能」など、より「ゲームらしい」要素の作成を行っていきたいと思います。

<!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 enemyBody;
            
            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 maxEnemyCount = 5;

            // エネミータイプ
            var enemyType = []
            //                X有効範囲, Y有効範囲, image name 
            enemyType[0] = [ 20, 20, "enemy_20x20.png"];
            enemyType[1] = [ 50, 50, "enemy_50x50.png"];
            enemyType[2] = [ 80, 80, "enemy_80x80.png"];
            
            // エネミーの初期化
            // 状態(bool), posX, posY, moveXspeed, moveYspeed, enemyTypeNum
            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();

            	    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);

                // エネミーの描画
                drawEnemy();
            }
            
            // ロケットの移動
            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 drawEnemy(){
                for( var i = 0; i < enemies.length; i++ ){
                    if( enemies[i][0] < -100 ){
                        enemies[i] = createEnemy();
                    }
                    enemies[i][0] -= enemies[i][2];
                    enemies[i][1] += enemies[i][3];
                    enemyBody.src = enemies[i][4];
                    context.drawImage(enemyBody, enemies[i][0], enemies[i][1]);
                }
            }

            // エネミーデータを初期化
            function createEnemy(){
                return [
                    getRandVal(910, 1000),       // posX
                    getRandVal(10, 600),         // posY
                    getRandVal(10, 30),           // moveXspeed
                    -1 * getRandVal(1, 5),     // moveYspeed
                    enemyType[getRandVal(0, 2)][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;
            }             
        </script>
        <div id="link"></div>
    </body>
</html>

#参考サイト

プログラミング初心者のための「HTML・CSS・Javascript」で作るシンプルゲームアプリ開発入門