Spelprogrammering.nu - Ritprogram: Skillnad mellan sidversioner

Från Wikiskola
Hoppa till navigering Hoppa till sök
(Skapade sidan med '== Bygg ett ritprogram == * Några spelutvecklingsideer ** pacman ** Bilar kör ikapp ** Gubbar som slåss ** Skjutspel med parabel ** Plocka helt enkelt fram de mest avancer...')
 
 
(36 mellanliggande sidversioner av samma användare visas inte)
Rad 1: Rad 1:
== Bygg ett ritprogram ==
== Bygg ett ritprogram ==
=== Enkelt ritprogram ===
: [http://www.spelprogrammering.nu/r2/source/ritprogram_1 enkelt ritprogram] från exemplen i kapitel 2.


* Några spelutvecklingsideer
Undersök hur du kan
** pacman
* byta färg att rita med genom att ändra i koden
** Bilar kör ikapp
* ändra storlek på ritfläcken
** Gubbar som slåss
** Skjutspel med parabel
** Plocka helt enkelt fram de mest avancerade övningarna från boken


* Andra tänkbara projekt
=== Mer funktionellt ritprogram ===
** Bygg vidare på ritprogrammet med paletter att klicka på, punktstorlek, mm.
 
** Kolla Zombierna och gör en liknande med andra bilder som slumpas fram med varierande riktningar, färger och former.
: Titta på mitt utvecklade ritprogram. Det finns i arkivs och heter: [http://spelprogrammering.nu/spela/4317413 Ritprogram med flera färger] (hemsida öppnas)
** Rita en logotyp för något du gillar och animera den.
: Programmet är inte klart men det visar på (halv)-färdiga lösningar som du kan bygga vidare på.
** Skapa ett matematiskt mönster. Jämför med Turtle-övningen.
:: 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.
 
{{uppgruta | Koda ditt eget ritprogram
 
Bygg vidare på ritprogrammet med fler färger, paletter att klicka på, varierar punktstorlek, andra punktformer, mm.  
 
Lämna in på förmpga '''F1''' eller '''F3''' vilket som passar dig bäst.
}}
 
==== Funktionerna som används nedan ====
 
: [http://spelprogrammering.nu/simple.js simple.js]
 
==== Koden till ritprogrammet ====
 
<pre>
 
<script src="http://spelprogrammering.nu/simple.js">
 
  var x0 = 50;
  y0 = 50;
  bredd =40;
  hojd = 40;
  distance = 60;
  color = "green";
  radie = 10;
 
  function update()
 
{
  // rita de färgade rutorna
  rectangle(x0, y0, bredd, hojd, "green");
  rectangle(x0, y0 + distance, bredd, hojd, "blue");
  text(x0-30, y0 + distance+25, 14, "b", "blue");
  rectangle(x0, y0 + 2 * distance, bredd, hojd, "yellow");
 
  // rita med vald färg
  if(mouse.left)
  {
    circle(mouse.x, mouse.y, radie, color);
  }
  // sudda med vit färg genom högerklick
 
  if(mouse.right)
  {
    circle(mouse.x, mouse.y, 10, "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>
 
</PRE>
 
=== En pulserande fläck ===
 
Kör koden nedan i labbet på spelprogrammering.nu.. Klipp in den i vänstra rutan istället för det exempel som står där.
 
Testa vad som händer om du tar bort de kommenterade partierna. T alltså bort // i början av raden så koden blir aktiv.
<pre>
<script src="http://spelprogrammering.nu/simple.js">
  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};
  }
</script>
</pre>
 
=== Tips för tusentals färger ===
 
Nedan finns ett exempel på kod som ger tusentals färger med hjälp av variablerna r, g, b.
 
<pre>
 
<script src="http://spelprogrammering.nu/simple.js">
// Scriptet ändrar färg på en triangel.
// Det kan användas till ritprogramet om man vill ha miljoner färger.
 
  var r = 20;
      g = 30;
      b = 10;
  function update()
  {
 
    // Klicka i höger fönstret för att det ska funka...
   
        if (keyboard.up)  { b = b + 20 ; }
   
    if (r >= 255) {r = 0 ;}
    if (g >= 255) {g = 0 ;}
   
    triangle(170, 10, 30, 100, 320, 100, mixColor(r, g, b));
   
  }
 
</script>
</pre>
 
=== Om att hämta hem kod ===
 
: På Mac hämtar du koden genom att klicka på Utvecklare och visa källa. Om du inte har utvecklare-fliken går du in på Safaris inställningar - Advanced och kryssari rutan längst ner.
 
: 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

Nuvarande version från 8 november 2016 kl. 11.23

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.
Uppgift
Koda ditt eget ritprogram

Bygg vidare på ritprogrammet med fler färger, paletter att klicka på, varierar punktstorlek, andra punktformer, mm.

Lämna in på förmpga F1 eller F3 vilket som passar dig bäst.


Funktionerna som används nedan

simple.js

Koden till ritprogrammet


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

  var 	x0 = 50;
  		y0 = 50;
  		bredd =40;
  		hojd = 40;
  		distance = 60;
  		color = "green";
  		radie = 10;

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

  if(mouse.right)
  {
    circle(mouse.x, mouse.y, 10, "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>

En pulserande fläck

Kör koden nedan i labbet på spelprogrammering.nu.. Klipp in den i vänstra rutan istället för det exempel som står där.

Testa vad som händer om du tar bort de kommenterade partierna. T alltså bort // i början av raden så koden blir aktiv.

<script src="http://spelprogrammering.nu/simple.js">
  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};
  }
</script>

Tips för tusentals färger

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


<script src="http://spelprogrammering.nu/simple.js">
// Scriptet ändrar färg på en triangel. 
// Det kan användas till ritprogramet om man vill ha miljoner färger.

  var r = 20;
      g = 30;
      b = 10;
  function update()
  {

    // Klicka i höger fönstret för att det ska funka...
    
        if (keyboard.up)  { b = b + 20 ; }
    
    if (r >= 255) {r = 0 ;}
    if (g >= 255) {g = 0 ;}
 
    
    triangle(170, 10, 30, 100, 320, 100, mixColor(r, g, b));
    
  }

</script>

Om att hämta hem kod

På Mac hämtar du koden genom att klicka på Utvecklare och visa källa. Om du inte har utvecklare-fliken går du in på Safaris inställningar - Advanced och kryssari rutan längst ner.
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