基本のゲームループ描画

JavaScript

実行イメージ

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script src="Object.js" type="text/javascript"></script>
    <script src="main.js" type="text/javascript"></script>
    <title>基本のゲームループ描画</title>
</head>
<body>
    <canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>

style.css

1
2
3
4
5
6
7
/* style.css */
@charset "utf-8";
 
*{
    margin: 0;
    padding: 0;
}

Object.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
class Object{
    // コンストラクタ（x座標, y座標, x方向速度, y方向速度）
    constructor(x, y, vx, vy, target){
        this.x = x;             // x座標
        this.y = y;             // y座標
        this.vx = vx;           // x方向速度
        this.vy = vy;           // y方向速度
        this.isAlive = true;    // オブジェクトの生死
    }
 
    // 移動メソッド
    move(){
        this.x += this.vx;
        this.y += this.vy;
         
        // 画面から消えたら消去
        if(this.x < 0 || this.x > canvas.width || this.y < 0 || this.y > canvas.height){
            this.isAlive = false;
            console.log("消滅");
        }
    }
     
    // 描画メソッド
    draw(){
        g.beginPath();
        g.strokeStyle = "#555";
        g.arc(this.x, this.y, 10, 0, Math.PI*2, true);
        g.stroke();
    }
 
    // 更新処理
    update(){
        this.move();
        this.draw();
    }
}

main.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
// main.js
 
let canvas = null;
let g = null;
let objects = [];    // インスタンス格納用配列
let frameCount = 0; // フレーム数
 
// 指定範囲の乱数を生成する関数(min~max)
function randInt(min, max){
    return Math.floor(Math.random() * (max+1-min)+min);
}
 
// オブジェクトを消去
function deleteObjects(){
    // 画面外は配列を消去
    for(let i in objects){
        if(!objects[i].isAlive) objects.splice(i, 1); 
    }
}
 
// 描画更新処理
function mainLoop(){
    // キャンバスクリア
    g.fillStyle = "#eee";
    g.fillRect(0, 0, canvas.width, canvas.height);
     
    // 一定時間ごとにオブジェクトを生成
    if(frameCount % 60 == 0){
        // x座標をランダムに設定
        const x = randInt(0, canvas.width);
 
        // オブジェクトを生成
        const object = new Object(randInt(0, canvas.width), 0, 0, 3);
        console.log({object});
 
        // オブジェクトを配列に格納
        objects.push(object);
    }
     
    // オブジェクトの描画位置を更新
    for(let object of objects){
        object.update();
    }
 
    // オブジェクト消去
    deleteObjects();
 
    // フレームカウント
    frameCount++;
 
    // フレーム毎に再帰呼び出し
    requestAnimationFrame(mainLoop);
}
 
window.addEventListener("load", ()=>{
    // キャンバス取得
    canvas = document.getElementById("canvas");
    g = canvas.getContext("2d");
 
    frameCount = 0;
 
    // 描画更新処理を開始
    mainLoop();
});

コメント