RPG nav

navigation

HTML

<canvas id="ctx" width="500" height="500" style="border:1px solid black">sss</canvas>
<script>

document.onkeydown = checkKey;

var ctx = document.getElementById("ctx").getContext("2d");
ctx.font = '30px Arial';
var HEIGHT = 500;
var WIDTH = 500;
var x = 50;
var y = 50;
var speed = 20;
ctx.fillText('x', x,y); // Writes text 

function checkKey(e) {

    e = e || window.event;

    if (e.keyCode == '38') {
        // up arrow
		console.log('up');
		y-=speed;	
		ctx.clearRect(x,y, WIDTH, HEIGHT);			
		ctx.fillText('x', x,y); // Writes text 
	
    }
    else if (e.keyCode == '40') {
        // down arrow
		console.log('down');
		y+=speed; 
		ctx.fillText('x', x,y); // Writes text 	

    }
    else if (e.keyCode == '37') {
       // left arrow
	    console.log('left');
		x-=speed;
		ctx.fillText('x', x,y); // Writes text 		
		ctx.clearRect(x,y, WIDTH, HEIGHT);
		
    }
    else if (e.keyCode == '39') {
       // right arrow
	   console.log('right');
	   	x+=speed;
		ctx.fillText('x', x,y); // Writes text 		
		ctx.clearRect(x,y, -WIDTH, -HEIGHT);
		
    }

}

</script>