Mouse follow move
move with restrictions follow the mouse fullscreen, because of jsfiddle frames this is not very obvious, but does work
HTML
<body> <span class="mouse"></span>
<span class="other"></span>
<canvas id="myCanvas" width="500" height="500"></canvas>
</body>
JavaScript
a // Create the canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
ctx.canvas.width = 500;
ctx.canvas.height = 500;
document.body.appendChild(canvas);
// Background image
var rot = 1;
var bgReady = false;
var bgImage = new Image();
bgImage.onload = function () {
bgReady = true;
};
bgImage.src = "http://piq.codeus.net/static/media/userpics/piq_125305_400x400.png";
// tank
var tankReady = false;
var tankImage = new Image();
tankImage.onload = function () {
tankReady = true;
};
tankImage.src = "http://piq.codeus.net/static/media/userpics/piq_125305_400x400.png";
var tank = {
speed: 100, // movement in pixels per second
x: 10,
y: 10
};
// Handle keyboard controls
var keysDown = {};
addEventListener("keydown", function (event) {
keysDown[event.keyCode] = true;
}, false);
addEventListener("keyup", function (event) {
delete keysDown[event.keyCode];
}, false);
// Update game objects
var update = function (modifier) {
rot += 1;
if (tank.x >= 1485) {
tank.x = 1484;
}
if (tank.x <= 0) {
tank.x = 1;
}
if (tank.y <= 0) {
tank.y = 1;
}
if (tank.y >= 610) {
tank.y = 609;
}
//controls
if (87 in keysDown) { // Player holding up
tank.y -= tank.speed * modifier;
}
if (83 in keysDown) { // Player holding down
tank.y += tank.speed * modifier;
}
if (65 in keysDown) { // Player holding left
tank.x -= tank.speed * modifier;
}
if (68 in keysDown) { // Player holding right
tank.x += tank.speed * modifier;
}
};
function drawRotatedImage(image, x, y, angle) {
// save the current co-ordinate system
// before we screw with it
ctx.save();
// move to the middle of where we want to draw our image
ctx.translate(x, y);
// rotate around that point, converting our
// angle from degrees to radians
...