Diskussion:HTML, CSS och Javascript

Ett spel med klickbara knappar

Om du vill bygga spel kan du pröva denna tutorial som startar här. Det kan vara möjligt att klippa in din egen gubbe i denna kod men det verkar svårt.

Det nya ritprogrammet

Funkar inte!

Uppgift

Ritprogrammet

Ta koden nedan och förbättra till ett fantastiskt ritprogram.

Det innebär att du lägger in fler färger, förklarande bokstäver och mousover-funktioner. Du kommer att kopiera från den befintliga koden och ändra vissa parametrar. När du gör detta kommer du att lära dig mer programmering.

Spara koden som en fil av typen .html.

Lämna in på Progress, F3.

Observera att denna kod inte fungerar riktigt i Safari. Använd Chrome.

Lista: (klicka expandera till höger)

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<canvas id="myCanvas" width="400" height="500"
style="border:1px solid #d3d3d3;">
Your browser does not support the canvas element.
</canvas>

<script src="http://spelprogrammering.nu/simple.js">

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

  var  x0 = 50;
    y0 = 30;
    bredd =40;
    hojd = 40;
    distance = 40;
    color = "green";
    radie = 10;
size = 22;

function myRectangle(x, y, w, l, color) {
ctx.fillStyle = color;
ctx.fillRect(x, y, w, l);
}

function myCircle(x, y, r, t, color) {
ctx.beginPath();
ctx.arc(x,y,r,t, 2.2*Math.PI);
ctx.fillStyle = color;
ctx.fill();
}

function myText(x, y, size, text, color)
{
  ctx.font = size + "pt Helvetica";
  ctx.fillStyle = color;
  ctx.fillText(text, x, y);
}

  function update()
   
{
  // rita de färgade rutorna
   this.myRectangle(x0, y0, bredd, hojd, "green"); 
   this.myRectangle(x0, y0 + distance, bredd, hojd, "blue");
   this.myText(x0-30, y0 + distance+25, 18, "b", "blue");
   this.myRectangle(x0, y0 + 2 * distance, bredd, hojd, "yellow");
   this.myRectangle(x0, y0 + 3 * distance, bredd, hojd, "pink");
  
  // rita med vald färg
  if(mouse.left) 
  {
    this.myCircle(mouse.x, mouse.y, radie, 2,color);
  }
  // sudda med vit färg genom högerklick

  if(mouse.right)
  {
    this.myCircle(mouse.x, mouse.y, radie, 2,"white");
  }
  // välj färg att rita med
    if ((mouse.x > x0) && (mouse.x < x0 + bredd) && (mouse.y > y0) 
        && (mouse.y < y0 + hojd))  { color = "green"; }
    if (keyboard.g)  { color = "yellow"; }
    if (keyboard.b)  { color = "blue"; }
  
  // Välj radie på cikeln du ritar med
    if (keyboard.one)  { radie = 2; }
    if (keyboard.two)  { radie = 4; }
    if (keyboard.three)  { radie = 8; }
}
</script>

</body>
</html>

Exempel

Liam i TE16A gjorde detta ritprogram. Det är mycket bra och förstås A.

Fler kodexempel

Här finns fler kodexempel som du kan ha nytta av i ditt ritprogram. Bland annat kod för tusentals färger:

Spelprogrammering.nu - Ritprogram

Advanced.js

Det verkar som att simple.js hämtar in ett script till, http://spelprogrammering.nu/advanced.js. Det vore bra om man kunde ta in den koden på ett överblickbart sätt i scriptet men det verker inte praktiskt möjligt.

HTML DOM Game Example

Det finns många exempel på KeyDown där man inte påverkar objekten på Canvasen utan "bara" skriver i en textruta eller skapar popup-fönster etc.

Exempelvis: DOM EventListener

Diverse Javascript

Javascript - Introduktion med inlärningsmål och bedömningskriterier

JS Introduction på W3Schools där du kan testa koden för att tända och släcka en glödlampa. Kopiera sedan koden till en textredigerare (Noterad) och spara som .html i en mapp på din dator. Högerklicka på de två bilderna på glödlampan (pic_bulbon.gif och pic_bulboff.gif). Nu kan du öppna filen från din dator och det funkar. nästa sak är att byta bilderna (lägg två nya bilder i mappen på din dator och ändra namnen i koden i html-filen).