Javascript - 適切なOOP

Question

だから、私はJSのゲームのためのいくつかのコードを書いた。コード自体は機能しますが、適切なOOP形式ではありません。クラス "Enemy"では、 "Player"クラスから変数とメソッドを参照する必要があります。変数が参照される "Collision"メソッドを見てください。スクリプトの最後に、 "player"という新しいインスタンスの "player"からデータを取得することに注意してください。 OOPの場合、これらの2つのクラス間で情報を共有する方法は何ですか？

ありがとうございます！アルバロ・タウゾンが言及@

var Player = function() { 
 
    this.x = 15; 
 
    this.y = 15; 
 
}; 
 

 
Player.prototype.reset = function() { 
 
    this.x = 200; // reset to this 
 
    this.y = 320; // reset to this 
 
}; 
 

 
var Enemy = function() { 
 
    this.x = 25; 
 
    this.y = 30; 
 
}; 
 

 
Enemy.prototype.collision = function() { 
 
    if (player.x >= this.x - 35 & player.x <= this.x + 35) { // check column 
 
    if (player.y >= this.y - 30 & player.y <= this.y + 30) { // check row 
 
     player.reset(); // calls player method "reset" 
 
    } 
 
    } 
 
}; 
 

 
// Start Game 
 
setEnemies(); 
 
var player = new Player();

のjavascript機能で

Answer 1

はあなたの問題へarguments

ソリューションを取ることができますことをお勧めだろう、などの方法collision

にPlayerのインスタンスを渡すことができコード内にEnemyとPlayerという継承を使用するようになりました。その後、

また、あなたはおよそES6 classes、ビットプログラミングが簡単になりたを読むことができる、しかし、彼らはまだあなたがOOPを使用する場合は、それらだけで糖衣構文

Answer 2

作るプロトタイプ継承に依存している電子と同じかもしれませんこれはあなたを助けるでしょう。

アルバロ・タウゾンが

var Avatar = (function() { 
    function Avatar (x, y) { 
     this.x = x; 
     this.y = y; 
    } 
    Avatar.prototype.reset = function() { 
     return this; 
    }; 

    Avatar.prototype.collision = function(object) { 
     if (object.x >= this.x - 35 & object.x <= this.x + 35) { // check column 
     if (object.y >= this.y - 30 & object.y <= this.y + 30) { // check row 
      object.reset(); // calls object method "reset" 
     } 
     } 
    }; 

    return Avatar; 
}()); 

クラスPlayerとEnemy

を示唆した@として機能

function extend(current, base) { 
    for (var key in base) { 
     if (base.hasOwnProperty(key)) { 
      current[key] = base[key]; 
     } 
    } 
    current.prototype = Object.create(base.prototype); 
}; 

がGame

を作成し、クラス Avatarを作成して拡張するヘルパーを追加します。

var Game = (function() { 

    Game.prototype.player = new Player(15, 15); 
    Game.prototype.enemys = [ 
     new Enemy(25, 30), 
     new Enemy(10, 30), 
    ]; 

    function Game() { 
     // setup 
    } 

    Game.prototype.start = function() { 
     for (var i = 0; i < array.length; i++){ 
      var enemy = this.enemys[i]; 
      this.player.collision(enemy); 
     } 
     return this; 
    }; 


    return Game; 
}()); 

使用：それはあなたがオブジェクトのグループ持って

仕組み

var game = new Game(); 
game.start(); 

- 敵とオブジェクト - プレーヤーを、それらのすべてが互いの間の衝突を計算する能力を持っています、共通の祖先ですから。あなたがゲームの開始を呼び出すたびに、衝突が計算されます。私は計算された衝突のためににsetIntervalを追加しますが、これはコードを複雑にします。

Answer 3

私はあなたのゲームをどのように実行したいのですが、一般的にはシングルトンクラスを作って別のオブジェクトで使うと信じているデータを共有することはできません。このようにして、エラー処理も改善できます。 jsでは、言うようなシングルトンクラスはありません。しかし、あなたはいつでも以下のような単純なjsモジュールを作ることができます：

var abc = (function(){ 
var abc = "someval"; //private variable 
var setAbc = function() { 
    //some logic 
} 
var getAbc = function() { 
    //some logic 
} 
var publicMethod = function { 
    //some logic 
} 

return { 
    setAbc: setAbc, 
    getAbc: getAbc, 
    publicMethod: publicMethod 
} 
})(); 

Answer 4

これは、プレイヤーを変更/リセットするための敵の仕事ではありません。ポジションがリセットされるのは、プレーヤーの営業でもありません。
これらのことは、メインゲームループのゲームで行う必要があります。collision - 方法では、この要素が渡された要素に当たるかどうかだけを判断する必要があります。ここ

//manages the bounding-Box/Collisions, 
//also pretty much everything related to (basic) rendering, like Assets/Image or DOM-Node, ... but since you've not included that in your code, I can't adapt it. 

class Element{ 
    constructor(config){ 
     let {x, y, width, height, hitBoxOffsetX, hitBoxOffsetY} = config || {}; 
     this.x = +x || 0; 
     this.y = +y || 0; 
     this._hitBoxOffsetX = +hitBoxOffsetX || 0; 
     this._hitBoxOffsetY = +hitBoxOffsetY || 0; 
     this.width = +width || 0; 
     this.height = +height || 0; 
    } 

    //bounding box 
    get left(){  return this.x + this._hitBoxOffsetX } 
    get right(){ return this.left + this.width  } 
    get top(){  return this.y + this._hitBoxOffsetY } 
    get bottom(){ return this.top - this.height  } 

    collision(other){ 
     return this.right > other.left && this.left < other.right && 
      this.top > other.bottom && this.bottom < other.top; 
    } 
} 

//everything that can somehow be hit, extends Element 
class Player extends Element { 
    constructor(){ 
     super({ 
      hitBoxOffsetX: -35, //hitBox starts 35px to the left of this.x 
      hitBoxOffsetY: -30, //hitBox starts 30px to the top of this.y 
      width: 70,   //width of the hitBox 
      height: 60   //height of the hitBox 
     }); 
    } 
} 

class Enemy extends Element { 
    constructor(){ 
     //since I have no idea about the dimensions of these Entities 
     super(); 
    } 
} 

//and walls, for example 
class Wall extends Element { 
    constructor(x, y, width, height){ 
     super({ 
      x, y, 
      width: +width || 20, 
      height: +height || 20 
     }); 
    } 
} 

そして私はあなたのゲームループがどのように見えるか分からないので、言及した衝突チェックとリセットがメインのゲームループで起こる、しかし、いくつかの擬似コード：

update(){ 
    requestAnimationFrame(update); 
    //move everything 

    //collision-checks 

    //if your player has some sort of weapon, maybe you want to first check 
    //wether it has "killed" some enemies, 
    //before checking wether an enemy has hit your player. 

    var hitEnemy = enemies.find(enemy => enemy.collision(player)); 
    //btw. Bullets would also be "enemies" 
    if(hitEnemy){ 
     //and you probably don't want to 
     player.x = currentLevel.playerResetPosition.x; 
     player.y = currentLevel.playerResetPosition.y; 
     //destroy hitEnemy 
     //maybe mark the player as blinking/non-hitable for a few seconds? 
    } 

    //render everything 
}