393 lines
13 KiB
Vue
393 lines
13 KiB
Vue
<script setup lang="ts">
|
|
const router = useRouter();
|
|
</script>
|
|
|
|
<template>
|
|
<div class="background">
|
|
<div class="overlay-2">
|
|
<div class="erika-zone-2">
|
|
<img
|
|
@click="router.push({ path: '/lobby' })"
|
|
class="overlay-image"
|
|
src="https://static.wikia.nocookie.net/umineko/img/9/9d/PC_Erika.Casual.Sprite_36.png"
|
|
alt="pétasse"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="text-content">
|
|
<h1>Règles de Héron Realms</h1>
|
|
<section>
|
|
<p>
|
|
Héron Realms, c'est un jeu de
|
|
<span style="text-decoration: line-through">héron building</span>
|
|
deck-building.
|
|
</p>
|
|
<p>Tout le monde part d'un même deck de base.</p>
|
|
<p>Le but du jeu est de l'enrichir pour obtenir de quoi gagner.</p>
|
|
<p>
|
|
Et comme la violence est une solution universelle, ça se traduit en
|
|
battre ses adversaires.
|
|
</p>
|
|
<p>​</p>
|
|
<p>Et quoi de mieux pour faire ça que des cartes colorées?</p>
|
|
<div class="card-row">
|
|
<GameCard :cardId="6" :tilted="false"></GameCard>
|
|
<GameCard :cardId="19" :tilted="false"></GameCard>
|
|
<GameCard :cardId="36" :tilted="false"></GameCard>
|
|
<GameCard :cardId="46" :tilted="false"></GameCard>
|
|
</div>
|
|
<p>​</p>
|
|
<hr />
|
|
<p>​</p>
|
|
<h2>Objectif</h2>
|
|
<p>
|
|
L'unique objectif du jeu est d'être le dernier en lice. Pour y
|
|
arriver, il faut descendre les Points de Vie de vos adversaires à 0 en
|
|
partant de 50.
|
|
</p>
|
|
<p>
|
|
Le moyen principal d'y arriver, c'est de faire des
|
|
<span style="color: red">Dégats</span>
|
|
<img src="/img/damage.png" class="icon_img" draggable="false" />. Tout
|
|
le reste des mécaniques du jeu sont là pour vous faciliter la tâche,
|
|
ou pour mettre des bâtons dans les roues de vos adversaires.
|
|
</p>
|
|
<p>​</p>
|
|
<hr />
|
|
<h2>Deckbuilding</h2>
|
|
<p>
|
|
Comme c'est un jeu de "deckbuilding", on va expliquer ce qu'est le
|
|
"deck" et ce qui nous permet de le "build".
|
|
</p>
|
|
<div class="card-row">
|
|
<GameCard :cardId="undefined" :tilted="false"></GameCard>
|
|
</div>
|
|
<p>​</p>
|
|
<p>
|
|
Le deck d'un joueur est-ce qui constitue sa pioche, qui lui permettra
|
|
ensuite de constituer sa main (la main est préparée à la fin du tour
|
|
et permet de jouer le tour d'après).
|
|
</p>
|
|
<p>
|
|
Quand la pioche est vide, elle est recyclée à partir de sa défausse.
|
|
</p>
|
|
<p>
|
|
La défausse est ce qui contient les cartes déjà jouées. Mais aussi
|
|
celles qui sont achetées! Elle finit par être mélangée pour former la
|
|
nouvelle pioche.
|
|
</p>
|
|
<p>​</p>
|
|
<hr />
|
|
<h2>Deck de base</h2>
|
|
<p>Tout le monde commence avec 10 cartes divisées en 4 types:</p>
|
|
<ul>
|
|
<li>7x Or (1)</li>
|
|
<li>1x Or (2)</li>
|
|
<li>1x Dégats (1)</li>
|
|
<li>1x Dégats (2)</li>
|
|
</ul>
|
|
<div class="card-row">
|
|
<GameCard :cardId="56" :tilted="false"></GameCard>
|
|
<GameCard :cardId="59" :tilted="false"></GameCard>
|
|
<GameCard :cardId="58" :tilted="false"></GameCard>
|
|
<GameCard :cardId="57" :tilted="false"></GameCard>
|
|
</div>
|
|
<p>
|
|
La pioche est formée au hasard: on peut donc avoir une main de départ
|
|
avec 5 or et 2 dégats, ou 3 or et 4 dégats, ou 4 or et 3 dégats, etc.
|
|
</p>
|
|
<p>
|
|
A partir de sa main, on peut jouer des cartes. Ces cartes peuvent
|
|
déclencher des effets: on peut considérer qu'ils vont dans un "pool
|
|
commun", et qu'on peut les utiliser dans l'ordre qu'on souhaite. 1 de
|
|
dégats et 2 de dégats me donnent 3 ressources de dégats que je split
|
|
comme je veux ensuite. Pareil pour l'or et pour le soin, qui sont les
|
|
3 ressources principales du jeu.
|
|
</p>
|
|
<p>​</p>
|
|
<hr />
|
|
<h2>Types de cartes</h2>
|
|
<p>
|
|
Les cartes sont divisées en 3 catégories: objets, actions et
|
|
champions.
|
|
</p>
|
|
<div class="card-row">
|
|
<GameCard :cardId="56" :tilted="false"></GameCard>
|
|
<GameCard :cardId="52" :tilted="false"></GameCard>
|
|
<GameCard :cardId="43" :tilted="false"></GameCard>
|
|
</div>
|
|
<p>​</p>
|
|
<h3>Objets & actions</h3>
|
|
<div class="card-row">
|
|
<GameCard :cardId="56" :tilted="false"></GameCard>
|
|
<GameCard :cardId="52" :tilted="false"></GameCard>
|
|
</div>
|
|
<p>
|
|
Par simplicité, disons que les objets et les actions sont pareil: on
|
|
les joue, ils font un effet disponible durant le tour actuel, et ils
|
|
sont défaussés.
|
|
</p>
|
|
<h3>Champions (& gardes)</h3>
|
|
<div class="card-row">
|
|
<GameCard :cardId="43" :tilted="false"></GameCard>
|
|
</div>
|
|
<p>
|
|
Les champions sont un peu plus complexes: ils restent sur le terrain,
|
|
et on peut les utiliser à chaque tour (en les mobilisant).
|
|
</p>
|
|
<p>
|
|
Ils ont une défense
|
|
<img
|
|
src="/img/champion-shield.png"
|
|
style="height: 30px"
|
|
draggable="false"
|
|
/>
|
|
indiquée en bas à droite et ils ne sont assommés (défaussés) que si on
|
|
leur fait des dégats = défense.
|
|
</p>
|
|
<p>
|
|
Ces dégats doivent être faits d'un coup. Je ne peux pas faire un peu
|
|
de dégats pendant un tour, et un peu le tour d'après pour les tuer.
|
|
</p>
|
|
<div class="card-row">
|
|
<GameCard :cardId="49" :tilted="false"></GameCard>
|
|
</div>
|
|
<p>
|
|
Par ailleurs, certains champions sont des Gardes
|
|
<img
|
|
src="/img/champion-shield-guard.png"
|
|
style="height: 30px"
|
|
draggable="false"
|
|
/>
|
|
(ils ont un bouclier noir), ce qui veut dire qu'on est obligés de les
|
|
tuer pour faire des dégats à des champions non-gardes ou au joueur.
|
|
</p>
|
|
<p>
|
|
(J'en profite pour préciser qu'on peut en effet, sans garde, choisir
|
|
d'attaquer le joueur directement ou ses champions.) Incidentellement,
|
|
ça veut dire qu'avec seulement 2 de dégats, je ne peux rien faire à un
|
|
joueur avec un garde à 3 de défense.
|
|
</p>
|
|
<p>​</p>
|
|
<hr />
|
|
<h2>Building</h2>
|
|
<p>
|
|
Passons au "building": on peut acheter des cartes pour les ajouter à
|
|
notre défausse qui, si vous avez suivi, constituera la prochaine
|
|
pioche. Avec le jeu de base,
|
|
<span style="color: darkgoldenrod">l'or</span>
|
|
<img src="/img/gold.png" class="icon_img" draggable="false" /> sert
|
|
exclusivement à accomplir ce but: acheter des cartes.
|
|
</p>
|
|
<div class="card-row">
|
|
<GameCard :cardId="6" :tilted="false"></GameCard>
|
|
<GameCard :cardId="19" :tilted="false"></GameCard>
|
|
<GameCard :cardId="36" :tilted="false"></GameCard>
|
|
<GameCard :cardId="46" :tilted="false"></GameCard>
|
|
</div>
|
|
<p>
|
|
Un marché est mis à disposition de tous les joueurs, mettant à
|
|
disposition 5 cartes (pas ici parce que j'ai pas la place).
|
|
</p>
|
|
<p>
|
|
Ces cartes ont chacune un coût indiqué en haut à droite. Il faut au
|
|
moins autant d'or que ce qui est indiqué pour acheter une carte. Une
|
|
carte achetée laisse la place à une nouvelle carte directement, qu'on
|
|
peut décider d'acheter juste après (tant qu'on a l'argent).
|
|
</p>
|
|
<p>
|
|
Il ne nous reste plus qu'à comprendre ce que font les cartes du
|
|
marché, puisqu'elles sont plus complexes (et bien plus fortes) que
|
|
votre deck de base. Prenons des exemples!
|
|
</p>
|
|
<hr />
|
|
<h2>Couleurs</h2>
|
|
<p>
|
|
La première chose qui ne vous échappera pas, c'est qu'on a 4 couleurs
|
|
différentes pour les cartes.
|
|
</p>
|
|
<p>​</p>
|
|
<div class="card-row">
|
|
<GameCard :cardId="13" :tilted="false"></GameCard>
|
|
<GameCard :cardId="3" :tilted="false"></GameCard>
|
|
<GameCard :cardId="1" :tilted="false"></GameCard>
|
|
</div>
|
|
<p>​</p>
|
|
<p>
|
|
Les cartes <span style="color: darkgoldenrod">jaunes</span> sont les
|
|
cartes Empire.
|
|
</p>
|
|
<p>
|
|
Elles font beaucoup de soin, et activent souvent des effets de pioche.
|
|
</p>
|
|
<p>​</p>
|
|
<div class="card-row">
|
|
<GameCard :cardId="39" :tilted="false"></GameCard>
|
|
<GameCard :cardId="34" :tilted="false"></GameCard>
|
|
<GameCard :cardId="40" :tilted="false"></GameCard>
|
|
</div>
|
|
<p>​</p>
|
|
<p>
|
|
Les cartes <span style="color: red">rouges</span> sont les cartes
|
|
Necros.
|
|
</p>
|
|
<p>
|
|
Elles sont les seules à pouvoir sacrifier des cartes pour les sortir
|
|
de son deck de façon permanente.
|
|
</p>
|
|
<p>​</p>
|
|
<div class="card-row">
|
|
<GameCard :cardId="52" :tilted="false"></GameCard>
|
|
<GameCard :cardId="46" :tilted="false"></GameCard>
|
|
<GameCard :cardId="47" :tilted="false"></GameCard>
|
|
</div>
|
|
<p>​</p>
|
|
<p>
|
|
Les cartes <span style="color: darkgreen">vertes</span> sont les
|
|
cartes Sauvages.
|
|
</p>
|
|
<p>
|
|
Elles font beaucoup de dégats, et forcent vos adversaires à jouer
|
|
moins de cartes.
|
|
</p>
|
|
<p>​</p>
|
|
<div class="card-row">
|
|
<GameCard :cardId="24" :tilted="false"></GameCard>
|
|
<GameCard :cardId="25" :tilted="false"></GameCard>
|
|
<GameCard :cardId="19" :tilted="false"></GameCard>
|
|
</div>
|
|
<p>​</p>
|
|
<p>
|
|
Les cartes <span style="color: darkblue">bleues</span> sont les cartes
|
|
Guilde.
|
|
</p>
|
|
<p>
|
|
Elles donnent beaucoup d'or, assomment les champions adverses et
|
|
manipulent votre pioche.
|
|
</p>
|
|
<p>​</p>
|
|
<hr />
|
|
<h2>Déclencheurs</h2>
|
|
<p>
|
|
Les effets de cartes peuvent se déclencher pour 3 raisons différentes.
|
|
</p>
|
|
<div class="card-row">
|
|
<GameCard :cardId="14" :tilted="false"></GameCard>
|
|
</div>
|
|
<p>Sur cette carte, on peut voir les trois en même temps.</p>
|
|
<p>La 1ère ligne s'active tout le temps.</p>
|
|
<p>
|
|
La 2ème ligne est une capacité Allié: il faut une autre carte de la
|
|
même couleur en jeu pour pouvoir en profiter.
|
|
</p>
|
|
<p>
|
|
La 3ème ligne est un Effet Poubelle (différent du sacrifice des cartes
|
|
rouges): vous pouvez retirer cette carte de votre jeu pour bénéficier,
|
|
en plus des autres effets, de l'effet marqué. Mais la carte sera
|
|
défaussée à tout jamais.
|
|
</p>
|
|
<p>​</p>
|
|
<hr />
|
|
<h2>Effets</h2>
|
|
<p>Une variété d'effets peuvent être inclus dans les cartes.</p>
|
|
<p>
|
|
Il y en a plein et les expliquer ici serait relou, alors je vous
|
|
laisse poser la question en vocal si vous n'en comprenez pas un.
|
|
</p>
|
|
<p>​</p>
|
|
<hr />
|
|
<h2>Activer les cartes dans la version en ligne</h2>
|
|
<p>
|
|
Il suffit de cliquer sur la carte que vous voulez activer dans votre
|
|
main pour la "LOCK".
|
|
</p>
|
|
<p>
|
|
Une carte "LOCKED" est considérée en jeu, & peut activer des effets
|
|
Allié pour d'autres cartes, etc.
|
|
</p>
|
|
<p>
|
|
Si vous avez des choix à faire sur la carte, un menu apparaîtra pour
|
|
vous laisser choisir.
|
|
</p>
|
|
<p>
|
|
Pour faire des dommages, il y aura un bouton "Damage" sur vos ennemis.
|
|
Pareil sur leurs champions.
|
|
</p>
|
|
<p>
|
|
Quand vous avez un effet "Sacrifice", vous pouvez fouiller votre
|
|
défausse pour choisir la carte à sacrifier. Vous pouvez également
|
|
sacrifier une carte de la main qui n'est pas encore locked!
|
|
</p>
|
|
<h2>Zoomer sur les cartes</h2>
|
|
<p>Pour zoomer sur une carte, maintenez votre clic droit.</p>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.background {
|
|
background-color: #f0f0f0;
|
|
background-image: url("/img/bg-darkgrass.png");
|
|
background-size: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100vw;
|
|
}
|
|
|
|
.text-content {
|
|
background-color: rgba(255, 255, 255, 0.75);
|
|
padding: 1em;
|
|
border-radius: 1em;
|
|
max-width: 800px;
|
|
margin-top: 2em;
|
|
text-align: left;
|
|
|
|
h1 {
|
|
text-align: center;
|
|
font-size: 2em;
|
|
margin-bottom: 1.5em;
|
|
}
|
|
|
|
p {
|
|
margin: 1em 0;
|
|
font-size: 1.2em;
|
|
}
|
|
}
|
|
|
|
.card-row {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 1em;
|
|
}
|
|
|
|
.overlay-2 {
|
|
height: 00px;
|
|
width: 100%;
|
|
position: sticky;
|
|
z-index: 2;
|
|
top: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.erika-zone-2 {
|
|
position: absolute;
|
|
top: 300px;
|
|
display: flex;
|
|
justify-content: right;
|
|
z-index: 2;
|
|
height: 300px;
|
|
width: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.overlay-image {
|
|
position: sticky;
|
|
height: 100%;
|
|
cursor: pointer;
|
|
pointer-events: all;
|
|
}
|
|
</style>
|