mornaloce
Messages postés47Date d'inscriptionlundi 17 mars 2008StatutMembreDernière intervention21 mars 2014
-
10 août 2012 à 12:05
mornaloce
Messages postés47Date d'inscriptionlundi 17 mars 2008StatutMembreDernière intervention21 mars 2014
-
10 août 2012 à 13:30
Bonjour à tous.
J'espère être dans la bonne section, si ce n'est pas le cas veuillez m'en excuser.
Donc je lance ce post car j'ai un (même plusieurs) problème avec mon script. En fait je suis entrain d'essayer de faire un bomberman en html5 et JQuery. Mon premier problème est le suivant. J'ai pour l'instant un seul personnage à l'écran que j'arrive à déplacer dans la direction que je veux en utilisant les flèches directionnelles. Mon déplacement est effectué de cette manière : quand je clique sur une touche du clavier le personnage commence à se déplacer (via un setInterval) et quand je relâche la touche, si le personnage n'est pas arriver au milieux de la case vers laquelle il était entrain de se déplacer, je relance une boucle pour terminer le déplacement (toujours via setInetrval).
Seulement le truc c'est que quand je laisse ma touche appuyé pour déplacer le personnage il se déplace à une certaine vitesse mais dès que je relâche le bouton le déplacement s'accélère.
Voici mon code :
Script principal :
var player = new Character("bomberman.png", 1, 1, DIRECTION.DOWN);
map.addCharacter(player);
var weapons = new Array();
var timePress = 0;
window.onload = function() {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var moveCharac;
canvas.width = map.getWidth() * SIZE_TILE;
canvas.height = map.getHeight() * SIZE_TILE;
player.drawCharacter(context, DIRECTION.DOWN);
// Gestion du clavier
window.onkeydown = function(event) {
timePress++;
clearInterval(test);
test = setInterval(function() {
player.drawCharacter(context, player.direction);
}, 400);
// On récupère le code de la touche
var e = event || window.event;
var key = e.which || e.keyCode;
switch(key) {
case 38 : case 122 : case 119 : case 90 : case 87 : // Flèche haut, z, w, Z, W
moveCharac = setTimeout(function(){
player.move(DIRECTION.TOP, map);
player.drawCharacter(context, player.direction);
}, 500);
break;
case 40 : case 115 : case 83 : // Flèche bas, s, S
moveCharac = setTimeout(function(){
player.move(DIRECTION.DOWN, map);
player.drawCharacter(context, player.direction);
}, 500);
break;
case 37 : case 113 : case 97 : case 81 : case 65 : // Flèche gauche, q, a, Q, A
moveCharac = setTimeout(function(){
player.move(DIRECTION.LEFT, map);
player.drawCharacter(context, player.direction);
}, 500);
break;
case 39 : case 100 : case 68 : // Flèche droite, d, D
moveCharac = setTimeout(function(){
player.move(DIRECTION.RIGHT, map);
player.drawCharacter(context, player.direction);
}, 500);
break;
case 32 : //barre espace
var bomb = new Weapon("bomb.png", player.x, player.y);
weapons.push(bomb);
weapons[weapons.length -1].drawWeapon(context, player.direction);
break;
default :
return true;
}
return false;
}
// Gestion du clavier
window.onkeyup = function(event) {console.log(1);
clearInterval(test);
if(player.stateAnimation >= 0){ //fin du déplacement du personnage
test = setInterval(function() {
player.drawCharacter(context, player.direction);
}, 40);
}
else{ //changement de direction du personnage sans déplacement
if(timePress <= 7){ //si l'utilisateur à appuyer moins d'1 seconde (14 passages dans onkeydown) sur une touche
// On récupère le code de la touche
var e = event || window.event;
var key = e.which || e.keyCode;
clearTimeout(moveCharac);
switch(key) {
case 38 : case 122 : case 119 : case 90 : case 87 : // Flèche haut, z, w, Z, W
player.drawCharacter(context, DIRECTION.TOP);
break;
case 40 : case 115 : case 83 : // Flèche bas, s, S
player.drawCharacter(context, DIRECTION.DOWN);
break;
case 37 : case 113 : case 97 : case 81 : case 65 : // Flèche gauche, q, a, Q, A
player.drawCharacter(context, DIRECTION.LEFT);
break;
case 39 : case 100 : case 68 : // Flèche droite, d, D
player.drawCharacter(context, DIRECTION.RIGHT);
break;
}
}
timePress = 0;
}
}
}
Le deuxième problème se situe au niveaux de l'animation de la bombe. Quand un personnage pose une bombe je souhaite qu'il y ait une animation de "grossissement-rapetissement" avant qu'elle n'explose. Si je pose une bombe il n'y a pas de problème mais si par exemple j'en pose 2 l'une à la suite de l'autre, la seconde va arrêter l'animation de la première et faire la sienne 2 fois plus rapidement, puis quand elle aura explosé, la première va reprendre son animation à vitesse normal avant d'exploser à son tour.
Voici le code de ma bombe :
Weapon.prototype.drawWeapon = function(context, direction){
var sX = frame * 24;
var sY = 1;
switch(direction) {
case DIRECTION.DOWN :
this.y++;
break;
case DIRECTION.LEFT :
this.x--;
break;
case DIRECTION.RIGHT :
this.x++;
break;
case DIRECTION.TOP :
this.y--;
break;
}
if(map.collision(this.x, this.y)){
return false;
}
var dX = ((SIZE_TILE - BOMB_WIDTH) / 2) + (this.x * SIZE_TILE);
var dY = ((SIZE_TILE - BOMB_HEIGHT) / 2) + (this.y * SIZE_TILE);
var thisWeapon = this;
context.drawImage(this.image, sX, sY, BOMB_WIDTH, BOMB_HEIGHT, dX, dY, BOMB_WIDTH, BOMB_HEIGHT);
this.animate = setInterval(function() { //LE PROBLEME SE SITUE A CE NIVEAU IL ME SEMBLE
sX = frame * 24;
console.log(thisWeapon.y + " " + thisWeapon.x);
Map.tileset.drawTile(Map.terrain[thisWeapon.y][thisWeapon.x], context, thisWeapon.x * SIZE_TILE, thisWeapon.y * SIZE_TILE);
context.drawImage(thisWeapon.image, sX, sY, BOMB_WIDTH, BOMB_HEIGHT, dX, dY, BOMB_WIDTH, BOMB_HEIGHT);
var differenceFrame = oldFrame - frame;
if(frame >= DURATION_ANIMATION){
oldFrame = frame;
frame--;
}
else if(frame <= 0){
oldFrame = frame;
frame++;
}
else{
if(differenceFrame > 0){
frame--;
}
else{
frame++;
}
}
}, 120);
thisWeapon = this;
setTimeout(function(){
clearInterval(thisWeapon.animate);
thisWeapon.explosion();
}, 5000);
return true;
}
