Question

我创建了this game。现在我希望它可移植或在移动设备和平板电脑浏览器中运行。

我已经尝试了几乎所有类型的技术来实现这一点，例如使用<iframe>只调整外部大小而不改变内容大小。我甚至尝试对<canvas>标记应用放大，最终没有响应<canvas>标记。

我是否每次都要为不同的移动分辨率重新制作游戏，或者是否有任何方法可以根据屏幕设备的高度和宽度进行缩放，以便<canvas>标记的内容完整显示？

那我该怎么办？顺便说一下，我也尝试过媒体查询，看起来它们对我不起作用，因为我已经使用预加载的JavaScript加载我的文件和东西。我很乐意得到任何帮助。

P.S我的共享链接，游戏如何在不同的分辨率下工作？您想要讨论的任何方法或针对<canvas>标记的不同分辨率动态重新调整此搜索。

Answer 1

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

快速破解是在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>

如何修改我的游戏以适合移动平台？

1 个答案: