sadet48 - JavaScript Hareket Kontrol

JS requestAnimationFrame

Hareket için yön tuşlarını ya da WASD tuşlarını kullan...

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>JS requestAnimationFrame</title>
<style>
	*{margin: 0;padding: 0;}
p{
font-family: TTKB Dik Temel Abece;
color: #000000;
font-size: 22px;
background: #F1F1F1;
padding: 10px;
}
	#canvas{border: 1px solid #D8D8D8;margin: 10px;}
</style>
</head>
<body>
	<p>Hareket için yön tuşlarını ya da WASD tuşlarını kullan...</p>
	<canvas id="canvas" width="360" height="240"></canvas>
<script>
var c =document.getElementById('canvas'),
	ctx=c.getContext("2d");

/* dairenin x ve y pozisyonu*/
var xPos =180,
	yPos =120;

function draw(){
	ctx.clearRect(0,0,360,240);	
	requestAnimationFrame(draw);

/* daire*/
	ctx.beginPath();
	ctx.fillStyle="red";
	ctx.arc(xPos,yPos,10,0,Math.PI*2,false);
	ctx.fill();
}		
draw();

/* Yön tuşlarını kullanma */		
function move(e) {
	if (e.keyCode==37||e.keyCode==65) {
		xPos-=5;
	}
	if(e.keyCode==39||e.keyCode==68){
		xPos+=5;
	}
	if (e.keyCode==38||e.keyCode==87){
		yPos-=5;
	}
	if(e.keyCode==40||e.keyCode==83){
		yPos+=5;
	}
}
document.onkeydown=move;					
</script>
</body>
</html>