Discussion :

[coachcharly]

Bonjour à tous,

Développeur en herbe je me suis lancé dans un petit projet personnel de création de jeux... en gros apprendre en s'amusant c'est ma devise

Pour en venir au cœur du problème, je suis en train de faire un snake en html5, javascript (avec des bouts de code, pris ici et la sur internet) et j'aimerai remplacer le premier carré (donc la tête du serpent) par une petite image de serpent et faire suivre cette tête par les carrés standard.
J'aimerai également remplacer les carrés qui me servent de nourriture par une petite pomme.

En gros j'aimerai savoir comment traiter l'importation d'image dans mon modeste programme

Merci d'avance pour votre aide.

je vous joins mon code

[MaitreKaio]

La nourriture du serpent est dessinée par la fonction rand_frog(). Le code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

ctx.strokeRect(x * 10+1, y * 10+1, 8, 8);

trace un rectangle de 8 par 8. Imaginons que disposes d'une image foodImg. Tu pourrais faire à la place du code ci-dessus:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

ctx.drawImage(x*10 + 1, y*10 + 1, 8 , 8)

De la même manière, tu as dans la fonction set_game_speed() la ligne suivante:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

ctx.fillRect(X * 10, Y * 10, 9, 9);

qu'il te faudra remplacer par l'image de ton choix.
Une remarque d'ordre général: bravo de t'intéresser à la programmation, mais le code que tu montres, et que tu as probablement récupéré quelque part est assez crade. Je te conseille de lire en parallèle un bon tutoriel sur JavaScript sinon tu risques de perdre tes petits et de prendre de mauvaises habitudes. Bon courage pour la suite !

[RomainVALERI]

+1 MaitreKaio

Juste une remarque : un petit problème de mélange JS-HTML par ici

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div id="msg"></div>
innerHTML = "Thank you for playing game.<br /> Your Score : <b>"+score+"</b><br /><br /><input type='button' value='Play Again' onclick='window.location.reload();' />";
<canvas id="playArea" width="450" height="300">Sorry your browser does not support HTML5</canvas> <!-- Dimensions du carré de jeu + affichage d'un message si le navigateur n'est pas comptatible -->

[coachcharly]

Merci MaitreKaio pour tous ces conseils cela marche à merveille j'ai enfin un serpent qui ressemble à un serpent (enfin presque) et qui mange autre chose qu'un carré

Quant a mon code s’il n'est pas très propre c'est plus lié a ce que j'expérimente dessus qu'au code original en lui même.
Comme l'a très justement fait remarquer RomainValeri j'ai fait une petite erreur en incluant du javascript dans du html, mais comme le dit ce vieil adage c'est en forgeant que l'on devient forgeron... N'est-ce pas ?

En faite j’essaye d'avoir une vu des scores en instantané directement quand le jeu et cours et non-devoir attendre de perdre pour avoir son score, et à ce titre je me livre à quelques expériences qui marche plus ou moins bien d'ailleurs ^^

En tout cas merci beaucoup de votre aide