ゲームエンジン開発②　とにかくゲーム作って動かしてみる【javascript】

前回：ゲームエンジン開発①「画面の更新処理」

とりあえず画面の更新処理さえできてしまえばゲームは出来るはずです。

ってことで作ってみたのがこちらです　→　サンプルプログラム

かなり簡素ではありますが一応シューティングゲームのようなものになってます。まぁ弾は1発しか撃てないし敵も1匹ずつしか出てきませんが敵と弾の当たり判定をつけてあるのでちゃんとゲームになってますよね(*´ω｀)

プログラムはこんな感じでやってみました。

var SCREEN_WIDTH = 640;//画面幅
var SCREEN_HEIGHT = 900;//画面高さ
var core, player, bullet, enemy;

class Chara{//キャラクタークラス
    constructor(w, h){
        this.x = 0;
        this.y = 0;
        this.width = w;
        this.height = h;
    }
    render(){
        drawRect(core.ctx, this.x, this.y, this.width, this.height);
    }
}
class Bullet extends Chara{//弾クラス
    constructor(w, h){
        super(w, h);
        this.y = -this.height;
    }
    move(){
        this.y -= 10;
        if(this.y < -this.height){
            this.x = player.x + (player.width - this.width) / 2; 
            this.y = player.y;
        }
    }
}
class Player extends Chara{//プレイヤークラス
    constructor(w, h){
        super(w, h);
        this.x = 300;
        this.y = 500;
    }    
}
class Enemy extends Chara{//敵クラス
    constructor(w, h){
        super(w, h);
        this.x = Math.floor(Math.random() * (SCREEN_WIDTH - this.width));
        this.y = -this.height;
    } 
    move(){
        this.y += 2;
        if(this.y > SCREEN_HEIGHT){
            this.x = Math.floor(Math.random() * (SCREEN_WIDTH - this.width));
            this.y = -this.height;
        }
    }
}
class Core{//ゲーム基幹クラス
    constructor(){
        this.canvas = document.getElementById("canvas");
        this.canvas.width = SCREEN_WIDTH;
        this.canvas.height = SCREEN_HEIGHT;
        this.ctx = this.canvas.getContext("2d");//コンテキスト
        
        this.canvas.addEventListener("mousedown", (e) => {//マウスダウン
            this.isMouseDown = true;
            player.px = e.x;
            player.py = e.y;
        });
        this.canvas.addEventListener("mouseup", (e) => {//マウスアップ
            this.isMouseDown = false;
        });
        this.canvas.addEventListener("mousemove", (e) => {//マウス移動
            if(!this.isMouseDown)return;
            player.x += e.x - player.px;
            player.y += e.y - player.py;
            player.px = e.x;
            player.py = e.y;
        });
        requestAnimationFrame(()=>{this.update();});//フレーム処理のお知らせを送る
    }
    update(){//更新処理
        requestAnimationFrame(()=>{this.update();});//フレーム処理のお知らせを送る
        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);//画面をクリア(前の画面描画を削除)
        this.enterframe();//フレーム処理
        this.render();//描画処理
    }
    render(){//描画処理
        enemy.render();
        player.render();
        bullet.render();
    }
    enterframe(){//フレーム処理
        bullet.move();
        enemy.move();
        var r1 = bullet.width / 2;
        var r2 = enemy.width / 2;
        if(circleCollision(bullet.x + r1, bullet.y + r1, r1, enemy.x + r2, enemy.y + r2, r2)){
            enemy.y = SCREEN_HEIGHT;
            bullet.y = -100;
        }
    }
}
function drawRect(ctx, x, y, w, h){//四角を描く
    ctx.fillStyle = "white";
    ctx.fillRect(x, y, w, h);
}
function circleCollision(x1, y1, r1, x2, y2, r2){//当たり判定
    if((x1-x2) * (x1-x2) + (y1-y2) * (y1-y2) <= (r1+r2) * (r1+r2)){
        return true;
    }
    return false;
}
//開始
window.onload = function(){
    core = new Core();
    enemy = new Enemy(64, 64);
    player = new Player(64, 64);
    bullet = new Bullet(16, 16);
}

プログラムの説明

なんかjavascriptでもclassが使えるようになったということで練習がてら使ってみました(‘◇’)ゞ

キャラクターの部分はCharaというクラスから継承して少し楽してますね。また、ゲームの基幹的な部分もひとまとめにしてみました。

ゲームにするためには操作が必要なのでmousedown,  mouseup, mousemoveを使って操作できるようにしました。ただ、これはマウスでの操作にしか反応してくれません。スマホなどのタッチでの操作はまた別なんですよね(´Д｀)どっちもOKな入力イベントないのかなぁ。。

あと、関係ないけど、画面に表示されているキャラは四角なのに当たり判定は円っていうね。うん、円の当たり判定の方が書く量が少ないからこっちにしたんですよ。へへへ(´∀｀)

 

て、ことで更新処理さえあればゲームは作れるってことが証明されましたね(´∀｀)

ゲームエンジン作成は気が遠くなりそうですがいきなり完璧なゲームエンジンを作らなくてもゲームは出来るので少しずつ頑張ってやっていきたいと思います。では(‘ω’)ノ

次回：ゲームエンジン開発③「画像を表示する」