Tegn og gæt med websockets og node.js

I denne øvelse skal vi forsøge at gøre vores template til et lille spil – nærmere bestemt tegnelegen “Tegn & Gæt”. Vi starter med en klient/server template, der kun akkurat kan det mest nødvendige.

Hent multiplayer server template her  

Fremgangsmåde trin for trin

Lad os først teste applikationen i en lokal browser.

Vi kan se at server konsollen registrerer at der kommer nye forbindelser og klienten forbinder

Lad os først sørge for at klienter får deres eget socket.id at vide, når de forbinder sig:

Send beskeden “yourId” fra serveren så snart en klient har forbundet:

socket.emit(‘yourId’, socket.id);

Modtag beskeden hos klienten og gem den i en variabel

 
socket.on('yourId', setId);
function setId(id){
    myId = id;
}
Lad os så sætte noget spilmekanik op på serveren. Vi vil lave et spil tegn og gæt.
Vi skal bruge minimum tre klienter, et array med ord, et antal sekunder hver tur skal tage,
og så skal vi holde styr på hvis tur det er til at tegne og hvis tur det er til at gætte
Vi kan dele opgaverne op som følger:

OPRET VARIABLE PÅ SERVEREN

let players = [];
let words = [‘ged’, ‘ko’, ‘hjerne’, ‘sylfide’];
const turnSeconds = 30;
const prepareSeconds = 10;
let whosTurn = 0;
const noOfPlayers = 3;

OPRET VARIABLE PÅ KLIENTEN

På klienten har vi først brug for at vide om spillet er gået i gang (og om vi er med)
Vi kunne vise et input felt til brugernavn og prøve at sende det for at se om serveren har plads til os
Senere skal vi vise spillere og deres point samt noget tid der tæller ned
til sidst skal vi også kunne vise enten det ord man skal tegne eller et felt til at indtaste gæt i
let myTurn, brugernavnInput, guessInput, scoreboard, timeCounter;
Lad os oprette felterne i setup(), fx:
usernameInput = createInput().attribute(‘placeholder’, ‘Skriv brugernavn og tryk enter’).changed(sendUsername);
Nu bliver der oprettet et felt – usernameInput – som kalder funktionen sendUsername, når brugeren ændrer i feltet og trykker ENTER – etc…

SEND BRUGERNAVN FRA KLIENT(ERNE)

Det næste vi skal gøre er at oprette en funktion på klienten der sender et brugernavn (og dermed forsøger at deltage i spillet):
function sendUsername(){
socket.emit(‘username’, usernameInput.value());
}

MODTAG BRUGERNAVNE PÅ SERVEREN

Serveren skal nu have en funktion der venter på brugernavne.
Hver gang der kommer et brugernavn skal den selvfølgelig
-tjekke om der er plads til flere spillere
-lægge spillerne til i spiller arrayet
-vi kan bygge arrayet sådan her:
players.push({
    id: socket.id,
    brugernavn: brugernavn,
    point: 0,
});
Derefter skal serveren
-tjekke om der er 3 spillere – altså nok til at starte et spil
-og hvis det er tilfældet sende et startsignal til spillerne

START SPIL FRA SERVEREN

Det første serveren skal gøre, er at sende et signal om at spillerne er klar
Vi kan oprette en funktion: playersReady(), som gør alt det der skal til for at begynde en nye runde:
-vælge en spiller der skal tegne og et ord der skal gættes
-sætte sekunderne til prepareSeconds
-vælge næste spiller ved at opskrive currentTurn, og nulstille den hvis den er lig noOfPlayers
-nulstille en timer, og starte en timer
-sætte currentWord – og slette det fra arrayet
-sende spillerarray med point til klienterne
-sende næste ord til den spiller som har currentTurn

MODTAG RUNDE PÅ KLIENTERNE

Nu skal klienterne så starte en runde.
De får altså beskeden playersReady, som indeholder alle de oplysninger de skal bruge
Undtagen sekunderne, men dem ordner vi lidt senere
Lad os starte med at gøre de nødvendige ting klar
Klienten sætter
-background til startfarven, så tidligere tegninger bliver ryddet
-myturn = false (så vi ikke risikerer en eller anden gammel variabel)
-visk pointtavlen ud (så den er klar til at blive udfyldt)
-gem gætteordet
-vis gættefeltet (skal alligevel gøres for alle, undtagen den der om lidt får besked om at tegne)
-opdatér scoreboard

MODTAG ORD FRA SERVEREN

Hvis det er denne klients tur til at tegne, sender vi beskeden yourTurn fra serveren med et tegneord.
Så skal klienten..
-åbne tegnefunktionen
-skjule gætte input
-vise tegneord

START TIMER PÅ SERVEREN

Hvert sekund sender serveren en besked med systemets tilstand og sekunder
Arrayet kan fx bygges sådan:
function tick() {
  if (state == 'prepare' && seconds <= 0) {
    state = 'playing';
    seconds = turnSeconds;
  }
  if (state == 'playing' && seconds <= 0) {
    playersReady();
  }
  let stateMessage = {
    state: state,
    seconds: seconds,
  }
  io.sockets.emit('gameControl', stateMessage);
  console.log(stateMessage);
  seconds--;
}

MODTAG TIDSTÆLLER PÅ KLIENTER

Nu modtager klienterne hvert sekund besked om at der spillet enten venterforberedes eller er i gang
De skal så..
-Sende gæt hvis der skal gættes (og state=’playing’)
-Sende tegning hvis der skal tegnes (og spillerens tur=true og state=’playing’)
-Vise forberedelsestid, hvis state=’prepare’
-Vise Sekunder hvis state=’playing’

MODTAG GÆT PÅ SERVEREN

Nu laver vi så funktionen på serveren der modtager gæt – hvis det rigtige ord er gættet, skal serveren..
-Uddele point
-Genstarte spil med ny runde
 
Nu skulle arkitekturen gerne være sådan, at serveren bare skal kalde playersReady, for at starte en ny runde. Så er det bare at tegne og gætte derud af (indtil der ikke er flere ord i words arrayet, så er det bare at kode videre og få spillet til at ligne noget man har lyst til at være med til i det hele taget).
 
Go fornøjelse
 
Færdigt projekt:

Leave a comment

Din e-mailadresse vil ikke blive publiceret. Krævede felter er markeret med *