ゲームエンジン開発② とにかくゲーム作って動かしてみる【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な入力イベントないのかなぁ。。

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

 

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

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

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

どのゲームで遊ぶ?

変な顔を一か所入れ替えて連鎖で全消しを狙うゲーム。全部消えたときはスッキリ快感です。
未完成の失敗作。なんで公開してるんだとか言わないでくれ。。
ひったくり犯を追いかけるランゲー。道に落ちている障害物には気を付けて。
ブロックに挟まれないように画面上部にあるゴール目指すゲーム。めちゃくちゃ難しいです。

コメント欄

※コメントはまだありません※

コメントを残す

メールアドレスが公開されることはありません。

ゲームタグ一覧

ゲーム開発書籍(amazon)

HTML5 ゲーム開発の教科書 スマホゲーム制作のための基礎講座
ゲームを作りながら楽しく学べるHTML5+CSS+JavaScriptプログラミング[改訂版] (Future Coders(NextPublishing))
改訂2版 はじめて学ぶ enchant.jsゲーム開発