我想实现的是那个球杆能再球的周围随着鼠标的移动绕着白球旋转.
但是运行出来就不对了.麻烦高人指导指导
index.htm文件
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/gameDraw.js"></script>
<script>
function run(){
var gd=new gameDraw("myCanvas");
$("canvas#myCanvas").mousemove(function(e){gd.mouseXY(e)});
setInterval(gd.upDateCanvas(),1000/12);
};
onload=run;
</script>
</head>
<body >
<canvas id="myCanvas" width="600" height="400">Your Broswer don't support html5!!!<canvas>
</body>
</html>
gameDraw.js文件
var canvasX,canvasY;
var ballX,ballY;
var rectLTopX,rectLTopY;
var myCanvas,ctx;
var mouseX,mouseY;
var imgCue,imgWhiteBall;
var degree;
function gameDraw(canvas){
myCanvas=document.getElementById(canvas);
ctx =myCanvas.getContext("2d");
//初始化白球的坐标
ballX=myCanvas.width/2;
ballY=myCanvas.height/2;
ctx.save();
};
gameDraw.prototype={
upDateCanvas : function(){
this.drawBall();
this.drawCue();
},
drawBall : function(){
ctx.restore();
imgWhiteBall=new Image();
imgWhiteBall.src="image/ball.png";
ctx.drawImage(imgWhiteBall,ballX,ballY);
},
drawCue : function(){
ctx.restore();
imgCue=new Image();
imgCue.src="image/cue.png";
ctx.translate(ballX,ballY);
ctx.drawImage(imgCue,40,imgCue.height/2);
degree=Math.atan2(ballY-mouseY,mouseX-ballX);//相对坐标
if( (mouseX-ballX)>0 ){
ctx.rotate(degree);
}
else if( (mouseX-ballX)<0 ){
ctx.rotate(Math.PI+degree);
}
else if( (mouseX-ballX)=0 && (ballY-mouseY)>=0 ){
ctx.rotate(Math.PI/2);
}
else if( (mouseX-ballX)>=0 && (ballY-mouseY)<0 ){
ctx.rotate(-Math.PI/2);
}
},
mouseXY : function(e){
mouseX=e.pageX;
mouseY=e.pageY;
},
};
但是运行出来就不对了.麻烦高人指导指导
index.htm文件
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/gameDraw.js"></script>
<script>
function run(){
var gd=new gameDraw("myCanvas");
$("canvas#myCanvas").mousemove(function(e){gd.mouseXY(e)});
setInterval(gd.upDateCanvas(),1000/12);
};
onload=run;
</script>
</head>
<body >
<canvas id="myCanvas" width="600" height="400">Your Broswer don't support html5!!!<canvas>
</body>
</html>
gameDraw.js文件
var canvasX,canvasY;
var ballX,ballY;
var rectLTopX,rectLTopY;
var myCanvas,ctx;
var mouseX,mouseY;
var imgCue,imgWhiteBall;
var degree;
function gameDraw(canvas){
myCanvas=document.getElementById(canvas);
ctx =myCanvas.getContext("2d");
//初始化白球的坐标
ballX=myCanvas.width/2;
ballY=myCanvas.height/2;
ctx.save();
};
gameDraw.prototype={
upDateCanvas : function(){
this.drawBall();
this.drawCue();
},
drawBall : function(){
ctx.restore();
imgWhiteBall=new Image();
imgWhiteBall.src="image/ball.png";
ctx.drawImage(imgWhiteBall,ballX,ballY);
},
drawCue : function(){
ctx.restore();
imgCue=new Image();
imgCue.src="image/cue.png";
ctx.translate(ballX,ballY);
ctx.drawImage(imgCue,40,imgCue.height/2);
degree=Math.atan2(ballY-mouseY,mouseX-ballX);//相对坐标
if( (mouseX-ballX)>0 ){
ctx.rotate(degree);
}
else if( (mouseX-ballX)<0 ){
ctx.rotate(Math.PI+degree);
}
else if( (mouseX-ballX)=0 && (ballY-mouseY)>=0 ){
ctx.rotate(Math.PI/2);
}
else if( (mouseX-ballX)>=0 && (ballY-mouseY)<0 ){
ctx.rotate(-Math.PI/2);
}
},
mouseXY : function(e){
mouseX=e.pageX;
mouseY=e.pageY;
},
};
解决方案 »
免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货