HTML, CSS och Javascript - Versionshistorik

Hakan: /* Ritprogrammet */

2019-11-21T22:07:07Z

Ritprogrammet

← Äldre version		Versionen från 21 november 2019 kl. 22.07
Rad 1 171:		Rad 1 171:
	=== Exempel ===		=== Exempel ===

	Ett [https://19huhe.ssis.nu/ritprogram/ ritprogram] av Hugo Helm		: 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 />		<headertabs />

Hakan: /* Exempel */

2019-11-21T22:02:25Z

Exempel

← Äldre version		Versionen från 21 november 2019 kl. 22.02
Rad 1 171:		Rad 1 171:
	=== Exempel ===		=== Exempel ===

	Ett [[https://19huhe.ssis.nu/ritprogram/\|ritprogram]] av Hugo Helm		Ett [https://19huhe.ssis.nu/ritprogram/ ritprogram] av Hugo Helm
	<headertabs />		<headertabs />

Hakan: /* Ritprogrammet */

2019-11-21T22:01:53Z

Ritprogrammet

← Äldre version		Versionen från 21 november 2019 kl. 22.01
Rad 1 171:		Rad 1 171:
	=== Exempel ===		=== Exempel ===

	Ett [[19huhe.ssis.nu/~~wordpress~~/\|ritprogram]] av Hugo Helm		Ett [[https://19huhe.ssis.nu/ritprogram/\|ritprogram]] av Hugo Helm
	<headertabs />		<headertabs />

Hakan: /* Kod för ritprogrammet */

2019-11-21T22:00:04Z

Kod för ritprogrammet

← Äldre version		Versionen från 21 november 2019 kl. 22.00
Rad 1 119:		Rad 1 119:
	}		}

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


Rad 1 151:		Rad 1 151:
	function check(e) {		function check(e) {
	var code = e.keyCode		var code = e.keyCode
	// ~~�ndra f�rg~~		// Ändra färg
	if (code == 71)		if (code == 71)
	color = "green";		color = "green";
Rad 1 160:		Rad 1 160:
	if (code == 80)		if (code == 80)
	color = "pink";		color = "pink";
	// ~~�ndra~~ radie		// Ändra radie
	if (code == 49)		if (code == 49)
	radie = 5;		radie = 5;
Rad 1 169:		Rad 1 169:
	}}		}}

			=== Exempel ===

			Ett [[19huhe.ssis.nu/wordpress/\|ritprogram]] av Hugo Helm
	<headertabs />		<headertabs />

Hakan: /* Javascriptet */

2019-09-09T11:44:52Z

Javascriptet

← Äldre version		Versionen från 9 september 2019 kl. 11.44
Rad 1 119:		Rad 1 119:
	}		}

	// ~~Här b�rjar~~ koden inspirerad av spelprogrammering.nu		// H�r b?rjar koden inspirerad av spelprogrammering.nu


Rad 1 126:		Rad 1 126:
	context.fillStyle = color		context.fillStyle = color
	context.fillRect(x, y, w, l);		context.fillRect(x, y, w, l);
	}

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

Rad 1 143:		Rad 1 135:
	}		}

	// rita de ~~f�rgade~~ rutorna		// rita de f?rgade rutorna
	this.myRectangle(x0, y0, bredd, hojd, "green");		this.myRectangle(x0, y0, bredd, hojd, "green");
	this.myRectangle(x0, y0 + distance, bredd, hojd, "blue");		this.myRectangle(x0, y0 + distance, bredd, hojd, "blue");
Rad 1 150:		Rad 1 142:
	this.myRectangle(x0, y0 + 3 * distance, bredd, hojd, "pink");		this.myRectangle(x0, y0 + 3 * distance, bredd, hojd, "pink");

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

Rad 1 159:		Rad 1 151:
	function check(e) {		function check(e) {
	var code = e.keyCode		var code = e.keyCode
	// ~~ändra färg~~		// �ndra f�rg
	if (code == 71)		if (code == 71)
	color = "green";		color = "green";
Rad 1 168:		Rad 1 160:
	if (code == 80)		if (code == 80)
	color = "pink";		color = "pink";
	// ~~ändra~~ radie		// �ndra radie
	if (code == 49)		if (code == 49)
	radie = 5;		radie = 5;
Rad 1 174:		Rad 1 166:
	radie = 10;		radie = 10;
	}		}

	</pre>		</pre>
	}}		}}

	<headertabs />		<headertabs />

Hakan: /* Andra plattformar för spelutveckling */

2019-09-09T11:30:00Z

Andra plattformar för spelutveckling

← Äldre version		Versionen från 9 september 2019 kl. 11.30
Rad 1 027:		Rad 1 027:
	{{clear}}		{{clear}}

	== Andra plattformar för spelutveckling ==		== Andra plattformar för spelutveckling (med Javascript) ==

	* [http://phaser.io Phaser]		* [http://phaser.io Phaser]

Hakan: /* Överkurs - Gör ett spel */

2019-09-09T11:29:16Z

Överkurs - Gör ett spel

← Äldre version		Versionen från 9 september 2019 kl. 11.29
Rad 1 026:		Rad 1 026:
	}}		}}
	{{clear}}		{{clear}}

			== Andra plattformar för spelutveckling ==

			* [http://phaser.io Phaser]
			* [http://processingjs.org/ Processing]

	= Ritprogrammet =		= Ritprogrammet =

Hakan: /* Gör ett ritprogram */

2019-09-09T11:26:27Z

Gör ett ritprogram

← Äldre version		Versionen från 9 september 2019 kl. 11.26
Rad 1 025:		Rad 1 025:

	}}		}}
	~~{{clear}}~~

	~~== Gör ett ritprogram ==~~

	~~[[Fil:Ritprogram1.PNG\|400px\|höger]]~~

	~~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å :-)~~

	~~{{Lista \|~~
	~~<pre>~~
	~~<!DOCTYPE html>~~
	~~<html>~~
	~~<head>~~
	~~<meta name="viewport" content="width=device-width, initial-scale=1.0"/>~~
	~~<style>~~
	~~body {~~
	~~margin: 0;~~
	}
	~~canvas {~~
	~~border:1px solid #d3d3d3;~~
	~~background-color: #f1f1f1;~~
	}
	~~</style>~~
	~~</head>~~
	~~<body onload="startGame()">~~
	~~<script>~~
	~~var myGamePiece;~~
	~~var myUpBtn;~~
	~~var myDownBtn;~~
	~~var myLeftBtn;~~
	~~var myRightBtn;~~

	~~function startGame() {~~
	~~myGamePiece = new component(30, 30, "red", 10, 120);~~
	~~myUpBtn = new component(30, 30, "blue", 50, 10);~~
	~~myDownBtn = new component(30, 30, "blue", 50, 70);~~
	~~myLeftBtn = new component(30, 30, "blue", 20, 40);~~
	~~myRightBtn = new component(30, 30, "blue", 80, 40);~~
	~~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);~~
	~~window.addEventListener('mousedown', function (e) {~~
	~~myGameArea.x = e.pageX;~~
	~~myGameArea.y = e.pageY;~~
	})
	~~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);~~
	}
	}

	~~function component(width, height, color, x, y) {~~
	~~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);~~
	}
	~~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() {~~
	~~// myGameArea.clear();~~
	~~if (myGameArea.x) {~~
	~~myGamePiece = new component(30, 30, "green", myGameArea.x, myGameArea.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>~~

	~~<p>Click on the blue "buttons" to make the red square move.</p>~~
	~~</body>~~
	~~</html>~~
	~~</pre>}}~~

	{{clear}}		{{clear}}

Hakan: /* Lägg in funktioner i Husbilden */

2019-09-04T09:58:20Z

Lägg in funktioner i Husbilden

@@ Rad 232: / Rad 232: @@
 }}
-Använd variabler till funktionerna
+=== Använd variabler till funktionerna ===
 I exemplet nedan har vi lagt till variabler för att styra var de röda rektanglarna hamnar.
-{{Lista |
+{{Lista | Variabler och funktioner
 <pre>
 </pre>
 }}

Hakan: /* Lägg in funktioner i Husbilden */

2019-09-04T09:57:04Z

Lägg in funktioner i Husbilden

@@ Rad 229: / Rad 229: @@
 </body>
 </html>
 </pre>
 }}