[html5] zombies – intro
Posted by DarkoNeko sur mercredi 24 juillet 2013
Ce billet fait parti de la série « bidouillons avec HTML5« .
Billet en retard. Pour me changer les idées, j’ai commencé à coder un jeu simple. Il fait trop chaud pour coder correctement donc ça traîne, mais voici l’idée générale :
- Le but du jeu est de tuer tous les zombies de la carte sans se faire dévorer.
- Le jeu fonctionne au tour par tour. Chaque cycle (tour), le joueur et les zombies peuvent soit se déplacer d’une case, soit attaquer.
- Le joueur commence au bord gauche de la carte. Les zombies sont positionnés aléatoirement, en tenant compte d’une « zone de sécurité » pour éviter qu’un zombie démarre trop près du joueur.
- Les zombies n’attaquent qu’à bout portant (case adjacente au joueur).
- Le joueur possède une arme à feu (munitions illimitées) pouvant tirer à une distance X. Pour simplifier, l’arme fait pour l’instant mouche à tous les coups. À terme, je compte changer ça vers quelque chose de plus subtil, tel 90% max de faire mouche + un malus en fonction de la distance à la cible.
- Les zombies sont aveugles, fonctionnent à l’oreille. S’ils entendent le joueur (coup de feu ou déplacement), ils se dirigeront vers cette position.
exemple de carte. Point jaune = joueur, point rouge = zombie
La version actuelle du code est disponible ici.
Il manque encore la gestion de l’IA zombie, la détection du bruit, la gestion des tirs, et le test de condition de fin du jeu (zombie est au contact = perdu, 0 zombies restant = gagné). Je compte aussi ajouter 2/3 effets (pour les tirs notamment), mais ça demandera la gestion d’un 2nd calque mais j’ai atteins mon but (apprendre), donc j’arrête ce projet ici. D’autres suivrons !
Darkoneko's Weblog 
amariealice said
Hello !
J’ai une question d’ordre pratique : comment intègres-tu ton code à la page html ? Comme du javascript ? Et pour l’appel ?
Merci :-D (je crois que je fais certains blocages psychologiques ridicules avec le html5…)
DarkoNeko said
Heyo ! L’appel est presque à l’identique des billets précédents. L’index.html de mon projet est juste ça :
<!DOCTYPE html5><html>
<head>
<meta charset="UTF-8"></meta>
<link rel="stylesheet" href="index.css"></link>
</head>
<body>
<canvas id ="canv" width="1020" height="620" style=""></canvas>
</body>
</html>
<script language="javascript" type="text/javascript" src="index.js"></script>
amariealice said
Entre temps j’ai lu tes autres posts, mais merci quand même ! :)
DarkoNeko said
J’étais dans un coin avec (presque) pas le net, pas pu répondre plus tôt :)
amariealice said
Pas de soucis :-)