Introduction détaillée aux exemples de code d'idées de production de mini-jeux HTML5

html5Explication détaillée des idées de production de petits jeux

Introduction

Créer un canevas

Boucle de jeu

Bonjour tout le monde

Créer un joueur

Contrôle du clavier

a : Utiliser les raccourcis clavier jQuery

b : Déplacer le joueur

Ajouter plus d'éléments de jeu

Boulets de canon

Ennemis

Utiliser des images

Détection de collision

Sons

Introduction

Vous souhaitez utiliser HTML5 Toile Faire un jeu ? Suivez ce tutoriel et vous serez sur la bonne voie en un rien de temps.

La lecture de ce tutoriel nécessite au minimum une familiarité avec javascript.

Vous pouvez d'abord jouer au jeu ou lire l'article directement et télécharger le code source du jeu.

Créer une toile

Avant de dessiner quoi que ce soit, nous devons créer une toile. Parce qu'il s'agit d'un guide complet, et nous utiliserons jQuery.

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

Game Loop

Afin de présenter au joueur un jeu cohérent et fluideanimation , nous devons fréquemment restituer le canevas pour tromper l'œil du joueur.

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

Maintenant, nous ne nous soucions pas de l'implémentation de update et draw. L'important est que nous devons savoir que setInterval() exécutera périodiquement update et draw

Hello world

Maintenant que nous avons configuré une étagère en boucle prête, modifions les méthodes de mise à jour et de dessin pour écrire du texte à l'écran.

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

Rappel d'expert : exécutez le programme lorsque vous modifiez légèrement du code, afin de pouvoir trouver l'erreur du programme plus rapidement.

Le texte fixe s'affiche normalement. Parce que nous avons déjà une boucle, nous pouvons facilement faire bouger le texte~~~

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

Exécuter le programme. Si vous suivez étape par étape ce qui précède, vous pouvez voir le texte bouger. Mais le texte de la dernière fois est toujours à l'écran car nous n'avons pas effacé la toile. Nous ajoutons maintenant la méthode d'effacement à la méthode de dessin.

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

Vous pouvez maintenant voir le texte bouger sur l'écran. C'est un vrai jeu, juste un produit à moitié fini.

Créer un joueur

Créez un

objet qui contient toutes les informations du joueur, et il doit avoir une méthode de tirage au sort. Un objet simple est créé ici qui contient toutes les informations sur le joueur.

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

Nous utilisons maintenant un rectangle de couleur unie pour représenter le joueur. Lorsque nous l'ajoutons au jeu, nous devons effacer le canevas et dessiner le joueur.

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

Clavier. contrôles

Utilisation de jQuery Hotkeys

Le plugin jQuery Hotkeys peut faciliter la compatibilité avec différents navigateurs lors de la gestion du

comportement du clavier. Afin que les développeurs n'aient pas à se soucier des différents keyCode et charCode entre les différents navigateurs, nous lions l'événement comme ceci :

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

Avez-vous l'impression qu'il n'avance pas assez vite ? Alors augmentons sa vitesse de déplacement.

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

Nous pouvons facilement ajouter d'autres éléments, tels que des boulets de canon :

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

Ajouter plus d'éléments de jeu

Boulets de canon

C'est parti pour ajouter un boulet de canon au vrai sens du terme, d'abord, nous avons besoin d'une collection pour le stocker :

var playerBullets = [];

Ensuite, nous avons besoin d'un constructeur pour créer le boulet de canon :

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

Lorsque le joueur tire, nous devons ajouter des boulets de canon à la collection :

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

Modifier la mise à jour et dessiner les méthodes pour mettre en œuvre le tir :

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

Ennemi

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

Utiliser des images

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

Détection de collision

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

Ajouter du son

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!