15 svar
55 visningar
friday-yeay 22
Postad: 8 nov 16:14

Visa vinnare, infoga text

Hej,  

Jag håller på med ett ping pong spel i Javascript. Problemet är att jag inte kan få upp vem som vann. Jag får fram texten en kort stund, men den försvinner innan man hunnit läsa. Hur löser man det?

Här är hur jag gjort:

// Om bollen inte nuddar vänstra spelaren, gå tillbaks till mitten
else if (ball.x > totalWidth-30)
{ ball.x = totalWidth/2-5
ball.y = totalHeight/2-5
ball.ySpeed = 0
ball.xSpeed = 0
text(50, 100, 50, 'Röd spelare vann!') }

CurtJ Online 694
Postad: 8 nov 22:27

Det är svårt att hjälpa dig om du inte visar hela programkoden. Utskriften sker förmodligen i funktionen text() men det är ingen standardfunktion så antingen har du skrivit den eller så tillhandahålls den av något externt bibliotek. Visa hela koden så kanske det är lättare att förklara.

friday-yeay 22
Postad: 8 nov 22:31
CurtJ skrev:

Det är svårt att hjälpa dig om du inte visar hela programkoden. Utskriften sker förmodligen i funktionen text() men det är ingen standardfunktion så antingen har du skrivit den eller så tillhandahålls den av något externt bibliotek. Visa hela koden så kanske det är lättare att förklara.

Jag förstår, här är hela koden:

 

script src="https://koda.nu/simple.js">


// PING PONG SPELET


// Spelarnas position på planen
var player1 = {x: 10, y: 200};
var player2 = {x: totalWidth-20, y: 200};



// Bollens hastighet
var ball = {x: totalWidth/2-5,
y: totalHeight/2-5,
xSpeed: 5,
ySpeed: 5};

// Poäng för röd och blå spelare
var pointsR = 0;
var pointsL = 0;




function update()
{
fill("black");

hideMouse();

rectangle(player1.x, player1.y, 10, 80, "red");
rectangle(player2.x, player2.y, 10, 80, "blue");

circle(ball.x, ball.y, 10, "white");

text(10, 20, 15, 'Poäng röd: ' + pointsL);
text(10, 40, 15, 'Poäng blå: ' + pointsR);



// Om bollen nuddar taket eller golvet, byt riktning
if (ball.y > totalHeight-10) { ball.ySpeed = -ball.ySpeed; }
if (ball.y < 0) { ball.ySpeed = -ball.ySpeed; }


// Om bollen nuddar vänstra spelaren, byt riktning
if (ball.x > totalWidth-30 &&
ball.y > player2.y &&
ball.y < player2.y + 80 )
{ ball.xSpeed = -ball.xSpeed;
pointsR += 1; }


// Om bollen inte nuddar vänstra spelaren, gå tillbaks till mitten
else if (ball.x > totalWidth-30)
{ ball.x = totalWidth/2-5
ball.y = totalHeight/2-5
ball.ySpeed = 0
ball.xSpeed = 0 }


// Om bollen nuddar högra spelaren, byt riktning
if (ball.x < 20 &&
ball.y > player1.y &&
ball.y < player1.y + 80 )
{ ball.xSpeed = -ball.xSpeed;
pointsL += 1; }


// Om bollen inte nuddar högra spelaren, gå tillbaks till mitten
else if (ball.x < 20)
{ ball.x = totalWidth/2-5
ball.y = totalHeight/2-5
ball.ySpeed = 0
ball.xSpeed = 0 }


// Vänstra spelarens förflyttning
if (keyboard.w) { player1.y -= 7; }
if (keyboard.s) { player1.y += 7; }


// Högra spelarens förflyttning
if (keyboard.up) { player2.y -= 7; }
if (keyboard.down) { player2.y += 7; }



// Bollens kommando att förflytta sig
ball.x += ball.xSpeed;
ball.y += ball.ySpeed;





// Tangenter startar om spelet
if (keyboard.space) { ball.xSpeed = -4, ball.ySpeed = -4 , pointsR = 0 , pointsL = 0 }
if (keyboard.enter) { ball.xSpeed = 4, ball.ySpeed = -4 , pointsR = 0 , pointsL = 0 }


}

</script>

CurtJ Online 694
Postad: 8 nov 22:34 Redigerad: 8 nov 22:36

Utskriftsfunktionen ligger nog i simple.js

Har du den koden också?

Edit: Jag hämtade den på nätet.

CurtJ Online 694
Postad: 8 nov 22:44

Har du html-koden också?

friday-yeay 22
Postad: 8 nov 22:45
CurtJ skrev:

Har du html-koden också?

Är väldigt ny på programmering, har inte den koden tyvärr.

CurtJ Online 694
Postad: 8 nov 22:46

Hur kör du koden då?

friday-yeay 22
Postad: 8 nov 22:46

I kodlabbet

CurtJ Online 694
Postad: 8 nov 23:28

Jag vet inte vad "kodlabbet" gör men om koden som körs är den du visar så är det något som ritar ut boll, spelare och text på din skärm. Det som ritar ut gör det i små steg. När bollen ritas ut så har den en hastighet i x och yled som du sätter men sen är det javascript-kod (i simple.js eller advanced.js) som ritar ut bollens rörelse i små steg så det ser ut som en kontinuerlig rörelse.

När det görs så anropas din update()-funktion då och då för att se om rörelsen ändrats och eftersom du skriver ut din text i en else-sats i den koden så tas den bort vid nästa anrop av update() som inte exekverar den else-satsen. Det är inte meningen att du ska skriva ut saker i en villkorssats men om du vill kunna skriva ut att röd spelare har vunnit kan du lämpligen sätta en logisk variabel i din else-sats och där du skriver ut Poäng röd och blå så kan du också skriva ut att röd spelare har vunnit genom att använda ett villkor som tittar på den logiska variabel som du sätter i din else-sats.

 

Ungefär såhär:

var redWins = false;
...
text(10,40,15, 'Poäng blå:'+ pointsR
if (redWins) {
    text (50,100, 50,'Röd spelare vann');
}
...


else if (ball.x > totalWidth-30) {
..
..
..
redWins = true;

Med risk för att jag inte har koll på "kodlabbet" men testa och återkom om det inte fungerar

CurtJ Online 694
Postad: 10 nov 17:31

Det här var ju kul så jag fixade till koden så den är körbar. Klicka på spoilern om du är intresserad. Den här kan du öppna i en browser så du behöver inte kodlabbet. Klicka på filen bara. Fråga om du undrar över något.

Visa spoiler

<!DOCTYPE html>
<html>
<body>



</body>


<script src="https://koda.nu/simple.js"></script>

<script>

// PING PONG SPELET
var width = 600;
var height = 300;

// Spelarnas position på planen
var player1 = {x: 10, y: height/2-40};
var player2 = {x: width-20, y: height/2-40};



// Bollens hastighet
var ball = {x: width/2,
y: height/2,
xSpeed: 0,
ySpeed: 0};

// Poäng för röd och blå spelare
var pointsR = 0;
var pointsL = 0;

var redWins = false;
var blueWins = false; 


function update()
{
fill("black");
totalWidth = width;
totalHeight = height;

hideMouse();

line(2,2,totalWidth-2,2, 2,"white");
line(totalWidth-2,2,totalWidth-2,totalHeight-2, 2,"white");
line(totalWidth-2,totalHeight-2,2,totalHeight-2, 2,"white");
line(2,totalHeight-2,2,2, 2,"white");
rectangle(player1.x, player1.y, 10, 80, "red");
rectangle(player2.x, player2.y, 10, 80, "blue");

circle(ball.x, ball.y, 10, "white");

text(10, 20, 15, 'Poäng röd: ' + pointsL);
text(10, 40, 15, 'Poäng blå: ' + pointsR);

if (redWins) {
	text(totalWidth/2+20, totalHeight/2, 15, 'Röd vann ' );
} else 

if (blueWins) {
	text(totalWidth/2+20, totalHeight/2, 15, 'Blå vann ' );
}



// Om bollen nuddar taket eller golvet, byt riktning
if (ball.x > totalWidth-10) { ball.xSpeed = -ball.xSpeed; }
if (ball.y > totalHeight-10) { ball.ySpeed = -ball.ySpeed; }
else if (ball.y < 0) { ball.ySpeed = -ball.ySpeed; }


// Om bollen nuddar högra spelaren, byt riktning
if (ball.x > totalWidth-30 &&
ball.y > player2.y &&
ball.y < player2.y + 80 )
{ ball.xSpeed = -ball.xSpeed;
	pointsR += 1; 
}


// Om bollen går förbi högra spelaren, avsluta och gå tillbaks till mitten
else if (ball.x > totalWidth-30)
{ ball.x = totalWidth/2-5
	ball.y = totalHeight/2-5
	ball.ySpeed = 0
	ball.xSpeed = 0 
	redWins = true
}


// Om bollen nuddar vänstra spelaren, byt riktning
else if (ball.x < 20 &&
ball.y > player1.y &&
ball.y < player1.y + 80 )
{ 
	ball.xSpeed = -ball.xSpeed;
	pointsL += 1; 
}


// Om bollen går förbi vänstra spelaren, gå tillbaks till mitten
else if (ball.x < 20)
{ ball.x = totalWidth/2-5
ball.y = totalHeight/2-5
ball.ySpeed = 0
ball.xSpeed = 0 
blueWins = true}


// Vänstra spelarens förflyttning
if (keyboard.w) { player1.y -= 7; }
if (keyboard.s) { player1.y += 7; }


// Högra spelarens förflyttning
if (keyboard.up) { player2.y -= 7; }
if (keyboard.down) { player2.y += 7; }



// Bollens kommando att förflytta sig
ball.x += ball.xSpeed;
ball.y += ball.ySpeed;





// Tangenter startar om spelet
if (keyboard.space) { ball.xSpeed = -4, ball.ySpeed = -4 , pointsR = 0 , pointsL = 0, redWins = false, blueWins = false}
if (keyboard.enter) { ball.xSpeed = 4, ball.ySpeed = -4 , pointsR = 0 , pointsL = 0 , redWins = false, blueWins = false}


}

</script>

</html> 
friday-yeay 22
Postad: 10 nov 17:40

Wow, tack snälla!

En dum fråga, vart är filen?

CurtJ Online 694
Postad: 10 nov 17:55

Klicka på spoiler och kopiera innehållet till en fil som du kan kalla a.html. Spara den och klicka på den så öppnas den i en browser

friday-yeay 22
Postad: 10 nov 18:02

Tusen tack för hjälpen!!!

friday-yeay 22
Postad: 10 nov 18:03

Ytterligare en förbättring jag har försökt göra men inte riktigt lyckats med är att få spelarna att fastna när de nuddar taket eller golvet. Hur skulle man kunna lösa det?

CurtJ Online 694
Postad: 10 nov 18:08

Du får göra ungefär som med bollen, kontrollera om spelarens symbol har passerat golv eller tak och då sätter du y-värdet till golvets yvärde (eller takets). Du måste då också ta hänsyn till spelarens utsträckning i y-led. För taket räcker du om spelarens y-värde < 0 men för golvet måste du kontrollera om spelarens yvärde+80 > totalHeight..

Prova och återkom om du undrar över något

CurtJ Online 694
Postad: 10 nov 18:14

Som en bisats om du undrar hur bakomliggande fungerar. I advanced.js anropas din update() 30 ggr per sekund och baserat på de värden du sätter där så ritas spelplanen ut. Man har alltså gjort en generell "spelmotor" som du fyller med innehåll i din update(). Det är ett vanligt sätt att göra ramverk, en generell bakända som tillhandahåller en runtime-miljö och olika funktioner som man behöver (som t ex text() och rectangle() i den här versionen) . När man använder den så har man ett antal definierade ingångar (som update() i det här fallet) som man kan använda för att göra sin egen tillämpning.

Svara Avbryt
Close