More than 5 years have passed since last update.

アニメーションプログラミング入門～その４～

Posted at 2018-11-18

#「ロケット（もどき）」を動かしてみました。

前回作った「ロケット（もどき）」を動かしてみました。
今回は作成に２日くらいかかりましたが、まだまだプログラミング初心者なので、変なところもいっぱいあると思います。

もっといろいろ経験していかないと・・・

今回作成したコードは、
【横移動】

<!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 = 0; 
            
            var frameWidth = 860;
            var frameHeight = 485;
            
            var direction = true;
            
            //コンテキストの取得可否チェック
            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(){
                context.fillStyle = "rgb(255, 255, 255)";
                context.fillRect(0, 0, frameWidth, frameHeight);
                context.clearRect(0, 0, frameWidth, frameHeight);

                if( 780 < selfPosX ){
                    direction = false;
                } else if( selfPosX < 0 ){
                    direction = true;
                }

                if( direction ){
                    selfPosX += 3;
                } else {
                    selfPosX -= 3;
                }

                context.drawImage(selfBody, selfPosX, 200);
            }
        </script>
        <div id="link"></div>
    </body>
</html>

【上下移動】

<!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 = 0;
            var selfPosY = 0; 
            
            var degY = 1;
            
            var frameWidth = 860;
            var frameHeight = 485;
            
            var directionX = true;
            var directionY = true;
            
            //コンテキストの取得可否チェック
            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(){
                context.fillStyle = "rgb(255, 255, 255)";
                context.fillRect(0, 0, frameWidth, frameHeight);
                context.clearRect(0, 0, frameWidth, frameHeight);
                
                // X方向
                if( 780 < selfPosX ){
                    directionX = false;
                } else if( selfPosX < 0 ){
                    directionX = true;
                }

                if( directionX ){
                    selfPosX += 3;
                } else {
                    selfPosX -= 3;
                }
                
                // Y方向
                if( degY >= 180 ){
                    directionY = false;
                }
                
                if( degY <= 0 ){
                    directionY = true;
                }
                
                if( directionY ){
                    degY++;
                } else {
                    degY--;
                }

                context.drawImage(selfBody, selfPosX, (selfPosY + ((degY * (Math.PI / 180)) * 120)));
            }
        </script>
        <div id="link"></div>
    </body>
</html>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up