HTML, CSS och Javascript: Skillnad mellan sidversioner

Nuvarande version från 21 november 2019 kl. 22.07

Mål för undervisningen

Vi kommer att arbeta med Ci 1, dvs det centrala innehållet1:

Teknikutvecklingsprocessens alla delar från idé och modell, produkt eller tjänst till användning och återvinning med praktisk tillämpning av teknik och teknikutveckling inom ett eller flera teknikområden.

Ni kommer att kunna visa förmåga:

3. Förmåga att lösa tekniska problem.

6. Kunskaper om hur teknik har utvecklats och utvecklas i samspel med det omgivande samhället samt kunskaper om befintlig teknik och aktuell teknikutveckling.

Som intro kan man titta på några olika exempelsidor med enkel kodning samt några platser där man kan lära sig koda. Utforska gärna detta på egen hand.

Intro till Turtle Logo programmering

Scratch

Lär dig programmera genom att spela spel

Codecademy

Teori - programmering med en presentation.

Editors

Det finns en editor att ladda ner som heter TextWrangler och den fungerar bra men länkarna nedan går till moderna editorer. Testa dig fram så du hittar vad som passar dig bäst.

TryIt Editor klicka på den gröna Try it-knappen.

Atom är ett bra verktyg för att koda med färg.

TextWrangler Traditinellt verktyg för textredigering. (Mac)

Brackets

CodePen

[redigera]

W3schools website

Vi jobbar på W3School där det finns gott om övningar inom html, CSS, Javascript, databaser och mycket mer. Startsidan visar precis vad det handlar om.

Du börjar din övning med Html 5 tutorial.

W3Schools är faktiskt en norsk sida. Wikipedia:w3schools.

[redigera]

CSS intro i html-kursen

CSS tutorial - den riktiga CSS-kursen

[redigera]

Introexempel

Vi kommer att använda en speciell canvas-funktion som låter oss rita saker på en hemsida med hjälp av Javascript. Det blir tydligare och roligare så.

W3Schools TryIt Editor med canvas och boll.

Testa gärna html Canvas Fill() method

Förutom att laborera med CSS för canvas border har vi nu laborerat med koden i scriptet <script> </script>. Vi är nu redo för nästa steg där vi tittar närmare på Javascript.

Javascript

Skämt
The programmers wife told him to go to the store and get a loaf of bread,
and if they have eggs, to get a dozen.

The programmer returned with twelve loafs of bread.

Läs om hur script-taggen fungerar:

W3Schools Javascrpt - The Script Tag på W3Schools

W3School om Canvas - där man även använder lite Javascript för att rita. Läs igenom alla delarna i avsnittet canvas som du ser i innehållet i vänsterspalten.

Bra att känna till

Färger

Exempelkod

Klipp in den i ett try it yourselffönster. Koden ligger placerad i ett expanderbart fönster för att vi ska få överblick över denna sida.

Lista: (klicka expandera till höger)

<!DOCTYPE html>
<html>
<body>

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

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

// Cirkel //
ctx.beginPath();
ctx.arc(400,0,80,0,2*Math.PI);
ctx.fillStyle = "Yellow";
ctx.fill();

// Streck //
ctx.beginPath();
ctx.moveTo(140,80);
ctx.lineTo(300,10);
ctx.strokeStyle = "Yellow";
ctx.stroke();

// Rektangel //
ctx.fillStyle = "Brown";
ctx.fillRect(50,320, 300,180);

// Polygon tak //
ctx.strokeStyle = "Black";
ctx.fillStyle = "Grey";
ctx.beginPath();
ctx.moveTo(50,320);
ctx.lineTo(350,320);
ctx.lineTo(300,200);
ctx.lineTo(100,200);
ctx.closePath();
ctx.fill();
ctx.stroke();
</script>

</body>
</html>

Inlämningsuppgift

Uppgift

Rita en fin bild

Rita ett hus eller en fin bild med hjälp av den html och Javascript du lärt dig på W3Schools.

Du kombinerar alltså linjer, rektanglar, cirklar, färger, gradienter och text till en trevlig bild.

Sedan tar du en skärmdump på bilden och sparar för säkerhets skull.

Spara även koden i en .html-fil. Du kommer att kunna visa detta på din egen personliga hemsida lite senare i kursen.

Elevexempel

Dimitros hus

[redigera]

När du skapade din bild ovan fick du kopiera kodblock för varje byggelement. Koden blir lång och det kan bli fel. Det är därför lämpligt att samla ihop koden i en funktion som sedan åberopas från huvudprogrammet.

Läs detta

Du får bakgrundskunskaper och enkla övningar här:

JS Functions med exemplet Celsius to Fahrenheit (en bit ned på sidan) ser du hur du kan använda en funktion.

Skriv om formeln och gör funktionen toFahrenheit.

Lista: (klicka expandera till höger)

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>

<p>This example calls a function to convert from Celcius to Fahrenheit:</p>
<p id="demo"></p>

<script>
function toFahrenheit(c) {
    return (9/5) * c + 32;
 }
document.getElementById("demo").innerHTML = toFahrenheit(30);
</script>

</body>
</html>

Skapa en egen funktion som räknar ut något på samma sätt.

Lägg in funktioner i Husbilden

Du kan använda funktioner för att förenkla koden i din husbild. Du kan arbeta på detta sätt när du skapar nya bilder, exempelvis en figur (gubbe) till ett kommande spel.

Uppgift

Funktioner förenklar - skapa en gubbe

