Transcript
Page 1: JS と Canvas で作るシューティングゲーム

JS と Canvas で作るシューティングゲーム

Page 2: JS と Canvas で作るシューティングゲーム

自己紹介• HN: さい• Twitter: @sairoutine

• Web アプリケーションエンジニア• 東方 Project が大好きです• JavaScript 1 年生

Page 3: JS と Canvas で作るシューティングゲーム

シューティングゲームが作りたい

Page 4: JS と Canvas で作るシューティングゲーム

Unity とか UnrealEngine とか使うと、最近は手軽に作ることができるらしいですね

Page 5: JS と Canvas で作るシューティングゲーム

新しいことを覚えるのが面倒くさい

( 注 ) ソフトウェアエンジニアとして   相当死んでる発言です

Page 6: JS と Canvas で作るシューティングゲーム

JavaScript でゲームが作れるらしいぞ!

Page 7: JS と Canvas で作るシューティングゲーム

マジか!

Page 8: JS と Canvas で作るシューティングゲーム

偉大なる先人https://github.com/takahirox/toho-like-js

Page 9: JS と Canvas で作るシューティングゲーム

すげぇ!俺も作る!

Page 10: JS と Canvas で作るシューティングゲーム

DEMO

Page 11: JS と Canvas で作るシューティングゲーム

使ったツールBrowserifyGulp 画面

Canvas API

音/効果音Web Audio API

フレームワークなし!

Page 12: JS と Canvas で作るシューティングゲーム

基本的な流れ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));

};

Page 13: JS と Canvas で作るシューティングゲーム

シーンの流れ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);

};

Page 14: JS と Canvas で作るシューティングゲーム

キーボード入力①// キー押下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( ) ;

};

Page 15: JS と Canvas で作るシューティングゲーム

キーボード入力②// 指定のキーが押下状態か確認するGame.prototype.isKeyDown = function(flag) {

return this.keyflag & flag;};

// 指定のキーが押下されたか確認するGame.prototype.isKeyPush = function(flag) {

// 1 フレーム前に押下されておらず、現フレームで押下されてるなら truereturn !(this.before_keyflag & flag) && this.keyflag & flag;

};

Page 16: JS と Canvas で作るシューティングゲーム

当たり判定// オブジェクトとオブジェクトの衝突判定を行う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 ;};

Page 17: JS と Canvas で作るシューティングゲーム

敵/敵弾の動きを記述する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 } }, }, ]];

Page 18: JS と Canvas で作るシューティングゲーム

角度と速度から移動先の (x, y) 座標を求める方法は、高校の教科書にお任せします!

Page 19: JS と Canvas で作るシューティングゲーム

まとめ1/60 秒ごとに画面全部のオブジェクトの座標/オブジェクト同士の当たり判定を行ってるが、古い PC でも特に処理落ちの様子はなし→ Chrome の V8 エンジン優秀WebGL でより表現が広がるので次は試してみたい

Page 20: JS と Canvas で作るシューティングゲーム

ありがとうございました!