Detaillierte Einführung in Codebeispiele für Ideen zur Produktion von HTML5-Minispielen-H5-Tutorial-php.cn

html5Detaillierte Erläuterung der Minispiel-Produktionsideen

Einführung

Leinwand erstellen

Spielschleife

Hallo Welt

Spieler erstellen

Tastatursteuerung

a: jQuery-Hotkeys verwenden

b: Spieler verschieben

Weitere Spielelemente hinzufügen

Kanonenkugeln

Feinde

Bilder verwenden

Kollisionserkennung

Geräusche

Einführung

Sie möchten HTML5 verwenden Leinwand Ein Spiel machen? Befolgen Sie dieses Tutorial und Sie sind in kürzester Zeit auf dem Weg.

Das Lesen dieses Tutorials erfordert mindestens Vertrautheit mit Javascript.

Sie können das Spiel zuerst spielen oder den Artikel direkt lesen und den Quellcode des Spiels herunterladen.

Leinwand erstellen

Bevor wir etwas zeichnen können, müssen wir eine Leinwand erstellen. Denn dies ist eine vollständige Anleitung und wir werden jQuery verwenden.

var CANVAS_WIDTH = 480;
var CANVAS_HEIGHT = 320;
var canvasElement = $("<canvas width=&#39;" + CANVAS_WIDTH + 
                      "&#39; height=&#39;" + CANVAS_HEIGHT + "&#39;></canvas>");
