Ik ben bezig om met canvas een soort game te maken, alleen loop ik tegen een probleem aan.
Als ik op de rechter pijltjes toets druk, dan hoort hij dus 1px naar rechts te gaan.
Alleen is dit helaas niet het geval; de cirkel verdwijnt vervolgens volledig uit zicht en het canvas word groter.
Mijn HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Game</title>
<link rel="stylesheet" href="assets/css/main.css"/>
</head>
<body>
<canvas id="game" width="500" height="500" style="background-color: #333"></canvas>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/game.js"></script>
</body>
</html>
Mijn JavaScript
$(function () {
function generateCanvas(points, pos_left, pos_top){
window.v_points = points;
window.v_left = pos_left;
window.v_right = pos_top;
var canvas = document.getElementById('game');
var context = canvas.getContext('2d');
canvas.width = document.body.clientWidth;
canvas.height = document.body.clientHeight;
context.fillStyle = "#F9AC06";
context.beginPath();
//var points = 10;
//var pos_left = (0+points*10);
//var pos_top = (0+points*10);
context.arc(pos_left+points*10, pos_top+points*10, points*10/3, 0, Math.PI * 2);
context.closePath();
context.fill();
context.fillStyle = "black";
var font = "bold " + points*10/2 + "px sans-serif";
context.font = font;
var width = context.measureText(points).width;
var height = context.measureText("w").width;
context.fillText(points, pos_left - (width/2)+points*10 ,pos_top+points*10 + (height/2));
}
generateCanvas(10, 1, 1)
document.onkeydown = checkKey;
function checkKey(e) {
e = e || window.event;
if (e.keyCode == '38') {
// up arrow
}
else if (e.keyCode == '40') {
// down arrow
}
else if (e.keyCode == '37') {
// left arrow
}
else if (e.keyCode == '39') {
// right arrow
generateCanvas(window.v_points, (window.v_left++), window.v_top);
}
}
});
Ik hoop dat iemand mij kan helpen, en eventueel tips kan geven.
Vriendelijke groet,
Pascal
