JS と Canvas で作るシューティングゲーム
-
Upload
sairoutine -
Category
Technology
-
view
795 -
download
1
Transcript of JS と Canvas で作るシューティングゲーム
![Page 1: JS と Canvas で作るシューティングゲーム](https://reader035.fdocument.pub/reader035/viewer/2022081421/58a6ffb51a28ab4c438b47ad/html5/thumbnails/1.jpg)
JS と Canvas で作るシューティングゲーム
![Page 2: JS と Canvas で作るシューティングゲーム](https://reader035.fdocument.pub/reader035/viewer/2022081421/58a6ffb51a28ab4c438b47ad/html5/thumbnails/2.jpg)
自己紹介• HN: さい• Twitter: @sairoutine
• Web アプリケーションエンジニア• 東方 Project が大好きです• JavaScript 1 年生
![Page 3: JS と Canvas で作るシューティングゲーム](https://reader035.fdocument.pub/reader035/viewer/2022081421/58a6ffb51a28ab4c438b47ad/html5/thumbnails/3.jpg)
シューティングゲームが作りたい
![Page 4: JS と Canvas で作るシューティングゲーム](https://reader035.fdocument.pub/reader035/viewer/2022081421/58a6ffb51a28ab4c438b47ad/html5/thumbnails/4.jpg)
Unity とか UnrealEngine とか使うと、最近は手軽に作ることができるらしいですね
![Page 5: JS と Canvas で作るシューティングゲーム](https://reader035.fdocument.pub/reader035/viewer/2022081421/58a6ffb51a28ab4c438b47ad/html5/thumbnails/5.jpg)
新しいことを覚えるのが面倒くさい
( 注 ) ソフトウェアエンジニアとして 相当死んでる発言です
![Page 6: JS と Canvas で作るシューティングゲーム](https://reader035.fdocument.pub/reader035/viewer/2022081421/58a6ffb51a28ab4c438b47ad/html5/thumbnails/6.jpg)
JavaScript でゲームが作れるらしいぞ!
![Page 7: JS と Canvas で作るシューティングゲーム](https://reader035.fdocument.pub/reader035/viewer/2022081421/58a6ffb51a28ab4c438b47ad/html5/thumbnails/7.jpg)
マジか!
![Page 8: JS と Canvas で作るシューティングゲーム](https://reader035.fdocument.pub/reader035/viewer/2022081421/58a6ffb51a28ab4c438b47ad/html5/thumbnails/8.jpg)
偉大なる先人https://github.com/takahirox/toho-like-js
![Page 9: JS と Canvas で作るシューティングゲーム](https://reader035.fdocument.pub/reader035/viewer/2022081421/58a6ffb51a28ab4c438b47ad/html5/thumbnails/9.jpg)
すげぇ!俺も作る!
![Page 10: JS と Canvas で作るシューティングゲーム](https://reader035.fdocument.pub/reader035/viewer/2022081421/58a6ffb51a28ab4c438b47ad/html5/thumbnails/10.jpg)
DEMO
![Page 11: JS と Canvas で作るシューティングゲーム](https://reader035.fdocument.pub/reader035/viewer/2022081421/58a6ffb51a28ab4c438b47ad/html5/thumbnails/11.jpg)
使ったツールBrowserifyGulp 画面
Canvas API
音/効果音Web Audio API
フレームワークなし!
![Page 12: JS と Canvas で作るシューティングゲーム](https://reader035.fdocument.pub/reader035/viewer/2022081421/58a6ffb51a28ab4c438b47ad/html5/thumbnails/12.jpg)
基本的な流れ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 で作るシューティングゲーム](https://reader035.fdocument.pub/reader035/viewer/2022081421/58a6ffb51a28ab4c438b47ad/html5/thumbnails/13.jpg)
シーンの流れ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 で作るシューティングゲーム](https://reader035.fdocument.pub/reader035/viewer/2022081421/58a6ffb51a28ab4c438b47ad/html5/thumbnails/14.jpg)
キーボード入力①// キー押下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 で作るシューティングゲーム](https://reader035.fdocument.pub/reader035/viewer/2022081421/58a6ffb51a28ab4c438b47ad/html5/thumbnails/15.jpg)
キーボード入力②// 指定のキーが押下状態か確認する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 で作るシューティングゲーム](https://reader035.fdocument.pub/reader035/viewer/2022081421/58a6ffb51a28ab4c438b47ad/html5/thumbnails/16.jpg)
当たり判定// オブジェクトとオブジェクトの衝突判定を行う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 で作るシューティングゲーム](https://reader035.fdocument.pub/reader035/viewer/2022081421/58a6ffb51a28ab4c438b47ad/html5/thumbnails/17.jpg)
敵/敵弾の動きを記述する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 で作るシューティングゲーム](https://reader035.fdocument.pub/reader035/viewer/2022081421/58a6ffb51a28ab4c438b47ad/html5/thumbnails/18.jpg)
角度と速度から移動先の (x, y) 座標を求める方法は、高校の教科書にお任せします!
![Page 19: JS と Canvas で作るシューティングゲーム](https://reader035.fdocument.pub/reader035/viewer/2022081421/58a6ffb51a28ab4c438b47ad/html5/thumbnails/19.jpg)
まとめ1/60 秒ごとに画面全部のオブジェクトの座標/オブジェクト同士の当たり判定を行ってるが、古い PC でも特に処理落ちの様子はなし→ Chrome の V8 エンジン優秀WebGL でより表現が広がるので次は試してみたい
![Page 20: JS と Canvas で作るシューティングゲーム](https://reader035.fdocument.pub/reader035/viewer/2022081421/58a6ffb51a28ab4c438b47ad/html5/thumbnails/20.jpg)
ありがとうございました!