2019年1月3日

ゲームエンジン開発②　とにかくゲーム作って動かしてみる【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);
}