js经典案例：微信打飞机

tools.js代码：
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var enemy = new Image();
enemy.src = "images/enemy.png";
var enemy2 = new Image();
enemy2.src = "images/enemy2.png";
var enemy3 = new Image();
enemy3.src = "images/enemy3.png";
var background = new Image();
background.src = "images/bg.png";
var x;
var y;
var bx;
var by;
var t;
var bt;
function move(length, distance) {
//键盘事件
document.onkeydown = function(event) {
var e = event ? event : window.event;
if (e.keyCode == 37)//左
moveLeft(length, distance);
if (e.keyCode == 38)//上
moveUp(length, distance);
if (e.keyCode == 39)//右
moveRight(length, distance);
if (e.keyCode == 40)//下
moveDown(length, distance);
}
}
function draw(type, x1, y1) {
ctx.drawImage(background, 0, 0);
if (type == 1) {
ctx.drawImage(enemy, x1, y1);
t = enemy;
} else if (type == 2) {
ctx.drawImage(enemy2, x1, y1);
t = enemy2;
} else if (type == 3) {
ctx.drawImage(enemy3, x1, y1);
t = enemy3;
}
x = x1;
y = y1;
}
function moveDown(length, distance) {
distance = y + distance;
time();
var timeout = false;
//启动及关闭按钮
function time() {
if (y >= distance) {
timeout = true;
}
if (timeout) {
return;
}
ctx.drawImage(background, 0, 0);
ctx.drawImage(t, x, y);
y = y + length;
setTimeout(time, 10);
}
}
function moveUp(length, distance) {
distance = y - distance;
time();
var timeout = false;
//启动及关闭按钮
function time() {
if (y <= distance) {
timeout = true;
}
if (timeout) {
return;
}
ctx.drawImage(background, 0, 0);
ctx.drawImage(t, x, y);
y = y - length;
setTimeout(time, 10);
//time是指本身,延时递归调用自己,10为间隔调用时间,单位毫秒
}
}
function moveRight(length, distance) {
distance = x + distance;
time();
var timeout = false;
//启动及关闭按钮
function time() {
if (x >= distance) {
timeout = true;
}
if (timeout) {
return;
}
ctx.drawImage(background, 0, 0);
ctx.drawImage(t, x, y);
x = x + length;
setTimeout(time, 10);
}
}
function moveLeft(length, distance) {
distance = x - distance;
time();
var timeout = false;
//启动及关闭按钮
function time() {
if (x <= distance) {
timeout = true;
}
if (timeout) {
return;
}
ctx.drawImage(background, 0, 0);
ctx.drawImage(t, x, y);
x = x - length;
setTimeout(time, 10);
//time是指本身,延时递归调用自己,10为间隔调用时间,单位毫秒
}
}

求大神指导，刚接触，想教孩子的