Använd dina kunskaper i att rita med rektanglar, cirklar och polygoner till att skapa n gubbe som du kan ha i nästkommande projekt. Gör en funktion vardera för strecket, rektangeln, cirkeln och polygonen.

Använd funktioner för att förenkla koden i din tidigare uppgift. Kodexempel finner du nedan.

Rita en gubbe till ett spel med hjälp av vår enkla grafik och funktioner.

Skapa funktionen myGubbe som är en funktion av funktioner.

Spara en fil gubbe.html och lämna in på Canvas uppgift Gubbe med funktioner.

Lista: (klicka expandera till höger)


<!DOCTYPE html>
<html>
<body>

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

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

function myRectangle(x, y, w, l, color) {
ctx.fillStyle = color;
ctx.fillRect(x, y, w, l);
}
this.myRectangle(10, 2, 50, 70, "Blue");
this.myRectangle(50, 20, 50, 70, "Green");
this.myRectangle(90, 200, 50, 70, "Red");
</script>

</body>
</html>

Använd variabler till funktionerna

I exemplet nedan har vi lagt till variabler för att styra var de röda rektanglarna hamnar.

Lista: (klicka expandera till höger)

Variabler och funktioner

<!DOCTYPE html>
<html>
<body>

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

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var startX = 40;
var startY = 40;
var distX = 80;
var distY = 110;
var bredd = 50;

function myRectangle(x, y, w, l, color) {
ctx.fillStyle = color;
ctx.fillRect(x, y, w, l);
}
this.myRectangle(startX, startY, bredd, 70, "Red");
this.myRectangle(startX + distX, startY, bredd, 70, "Red");
this.myRectangle(startX + 2*distX, startY, bredd, 70, "Red");

this.myRectangle(startX, startY + distY, bredd, 70, "Red");
this.myRectangle(startX + distX, startY + distY, bredd, 70, "Red");
this.myRectangle(startX + 2*distX, startY + distY, bredd, 70, "Red");
</script>

</body>
</html>

Om du kör fast

Här visar jag hur man skapar fler funktioner. Även med myPartCircle.

Lista: (klicka expandera till höger)

<!DOCTYPE html>
<html>
<body>

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

<script>

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

function myStreck(x1, y1, x2, y2, color) {
ctx.strokeStyle = color;
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();
}

function myTriangle(x1,y1,x2,y2,x3,y3, color) {
ctx.fillStyle = color;
ctx.strokeStyle = color;
ctx.beginPath();
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.lineTo(x3,y3);
ctx.closePath();
ctx.fill();
ctx.stroke();
}

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 myPartCircle(x, y, r, v1,v2, color) {
ctx.beginPath();
ctx.arc(x,y,r,v1,v2);
ctx.fillStyle = color;
ctx.fill();
}

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

this.myRectangle(10, 2, 50, 70, "Blue");
this.myRectangle(50, 20, 50, 70, "Green");
this.myRectangle(90, 200, 50, 70, "Red");
this.myCircle(230, 200, 35, 1, "Green");
this.myTriangle(222,222,111,111,211,11, "Purple")
this.myStreck(100, 300, 200, 50, "Orange")
this.myPartCircle(230, 300, 35, 1.2*Math.PI,1.8*Math.PI, "Brown");
</script>

</body>
</html>

Gubben som en funktion med funktioner

Om du har funktioner för cirklar, rektanglar, mm och kan bygga en gubbe genom att skriva this.myRectangle osv ett flertal gånger så kan du samla ihop dessa kommandon i en ny funktion för att rita gubben. Då kan du med en rad kod, this.myGubbe osv, placera ut flera gubbar på olika ställen och med olika färgeer, etc.

Lista: (klicka expandera till höger)

<!DOCTYPE html>
<html>
<body>

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

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
 var  	x0 = 150;
   	 	y0 = 30;

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

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

function myGubbe(x,y,w,l,r, color, color2) {
this.myRectangle(x, y, w, l, color);
this.myCircle(x, y, r, color2);
this.myCircle(x+50, y, r, color2);
this.myCircle(x+50, y+50, r, color2);
this.myCircle(x, y+50, r, color2);
}

this.myGubbe(x0, y0,50,50, 12,"red", "black");
this.myGubbe(x0+100, y0+50,50,50, 12,"Blue", "Purple");

</script>

</body>
</html>

En skalbar gubbe

Lista: (klicka expandera till höger)

<!DOCTYPE html>
<html>
<body>

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

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
 var  	x0 = 150;
   	 	y0 = 30;
        kroppBredd =80;
        kroppHojd =140;
        arm =125;
        armtjock=20;

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

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

function myGubbe(x,y,w,l,r, color, color2) {
this.myRectangle(x, y, w, l, color);
this.myRectangle(x+w, y-r, arm, armtjock, color2);
this.myCircle(x, y, r, color2);
this.myCircle(x+w, y, r, color2);
this.myCircle(x+w, y+l,r, color2);
this.myCircle(x, y+l, r, color2);
}

this.myGubbe(x0, y0,kroppBredd,kroppHojd, 12,"red", "black");


</script>

</body>
</html>

En enkel animering

Studera följande exempel för att lära dig animering, dvs att flytta något på skärmen. Den här koden är kanske inte lämplig för att integrera din gubbe.

Vi hittar enklare kod på JavaScript HTML DOM Animation och sidorna i det avsnittet.

Använd koden nedan och försök få den röda fyrkanten att åka i en fyrkant.

Lista: (klicka expandera till höger)

<!DOCTYPE html>
<html>
<style>
#container {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}
#animate {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: red;
}
</style>
<body>

<p>
<button onclick="myMove()">Click Me</button>
</p>

<div id ="container">
<div id ="animate"></div>
</div>

<script>
// Fram och tillbaks
function myMove() {
  var elem = document.getElementById("animate");
  var pos = 51;
  var dir = 0;
  var id = setInterval(frame, 5);
  function frame() {
    if (pos < 300 && dir == 0) {
      pos++;
      elem.style.top = pos + 'px';
      elem.style.left = pos + 'px';
      if (pos == 300){
 dir = 1;}
    } else if (pos > 50 && dir == 1) {
      pos--;
      elem.style.top = pos + 'px';
      elem.style.left = pos + 'px'; 
      if (pos == 50){ dir = 0;}
    }
  }
}
</script>

</body>
</html>

[redigera]

Vi ska följa en tutorial som heter HTML Game Tutorial, vilken består av tolv lektioner/avsnitt.

Här finns ett intro. Men häng inte kvar för länge. Gå vidare till canvas och sedan på avsnittet Components finns det mer att jobba med.

Du kommer in på en sida som heter Intro där det finns ett exemepl på ett helt spel för att du ska få en uppfattning om vad du kan göra. När du går vidare kommer du att få se enklare exempel där du bygger dina kunskaper från grunden.

Gå igenom hela tutorialen i lugn och ro. Det är inte nödvändigt (eller ens möjligt) att du förstår allt i koden men du kommer att lära dig mycket om hur du kan modifiera koden efter dina önskningar.

Efter ett tag kommer du att hitta på egna modifieringar och få idée till ditt eget spel. När du modifierat och skapat något eget utifrån kodexemplen kan du lämna in det som en .html-fil.

Nedan kommer finns det några exempel som visar hur du kan bygga vidare.

Alexanders exempelkod

Detta exempel visar hur man kan skapa två rektanglar. Ungefär samma exempel som det nedan.

Lista: (klicka expandera till höger)

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
canvas {
    border:1px solid #d3d3d3;
    background-color: #f1f1f1;
}
</style>
</head>
<body onload="startGame()">

<script>
var myGamePiece;
var myGamePiece2;

function startGame() {
    myGamePiece2 = new component(30, 30, "red", 225, 50);
    myGamePiece = new component(30, 30, "blue", 225, 225);
    myGameArea.start();
}

var myGameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = 480;
        this.canvas.height = 270;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.frameNo = 0;
        this.interval = setInterval(updateGameArea, 20);
        window.addEventListener('keydown', function (e) {
            e.preventDefault();
            myGameArea.keys = (myGameArea.keys || []);
            myGameArea.keys[e.keyCode] = (e.type == "keydown");
        })
        window.addEventListener('keyup', function (e) {
            myGameArea.keys[e.keyCode] = (e.type == "keydown");
        })
    },
    stop : function() {
        clearInterval(this.interval);
    },    
    clear : function() {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }
}

function component(width, height, color, x, y, type) {

    this.type = type;
    this.width = width;
    this.height = height;
    this.speed = 0;
    this.angle = 0;
    this.moveAngle = 0;
    this.x = x;
    this.y = y;    
    this.update = function() {
        ctx = myGameArea.context;
        ctx.save();
        ctx.translate(this.x, this.y);
        ctx.rotate(this.angle);
        ctx.fillStyle = color;
        ctx.fillRect(this.width / -2, this.height / -2, this.width, this.height);
        ctx.restore();    
    }
    this.newPos = function() {
        this.angle += this.moveAngle * Math.PI / 180;
        this.x += this.speed * Math.sin(this.angle);
        this.y -= this.speed * Math.cos(this.angle);
    }
}

function updateGameArea() {
    myGameArea.clear();
    myGamePiece.moveAngle = 0;
    myGamePiece2.moveAngle = 0;
    myGamePiece.speed = 0;
    myGamePiece2.speed = 0;
    if (myGameArea.keys && myGameArea.keys[37]) {myGamePiece.moveAngle = -2; }
    if (myGameArea.keys && myGameArea.keys[39]) {myGamePiece.moveAngle = 2; }
    if (myGameArea.keys && myGameArea.keys[38]) {myGamePiece.speed= 2; }
    if (myGameArea.keys && myGameArea.keys[40]) {myGamePiece.speed= -2; }
    if (myGameArea.keys && myGameArea.keys[65]) {myGamePiece2.moveAngle = -2; }
    if (myGameArea.keys && myGameArea.keys[68]) {myGamePiece2.moveAngle = 2; }
    if (myGameArea.keys && myGameArea.keys[87]) {myGamePiece2.speed= 2; }
    if (myGameArea.keys && myGameArea.keys[83]) {myGamePiece2.speed= -2; }
    myGamePiece.newPos();
    myGamePiece2.newPos();
    myGamePiece.update();
    myGamePiece2.update();
}
</script>

<p>Make sure the gamearea has focus. <br> Use the arrows to move the blue box. <br> Use WASD to move the red box.</p>

</body>
</html>

Nya gubbar

Du behöver göra nya gubbar med components. Du kan titta på din gamla kod och använda koordinater och listan med dina objekt som du bygger gubben av. Men du måste modifiera koden så den passar i detta exempel där vi lagt två rektangalr i components och skapat två styrbara objekt.

Lista: (klicka expandera till höger)

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
canvas {
    border:1px solid #d3d3d3;
    background-color: #f1f1f1;
}
</style>
</head>
<body onload="startGame()">
<script>

var myGamePiece;
var myGamePiece2;

function startGame() {
    myGameArea.start();
    myGamePiece = new component(30, 30, "gray", 190, 120);
        myGamePiece2 = new component(30, 30, "green", 10, 120);
}

var myGameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = 480;
        this.canvas.height = 270;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.interval = setInterval(updateGameArea, 20);
        window.addEventListener('keydown', function (e) {
            myGameArea.keys = (myGameArea.keys || []);
            myGameArea.keys[e.keyCode] = (e.type == "keydown");
        })
        window.addEventListener('keyup', function (e) {
            myGameArea.keys[e.keyCode] = (e.type == "keydown");            
        })
    }, 
    clear : function(){
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }
}

function component(width, height, color, x, y) {
    this.gamearea = myGameArea;
    this.width = width;
    this.height = height;
    this.speedX = 0;
    this.speedY = 0;    
    this.x = x;
    this.y = y;    
    this.update = function() {
        ctx = myGameArea.context;
        ctx.fillStyle = color;
        ctx.fillRect(this.x, this.y, this.width, this.height);
        ctx.fillRect(this.x+20, this.y+20, this.width, this.height);
    }
    this.newPos = function() {
        this.x += this.speedX;
        this.y += this.speedY;        
    }    
}

function updateGameArea() {
    myGameArea.clear();
    myGamePiece.speedX = 0;
    myGamePiece.speedY = 0;    
    if (myGameArea.keys && myGameArea.keys[37]) {myGamePiece.speedX = -1; }
    if (myGameArea.keys && myGameArea.keys[39]) {myGamePiece.speedX = 1; }
    if (myGameArea.keys && myGameArea.keys[38]) {myGamePiece.speedY = -1; }
    if (myGameArea.keys && myGameArea.keys[40]) {myGamePiece.speedY = 1; }
    myGamePiece.newPos();    
    
        myGamePiece2.speedX = 0;
    myGamePiece2.speedY = 0;    
    if (myGameArea.keys && myGameArea.keys[65]) {myGamePiece2.speedX = -1; }
    if (myGameArea.keys && myGameArea.keys[83]) {myGamePiece2.speedX = 1; }
    if (myGameArea.keys && myGameArea.keys[87]) {myGamePiece2.speedY = -1; }
    if (myGameArea.keys && myGameArea.keys[68]) {myGamePiece2.speedY = 1; }
    myGamePiece2.newPos();
    
    myGamePiece.update();
    myGamePiece2.update();
}
</script>
<p>Make sure this window has focus, then use the arrow keys on you keyboard to move the red square.</p>
<p>When pressing both the left and the down arrow, the red square will move both down and to the left.</p>
</body>
</html>

HTML Game Movements

Sista delen i denna tutorial innehåller exempel på hur man styr med tangenterna. Länkarna går till nyttiga exempel.

Gör övningarna på html Game Movement.

Användbart exempel på key controllers

Kör runt och sväng-exempel

Hugos exempelkod

Exemplet visar en streckgubbe (funktion av funktioner) som är styrbar.

Lista: (klicka expandera till höger)


<!DOCTYPE html>
<html>
<body>

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

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

var SPEED = 0;

var SPEEDx = 0;

var SPEEDcon = 0;

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


//Cirkel
function myCircle(x, y, r, color) {
ctx.beginPath();
ctx.arc(x, y, r, 0,2*Math.PI);
ctx.fillStyle = color;
ctx.fill();
}

//Stickman 
function myStickman(xA, yA, Size) {
//Head
this.myCircle(xA, yA, Size * 50);
//body
var yArel = yA + Size * 50;
var xArel = xA - Size * 25;
this.myRectangle(xArel, yArel, Size * 50, Size * 100, "Red");
//Legs
var yLeg = yA + Size * 150;
var xRLeg = xA - Size * 25;
this.myRectangle(xRLeg, yLeg, Size * 20, Size * 100, "blue");
var xLLeg = xA + Size * 5;
this.myRectangle(xLLeg, yLeg, Size * 20, Size * 100, "blue");
//Arms
var xArm = xA + Size * 25;
var yArm = yA + Size * 50;
this.myRectangle(xArm, yArm, Size * 100, Size * 20, "blue");
var xLArm = xA - Size * 25;
this.myRectangle(xLArm, yArm, Size * -100, Size * 20, "blue");
}

function clearCanvas() {
ctx.clearRect(0,0,canvas.width,canvas.height);
}



this.myRectangle(10, 2, 50, 70, "Blue");
this.myRectangle(80, 8, 50, 70, "Green");
this.myRectangle(140, 16, 50, 70, "Red");

this.myCircle(50, 100, 10, "Yellow");


