1
5

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.

ゲームプログラミング入門~その1~【シューティングゲーム】

Last updated at Posted at 2018-11-24

ゲームプログラミングに挑戦!

前回作成したアニメーションプログラムを応用して「シューティングゲーム」の作成に挑戦してみることにしました。

ゲームプログラミング入門(ロケットもどきを操作できるようにしてみた)

わからないところもたくさんあり、エンジニアの友人に聞きながら作成に取り組んでいますが、何分「初心者」なのでわからないことばかりです。

今回は「ロケット(もどき)」をキーボードで動かせるところまで作成してみました。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta name="robots" content="noindex,nofollow">
        <title>WEB SCREEN APP</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]
            
            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);

                // ロケットの移動と描画
                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
            }
            
            // キーアップ
            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
            }
        </script>
        <div id="link"></div>
    </body>
</html>

#参考サイト

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

1
5
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
1
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?