Les Événements

Pour ajouter de l’interactivité, Odyc.js propose un système d’événements.
Ils permettent de déclencher des actions ou de modifier l’état du jeu.

---

Les évènements liés aux templates

🔎 Types d’événements

Il existe neuf types d’événements :

• onCollideStart — appelé quand le joueur entre en collision avec l’élément, déclenché avant dialog, sound et end
• onCollide — appelé quand le joueur entre en collision avec l’élément
• onEnterStart — appelé quand le joueur entre sur une case contenant l’élément, déclenché avant dialog, sound et end
• onEnter — appelé quand le joueur entre sur une case contenant l’élément
• onLeave — appelé quand le joueur quitte une case contenant l’élément
• onScreenEnter — appelé quand l’élément entre dans l’écran
• onScreenLeave — appelé quand l’élément sort de l’écran
• onTurn — appelé à la fin de chaque tour, après que le joueur a tenté de se déplacer
• onMessage - appelé via la méthode sendMessageToCells

createGame({
  templates: {
    x: {
      onCollideStart() {
        alert('début collision')
      },
      onCollide() {
        alert(1)
      },
      onEnterStart() {
        alert('début entrée')
      },
      onEnter() {
        alert(2)
      },
      onLeave() {
        alert(3)
      }
      onTurn(){
        alert(4)
      }
      onScreenEnter() {
        alert('hi')
      }
      onScreenLeave() {
        alert('bye')
      }
      onMessage() {
        alert('message')
      }
    }
  }
})

---

La cible de l’événement

Lorsqu’un événement est déclenché, l’objet concerné est passé en paramètre de la fonction. Cela vous permet de le modifier dynamiquement ou de le supprimer.

createGame({
	templates: {
		x: {
			onCollide(cible) {
				cible.remove()
			}
		}
	}
})

---

📋 Propriétés disponibles

Propriété / Méthode	Type	Description	Lecture seule
solid	boolean	Rend l’objet traversable ou non	Non
visible	boolean	Affiche ou masque l’objet	Non
sprite	number | string	Change l’apparence de l’objet	Non
sound	string| object	Change le son joué lors d’une interaction	Non
dialog	string | string[]	Modifie le texte affiché dans la boîte de dialogue	Non
end	string | string[]	Déclenche une fin de jeu personnalisée	Non
symbol	string	Le caractère représentant l’objet dans la map	Oui
position	[number, number]	Coordonnées [x, y] de l’objet sur la carte	Oui
isOnScreen	boolean	true si l’objet est à l’écran	Oui
remove	() => void	Supprime l’élément	—
moveTo	(x, y) => void	Déplace l’élément à la position passée en argument.	—

Exemple : changer une propriété

Imaginons un personnage qui dit “Bonjour” la première fois, puis “Re-bonjour” les fois suivantes :

createGame({
	templates: {
		x: {
			dialog: 'Bonjour',
			onCollide(cible) {
				cible.dialog = 'Re-bonjour'
			}
		}
	}
})

Supprimer une case

Pour supprimer les propriétés d’une case lorsqu’on la touche, utilisez la méthode remove() :

createGame({
	templates: {
		x: {
			onCollide(cible) {
				cible.remove()
			}
		}
	}
})

Déplacer une case

Pour déplacer une case à une nouvelle position, utilisez moveTo(x, y) :

createGame({
	templates: {
		x: {
			onCollide(cible) {
				cible.moveTo(3, 2)
			}
		}
	}
})

onMessage

onMessage diffère légèrement des autres évènements dans le sens ou c’est vous qui le déclenché via game.sendMessageToCells. La méthode onMessage est appelée avec deux arguments: la cible de l’évènement et le message:

const game = createGame({
	templates: {
		x: {
			sprite: 1,
			onMessage(cible, message) {
				if (message === 'éteindre') cible.sprite = 0
				else if (message === 'allumer') cible.sprite = 1
			}
		}
	}
})

game.sendMessageToCells({ symbols: 'x' }, 'éteindre')

---

Les évènements liés au player

🎮 player.onInput

L’évènement onInput est déclenchée dans les cas suivants :

• lorsqu’une touche directionnelle est pressée (ou un glissement sur écran tactile),
• ou lorsqu’une touche d’action est utilisée (Enter, Espace, ou un tap sur mobile).

createGame({
	player: {
		onInput(input) {
			console.log(input)
		}
	}
})

La fonction reçoit un argument input qui peut être égal à UP, RIGHT, DOWN, LEFT ou ACTION.

player.onTurn

L’évènement onTurn est appelé à la fin de chaque tour, après que le joueur a tenté de se déplacer.

createGame({
	player: {
		sprite: '0',
		onTurn(player) {
			player.sprite = Math.floor(Math.random() * 9)
		}
	}
})

La fonction reçoit un argument player similaire à game.player