基於HTML5/JavaScript的遊戲 - 通過觸摸控制x/y座標

我正在嘗試製作HTML5 Canvas/JavaScript遊戲。我看了一些教程，我明白什麼是每個人的意圖，但我沒有得到正確的觸摸設備控制。基於HTML5/JavaScript的遊戲 - 通過觸摸控制x/y座標

我想讓我的'飛艇'，我的手指觸摸屏幕。它不僅適用於我的鼠標所在的位置。

<!DOCTYPE html> 
<html> 
<head> 
    <title>Title</title> 
    <script type="text/javascript"> 
     window.onload = function() { 

      var canvas = document.getElementById('canvas'); 
      var context = canvas.getContext('2d'); 

      var canvasWidth = canvas.offsetWidth; 
      var canvasHeight = canvas.offsetHeight; 

      var bg1 = new Image(); 
      var bg2 = new Image(); 

      bg1.src = "img/spritesheet.png"; 
      bg2.src = "img/spritesheet.png"; 

      var increment = -5; 
      var sYbg1 = 0; 
      var sYbg2 = 960; 

      var ship = new Image(); 
      ship.src = "img/spritesheet.png"; 

      var mouseX; 
      var mouseY; 

      canvas.onmousemove = function() { 

        mouseX = window.event.clientX - canvas.offsetLeft; // mousePositionX 
inside the <canvas> element 
        mouseY = window.event.clientY - canvas.offsetTop; // mousePositionY 
inside the <canvas> element 

      }; 

      var animate = function() { 

       context.clearRect(0,0,canvasWidth,canvasHeight); 


context.drawImage(bg1,0,sYbg1,canvasWidth,canvasHeight,0,0,canvasWidth,canvasHeight); 

context.drawImage(bg2,0,sYbg2,canvasWidth,canvasHeight,0,0,canvasWidth,canvasHeight); 
       sYbg1 += increment; 
       sYbg2 += increment; 

       if(sYbg2 <= 0) { 
        sYbg1 = 0; 
        sYbg2 = 960; 
       } 

       context.drawImage(ship,320,0,65,105,(mouseX-32),(mouseY-52),65,105); 

       setTimeout(animate,25); 
      }; 

      animate(); 

     } 
    </script> 
</head> 
<body> 
    <canvas id="canvas" width="320" height="480"></canvas> 
</body> 
</html>

（我的代碼是唯一的工作在Chrome！） - >但那不重要不，我知道的window.event，它不是在FF工作。

我希望有人能向我解釋我需要做什麼。我試圖解決我的問題，一起使用onmousemove和onmousedown，但那也不適合我。非常感謝您的幫助！

來源

2014-03-12 JustDevelop

我會提供一個提示，如果你還沒有到那裏，併爲未來的研究人員。你有一個鼠標事件處理程序（mousemove）。我沒有看到觸摸事件處理程序。有一些選項取決於您的瀏覽器，這對我而言並不清楚，您可以使用... 但是，您可以開始查看https://developers.google.com/或MDN https://developer.mozilla.org/en-US/作爲良好的起點。

來源

2014-04-08 17:47:46 t1nr2y

非常感謝！這對我來說非常有用。我沒有注意到我需要一些觸摸事件處理程序而不是mousemove處理程序。這種類型現在對我很重要。謝謝！ – JustDevelop

基於HTML5/JavaScript的遊戲 - 通過觸摸控制x/y座標

回答

相關問題