Implementácia ovládania do JavaScript hry

Zdravím, vopred chcem povedať, že ak je tento príspevok proti pravidlám, kľudne ho vymažte.

Ide o to, že pracujem na semestrálnej práci - Javascriptovej hre, a mám problém. Nakoľko ide o prácu do školy, nechcel by som zdieľať celý kód, snáď ma chápete (aj keď je to z obrovskej časti zatiaľ podľa tutoriálu).

Hra je v štádiu, že scéna sa hýbe (ide o endless runner hru), pozadia sa pohybujú, a postava beží. Problém je, že nedokážem implementovať ovládanie (napríklad výskok postavy po stlačení space bar-u), a browser mi nehádže žiadne chybové hlášky.

Je tu nejaký JavaScript guru, ktorý by bol ochotný povenovať sa mi cez súkromné správy?

Ďakujem za ochotu.

S-player

Tak prvou otázkou je či sa vôbec volá nejaká funkcia po stlačený space baru inač povedané: máš tam nejaký listener? Vyvoláva sa?

// Z tejto časti sem snaď môžeš postnúť kód.

Tak vychádzam z tutoriálu, ktorý má ale iba jeden diel, a teda ovládacie prvky, ani nič podobné, nie sú k dispozícií.

Hráča mám zadefinovaného takto:

Kód: Vybrať všetko

function Player(x, y) {
    this.dy        = 0;
    this.gravity   = 1;
    this.speed     = 6;
    this.jumpDy    = -10;
    this.isJumping = false;
    this.width     = 60;
    this.height    = 96;
    this.sheet     = new SpriteSheet('imgs/normal_walk.png', this.width, this.height);
    this.walkAnim  = new Animation(this.sheet, 4, 0, 11);
    this.jumpAnim  = new Animation(this.sheet, 4, 3, 3);
    this.fallAnim  = new Animation(this.sheet, 4, 3, 3);
    this.anim      = this.walkAnim;
    Vector.call(this, x, y, 0, this.dy);
 
    var jumpCounter = 0;  // Maximalna dlzka drzania tlacidla skakania
  }
  Player.prototype = Object.create(Vector.prototype);

A ovládanie space-barom týmto spôsobom:

Kód: Vybrať všetko

var KEY_CODES = {
    32: 'space'
  };
  var KEY_STATUS = {};
  for (var code in KEY_CODES) {
    if (KEY_CODES.hasOwnProperty(code)) {
       KEY_STATUS[KEY_CODES[code]] = false;
    }
  }
  document.onkeydown = function(e) {
    var keyCode = (e.keyCode) ? e.keyCode : e.charCode;
    if (KEY_CODES[keyCode]) {
      e.preventDefault();
      KEY_STATUS[KEY_CODES[keyCode]] = true;
    }
  };
  document.onkeyup = function(e) {
    var keyCode = (e.keyCode) ? e.keyCode : e.charCode;
    if (KEY_CODES[keyCode]) {
      e.preventDefault();
      KEY_STATUS[KEY_CODES[keyCode]] = false;
    }
  };

Je mi jasné, že to asi nie je navzájom "prepojené", ak vieš, čo myslím, no neviem sa pohnúť ďalej.

Pred posledným riadkom v prvom CODE tagu vyššie (tj. pred riadkom "Player.prototype...", bolo pôvodne ešte:

Spoiler

this.update = function() {

// jump if not currently jumping or falling
if (KEY_STATUS.space && this.dy === 0 && !this.isJumping) {
this.isJumping = true;
this.dy = this.jumpDy;
jumpCounter = 12;
assetLoader.sounds.jump.play();
}

// jump higher if the space bar is continually pressed
if (KEY_STATUS.space && jumpCounter) {
this.dy = this.jumpDy;
}

jumpCounter = Math.max(jumpCounter-1, 0);

this.advance();

// add gravity
if (this.isFalling || this.isJumping) {
this.dy += this.gravity;
}

// change animation if falling
if (this.dy > 0) {
this.anim = this.fallAnim;
}
// change animation is jumping
else if (this.dy < 0) {
this.anim = this.jumpAnim;
}
else {
this.anim = this.walkAnim;
}

this.anim.update();
};

/**
* Draw the player at it's current position
*/
this.draw = function() {
this.anim.draw(this.x, this.y);
};

No to som odstránil, nakoľko mám za to že každý parameter nebol zatiaľ potrebný.

S-player

Funkcia update by mala byť v nejakom cykle prípadne sa vyvolávať rovno z listenera onkey (Neviem ako ti to funguje). Skús vyskúšať či sa vyvoláva a to tak ,že jednoducho donej vložíš console.log a sleduj output v konzole. Ak nič neuvidíš tak musíš hľadať problém tam kde po prvý krát voláš Player.update()

// Našiel som si tvoj zdroják na pastebin. V triede Player definuješ novú metódu update ,v ktorej aktualizuješ pohyb hráča a následne za tým túto metódu predefinovávaš s touto:

Kód: Vybrať všetko

   /**
     * Update the Sprite's position by the player's speed
     */
    this.update = function() {
      this.dx = -player.speed;
      this.advance();
    };

// Ako tak pozerám tak ty voláš len Player.anim.update() nie Player.update(). Skontroluj si to všetko...

Tak som sa popabral v kóde a konečne som k niečomu dospel. Vďaka ti S-Player za rady! Pomohol si.

Môžem sa vrhnúť na ďalšie veci.

Implementácia ovládania do JavaScript hry

Implementácia ovládania do JavaScript hry

Re: Implementácia ovládania do JavaScript hry

Re: Implementácia ovládania do JavaScript hry

Re: Implementácia ovládania do JavaScript hry

Re: Implementácia ovládania do JavaScript hry