Differences

This shows you the differences between two versions of the page.

--- javascript:labirintas [2016/12/05 16:05] – created aistis
+++ javascript:labirintas [2016/12/06 00:10] (current) – aistis
@@ Line 1: / Line 1: @@
 Labirintą taip pat galima padaryti su JavaScript. Čia pateikiu kodą kuris paišo labirintą ir judina kursorių, dar reikia pridėti tikrinima kad neleistu eiti jeigu lieti juodą sieną.
+<code html>
+<canvas id="myCanvas" width="600" height="600">
+Your browser does not support the HTML5 canvas tag.</canvas>
+</code>
 <code javascript>
 var c = document.getElementById("myCanvas");
 var ctx = c.getContext("2d");
-//ctx.moveTo(0,0);
-//ctx.lineTo(200,100);
-//ctx.stroke();
-var x = 50;
+var x = 50, y = 50, step = 5;
-var y = 50;
-var step = 5;
 var img = new Image;
-img.src = "http://www.mazegenerator.net/ImageGenerator.ashx?Tag=20161205135722&MazeType=1&Solution=0";
+img.src = "http://wiki.coderdojo.lt/lib/exe/fetch.php?\
-ctx.drawImage(img,0,0);
+media=javascript:20_by_20_orthogonal_maze.png";
+ctx.drawImage(img,0,0,600,600);
 document.onkeydown = checkKey;
+function refresh(){
+	ctx.clearRect(0, 0, c.width, c.height);
+	ctx.drawImage(img,0,0,600,600);
+	ctx.beginPath();
+	ctx.arc(x,y,1,0,2*Math.PI);
+	ctx.stroke();
+}
 function checkKey(e) {
-    e = e || window.event;
+	e = e || window.event;
-    if (e.keyCode == '38') {
+	if (e.keyCode == '38') y = y - step;
-    	ctx.clearRect(0, 0, c.width, c.height);
+	else if (e.keyCode == '40') y = y + step;
-    	ctx.drawImage(img,0,0);
+	else if (e.keyCode == '37') x = x - step;
-    	y = y - step;
+	else if (e.keyCode == '39') x = x + step;
-        ctx.beginPath();
-		ctx.arc(x,y,1,0,2*Math.PI);
-		ctx.stroke();
-    }
-    else if (e.keyCode == '40') {
-    	ctx.clearRect(0, 0, c.width, c.height);
-    	ctx.drawImage(img,0,0);
-    	y = y + step;
-        ctx.beginPath();
-		ctx.arc(x,y,1,0,2*Math.PI);
-		ctx.stroke();
-    }
-    else if (e.keyCode == '37') {
-    	ctx.clearRect(0, 0, c.width, c.height);
-    	ctx.drawImage(img,0,0);
-    	x = x - step;
-        ctx.beginPath();
-		ctx.arc(x,y,1,0,2*Math.PI);
-		ctx.stroke();
-    }
-    else if (e.keyCode == '39') {
-    	ctx.clearRect(0, 0, c.width, c.height);
-    	ctx.drawImage(img,0,0);
-    	x = x + step;
-        ctx.beginPath();
-		ctx.arc(x,y,1,0,2*Math.PI);
-		ctx.stroke();
-    }
-}
+	if (x < 0) x = 0;
+	if (y < 0) y = 0;
+	if (x > 600) x = 600;
+	if (y > 600) y = 600;
+	refresh();
+}</code>
-</code>
+Labirintas:
+{{:javascript:20_by_20_orthogonal_maze.png}}