Bomberman clone, comment faire des bombes?

Je joue avec un clone de bomberman pour apprendre le développement de jeux.

Jusqu'à présent, j'ai fait des tuiles, des mouvements, la détection de collisions et la récupération d'objets. J'ai aussi un pseudo bombplace (juste des graphismes et des collisions, pas de vraie fonctionnalité).

J'ai fait un jsFiddle du jeu avec les fonctionnalités que j'ai actuellement. Le code dans le violon est cependant très moche. Faites défiler la carte et vous découvrirez comment je place des bombes.

Quoi qu'il en soit, ce que je voudrais faire, c'est un objet, qui a les informations générales sur les bombes comme:

function Bomb(){
  this.radius = player.bombRadius;
  this.placeBomb = function (){
    if(player.bombs != 0){
      // place bomb
    }
  }
  this.explosion = function (){
  // Explosion
  }
}

Je ne sais pas vraiment comment l'adapter au code. Chaque fois que je place une bombe, dois-je le faire var bomb = new Bomb();ou dois-je l'avoir constamment dans le script pour pouvoir y accéder.

Comment la bombe fait-elle des dégâts? Est-ce aussi simple que de faire X, Y dans toutes les directions jusqu'à ce que le rayon s'épuise ou que l'objet l'arrête? Puis-je utiliser quelque chose comme setTimeout (bomb.explosion, 3000) comme minuterie?

Toute aide est appréciée, que ce soit une simple explication de la théorie ou des exemples de code basés sur le violon. Lorsque j'ai essayé la méthode d'objet, cela casse le code.

Mise à jour: je place maintenant des bombes, et après un certain temps, supprimez-les en fonction de la position que j'ai placée. Mais si je place une bombe avant que la première bombe n'explose, elle n'en supprime qu'une seule (évidemment puisque bombX et bombY ont changé depuis que la première a été placée).

Maintenant, j'ai besoin de savoir comment résoudre ce problème, peut-être créer un nouveau tableau avec toutes les positions des bombes? Quelle est la meilleure façon de procéder?

Code actuel:

function placeBomb(){
    if(placebomb && player.bombs != 0){
        map[player.Y][player.X].object = 2;
        bombX = player.X; bombY = player.Y;
        placebomb = false;
        player.bombs--;
        setTimeout(explode, 3000);
    }
}
function explode(){
    alert('BOOM!');
    delete map[bombY][bombX].object;
    player.bombs++;
}

Cela n'a pas l'air si mal, mais vous avez besoin d'un meilleur contrôle du timing et de l'entrée. Comme la vitesse de déplacement dépend du réglage de répétition des touches sur la machine de l'utilisateur, ce n'est pas exactement optimal.

Au lieu de cela, vous devez suivre quelles touches sont actuellement maintenues enfoncées, vous pouvez le faire comme (en pseudocode):

keyisdown=false
keydown event{
    if(!keyisdown){
        //This is the 'real' keydown event, the one that only happens the moment the
        //key is pressed down. You may not need it, but this is how you construct it.
    }
    keyisdown=true
}

keyup event{
    keyisdown=false
}

Et puis dans votre fonction de mise à jour, vous déplacez le joueur si keyisdown, et éventuellement vous appliquez d'autres conditions, comme le joueur ne peut pas se déplacer s'il a déplacé moins d'un certain nombre de mises à jour il y a.

Gardez un compteur mis à jour ou une autre façon de garder une trace du temps afin que votre code sache toujours exactement à quel point il devrait progresser.

Da bomb
Personnellement, je resterais simple, vous n'avez pas vraiment besoin d'utiliser this, newet toutes les autres choses fantaisistes en JavaScript pour créer des objets utiles.

Vous pourriez faire quelque chose comme:

bombobject = {} //That is all it takes to make an object.
bombobject.blowtime = currenttime + delay
bombobject.position = mapobject
mapobject.bomb = bombobject

Ensuite, vous pouvez parcourir la carte à chaque mise à jour, vérifier s'il y a une bombe et s'il est temps de exploser, le cas échéant, et retirer l'objet bombe.

Suivi des bogues
Votre code laisse échapper des erreurs, elles sont assez simples, mais si vous ne les apprenez pas et ne les gérez pas, vous aurez des problèmes plus tard. Chaque navigateur moderne possède une console de développeur de clone Firebug. Ouvrez-le, regardez l'onglet de la console de script, voyez tout le texte rouge méchant et corrigez-le.

Edit: soucis de chronométrage
Juste pour mémoire, vous voudrez probablement quelque chose d'un peu plus avancé que setIntervalpour le timing, si vous êtes sérieux, vous devez vraiment ajuster votre code pour le décalage horaire. Voir ma toute première réponse Stack Overflow pour une description approximative du problème: https://stackoverflow.com/a/2549426/305545

Edit: setTimeOut version fixed
Comme vous utilisez les mêmes variables pour différentes bombes, vous allez les écraser chaque fois qu'une nouvelle bombe est placée. Vous pouvez utiliser une fermeture pour créer des variables individuelles pour chaque bombe, comme ceci:

function placeBomb(){
    if(placebomb && player.bombs != 0){
        map[player.Y][player.X].object = 2;
        var bombX = player.X;
        var bombY = player.Y;
        placebomb = false;
        player.bombs--;
        setTimeout(explode, 3000);
    }
    function explode(){
        alert('BOOM!');
        delete map[bombY][bombX].object;
        player.bombs++;
    }
}

Maintenant , les bombXet bombYvariables et la explodefonction sont des locaux à la fermeture créée par placeBombs, il est donc l'instance locale de explodequi est attaché au délai d' attente, et il lit les variables locales. Chaque fois que vous appelez, placeBombune nouvelle fermeture est créée.

Je n'aurais pas utilisé setTimeout pour cela, j'aurais compté les mises à jour, assurant ainsi un nombre fixe de mises à jour avant que la bombe ne souffle, mais je suppose que cela fonctionnera bien.

On dirait que vous avez un très bel avertissement, je voulais juste ajouter un code pratique pour les explosions.

            for (int i = 0; i < actor.blasradius; ++i)
        {
            tiles[actor.tileX - i][actor.tileY].explode(); //left
            tiles[actor.tileX + i][actor.tileY].explode(); //right
            tiles[actor.tileX][actor.tileY -i].explode(); //up
            tiles[actor.tileX][actor.tileY + i].explode(); //down
        }