1

HTML5 Canvas と Javascript を使用してゲームを作成しようとしています。私がやろうとしているのは、てんとう虫を特定の間隔で画面上を移動させることです。テントウムシの上にマウスを置くと間隔が広がり、別の場所にスポーンします。今、私はそれを持っているので、ページを更新するとてんとう虫が別の場所に出現します。独自に更新する方法や、マウスのホバーを検出する方法がわかりません。

前もって感謝します。

これは私がこれまでに持っているものです:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>

<canvas id="myCanvas" width="600" height="480"></canvas>
<script>
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  var posX = (Math.random() * 520) + 1;
  var posY = (Math.random() * 400) + 1;
  var ladybug = new Image();
  var background = new Image();
  var velocity = 5;
  var FPS = 30;

  update();
  draw();
  background();
  function background() {
      background.onload = function () {
          context.drawImage(background, 50, 50);
      }
      background.src = 'Images/grass.png';
  }
  function draw() {
      context.clearRect(0, 0, myCanvas.width, myCanvas.height);
      context.fillStyle = "black"; // Set color to black
      context.font = "bold 16px Arial";
      context.fillText("Sup Bro!", posX, posY);
      ladybug.onload = function () {
          context.drawImage(ladybug, posX, posY);
      };

      ladybug.src = 'Images/Ladybug.png';

  }
  function update() {


  }
</script>


</body>
</html>
4

1 に答える 1

0

初め。独自に更新します。

バグを画面上で移動させるには、定期的に update を使用する必要があります。

// instead of update() use setInterval(update, 1000 / FPS)
//update();
setInterval(update, 1000 / FPS);

ここで、1000 = 1 秒および1000 / FPS= 正確に 1 秒あたりの FPS 実行。update に logging を追加することで、ブラウザー コンソールで 1 秒あたり 30 回実行されることを確認できます。

function update(){
  console.log("Here we go");
}

ただし、注意してください。これにより、ブラウザ コンソールに大量のスパムが送信されます。

ここでは、キャンバスから古いバグを消去し、座標を再計算して、新しい場所に新しいものを描画する必要があります。

次は、背景を修正します。backgroundエラーが発生したため、関数の名前を(drawBackgroundまたはその他の名前に) 変更します。背景は既に定義されており、画像です。

2番。ホバー検出。

ユーザーがバグにカーソルを合わせているかどうかを確認するには、キャンバスで onmousemove イベントを使用する必要があります。

function init() {
  canvas.onmousemove = function(event) {
    if (window.event) event = window.event; // IE hack
    var mousex = event.clientX - canvas.offsetLeft;
    var mousey = event.clientY - canvas.offsetTop;
    mousemove(mousex, mousey);
  }
}
function mousemove(x, y) {
  console.log (x, y);
  // here check, if mousex and mousey is in rectangle (x, y, x + width, y + width)
  // where x, y, width and height are parameters of lady bug
}

PS:

canvas や html と dom を操作するための厄介なフレームワークがたくさんあります。彼らは生活を楽にします。ただし、それらを探索する前に、純粋な JS で数回実行することをお勧めします。

于 2013-10-20T17:15:09.260 に答える