Visa vinnare, infoga text

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.

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>

Utskriftsfunktionen ligger nog i simple.js

Har du den koden också?

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

Har du html-koden också?

CurtJ skrev:

Har du html-koden också?

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

Hur kör du koden då?

I kodlabbet

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

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.

<!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> 

Wow, tack snälla!

En dum fråga, vart är filen?

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

Tusen tack för hjälpen!!!

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?

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

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.

<!DOCTYPE html>
<html>
<head>
  <script src="https://koda.nu/simple.js"></script>
  <style>
    .message-container {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 10px 20px;
      background-color: rgba(255, 255, 255, 0.7);
      font-size: 24px;
      font-weight: bold;
      display: none; /* Starta med att dölja behållaren */
    }
  </style>
</head>
<body>
  <div class="message-container" id="messageContainer"></div>

  <script>
    // ... din befintliga kod ...

    function showWinnerMessage(message) {
      var messageContainer = document.getElementById('messageContainer');
      messageContainer.textContent = message;
      messageContainer.style.display = 'block'; // Visa behållaren

      // Dölj behållaren efter 2 sekunder
      setTimeout(function() {
        messageContainer.style.display = 'none'; // Dölj behållaren igen
      }, 2000);
    }

    // ... din befintliga kod ...
  </script>
</body>
</html>

för att visa meddelande kan du också

if (pointsR === 5) {
  showWinnerMessage('Röd spelare vann!');
} else if (pointsL === 5) {
  showWinnerMessage('Blå spelare vann!');
}