jeux pacman
Bonjour,
Voila je rencontre un petit problème avec mon code.
J'ai créé un petit script qui me permet de me déplacer avec mon pacman. Mon problème est que si je cherche à changer de direction (sans heurter un mur) je dois marteler la touche qui me permet de changer de direction.
Une photo vous parlera d'avantage :
Ici par exemple je pourrais difficilement remonter directement.
Voila mon code entier (j'explique tout dans mon commentaire juste après) :
<script>
$(document).ready(function(){
var canvasWidth=570;
var canvasHeight=660;
var posX=0, posY=317;
// Chargement des images ------------------------------------------------------------------ //
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var laby = document.getElementById("labyrinthe");
var pacman = document.getElementById("pacman");
context.drawImage(laby, 0, 0);
context.drawImage(pacman, posX, posY);
// Déplacement ---------------------------------------------------------------------------//
// Touches déplacement------------------------------//
var Left = 37; /* LEFT */
var Right = 39; /* RIGHT */
var Up = 38; /* UP */
var Down = 40; /* DOWN */
// Var Déplacement -------------------------------//
var goRight = false;
var goDown=false;
var goLeft=false;
var goUp=false;
var input = 0
// Déplacement ------------------------//
$(window).keydown(function(event){
if (event.keyCode == Up) { // Monter
goUp = true;
goDown = false;
//goRight=false;
//goLeft=false;
}
if (event.keyCode == Down) { // Descendre
goUp = false;
goDown = true;
//goRight=false;
//goLeft=false;
}
if (event.keyCode == Left) { //Gauche
goLeft = true;
goRight = false;
//goDown = false;
//goUp=false;
}
if (event.keyCode == Right) { //Droite
goLeft = false;
goRight = true;
//goDown = false;
//goUp=false;
}
});
/*$(window).keyup(function(event){
if (event.keyCode == Up) {
goUp = false;
}
if (event.keyCode == Down) {
goDown = false;
}
if (event.keyCode == Left) {
goLeft = false;
}
if (event.keyCode == Right) {
goRight = false;
}
});*/
// FIN DU DEPLACEMENT --------------------------------------------------------------------------------//
// Calcul de la position ----------------------//
var calculPosition = setInterval( function(){
/* Calcul des nouvelles coordonées */
//while (input == 2) {
if ( verif_couleur( ) == false) {
/* goRight = false;
goDown=false;
goLeft=false;
goUp=false;*/
}
//}
if (goUp) {
posY -= 1;
}
if (goDown) {
posY += 1;
}
if (goLeft) {
posX -= 1;
}
if (goRight) {
posX += 1;
}
context.drawImage(laby, 0, 0);
context.drawImage(pacman, posX, posY);
}, 10);
// Vérification de la couleur ------------------------------------------------------------------//
function bas(){
imgdata = context.getImageData(posX-3, posY+34, 1, 1); // bas-gauche
imgdata2 = context.getImageData(posX+31, posY+34, 1, 1); // bas-droite
imgdata3 = context.getImageData(posX+5, posY+34, 1, 1);
imgdata4 = context.getImageData(posX+10, posY+34, 1, 1);
imgdata5 = context.getImageData(posX+15, posY+34, 1, 1);
imgdata6 = context.getImageData(posX+20, posY+34, 1, 1);
imgdata7 = context.getImageData(posX+25, posY+34, 1, 1);
imgdata8 = context.getImageData(posX+30, posY+34, 1, 1); // bas-milieu
if (imgdata.data[2]==123 /*|| imgdata.data[118]==230*/ || imgdata2.data[2]==123 || imgdata3.data[2]==123 || imgdata4.data[2]==123 || imgdata5.data[2]==123 || imgdata6.data[2]==123 || imgdata7.data[2]==123 || imgdata8.data[2]==123){
return false;
}
}
function haut(){
imgdata = context.getImageData(posX-3, posY-6, 1, 1); // haut-gauche
imgdata2 = context.getImageData(posX+31, posY-6, 1, 1); // haut-droite
imgdata3 = context.getImageData(posX+5, posY-6, 1, 1);
imgdata4 = context.getImageData(posX+10, posY-6, 1, 1);
imgdata5 = context.getImageData(posX+15, posY-6, 1, 1);
imgdata6 = context.getImageData(posX+20, posY-6, 1, 1);
imgdata7 = context.getImageData(posX+25, posY-6, 1, 1);
imgdata8 = context.getImageData(posX+30, posY-6, 1, 1); // haut-milieu
if (imgdata.data[2]==123 /*|| imgdata.data[118]==230*/ || imgdata2.data[2]==123 || imgdata3.data[2]==123 || imgdata4.data[2]==123 || imgdata5.data[2]==123 || imgdata6.data[2]==123 || imgdata7.data[2]==123 || imgdata8.data[2]==123){
return false;
}
}
function droite(){
imgdata = context.getImageData(posX+34, posY, 1, 1); // droite-haut
imgdata2 = context.getImageData(posX+34, posY+30, 1, 1); // droite-bas
imgdata3 = context.getImageData(posX+34, posY+5, 1, 1);
imgdata4 = context.getImageData(posX+34, posY+10, 1, 1);
imgdata5 = context.getImageData(posX+34, posY+15, 1, 1);
imgdata6 = context.getImageData(posX+34, posY+20, 1, 1);
imgdata7 = context.getImageData(posX+34, posY+25, 1, 1); // droite-milieu
if (imgdata.data[2]==123 /*|| imgdata.data[118]==230*/ || imgdata2.data[2]==123 || imgdata3.data[2]==123 || imgdata4.data[2]==123 || imgdata5.data[2]==123 || imgdata6.data[2]==123 || imgdata7.data[2]==123){
return false;
}
}
function gauche(){
imgdata = context.getImageData(posX-6, posY+30, 1, 1); // gauche-bas
imgdata2 = context.getImageData(posX-6, posY, 1, 1); // gauche-haut
imgdata3 = context.getImageData(posX-6, posY+5, 1, 1);
imgdata4 = context.getImageData(posX-6, posY+10, 1, 1);
imgdata5 = context.getImageData(posX-6, posY+15, 1, 1);
imgdata6 = context.getImageData(posX-6, posY+20, 1, 1);
imgdata7 = context.getImageData(posX-6, posY+25, 1, 1); // gauche-milieu
if (imgdata.data[2]==123 /*|| imgdata.data[118]==230*/ || imgdata2.data[2]==123 || imgdata3.data[2]==123 || imgdata4.data[2]==123 || imgdata5.data[2]==123 || imgdata6.data[2]==123 || imgdata7.data[2]==123){
return false;
}
}
function verif_couleur()
{
if(goRight)
{
if(droite() == false)
{
goRight = false;
}
if (posX==570){
posX=0;
}
}
if(goDown)
{
if(bas() == false)
{
goDown=false;
}
}
if(goLeft)
{
if(gauche() == false)
{
goLeft=false;
}
if (posX==-30){
posX=540;
}
}
if(goUp)
{
if(haut() == false)
{
goUp=false;
}
}
}
});
</script>
</head>
<body >
<div id="container">
<!--<img class="fantome" src="fantome-bleu.png">-->
<canvas id="myCanvas" width="570" height="660" style="border:1px solid #d3d3d3;">
<img id="pacman" src="pacman.png" style="width:30px; height:30px;">
<img id="labyrinthe" src="lab.png">
</canvas>
</div>Voila, si quelqu'un avait une solution svp
2 réponses
Euh "voila mes 1000 lignes de code, résolvez le problème", essaie de réduire un peu le problème à quelque chose de simple si tu souhaite que l'on t'aide. On ne va pas prendre une journée pour lire, comprendre le code et résoudre ton problème ^^
j'ai mis tout mon code car justement je ne sais pas d'où peut venir le problème :/
Enfin ce n'est pas exactement un problème, j'ai surtout besoin d'une astuce permettant de rendre le jeux plus "fluide" si on peut dire ca.
Le jeux fonctionne, mais comme je l'ai dit quand je change de direction (sans arriver contre un mur) j'ai beaucoup de mal.
Le pacman se déplace de cette facon :
$(window).keydown(function(event){
if (event.keyCode == Up) { // Monter
goUp = true;
goDown = false;
//goRight=false;
//goLeft=false;
}
....
});
var calculPosition = setInterval( function(){
if (goUp) {
posY -= 1;
}
context.drawImage(laby, 0, 0);
context.drawImage(pacman, posX, posY);
}, 10);Maintenant pour qu'il puisse se déplacer dans le labyrinthe j'utilise un getImageData qui va me renvoyer la couleur autour du personnage et si la couleur est bleu la direction dans laquel Pacman allait passe à False.
function bas(){
imgdata = context.getImageData(posX-3, posY+34, 1, 1); // point de vérification en bas-gauche
if (imgdata.data[2]==123){
return false;
}
}
function verif_couleur(){
if(goDown){
if(bas() == false){
goDown=false;
}
}
}Ici je n'ai mis qu'un imgdata, mais il y en a plusieurs par fonction.
Donc le problème serait que mon script est trop strict, pacman ne peut passer que s'il arrive au pixel exact lui permettant de changer de direction.
Peut-être que si je mémorisais la dernière touche enfoncé et que je simulais l'appui avec un setInterval je pourrais changer de direction sans marteler la touche. Mais je ne sais pas comment faire ca, et je ne suis même pas certain que ca fonctionnerait.
Voilà j'espere que cette fois c'est un peu mieux rédigé et compréhensible.