こんにちはrihitoです。
今回はjavascriptでシューティングゲームを作りたいと思います。

動機

暇だから

対象読者

・javascriptをある程度できる人
・ゲームを作りたい人
・暇な人
・とりあえず何かしたい人

記事

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

今回のソースコード

準備

準備です。htmlを書きます

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>

canvasに図形を描く

main.js

var canvas = document.getElementById("main");//canvasを読み込む
var ctx = canvas.getContext("2d");

function draw(){
    ctx.beginPath()
    ctx.rect(/*x座標*/50,/*y座標*/50,/*横*/50,/*縦*/50)
    ctx.fillStyle = "#0000ff"   //色を指定
    ctx.fill()
    ctx.arc(10,10,/*半径*/10,0 * Math.PI / 180,360 * Math.PI /180)
    ctx.fill()
    ctx.beginclose()
}

draw();

コードを一行目から見ていきましょう。

1行目はcanvas(idがmainのタグ)を変数に収納して、
2行目は、canvasに図形などを描画できるようにしています。

5行目はお絵描きはじめるよーみたいなかんじです。
そして、ctx.rectは四角形を描画するための関数です。rect()はこう書きます。

canvasのオブジェクト.rect(図形のx座標,図形のy座標,図形の横の大きさ横width,図形の大きさ縦)

ctx.fillStyleは図形の色を指定しています。これは、webカラーで、16進数で色を指定できます
ちなみに、webカラーはこのように書きます。

次に、ctx.arcですね。これは、円を描くときに使います。arc関数はこのように書きます。

ctx.arc(x座標,y座標,半径 * Math.PI / 180,360 * Math.PI /180)

うまく表示できたでしょうか
では、canvasもだいたいは理解できたのでゲーム作りに入っていきたいと思います!

とりあえずplayerを作成

さっきのmain.jsは練習なのですべて消してしまっても構いません。(ファイルは消してはいけません)
code

main.js

var canvas = document.getElementById("main");//canvasを読み込む
var ctx = canvas.getContext("2d");
var px = 40    //player x座標
var py = 300    //player y座標


//playerを描く関数
function player_draw(){
    ctx.beginPath()
    ctx.rect(px,py,30,30)
    ctx.fillStyle = "#00ff00"
    ctx.fill()
    ctx.closePath()
}

function draw(){
    player_draw()

}

draw();

playerを動かしてみる

main.js_16行目～

function draw(){
    player_draw()
    px += 5   //追加 px = px + 1
}
setInterval(draw,10)    //10ミリ秒単位で実行 //追加

このようにヘビみたいになってしまいました。
なので再描画するときにcanvasをすべて消す必要があります。
なぜcanvasをすべて消さなければならないかと言うと描いた図形が重なってしまうからです。

main.js_16行目～

function draw(){
    ctx.clearRect(0/*開始地点*/,0,canvas.width/*終了地点*/,canvas.height)   //canvasをいったんクリアする //追加
    player_draw()
    px += 5
}

うまく動きましたか?
では、playerの速さを変数にします。

main.js_3行目～

var px = 40    //player x座標
var py = 300    //player y座標

var p_dx = 0    //player xの速さ  //追加
var p_dy = 0    //player yの速さ  //追加

main.js_19行目～

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

キーボードで動かせるようにする

main.js_10行目～

//playerを描く関数
function player_draw(){
    ctx.beginPath()
    ctx.rect(px,py,30,30)
    ctx.fillStyle = "#00ff00"
    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
    }
}
//キーが離されたときに実行される
document.onkeyup = function(e){
    p_dx = 0    //止める
    p_dy = 0
}
/*追加ここまで****************/

ちなみにeはキーボードの情報でe.keyは押されたキーe.keycodeは押されたキーコードとなっています。

今回のコード

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の速さ


//playerを描く関数
function player_draw(){
    ctx.beginPath()
    ctx.rect(px,py,30,30)
    ctx.fillStyle = "#00ff00"
    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
    }
}
//キーが離されたときに実行される
document.onkeyup = function(e){
    p_dx = 0    //止める
    p_dy = 0
}

function draw(){
    ctx.clearRect(0/*開始地点*/,0,canvas.width/*終了地点*/,canvas.height)   //canvasをいったんクリアする
    player_draw()
    //playerを動かす
    px += p_dx
    py += p_dy
}
setInterval(draw,10)    //10ミリ秒単位で実行

draw();

next:
javascriptでシューティングゲームみたいなものを作る①
javascriptでシューティングゲームみたいなものを作る②
javascriptでシューティングゲームみたいなものを作る③
javascriptでシューティングゲームみたいなものを作る④
javascriptでシューティングゲームみたいなものを作る⑤

他の記事も見る:
【自作】hogemoji scriptっていうグローバルなプログラミング言語
 【難解プログラミング言語】brainfuckでOSを自作することができるコンパイラを作った
 【python】FlaskでSSE(Server-Sent Events)を実装する