n-HIROKIの日常

n-HIROKIの取り組みを記録したものです。

canvasで最近使ったコードmemo

こんにちは!
n-hirokiです。

最近canvasを一から勉強して簡単なシューティングゲームを作るのが目標です。
簡単なことだけですが、canvasの勉強中に書いたコードの一部をまとめました。
canvasに関係ないことも書いてます。

1、HTMLでcanvasタグを書く

    <canvas id="mycanvas" width="500" height="250">
        Canvasに対応したブラウザを使ってください。
    </canvas>

2、JavaScriptcanvas定義 コンテキストを取得

    canvas = document.getElementById('mycanvas');
    if(!canvas || !canvas.getContext) return false;
    ctx = canvas.getContext('2d');

3、四角を描く

    ctx.fillStyle = #000000; //色指定
    ctx.fillRect(x座標, y座標, 横の長さ, 縦の長さ);

4、丸を描く

    ctx.beginPath();
    //ctx.arc(x座標, y座標, 半径, 開始角度, 終了角度);
    ctx.arc(this.x, this.y, this.r, 0, Math.PI*2);
    ctx.fillStyle = this.color;
    ctx.closePath();
    ctx.fill();

5、クリックした座標を取得

    canvas.addEventListener('click', function(e){
        var x, y, rect;
        //canvasの座標に合わせる
        rect = e.target.getBoundingClientRect();
        x = e.clientX - rect.left;
        y = e.clientY - rect.top;
    });

6、canvasはみ出し判定

    if(this.x + this.r > canvas.width || this.x - this.r < 0){
        //x軸はみ出す時の処理
    }
    if(this.y + this.r > canvas.height || this.y - this.r < 0){
        //y軸はみ出す時の処理
    }

7、canvasクリア

    ctx.fillStyle = "#ecf0f1";  //canvasの背景色
    ctx.fillRect(0, 0, canvas.width, canvas.height);

8、星を描画

    var theta = Math.PI * 72 / 180;
    var dx1 = this.r * Math.sin(theta);
    var dx2 = this.r * Math.sin(2 * theta);
    var dy1 = this.r * Math.cos(theta);
    var dy2 = this.r * Math.cos(2 * theta);
    ctx.beginPath();
    ctx.moveTo(this.x, this.y - this.r);
    ctx.lineTo(this.x - dx2, this.y - dy2);
    ctx.lineTo(this.x + dx1, this.y - dy1);
    ctx.lineTo(this.x - dx1, this.y - dy1);
    ctx.lineTo(this.x + dx2, this.y - dy2);
    ctx.fillStyle = this.color;
    ctx.closePath();
    ctx.fill();
    ctx.stroke();

9、乱数の取得

    function rand(min, max){    //第一引数に最小値、第二引数に最大値
        return min + Math.floor(Math.random() * (max - min + 1));
    }

10、キーボード入力判定

    document.onkeydown = function(e){
        if(e.keyCode == 37){
            console.log("←");
        }else if(e.keyCode == 38){
            console.log("↑");
        }else if(e.keyCode == 39){
            console.log("→");
        }else if(e.keyCode == 40){
            console.log("↓");
        }else if(e.shiftKey){
            console.log("shiftKey");
        }else if(e.ctrlKey){
            console.log("ctrlKey");
        }else if(e.altKey){
            console.log("altKey");
        }
    };




テキストや動画の丸写しではなく、自分で考えてコーディングできるようになってきたので、javascriptがかなり楽しくなってきました!
でもインベーダーゲームのように、自分の機体を動かしたり、敵をたくさん描画したりするのが、難しくて苦戦しました。
現在は、自分の箱を矢印キーとマウスで動かせられるようにしました。それと、shiftキーを押すことにより弾も打てるようになりました。
そして、敵をたくさん描画して動かすこともできたので、あとはあたり判定を入れれば、シューティングゲームの土台は完成します。

今まで、javascriptはかなり苦手で、ネット上のコードのコピペでしかできなかったのでかなり達成感があって嬉しいです!
とりあえず、シューティングゲームを完成させてブログにあげることが目標です!