我用javascript做的一个小游戏，各位捧场给看看。

其实我主要是想问下那个CSS样式表怎么用，我用鼠标检测坐标，当用CSS移动<canvas>画布的位置时
坐标就全乱了，这个怎么弄，有简单的办法不。<!DOCTYPE html>
<html>
<head><title>Game</title>
<script type="text/javascript" src="user.js"></script>
<link rel="stylesheet" type="text/css" href="user.css" />
<meta http-equiv="Cache-Control" content="no-cache"/>
</head>
<body onload="draw();">
<canvas id="canvas" width="600" height="600"></canvas>
</body>
</html>
Array.prototype.inside= function(_r){
if(this[0]==undefined)return false;
else  for(i=0;i<=this.length;i++){
if(_r==this[i]) return true;
};
return false;
};var i,r,j,t;
var showX,showY;
var R=new Array();
var X=new Array();
var Y=new Array();
var img=new Array();
var table=new Array();
var showList=new Array();var table_x=[24,124,224,324,424,524];
var table_y=[24,124,224,324,424,524];
var a=new Array("0001.png","0002.png","0003.png","0004.png","0005.png","0006.png","0007.png","0008.png");function show(){
var showElement=new Object();
showElement.x=0;
showElement.y=0;
showElement.w=0;
showElement.h=0;
showElement.src=" ";
showElement.inside= function(x,y){
if(x>=this.x&&y>=this.y&&x<=this.w&&y<=this.h)return true;
else return false;
};
return showElement;
}for(i=7;i>=0;i--){
showList[i]=show();
showList[i].src=a[i];
}
for(i=0;i<36;i++){
table[i]=show();
}
for(i=0;i<6;i++){
for(j=0;j<6;j++){
X.push(table_x[i]);Y.push(table_y[j]);
}
}
for(i=0;i<36;i++){
table[i].x=X[i];table[i].y=Y[i];
}
while(R.length<8){
r=Math.random()*35+1; 
r=parseInt(r);
if(R.inside(r)==true)continue;
else R.push(r);
}for(i=7;i>=0;i--){
r=R[i];
showList[i].x=table[r].x;
showList[i].y=table[r].y;
}function draw(){
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
var x,y;

for(i=7;i>=0;i--){
img[i]=new Image();
img[i].src=showList[i].src; 
}

img[0].onload= function(){
for(i=7;i>=0;i--){
x=showList[i].x;
y=showList[i].y;
showList[i].w=x+72;
showList[i].h=y+72;
context.drawImage(img[i],x,y);
}
} document.onmousemove=  function(){
showX=event.clientX;
showY=event.clientY;
context.clearRect(0,0,100,25);
context.fillText(showX+" "+showY,10,10);
}; document.onmousedown= function(){
for(i=7;i>=0;i--){
r=showList[i].inside(showX,showY);
if(r==true)context.clearRect
(showList[i].x,showList[i].y,72,72); }
};
context.fillText(R.join("\n"),0,50);
}
canvas {
position: absolute;
left: ;
}