Detaillierte Einführung in Codebeispiele für Ideen zur Produktion von HTML5-Minispielen

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;);

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);

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

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);
}

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);
}

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);
}

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);
  }
};

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();
}

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;
  }
}

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);
}

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...
};

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 = [];

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;
}

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
  };
};

Ä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();
  });
}

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();
  });
}

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);
  };
  ...
}

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
};

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
};

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!