javascriptでシューティングゲームみたいなものを作る②

こんにちはrihitoです。
javascriptでシューティングゲームみたいなものを作る第二回目です。

動機

暇だから

対象読者

・javascriptをある程度できる人
・ゲームを作りたい人
・暇な人
・とりあえず何かしたい人
今回は、playerの攻撃などを実装していきたいと思います。

記事

javascriptでシューティングゲームみたいなものを作る①
javascriptでシューティングゲームみたいなものを作る②
javascriptでシューティングゲームみたいなものを作る③
javascriptでシューティングゲームみたいなものを作る④
javascriptでシューティングゲームみたいなものを作る⑤
今回のソースコード

playerの攻撃を実装する

スペースキーが押されたらplyerにレーザーを描画する

まずレーザーを描く

main.js_8行目~
    
//レーザーの座標
var lx =[0];   //レーザーをたくさん描けるようにするためリストにする
var ly = [0];
var lw = 15 //レーザーの大きさ
var lh = 6
    
main.js_7行目~

    var ps = 30

main.js_14行目~
    
//playerを描く関数
function player_draw(){
    ctx.beginPath()
    ctx.rect(px,py,ps,ps)
    ctx.fillStyle = "#00ff00"
    ctx.fill()
    ctx.closePath()
}
//追加********************
function l_draw(){
    for(var i = 0;i < lx.length;i++){
        ctx.beginPath()
        ctx.rect(lx[i],ly[i],15,6)
        ctx.fillStyle = "#ff0000"
        ctx.fill()
        ctx.closePath()
    }
}
//追加ここまで************

main.js_46行目~
    
function draw(){
    ctx.clearRect(0/*開始地点*/,0,canvas.width/*終了地点*/,canvas.height)   //canvasをいったんクリアする
    player_draw()  //追加
    l_draw()
    //playerを動かす
    px += p_dx
    py += p_dy
}


ly[0] は リストlyの0番目ということです。

動かしてみる

main.js_46行目~
    
function draw(){
    ctx.clearRect(0/*開始地点*/,0,canvas.width/*終了地点*/,canvas.height)   //canvasをいったんクリアする
    player_draw()  //追加
    l_draw()
    for(var i = 0;i < lx.length/*リストの長さ*/;i++){   //リストを読み込む
        lx[i] += 2  //今読み込んでいるレーザーを動かす
    }
    //playerを動かす
    px += p_dx
    py += p_dy
}


なぜforを使っているのかというとこれは、本当はこう書きたいからです。
lx[0] += 2 //lxの0番目に2をたす
lx[1] += 2 //lxの1番目に2をたす
lx[2] += 2 //lxの2番目に2をたす
lx[3] += 2 //lxの3番目に2をたす
456789...

スペースキーが押されたときに発射する

main.js_22行目~
    
function l_draw(){
    for(var i = 0;i < lx.length;i++){  //追加
        ctx.beginPath()
        ctx.rect(lx[i],ly[i],lw,lh)
        ctx.fillStyle = "#ff0000"
        ctx.fill()
        ctx.closePath()
    }//追加
}
main.js_32行目~
//キーが押されたときに実行される
document.onkeydown = function(e){
    if(e.key == "ArrowUp"){  //↑
        p_dx = 0
        p_dy = -3
    }
    if(e.key == "ArrowDown"){//↓
        p_dx = 0
        p_dy = 3
    }
    //追加***************************
    if(e.key == " "){
        lx.push(px)    //レーザー発射開始位置(playerの位置)をリストに追加
        ly.push(py)
    }
    //追加ここまで*******************

}


enemyを描く

playerの攻撃とさほど変わりはありません。
main.js_13行目~
    
//enemyの座標
var ex = [0];
var ey = [0];
main.js_35行目~
function e_draw(){
    for(var i = 0;i < lx.length;i++){
        ctx.beginPath()
        ctx.rect(ex[i],ey[i],36,36)
        ctx.fillStyle="#ff00ff"
        ctx.fill()
        ctx.closePath()
    }
}
main.js_71行目~
 for(var i = 0;i < lx.length/*リストの長さ*/;i++){   //リストを読み込む
        lx[i] -= 2  //今読み込んでいるレーザーを動かす
    }


今回のコード

index.html
    
<!DOCTYPE html>
<html>
    <body>
        <canvas id="main" height="400" width="800" style="background:#000000" ></canvas>
        <!--canvasの下にscriptを読み込まないとエラーがでる-->
        <script src="main.js"></script>
    </body>
</html>
    
main.js
    
        var canvas = document.getElementById("main");//canvasを読み込む
        var ctx = canvas.getContext("2d");
        var px = 40    //player x座標
        var py = 300    //player y座標
        
        var p_dx = 0    //player xの速さ
        var p_dy = 0    //player yの速さ
        
        //レーザーの座標
        var lx =[0];   //レーザーをたくさん描けるようにするためリストにする
        var ly = [0];
        
        //enemyの座標
        var ex = [0];
        var ey = [0];
        
        //playerを描く関数
        function player_draw(){
            ctx.beginPath()
            ctx.rect(px,py,ps,ps)
            ctx.fillStyle = "#00ff00"
            ctx.fill()
            ctx.closePath()
        }
        
        function l_draw(){
            for(var i = 0;i < lx.length;i++){
                ctx.beginPath()
                ctx.rect(lx[i],ly[i],15,6)
                ctx.fillStyle = "#ff0000"
                ctx.fill()
                ctx.closePath()
            }
        }
        function e_draw(){
            for(var i = 0;i < lx.length;i++){
                ctx.beginPath()
                ctx.rect(ex[i],ey[i],36,36)
                ctx.fillStyle="#ff00ff"
                ctx.fill()
                ctx.closePath()
            }
        }
        //キーが押されたときに実行される
        document.onkeydown = function(e){
            if(e.key == "ArrowUp"){  //↑
                p_dx = 0
                p_dy = -3
            }
            if(e.key == "ArrowDown"){//↓
                p_dx = 0
                p_dy = 3
            }
            if(e.key == " "){
                lx.push(px)    //レーザー発射開始位置(playerの位置)をリストに追加
                ly.push(py)
            }
            
        }
        //キーが離されたときに実行される
        document.onkeyup = function(e){
            p_dx = 0    //止める
            p_dy = 0
        }
        
        function draw(){
            ctx.clearRect(0/*開始地点*/,0,canvas.width/*終了地点*/,canvas.height)   //canvasをいったんクリアする
            player_draw()
            l_draw()
            e_draw()
            for(var i = 0;i < lx.length/*リストの長さ*/;i++){   //リストを読み込む
                lx[i] += 2  //今読み込んでいるレーザーを動かす
            }
            e_draw()
            for(var i = 0;i < ex.length/*リストの長さ*/;i++){   //リストを読み込む
                ex[i] -= 2  //今読み込んでいるenemyを動かす
            }
            //playerを動かす
            px += p_dx
            py += p_dy
        }
        setInterval(draw,10)    //10ミリ秒単位で実行
        
        draw();