js と canvas で作るシューティングゲーム
Post on 17-Feb-2017
795 Views
Preview:
TRANSCRIPT
JS と Canvas で作るシューティングゲーム
自己紹介• HN: さい• Twitter: @sairoutine
• Web アプリケーションエンジニア• 東方 Project が大好きです• JavaScript 1 年生
シューティングゲームが作りたい
Unity とか UnrealEngine とか使うと、最近は手軽に作ることができるらしいですね
新しいことを覚えるのが面倒くさい
( 注 ) ソフトウェアエンジニアとして 相当死んでる発言です
JavaScript でゲームが作れるらしいぞ!
マジか!
偉大なる先人https://github.com/takahirox/toho-like-js
すげぇ!俺も作る!
DEMO
使ったツールBrowserifyGulp 画面
Canvas API
音/効果音Web Audio API
フレームワークなし!
基本的な流れGame.prototype.run = function(){
// シーン更新this.scenes[ this.state ].run();this.scenes[ this.state ].updateDisplay();
// SE を再生this.runPlaySound();
// 経過フレーム数更新this.frame_count++;
// 押下されたキーを保存しておくthis.before_keyflag = this.keyflag;
// 次の描画タイミングで再呼び出ししてループrequestAnimationFrame(this.run.bind(this));
};
シーンの流れStageScene.prototype.run = function(){
// 自機this.character.run();// 自機弾this.shotmanager.run();// 敵this.enemymanager.run();// 敵弾this.bulletmanager.run();// アイテムthis.itemmanager.run();// エフェクトthis.effectmanager.run();// ボムthis.bombmanager.run();// アイテムと自機の衝突判定this.itemmanager.checkCollisionWithCharacter(this.character);// 自機弾と敵の衝突判定this.shotmanager.checkCollisionWithEnemies(this.enemymanager);// 敵と自機の衝突判定this.enemymanager.checkCollisionWithCharacter(this.character);// 敵弾と自機の衝突判定this.bulletmanager.checkCollisionWithCharacter(this.character);
};
キーボード入力①// キー押下Game.prototype.handleKeyDown = function(e){
this.keyflag |= this._keyCodeToBitCode(e.keyCode);e.preventDefault( ) ;
};// キー押下解除Game.prototype.handleKeyUp = function(e){
this.keyflag &= ~this._keyCodeToBitCode(e.keyCode);e.preventDefault( ) ;
};
キーボード入力②// 指定のキーが押下状態か確認するGame.prototype.isKeyDown = function(flag) {
return this.keyflag & flag;};
// 指定のキーが押下されたか確認するGame.prototype.isKeyPush = function(flag) {
// 1 フレーム前に押下されておらず、現フレームで押下されてるなら truereturn !(this.before_keyflag & flag) && this.keyflag & flag;
};
当たり判定// オブジェクトとオブジェクトの衝突判定を行うObjectBase.prototype.checkCollision = function(obj) {
if( this.inCollisionArea(obj.getCollisionLeftX(), obj.getCollisionUpY()) ||this.inCollisionArea(obj.getCollisionLeftX(), obj.getCollisionBottomY()) ||this.inCollisionArea(obj.getCollisionRightX(), obj.getCollisionUpY()) ||this.inCollisionArea(obj.getCollisionRightX(), obj.getCollisionBottomY()) ||this.inCollisionArea(obj.x, obj.y) ) {return true ;}
return false ;};
敵/敵弾の動きを記述するvar __enemyBulletsParams = [ [ { 'v': { 'r': 5, 'theta': 165, 'w': 0, 'ra': 0.1, 'wa': 0, 'raa': -0.01, 'rrange': { 'min': 2 } }, }, { 'v': { 'r': 5, 'theta': 135, 'w': 0, 'ra': 0.1, 'wa': 0, 'raa': -0.01, 'rrange': { 'min': 2 } }, }, { 'v': { 'r': 5, 'theta': 105, 'w': 0, 'ra': 0.1, 'wa': 0, 'raa': -0.01, 'rrange': { 'min': 2 } }, }, { 'v': { 'r': 5, 'theta': 75, 'w': 0, 'ra': 0.1, 'wa': 0, 'raa': -0.01, 'rrange': { 'min': 2 } }, }, { 'v': { 'r': 5, 'theta': 45, 'w': 0, 'ra': 0.1, 'wa': 0, 'raa': -0.01, 'rrange': { 'min': 2 } }, }, { 'v': { 'r': 5, 'theta': 15, 'w': 0, 'ra': 0.1, 'wa': 0, 'raa': -0.01, 'rrange': { 'min': 2 } }, }, ]];
角度と速度から移動先の (x, y) 座標を求める方法は、高校の教科書にお任せします!
まとめ1/60 秒ごとに画面全部のオブジェクトの座標/オブジェクト同士の当たり判定を行ってるが、古い PC でも特に処理落ちの様子はなし→ Chrome の V8 エンジン優秀WebGL でより表現が広がるので次は試してみたい
ありがとうございました!
top related