Spelprogrammering.nu - Ritprogram: Skillnad mellan sidversioner

Från Wikiskola
Hoppa till navigering Hoppa till sök
Rad 22: Rad 22:


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


   var x0 = 150;
   var x0 = 150;
Rad 48: Rad 47:


   }
   }
</script>
 
</source>
</source>



Versionen från 16 februari 2014 kl. 16.07

Bygg ett ritprogram

Enkelt ritprogram

enkelt ritprogram från exemplen i kapitel 2.

Undersök hur du kan

  • byta färg att rita med genom att ändra i koden
  • ändra storlek på ritfläcken

Mer funktionellt ritprogram

Titta på mitt utvecklade ritprogram. Det finns i arkivs och heter: Ritprogram med flera färger (hemsida öppnas)
Programmet är inte klart men det visar på (halv)-färdiga lösningar som du kan bygga vidare på.
Utveckla det med fler färger och att man byter färg med en tangenttryckning.
Lägg till färgade boxar och text i en palett.
Byt färg om man pekar på en box.
  • Bygg vidare på ritprogrammet med paletter att klicka på, punktstorlek, mm.

Tips för tusentals färger

<source>

 var x0 = 150;
 	  y0 = 200;
 	radie = 20;
 bredd = 100;
 höjd = 200;
 
 function update()
 {
   
   clearScreen()  // ritar om allt nedanför
   rectangle(x0 - bredd /2, y0 - höjd / 2, 
             bredd, höjd, "pink");
   
   circle(x0, y0, radie +  2, "red");
   circle(x0, y0, radie, "green");
   
   //      x0 = x0 + 0.3;
   //   y0 = y0 + 0.3;
   
   //     radie = radie + 0.3;
   
   //   if (radie >= 40) {radie = 0};
 }

</source>

Ovan finns ett exempel på kod som ger tusentals färger med hjälp av variablerna r, g, b.

Om att hämta hem kod

På Mac hämtar du koden genom att klicka på Utvecklare och visa källa. Ett alternativ är att högerklicka på länken i arkivet och ladda ner sidan till din dator


Filen Advanced.js

här hittar du en del objekt som används i koden.

http://spelprogrammering.nu/advanced.js