var canvas = canvasElement.get(0).getContext("2d");
canvasElement.appendTo(&#39;body&#39;);

Nach dem Login kopieren

Spielschleife

Um dem Spieler eine kohärente und flüssige SpielAnimation zu präsentieren , müssen wir die Leinwand häufig rendern, um das Auge des Spielers zu täuschen.

var FPS = 30;
setInterval(function() {
  update();
  draw();
}, 1000/FPS);

Nach dem Login kopieren

Jetzt ist uns die Implementierung von Update und Draw egal. Wichtig ist, dass wir wissen müssen, dass setInterval() regelmäßig Update und Draw ausführt

Hello world

Nach dem Login kopieren

Jetzt haben wir es eingerichtet. Wenn ein Schleifenregal bereit ist, ändern wir die Aktualisierungs- und Zeichenmethoden, um Text auf den Bildschirm zu schreiben.

function draw() {
  canvas.fillStyle = "#000"; // Set color to black
  canvas.fillText("Sup Bro!", 50, 50);
}

Nach dem Login kopieren

Expertenerinnerung: Führen Sie das Programm aus, wenn Sie Code geringfügig ändern, damit Sie den Programmfehler schneller finden können.

Standtext wird normal angezeigt. Da wir bereits eine Schleife haben, können wir den Text problemlos verschieben~~~

var textX = 50;
var textY = 50;
function update() {
  textX += 1;
  textY += 1;
}
function draw() {
  canvas.fillStyle = "#000";
  canvas.fillText("Sup Bro!", textX, textY);
}

Nach dem Login kopieren

Führen Sie das Programm aus. Wenn Sie ihm Schritt für Schritt folgen, können Sie sehen, wie sich der Text bewegt. Aber der Text vom letzten Mal ist immer noch auf dem Bildschirm, weil wir die Leinwand nicht gelöscht haben. Jetzt fügen wir der Zeichenmethode die Löschmethode hinzu.

function draw() {
  canvas.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
  canvas.fillStyle = "#000";
  canvas.fillText("Sup Bro!", textX, textY);
}

Nach dem Login kopieren

Jetzt können Sie sehen, wie sich der Text auf dem Bildschirm bewegt. Es ist ein echtes Spiel, nur ein halbfertiges Produkt.

Spieler erstellen

Erstellen Sie ein Objekt, das alle Informationen des Spielers enthält und über eine Zeichenmethode verfügen muss. Hier wird ein einfaches Objekt erstellt, das alle Spielerinformationen enthält.

var player = {
  color: "#00A",
  x: 220,
  y: 270,
  width: 32,
  height: 32,
  draw: function() {
    canvas.fillStyle = this.color;
    canvas.fillRect(this.x, this.y, this.width, this.height);
  }
};

Nach dem Login kopieren

Wir verwenden jetzt ein einfarbiges Rechteck, um den Spieler darzustellen. Wenn wir es dem Spiel hinzufügen, müssen wir die Leinwand freimachen und den Spieler zeichnen.

function draw() {
  canvas.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
  player.draw();
}

Nach dem Login kopieren

Tastatur Steuerelemente

Verwendung von jQuery-Hotkeys

Das jQuery-Hotkeys-Plugin kann die Kompatibilität mit verschiedenen Browsern bei der Handhabung des Tastaturverhaltens erleichtern. Damit sich Entwickler keine Gedanken über unterschiedliche Schlüsselcodes und Zeichencodes zwischen verschiedenen Browsern machen müssen, binden wir das -Ereignis wie folgt:

$(document).bind("keydown", "left", function() { ... });
移动player
function update() {
  if (keydown.left) {
    player.x -= 2;
  }
  if (keydown.right) {
    player.x += 2;
  }
}

Nach dem Login kopieren

Fühlt es sich an, als würde es sich nicht schnell genug bewegen? Erhöhen wir also seine Bewegungsgeschwindigkeit.

function update() {
  if (keydown.left) {
    player.x -= 5;
  }
  if (keydown.right) {
    player.x += 5;
  }
  player.x = player.x.clamp(0, CANVAS_WIDTH - player.width);
}

Nach dem Login kopieren

Wir können ganz einfach andere Elemente hinzufügen, wie zum Beispiel Kanonenkugeln:

function update() {
  if (keydown.space) {
    player.shoot();
  }
  if (keydown.left) {
    player.x -= 5;
  }
  if (keydown.right) {
    player.x += 5;
  }
  player.x = player.x.clamp(0, CANVAS_WIDTH - player.width);
}
player.shoot = function() {
  console.log("Pew pew");
  // :) Well at least adding the key binding was easy...
};

Nach dem Login kopieren

Weitere Spielelemente hinzufügen

Kanonenkugeln

Los geht's Um eine Kanonenkugel im wahrsten Sinne des Wortes hinzuzufügen, benötigen wir zunächst eine Sammlung, um sie zu speichern:

var playerBullets = [];

Nach dem Login kopieren

Dann benötigen wir einen Konstruktor, um die Kanonenkugel zu erstellen:

function Bullet(I) {
  I.active = true;
  I.xVelocity = 0;
  I.yVelocity = -I.speed;
  I.width = 3;
  I.height = 3;
  I.color = "#000";
  I.inBounds = function() {
    return I.x >= 0 && I.x <= CANVAS_WIDTH &&
      I.y >= 0 && I.y <= CANVAS_HEIGHT;
  };
  I.draw = function() {
    canvas.fillStyle = this.color;
    canvas.fillRect(this.x, this.y, this.width, this.height);
  };
  I.update = function() {
    I.x += I.xVelocity;
    I.y += I.yVelocity;
    I.active = I.active && I.inBounds();
  };
  return I;
}

Nach dem Login kopieren

Wenn der Spieler feuert, müssen wir der Sammlung Kanonenkugeln hinzufügen:

player.shoot = function() {
  var bulletPosition = this.midpoint();
  playerBullets.push(Bullet({
    speed: 5,
    x: bulletPosition.x,
    y: bulletPosition.y
  }));
};
player.midpoint = function() {
  return {
    x: this.x + this.width/2,
    y: this.y + this.height/2
  };
};

Nach dem Login kopieren

Ändern Sie die Aktualisierungs- und Zeichenmethoden, um das Abfeuern zu implementieren:

function update() {
  ...
  playerBullets.forEach(function(bullet) {
    bullet.update();
  });
  playerBullets = playerBullets.filter(function(bullet) {
    return bullet.active;
  });
}
function draw() {
  ...
  playerBullets.forEach(function(bullet) {
    bullet.draw();
  });
}

Nach dem Login kopieren

Feind

enemies = [];
function Enemy(I) {
  I = I || {};
  I.active = true;
  I.age = Math.floor(Math.random() * 128);
  I.color = "#A2B";
  I.x = CANVAS_WIDTH / 4 + Math.random() * CANVAS_WIDTH / 2;
  I.y = 0;
  I.xVelocity = 0
  I.yVelocity = 2;
  I.width = 32;
  I.height = 32;
  I.inBounds = function() {
    return I.x >= 0 && I.x <= CANVAS_WIDTH &&
      I.y >= 0 && I.y <= CANVAS_HEIGHT;
  };
  I.draw = function() {
    canvas.fillStyle = this.color;
    canvas.fillRect(this.x, this.y, this.width, this.height);
  };
  I.update = function() {
    I.x += I.xVelocity;
    I.y += I.yVelocity;
    I.xVelocity = 3 * Math.sin(I.age * Math.PI / 64);
    I.age++;
    I.active = I.active && I.inBounds();
  };
  return I;
};
function update() {
  ...
  enemies.forEach(function(enemy) {
    enemy.update();
  });
  enemies = enemies.filter(function(enemy) {
    return enemy.active;
  });
  if(Math.random() < 0.1) {
    enemies.push(Enemy());
  }
};
function draw() {
  ...
  enemies.forEach(function(enemy) {
    enemy.draw();
  });
}

Nach dem Login kopieren

Bilder verwenden

player.sprite = Sprite("player");
player.draw = function() {
  this.sprite.draw(canvas, this.x, this.y);
};
function Enemy(I) {
  ...
  I.sprite = Sprite("enemy");
  I.draw = function() {
    this.sprite.draw(canvas, this.x, this.y);
  };
  ...
}

Nach dem Login kopieren

Kollisionserkennung

function collides(a, b) {
  return a.x < b.x + b.width &&
         a.x + a.width > b.x &&
         a.y < b.y + b.height &&
         a.y + a.height > b.y;
}
function handleCollisions() {
  playerBullets.forEach(function(bullet) {
    enemies.forEach(function(enemy) {
      if (collides(bullet, enemy)) {
        enemy.explode();
        bullet.active = false;
      }
    });
  });
  enemies.forEach(function(enemy) {
    if (collides(enemy, player)) {
      enemy.explode();
      player.explode();
    }
  });
}
function update() {
  ...
  handleCollisions();
}
function Enemy(I) {
  ...
  I.explode = function() {
    this.active = false;
    // Extra Credit: Add an explosion graphic
  };
  return I;
};
player.explode = function() {
  this.active = false;
  // Extra Credit: Add an explosion graphic and then end the game
};

Nach dem Login kopieren

Ton hinzufügen

function Enemy(I) {
  ...
  I.explode = function() {
    this.active = false;
    // Extra Credit: Add an explosion graphic
  };
  return I;
};
player.explode = function() {
  this.active = false;
  // Extra Credit: Add an explosion graphic and then end the game
};

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in Codebeispiele für Ideen zur Produktion von HTML5-Minispielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!