0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

ゲームプログラミング入門~その3~【シューティングゲーム】敵キャラクター作成

Last updated at Posted at 2018-12-04

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

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

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

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

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

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

<!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」で作るシンプルゲームアプリ開発入門

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?