真正的答案是修改您的游戏,使其能够缩放其视口以适应移动设备。
一个快速的技巧是在 CSS 中按比例缩放画布,然后取消缩放游戏中的事件。
这个快速破解用于测试......真正的答案是用于生产!
这是一个快速破解和小提琴:http: //jsfiddle.net/m1erickson/q7SV6/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var circleX=250;
var circleY=250;
var circleR=40;
// In this illustration, the canvas is square
// Since your canvas is probably not square
// You would need to break into downScaleX and downScaleY
var downScale=3;
ctx.beginPath();
ctx.arc(circleX,circleY,circleR,0,Math.PI*2,false);
ctx.closePath();
ctx.fill();
// use css to scale down the canvas
var newWidth=parseInt($("#canvas").css("width"))/downScale;
var newHeight=parseInt($("#canvas").css("height"))/downScale;
$("#canvas").css("width",newWidth).css("height",newWidth);
$("#canvas").click(function(e){
var canvasOffset=$("#canvas").offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
// adjust the mouse X/Y for the downScale
var x=parseInt(e.clientX-offsetX)*downScale;
var y=parseInt(e.clientY-offsetY)*downScale;
var dx=x-250;
var dy=y-250;
if(dx*dx+dy*dy<40*40){
alert();
}
});
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>