Javascript

Bollarna

Övningsuppgift: Skapa en enkel animerad boll

Beskrivning Skapa en enkel animation där en boll rör sig horisontellt över skärmen. Detta kommer att hjälpa er att förstå hur man skapar animationer i webbläsare med hjälp av JavaScript.

Krav

Använd ett HTML canvas-element för att rita bollen. Bollen ska starta från vänster och röra sig mot höger. När bollen når slutet av skärmen ska den börja om från vänster. Steg-för-Steg Skapa en HTML-sida med ett canvas-element.

Använd JavaScript för att hitta ditt canvas och skapa en context (det är så du ritar i canvas). Rita en cirkel på canvas-en som representerar din boll. Använd requestAnimationFrame för att uppdatera bollens position och rita den igen i en animation. Exempelkod:

<!DOCTYPE html> <html> <head> <title>Enkel animerad boll</title> </head> <body>  <canvas id="myCanvas" width="800" height="400" style="border:3px solid #000;"></canvas> <script> // Hämtar canvas-elementet och dess grafiska kontext let canvas = document.getElementById("myCanvas"); let ctx = canvas.getContext("2d"); // Initialiserar startkoordinater och radie för bollen let x = 0; const y = 200; const radius = 20; // Funktion för att rita bollen function drawBall() { // Rensar hela canvasen för att förbereda för nästa bildruta ctx.clearRect(0, 0, canvas.width, canvas.height); // Börjar en ny ritningsväg ctx.beginPath(); // Ritar en cirkel (boll) ctx.arc(x, y, radius, 0, Math.PI*2); // Upplys mig ni som läst matte hur funkar detta? // Fyller cirkeln med färgen orange ctx.fillStyle = "#FF4500"; ctx.fill(); // Avslutar ritningsvägen ctx.closePath(); // Flyttar bollen 5 pixlar åt höger x += 5; // Om bollen går utanför canvasen, starta om den från vänster if (x > canvas.width + radius) { x = -radius; // vad betyder detta? drar den av radius från x eller tilldelas det inverterade värdet av radius till x? Diskussion i klassen } // Anropar drawBall igen för att uppdatera animationen requestAnimationFrame(drawBall); } // Startar animationen genom att anropa drawBall första gången drawBall(); </script> </body> </html>

Bollen ska studsa mot canvas:ens väggar.

Exempelkod
<!DOCTYPE html>
<html>
<head>
<title>Studsande Boll</title>
</head>
<body>

<canvas id="myCanvas" width="800" height="400" style="border:3px solid #000;"></canvas>

<script>
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");

let x = 50;
let y = 50;
const radius = 20;
let dx = 5; // Horisontell hastighet
let dy = 2; // Vertikal hastighet

function drawBall() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // Rensa canvas

// Rita bollen
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI*2);
ctx.fillStyle = "#FF4500";
ctx.fill();
ctx.closePath();

// Kolla om bollen når sidorna av skärmen och studsa
if (x + dx < radius || x + dx > canvas.width - radius) {
dx = -dx;
}

// Kolla om bollen når toppen eller botten av skärmen och studsa
if (y + dy < radius || y + dy > canvas.height - radius) {
dy = -dy;
}

x += dx;
y += dy;

requestAnimationFrame(drawBall); // Uppdatera animationen
}

drawBall(); // Starta animationen
</script>

</body>
</html>

Extra Utmanande Övningsuppgift: Två Studsande Bollar med Kollision

Lägg till en andra boll i din animation. De båda bollarna ska studsa mot väggarna, och även studsa mot varandra när de kolliderar.

Specifikation
Lägg till en andra boll som också rör sig och studsar.
Hantera kollisioner mellan de två bollarna så att de studsar mot varandra.

Ytterligare Steg
Skapa en andra boll med egen position och hastighet.
Lägg till kod för att detektera kollisioner mellan bollarna.
Uppdatera bollarnas hastigheter för att simulera en kollision.

Den här sidan designades av 21C: