-4

我创造了这个游戏。现在我希望它可以移植或在移动设备和平板电脑浏览器中运行。

我已经尝试了几乎所有类型的技术来实现这一点，比如使用<iframe>它只调整外部大小而不改变内容大小。我什至尝试在<canvas>标签上应用缩放，最终不会响应<canvas>标签。

是不是每次都要针对不同的手机分辨率重新制作游戏，或者有什么方法可以根据屏幕设备的高度和宽度进行缩放，让<canvas>tag的内容完全显示出来？

那么我能做什么呢？顺便说一句，我也尝试过媒体查询，但似乎它们对我不起作用，因为我使用了 JavaScript 中的预加载来加载我的文件和内容。我很想得到任何帮助。

PS我的共享链接，游戏如何在不同的分辨率下工作？您想讨论的任何方法或针对不同分辨率的<canvas>标签动态重新缩放的任何新搜索。

4

1 回答 1

0

真正的答案是修改您的游戏，使其能够缩放其视口以适应移动设备。

一个快速的技巧是在 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>
于 2013-07-13T20:52:05.623 回答