function AnimationLoop() {
//var xPostion = 200;
//var yPosition = 200;
var positionX = 100;
var positionY = 200;
setInterval(function(){
clearCanvas(); 
//var Placement = 200;
//var  = 200;
//this.myStickman(200, 200, 0.5);
//alert("bruh");
document.addEventListener("keydown", keyDownCanvas, false);

function keyDownCanvas(e) {
  var keyCode = e.keyCode;
  if(keyCode==38) {
    //alert("You hit the enter key.");
	SPEED = - SPEEDcon;
  } else if(keyCode==40) {
    SPEED = SPEEDcon;
	//alert("Oh no you didn't.");
  } else if(keyCode==49) {
    SPEEDcon = 1;
	//alert("Oh no you didn't.");
  } else if(keyCode==50) {
    SPEEDcon = 2;
	//alert("Oh no you didn't.");
  } else if(keyCode==51) {
    SPEEDcon = 3;
	//alert("Oh no you didn't.");
  } else if(keyCode==52) {
    SPEEDcon = 4;
	//alert("Oh no you didn't.");
  } else if(keyCode==53) {
    SPEEDcon = 5;
	//alert("Oh no you didn't.");
  } else if(keyCode==37) {
    SPEEDx = - SPEEDcon;
	//alert("Oh no you didn't.");
  }  else if(keyCode==39) {
    SPEEDx = SPEEDcon;
	//alert("Oh no you didn't.");
  }
}

document.addEventListener("keyup", keyUpCanvas, false);

function keyUpCanvas(e) {
  /*var keyCode = e.keyCode;
  if(keyCode==38) {
    //alert("You hit the enter key.");
	SPEED = -1;
  } else if(keyCode==40) {
    SPEED = 1;
	//alert("Oh no you didn't.");
  }*/
  SPEED = 0;
  SPEEDx = 0;
}

/*document.addEventListener("keyup", keyUpCanvas, false);

function keyUpCanvas(e) {
  /*var keyCode = e.keyCode;
  if(keyCode==38) {
    //alert("You hit the enter key.");
	SPEED = -1;
  } else if(keyCode==40) {
    SPEED = 1;
	//alert("Oh no you didn't.");
  }
  SPEED = 0;
}*/

positionY += SPEED;

positionX += SPEEDx;

this.DRAW(positionX, positionY);
},



50);
}

function DRAW(xAxis, yAxis) {
//var yAxis = 200;
//var xAxis = 100;
this.myStickman(xAxis, yAxis, 0.5);
return 0;
}

//this.myStickman

</script>

<p>1, 2, 3 ,4 ,5 keys for speed regulation. At zero for the moment. Arrow keys to control it.</p>


<button onclick="myStickman(200, 200, 0.5)">Stickman</button>

<button onclick="myCircle(200, 200, 50, 'red')">Happy Face</button>

<button onclick="clearCanvas()">Clear</button>

<button onclick="AnimationLoop()">Start animation</button>
</body>
</html>

Min kod med en cirkel

Lista: (klicka expandera till höger)

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
canvas {
    border:1px solid #d3d3d3;
    background-color: #f1f1f1;
}
</style>
</head>
<body onload="startGame()">
<script>

var redGamePiece, blueGamePiece, yellowGamePiece, blueCircle;

function startGame() {
    redGamePiece = new component(75, 75, "red", 10, 10);
    yellowGamePiece = new component(75, 75, "yellow", 50, 60);    
    blueGamePiece = new component(75, 75, "blue", 10, 110);
        blueCircle = new circle(25, "blue", 150, 110);
    myGameArea.start();
}

var myGameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = 480;
        this.canvas.height = 270;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.interval = setInterval(updateGameArea, 20);
    },
    clear : function() {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }
}

function component(width, height, color, x, y) {
    this.width = width;
    this.height = height;
    this.x = x;
    this.y = y;    
    this.update = function(){
        ctx = myGameArea.context;
        ctx.fillStyle = color;
        ctx.fillRect(this.x, this.y, this.width, this.height);
    }
}
    function circle(radie, color, x, y) {
    this.radie = radie;
    this.x = x;
    this.y = y;    
    this.update = function(){
        ctx = myGameArea.context;
        ctx.fillStyle = color;
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radie,0,2*Math.PI);
		ctx.fill();
    }
}

function updateGameArea() {
    myGameArea.clear();
    redGamePiece.update();
    yellowGamePiece.update();        
    blueGamePiece.update();
    blueCircle.update();
}
</script>
<p>Three components on one game area.</p>
<p>Notice that the stack order of the components depends on the order they were updated in the updateGameArea function. The blue game piece is updated last, and will be placed on top of the yellow, which will be placed on top of the red.</p>
</body>
</html>

Andra plattformar för spelutveckling (med Javascript)

[redigera]

Du behöver skapa två filer:

index.html
main.js

Använd Anteckningar och spara dem i en egen mapp.

Kod för ritprogrammet

Programmet nedan är ett halvfärdigt ritprogram. Din uppgift är att förbättra det. Du använder kanske anteckningar eller så har du en redigerare som exempelvis Atom. Börja med att skapa två filer; en index.html och en main.js. Koden hittar du nedan.

Testkör programmet och se vad det kan. Du klickar för att rita. Undersök koden för att hitta vilka delar av programmet som gör vad. Du behöver inte förstå hur all kod fungerar.

Programmet kan byta färg när man trycker en tangent och det går att ändra radien. Dessutom finns en mouse over-funktion.

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. Lägg in en text som förklarar viilka funktioner ditt ritprogram har.

html-koden

Lista: (klicka expandera till höger)

index.html

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>CLICK and DRAW</title>
 <style>
  body {
   overflow: hidden;
   background-color: lightgrey
  }
 </style>
</head>
<body>
 <canvas>Please update your browser</canvas>
 <script src="main.js"></script>
</body>
</html>

Javascriptet

Lista: (klicka expandera till höger)

main.js

// Thanks to Jagadesha NH:
// https://medium.com/@jagadeshanh/html5-canvas-click-and-draw-f665e02f5744

var canvas = document.getElementsByTagName("canvas")[0];
var context = canvas.getContext("2d");
var height = canvas.height = window.innerHeight;
var width = canvas.width = window.innerWidth;
var mouseClicked = false, mouseReleased = true;
var  x0 = 50;
  y0 = 30;
  bredd =40;
  hojd = 40;
  distance = 40;
  color = "green";
  radie = 10;
  size = 22;

document.addEventListener("click", onMouseClick, false);
document.addEventListener("mousemove", onMouseMove, false);
function onMouseClick(e) {
    mouseClicked = !mouseClicked;
}
function onMouseMove(e) {
    if (mouseClicked) {
        context.beginPath();
        context.arc(e.clientX, e.clientY, radie, 0, Math.PI * 2, false);
        context.lineWidth = 5;
        context.strokeStyle = color;
        context.stroke();
    }
//en mouse over-funktion
if ((e.clientX > x0) && (e.clientX < x0 + bredd) && (e.clientY > y0)
      && (e.clientY < y0 + hojd))  { color = "green"; }
}

// Här börjar koden inspirerad av spelprogrammering.nu


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

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

// 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");

// v?lj f?rg att rita med
window.addEventListener('keydown',this.check,false);

// function check(e) {
//    alert(e.keyCode);
//}

function check(e) {
    var code = e.keyCode
// Ändra färg
    if (code == 71)
        color = "green";
    if (code == 66)
        color = "blue";
    if (code == 89)
        color = "yellow";
    if (code == 80)
        color = "pink";
// Ändra radie
if (code == 49)
    radie = 5;
if (code == 50)
    radie = 10;
}

Exempel

Ett ritprogram av Hugo Helm

Ett ritprogram av Theresia Lindahl.

@@ Rad 1: / Rad 1: @@
-== Intro till Programmering ==
+__NOTOC__
+= Intro till Programmering =
 {{malruta  |
@@ Rad 25: / Rad 26: @@
 : [http://www.w3schools.com/html/ TryIt Editor] klicka på den gröna Try it-knappen.
 : [https://atom.io Atom] är ett bra verktyg för att koda med färg.
-: [http://www.barebones.com/products/textwrangler/download.html TextWrangler] Traditinellt verktyg för textredigering.
+: [http://www.barebones.com/products/textwrangler/download.html TextWrangler] Traditinellt verktyg för textredigering. (Mac)
 : Brackets
+: [https://codepen.io/pen/ CodePen]
-== HTML, CSS och Javascript ==
+= html =
-Vi jobbar på [http://www.w3schools.com/ W3School] där det finns gott om övningar. Startsidan visar precis vad det handlar om.
+[[File:W3schools website.png|W3schools website|right| 400 px]]
-== CSS ==
+Vi jobbar på [http://www.w3schools.com/ W3School] där det finns gott om övningar inom html, CSS, Javascript, databaser och mycket mer. Startsidan visar precis vad det handlar om.
+Du börjar din övning med [https://www.w3schools.com/html/default.asp Html 5 tutorial].
+W3Schools är faktiskt en norsk sida. {{enwp|w3schools}}.
+= CSS =
+: [http://www.w3schools.com/html/html_css.asp CSS intro] i html-kursen
+: [http://www.w3schools.com/css/default.asp CSS tutorial] - den riktiga CSS-kursen
+= Javascript =
+== Introexempel ==
+Vi kommer att använda en speciell canvas-funktion som låter oss rita saker på en hemsida med hjälp av Javascript. Det blir tydligare och roligare så.
-: [http://www.w3schools.com/html/html_css.asp CSS intro] och
-: [http://www.w3schools.com/css/default.asp CSS tutorial]
 : [http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_canvas_tut_path2 W3Schools TryIt Editor] med canvas och boll.
 :: Testa gärna [https://www.w3schools.com/tags/canvas_fill.asp html Canvas Fill() method]
@@ Rad 41: / Rad 56: @@
 Förutom att laborera med CSS för canvas border har vi nu laborerat med koden i scriptet <script> </script>. Vi är nu redo för nästa steg där vi tittar närmare på Javascript.
-== HTML ==
+== Javascript ==
+{{joke |
+<br>
+The programmers wife told him to go to the store and get a loaf of bread, <br>and if they have eggs, to get a dozen.
+The programmer returned with twelve loafs of bread.
+}}
-Det enda vi gör med html just nu är att konstatera att det är det skapar en hemsida med vår canvas där vi programmerar i javascript.
-== Javascript ==
 Läs om hur script-taggen fungerar:
@@ Rad 116: / Rad 135: @@
 [[Fil:Skärmavbild 2016-11-10 kl. 22.16.37.png|200px|right]]
-Rita ett hus eller en fin bild med hjälp av den html du lärt dig på W3Schools.
+Rita ett hus eller en fin bild med hjälp av den html och Javascript du lärt dig på W3Schools.
 Du kombinerar alltså linjer, rektanglar, cirklar, färger, gradienter och text till en trevlig bild.
-Sedan tar du en skärmdump på bilden och sparar för säkerhets skul.,
+Sedan tar du en skärmdump på bilden och sparar för säkerhets skull.
+Spara även koden i en .html-fil. Du kommer att kunna visa detta på din egen personliga hemsida lite senare i kursen.
-Du ska lämna in koden.Kopiera koden till Anteckningar och spara den  med ändelsen .html. Den lämnar du in på Canvas - Teknik 1.
 }}
@@ Rad 129: / Rad 149: @@
 [http://www.w3schools.com/code/tryit.asp?filename=F08J8KPEE5L2 Dimitros hus]
-== Funktioner ==
+= Funktioner =
 När du skapade din bild ovan fick du kopiera kodblock för varje byggelement. Koden blir lång och det kan bli fel. Det är därför lämpligt att samla ihop koden i en funktion som sedan åberopas från huvudprogrammet.
@@ Rad 165: / Rad 185: @@
 Skapa en egen funktion som räknar ut något på samma sätt.
+=== Lägg in funktioner i Husbilden ===
+Du kan använda funktioner för att förenkla koden i din husbild. Du kan arbeta på detta sätt när du skapar nya bilder, exempelvis en figur (gubbe) till ett kommande spel.
 {{uppgruta | '''Funktioner förenklar - skapa en gubbe'''
@@ Rad 202: / Rad 225: @@
 this.myRectangle(50, 20, 50, 70, "Green");
 this.myRectangle(90, 200, 50, 70, "Red");
+</script>
+</body>
+</html>
+</pre>
+}}
+=== Använd variabler till funktionerna ===
+I exemplet nedan har vi lagt till variabler för att styra var de röda rektanglarna hamnar.
+{{Lista | Variabler och funktioner
+<pre>
+<!DOCTYPE html>
+<html>
+<body>
+<canvas id="myCanvas" width="400" height="500"
+style="border:1px solid #d3d3d3;">
+Your browser does not support the canvas element.
+</canvas>
+<script>
+var canvas = document.getElementById("myCanvas");
+var ctx = canvas.getContext("2d");
+var startX = 40;
+var startY = 40;
+var distX = 80;
+var distY = 110;
+var bredd = 50;
+function myRectangle(x, y, w, l, color) {
+ctx.fillStyle = color;
+ctx.fillRect(x, y, w, l);
+}
+this.myRectangle(startX, startY, bredd, 70, "Red");
+this.myRectangle(startX + distX, startY, bredd, 70, "Red");
+this.myRectangle(startX + 2*distX, startY, bredd, 70, "Red");
+this.myRectangle(startX, startY + distY, bredd, 70, "Red");
+this.myRectangle(startX + distX, startY + distY, bredd, 70, "Red");
+this.myRectangle(startX + 2*distX, startY + distY, bredd, 70, "Red");
 </script>
@@ Rad 454: / Rad 520: @@
 {{clear}}
-== Gör ett spel ==
+= Överkurs - Gör ett spel =
 [[Fil:Tangentflytt.PNG|400px|höger]]
@@ Rad 961: / Rad 1 027: @@
 {{clear}}
-== Gör ett ritprogram ==
+== Andra plattformar för spelutveckling (med Javascript) ==
+* [http://phaser.io Phaser]
+* [http://processingjs.org/ Processing]
+= Ritprogrammet =
+Du behöver skapa två filer:
+*index.html
+* main.js
+Använd Anteckningar och spara dem i en egen mapp.
+== Kod för ritprogrammet ==
+Programmet nedan är ett halvfärdigt ritprogram. Din uppgift är att förbättra det. Du använder kanske anteckningar eller så har du en redigerare som exempelvis Atom. Börja med att skapa två filer; en index.html och en main.js. Koden hittar du nedan.
+Testkör programmet och se vad det kan. Du klickar för att rita. Undersök koden för att hitta vilka delar av programmet som gör vad. Du behöver inte förstå hur all kod fungerar.
+Programmet kan byta färg när man trycker en tangent och det går att ändra radien. Dessutom finns en mouse over-funktion.
-[[Fil:Ritprogram1.PNG|400px|höger]]
+{{uppgruta | '''Ritprogrammet'''
+[[Fil:Skärmavbild 2016-11-10 kl. 08.59.40.png|200px | right]]
-Med följande kod kan du rita på canvas med muspekaren. Det gör att du kan bygga ett Paintliknade program. Nedan finns ett exempel men det kommer fler. Koden behöver städas lite också :-)
+Ta koden nedan och förbättra till ett fantastiskt ritprogram.
-{{Lista |
+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. Lägg in en text som förklarar viilka funktioner ditt ritprogram har.
+}}
+=== html-koden ===
+{{Lista | index.html
 <pre>
 <!DOCTYPE html>
 <html>
 <head>
-<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+ <meta charset="utf-8">
-<style>
+ <title>CLICK and DRAW</title>
-body {
+ <style>
-    margin: 0;
+  body {
-}
+   overflow: hidden;
-canvas {
+   background-color: lightgrey
-    border:1px solid #d3d3d3;
+  }
-    background-color: #f1f1f1;
+ </style>
-}
-</style>
 </head>
-<body onload="startGame()">
+<body>
-<script>
+ <canvas>Please update your browser</canvas>
-var myGamePiece;
+ <script src="main.js"></script>
-var myUpBtn;
+</body>
-var myDownBtn;
+</html>
-var myLeftBtn;
+</pre>
-var myRightBtn;
+}}
+=== Javascriptet ===
-function startGame() {
+{{Lista | main.js
-    myGamePiece = new component(30, 30, "red", 10, 120);
+<pre>
-    myUpBtn = new component(30, 30, "blue", 50, 10);
+// Thanks to Jagadesha NH:
-    myDownBtn = new component(30, 30, "blue", 50, 70);
+// https://medium.com/@jagadeshanh/html5-canvas-click-and-draw-f665e02f5744
-    myLeftBtn = new component(30, 30, "blue", 20, 40);
-    myRightBtn = new component(30, 30, "blue", 80, 40);
-    myGameArea.start();
-}
+var canvas = document.getElementsByTagName("canvas")[0];
+var context = canvas.getContext("2d");
+var height = canvas.height = window.innerHeight;
+var width = canvas.width = window.innerWidth;
+var mouseClicked = false, mouseReleased = true;
+var  x0 = 50;
+  y0 = 30;
+  bredd =40;
+  hojd = 40;
+  distance = 40;
+  color = "green";
+  radie = 10;
+  size = 22;
-var myGameArea = {
+document.addEventListener("click", onMouseClick, false);
-    canvas : document.createElement("canvas"),
+document.addEventListener("mousemove", onMouseMove, false);
-    start : function() {
+function onMouseClick(e) {
-        this.canvas.width = 480;
+    mouseClicked = !mouseClicked;
-        this.canvas.height = 270;
+}
-        this.context = this.canvas.getContext("2d");
+function onMouseMove(e) {
-        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
+    if (mouseClicked) {
-        this.interval = setInterval(updateGameArea, 20);
+         context.beginPath();
-        window.addEventListener('mousedown', function (e) {
+        context.arc(e.clientX, e.clientY, radie, 0, Math.PI * 2, false);
-            myGameArea.x = e.pageX;
+        context.lineWidth = 5;
-            myGameArea.y = e.pageY;
+        context.strokeStyle = color;
-        })
+         context.stroke();
-        window.addEventListener('mouseup', function (e) {
-            myGameArea.x = false;
-            myGameArea.y = false;
-        })
-         window.addEventListener('touchstart', function (e) {
-            myGameArea.x = e.pageX;
-            myGameArea.y = e.pageY;
-        })
-        window.addEventListener('touchend', function (e) {
-            myGameArea.x = false;
-            myGameArea.y = false;
-         })
-    },
-    clear : function(){
-        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
      }
+//en mouse over-funktion
+if ((e.clientX > x0) && (e.clientX < x0 + bredd) && (e.clientY > y0)
+      && (e.clientY < y0 + hojd))  { color = "green"; }
 }
-function component(width, height, color, x, y) {
+// Här börjar koden inspirerad av spelprogrammering.nu
-    this.width = width;
-    this.height = height;
-    this.speedX = 0;
+function myRectangle(x, y, w, l, color)
-    this.speedY = 0;
+{
-    this.x = x;
+    context.fillStyle = color
-    this.y = y;
+   context.fillRect(x, y, w, l);
-    this.update = function() {
-        ctx = myGameArea.context;
-        ctx.fillStyle = color;
-       ctx.fillRect(this.x, this.y, this.width, this.height);
-    }
-    this.clicked = function() {
-        var myleft = this.x;
-        var myright = this.x + (this.width);
-        var mytop = this.y;
-        var mybottom = this.y + (this.height);
-        var clicked = true;
-        if ((mybottom < myGameArea.y) || (mytop > myGameArea.y) || (myright < myGameArea.x) || (myleft > myGameArea.x)) {
-            clicked = false;
-        }
-        return clicked;
-    }
 }
-function updateGameArea() {
+function myText(x, y, size, text, color)
-//    myGameArea.clear();
+{
-    if (myGameArea.x) {
+  context.font = size + "pt Helvetica";
-        myGamePiece = new component(30, 30, "green", myGameArea.x, myGameArea.y);
+  context.fillStyle = color;
+  context.fillText(text, x, y);
-        if (myUpBtn.clicked()) {
-        //    myGamePiece.y -= 1;
-        }
-        if (myDownBtn.clicked()) {
-        //    myGamePiece.y += 1;
-        }
-        if (myLeftBtn.clicked()) {
-        //    myGamePiece.x += -1;
-        }
-        if (myRightBtn.clicked()) {
-        //    myGamePiece.x += 1;
-        }
-    }
-    myUpBtn.update();
-    myDownBtn.update();
-    myLeftBtn.update();
-    myRightBtn.update();
-    myGamePiece.update();
 }
-</script>
+// 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");
+// v?lj f?rg att rita med
+window.addEventListener('keydown',this.check,false);
+// function check(e) {
+//    alert(e.keyCode);
+//}
-<p>Click on the blue "buttons" to make the red square move.</p>
+function check(e) {
-</body>
+    var code = e.keyCode
-</html>
+// Ändra färg
-</pre>}}
+    if (code == 71)
+        color = "green";
+    if (code == 66)
+        color = "blue";
+    if (code == 89)
+        color = "yellow";
+    if (code == 80)
+        color = "pink";
+// Ändra radie
+if (code == 49)
+    radie = 5;
+if (code == 50)
+    radie = 10;
+}
+</pre>
+}}
-=== Enkel kod för ritprogram på spelprogrammering.nu ===
+=== Exempel ===
-Den här koden går inte att köra på w3school men den funkar fint på spelprogrammering.nu i deras toolbox.
+: Ett [https://19huhe.ssis.nu/ritprogram/ ritprogram] av Hugo Helm
+: Ett [https://19thli.ssis.nu/wp-content/uploads/2019/09/index.html ritprogram] av Theresia Lindahl.
+<headertabs />

HTML, CSS och Javascript: Skillnad mellan sidversioner

Nuvarande version från 21 november 2019 kl. 22.07

Editors

Introexempel

Javascript

Bra att känna till

Exempelkod

Inlämningsuppgift

Elevexempel

Läs detta

Lägg in funktioner i Husbilden

Använd variabler till funktionerna

Om du kör fast

Gubben som en funktion med funktioner

En skalbar gubbe

En enkel animering

Alexanders exempelkod

Nya gubbar

HTML Game Movements

Hugos exempelkod

Min kod med en cirkel

Andra plattformar för spelutveckling (med Javascript)

Kod för ritprogrammet

html-koden

Javascriptet

Exempel

Navigeringsmeny

Sök