wiki.raudys.com

User Tools

Site Tools

Trace:
javascript:labirintas

Differences

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

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
javascript:labirintas [2016/12/05 16:06] – aistisjavascript:labirintas [2016/12/06 00:10] (current) – aistis
Line 2: Line 2:
  
 <code html> <code html>
-<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">+<canvas id="myCanvas" width="600" height="600">
 Your browser does not support the HTML5 canvas tag.</canvas> Your browser does not support the HTML5 canvas tag.</canvas>
 </code> </code>
Line 9: Line 9:
 var c = document.getElementById("myCanvas"); var c = document.getElementById("myCanvas");
 var ctx = c.getContext("2d"); 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; 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; 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) { 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}}
javascript/labirintas.1480946796.txt.gz · Last modified: by aistis