Introduction détaillée aux exemples de code d'idées de production de mini-jeux HTML5-Tutoriel H5-php.cn

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

黄舟

Libérer： 2017-03-20 15:29:43

original

3467 Les gens l'ont consulté

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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!