Question

我制作了一款手机游戏，并希望当用户触摸屏幕左侧时球向右移动，如果用户触摸右侧的屏幕，则球应该向左移动。我找到了一个代码片段并尝试使用它，但它不起作用。有没有人给我提示解决问题？

    	window.onload = window.onresize = function() {
    	  var C = 1; // canvas width to viewport width ratio
    	  var W_TO_H = 2 / 1; // canvas width to canvas height ratio
    	  var el = document.getElementById("myCanvas");


    	  var viewportWidth = window.innerWidth;
    	  var viewportHeight = window.innerHeight;

    	  var canvasWidth = viewportWidth * C;
    	  var canvasHeight = canvasWidth / W_TO_H;
    	  el.style.position = "fixed";
    	  el.setAttribute("width", canvasWidth);
    	  el.setAttribute("height", canvasHeight);
    	  el.style.top = (viewportHeight - canvasHeight) / 2;
    	  el.style.left = (viewportWidth - canvasWidth) / 2;
    	  var x = canvasWidth / 100;
    	  var y = canvasHeight / 100;

    	  window.ctx = el.getContext("2d");
    	  ctx.clearRect(0, 0, canvasWidth, canvasHeight);
    	  // draw triangles
    	  ctx.beginPath();
    	  ctx.moveTo(x * 90, y * 50);
    	  ctx.lineTo(x * 99, y * 75);
    	  ctx.lineTo(x * 99, y * 25);
    	  ctx.closePath();
    	  ctx.stroke();
    	  ctx.beginPath();
    	  ctx.moveTo(x * 10, y * 50);
    	  ctx.lineTo(x * 1, y * 25);
    	  ctx.lineTo(x * 1, y * 75);
    	  ctx.closePath();
    	  ctx.stroke();

    	  ballx = canvasWidth / 100;
          
    	  // draw ball
    	  ctx.beginPath();
    	  ctx.fillStyle = "#FF4422"
    	  ctx.arc(ballx * 50, y * 50, x * 5, 0, 2 * Math.PI);
    	  ctx.fill();

    	  function init() {
    	    // Get a reference to our touch-sensitive element
    	    var touchzone = document.getElementById("gameArea");
    	    // Add an event handler for the touchstart event
    	    touchzone.addEventListener("touchstart", touchHandler, false);
    	  }

    	  function touchHandler(event) {
    	    // Get a reference to our coordinates div
    	    var can = document.getElementById("myCanvas");
    	    // Write the coordinates of the touch to the div
    	    if (event.touches[0].pageX < x * 50) {
    	      ballx += x * 2;
    	    } else if (event.touches[0].pageY > x * 50) {
    	      ballx -= x * 2;
    	    }


    	  }
    	}

<html>

<head>
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1">
</head>

<body>
  <div="gameArea">
    <canvas id="myCanvas"></canvas>
  </div>
</body>

</html>

Answer 1

HTML中有错误：

<div="gameArea">

应该是：

<div id="gameArea">

JS看起来很好。只是不要忘记在某个时候运行init()功能。

另一个问题 - 将画布位置设置为fixed会导致其父元素（gameArea）不会扩展到画布大小。您要么在HTML中修复它，要么只是在画布本身上监听触摸（这更有意义）。

下一期：

            if (event.pageX < x * 50) {
                ballx += 1;
            } else if (event.pageY > x * 50) {
                ballx -= 1;
            }

在这两种情况下都需要检查pageX：

                } else if (event.pageX > x * 50) {

另请注意，我已修改x * 2修改ballx以将其修改为1，因为在渲染功能中，您已将其乘以x，因此{{1}会导致球在画布外呈现。

以下是经过调整后可在浏览器中使用的略微简化版本：http://jsfiddle.net/4hy12hyo/

这应该足以让你开始。

触摸事件javascript

1 个答案: