如何修改我的遊戲以適合移動平臺？

-4

我創建了this game。現在我希望這是便攜式或在手機和平板電腦瀏覽器中運行。如何修改我的遊戲以適合移動平臺？

我已經嘗試過幾乎所有類似的技術，使用來實現這種效果，它只調整外部尺寸並永不改變內容尺寸。我甚至嘗試在<canvas>標籤上應用縮放，最終將不會響應<canvas>標籤。

我是否必須每次都爲不同的移動解決方案重新制作遊戲，或者是否有任何方法根據屏幕設備的高度和寬度對其進行縮放，以便<canvas>標記的內容完全顯示？

那麼我該怎麼辦？順便說一句我也試過媒體查詢，似乎他們不會爲我工作，因爲我用JavaScript預加載來加載我的文件和東西。我很樂意得到任何幫助。

P.S我的共享鏈接，遊戲如何在不同的分辨率下工作？您想要討論的任何方法或針對不同分辨率的<canvas>標籤動態重新縮放的任何新搜索。

來源

2013-07-13 Yawr Mailk

我曾問一個呈三角問題：http://stackoverflow.com/questions/13157586/full-screen-canvas-on-mobile-設備 – Cristy

該鏈接只是導致錯誤頁面... – l4mpi

codecanyon是一個市場。嘗試鏈接到一個非銷售版本，你可能會得到更好的迴應？ – Jarrod

真正的答案是修改您的遊戲以便能夠調整其視口以適應移動設備。

一個簡單的黑客就是按比例縮放CSS中的canvas，然後在您的遊戲中縮放事件。

這個快速入門是爲了測試...真正的答案是生產！

這裏是一個快速黑客和小提琴：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-13 20:52:05 markE

如何修改我的遊戲以適合移動平臺？

回答

相關問題