wiki.raudys.com

This is an old revision of the document!

---

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ą.

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

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
//ctx.moveTo(0,0);
//ctx.lineTo(200,100);
//ctx.stroke();
 
var x = 50;
var y = 50;
var step = 5;
 
var img = new Image;
img.src = "http://www.mazegenerator.net/ImageGenerator.ashx?Tag=20161205135722&MazeType=1&Solution=0";
ctx.drawImage(img,0,0); 
 
document.onkeydown = checkKey;
 
function checkKey(e) {
 
    e = e || window.event;
 
    if (e.keyCode == '38') {
    	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 == '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();
    }
 
}

Labirintas: