Javascript problem spelprogrammering.nu 2.9

Trädvy Permalänk
Medlem
Registrerad
Apr 2017

Javascript problem spelprogrammering.nu 2.9

Hejsan, jobbar med lite lätt javascript nu och har ett problem. Jag använder mig av en lärobok som heter spelprogrammering.nu och har fastnat på en uppgift (Uppgift 2.9, fånga cirkeln).
Uppgiften är följande: Rita en cirkel som hoppar iväg om användaren träffar den med muspekaren.
På koden nedan kan ni ser hur långt jag har kommit, men vet inte hur jag ska fortsätta för att få "bollen" att röra på sig.

<script src="http://spelprogrammering.nu/simple.js"> function start() { ball = {x: totalHeight/2 - 10, y: totalHeight/2 - 10, size: 20}; } function update() { clearScreen(); circle(ball.x, ball.y, ball.size, "black"); if (distance(ball.x, ball.y, mouse.x, mouse.y) < 20) {} } </script>

Hoppas ni kan hjälpa!
-Robin

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Nov 2011

@Rozznow: Spelar det någon roll vart cirkeln rör sig? (I.e. ska du kunna "putta cirkeln med musen" eller räcker det med att cirkeln hoppar iväg till en random punkt?)

Linux: the operating system with a CLUE; Command Line User Environment.

GNU/Linux

Trädvy Permalänk
Medlem
Registrerad
Apr 2017

@GLaDER: Det står bara att bollen ska hoppa iväg, alltså nöjer jag mig om den hamnar på en slumpad koordinat. Dock ifall du vet hur jag kan ändra numret på en variabel (t.ex. ball.x) skulle även den information vara till stor nytta.

Trädvy Permalänk
Entusiast
Testpilot
Plats
Chalmers
Registrerad
Aug 2011
Skrivet av Rozznow:

@GLaDER: Det står bara att bollen ska hoppa iväg, alltså nöjer jag mig om den hamnar på en slumpad koordinat. Dock ifall du vet hur jag kan ändra numret på en variabel (t.ex. ball.x) skulle även den information vara till stor nytta.

ball.x = 5;

assignar 5 till ball.x, alltså "du sätter propertyn x hos objektet ball till 5".

> let ball = { x: 0 }; > ball { x: 0 } > ball.x = 5; 5 > ball { x: 5 }

För att reagera på klick behöver du en event listener som lyssnar efter just eventet click:

function eventHandler(event) { // gör något // event kan användas för att accessa eventet: console.log(event.target); // loggar det element användaren klickade på (i detta fall someElement) } someElement.addEventListener("click", eventHandler);

Skrivet med hjälp av Better SweClockers

Trädvy Permalänk
Medlem
Plats
Finland
Registrerad
Maj 2004

Du kan inte ha JavaScript kod i en script-tag som har ett src-attribut. Du måste ha två olika script-taggar:

<script src="src-to-code"></script> <script> Din kod </script>

För att ändra på ball.x kan du ju bara skriva ball.x = <någonting>;

Alltid då man kodar lönar det sig att skriva ut meddelanden här och där då man försöker reda ut varför det inte fungerar. I JavaScript kan du använda alert("test") för att få upp en popup ruta, eller det trevligare console.log("test") för att skriva till konsolen. Konsolen får du vanligtvis upp med F12. Du kan även skriva variabler till konsolen, typ console.log(ball).

Trädvy Permalänk
Medlem
Registrerad
Apr 2017

@Tazavoo: Som sagt så jobbar jag med väldigt simpel kodning just nu. Det du säger om <script> stämmer säkert, men jag verkar inte vara i något behov av det just nu. Men det du skrev hjälpte, så jag tackar!

Trädvy Permalänk
Entusiast
Testpilot
Plats
Chalmers
Registrerad
Aug 2011
Skrivet av Rozznow:

function start() { ball = {x: totalHeight/2 - 10, y: totalHeight/2 - 10, size: 20}; } function update() { clearScreen(); circle(ball.x, ball.y, ball.size, "black"); if (distance(ball.x, ball.y, mouse.x, mouse.y) < 20) {} }

Hoppas ni kan hjälpa!
-Robin

Skrivet av Rozznow:

@Tazavoo: Som sagt så jobbar jag med väldigt simpel kodning just nu.

Ett bra knep du kommer tjäna på att ha med dig redan från början är att undvika magiska tal och att hålla din kod DRY. Du ska aldrig behöva ändra samma sak på flera ställen, utan bara på ett ställe, och arbiträra siffror som utgör konfigurationsparametrar ska aldrig placeras helt random mitt i koden. I ditt fall skulle det kunna innebära en förändring till följande:

const BALL_SIZE = 20; function start() { ball = {x: totalHeight/2 - (BALL_SIZE / 2), y: totalHeight/2 - (BALL_SIZE / 2), size: BALL_SIZE}; } function update() { clearScreen(); circle(ball.x, ball.y, ball.size, "black"); if (distance(ball.x, ball.y, mouse.x, mouse.y) < ball.size) {} }

Tillämpar du de principerna kommer du dels spara mycket tid och dels slippa stora mängder hårslitande frustration över buggar som verkar fullständigt obegripliga.

Skrivet med hjälp av Better SweClockers