Question

我正试图制作一个游戏，你跳过黑色的敌人并射击红色的敌人。你扮演圆圈。我的问题是，当你跳跃时，有一个播放器在空中和地面上的副本。请帮助并提供纯粹的JavaScript。谢谢。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Title</title>
  </head>
  <body>
<style>
  canvas {
    border:1px solid #000;
  }
</style>
<canvas id="myCanvas" width="1350px" height="640px"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var floorX = 0;
var floorY = (canvas.height/4)*2.5;
var enemyX = canvas.width;
var enemyY = floorY - 100;
var enemyType = Math.floor((Math.random()*2)+1);
var jumping = false;
var laser = false;
var safe = true;
var circleY = floorY - 50;
var circleX = 70;

document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);

function keyDownHandler(e) {
  if (e.keyCode == 32) {
    jumping = true;
  }
}

function keyUpHandler(e) {
  if (e.keyCode == 32) {
    jumping = false;
  }
}

function draw() {
  if (safe) {
    ctx.clearRect(0,0,canvas.width,canvas.height);
  if (enemyType == 1) {
    ctx.fillStyle = "#f00";
  } else {
    ctx.fillStyle = "#000";
  }
  if (enemyX < 130) {
    if (enemyType == 2) {
      if (jumping) {
        safe = true;
      } else {
        safe = false;
      }
    } else {
      safe = false;
    }
  }
  ctx.fillRect(enemyX,enemyY,50,100);
  ctx.fillStyle = "#888";
  ctx.fillRect(floorX,floorY,canvas.width,canvas.height-floorY);
  ctx.fillStyle = "#00f";
  if (jumping) {
    circleY = floorY - 150;
  } else {
    circleY = floorY - 50;
  }
  ctx.arc(circleX,circleY,50,0,2*Math.PI);
  ctx.fill();
  enemyX -= 15;
  }
}

setInterval(draw,25);
</script>
</body>
</html>

我认为这与我的clearRect或我对圈子的Y位置的if语句有关，但我不知道。谢谢你的帮助。

Answer 1

您需要致电beginPath()开始新路径。

//...
ctx.beginPath();
ctx.arc(circleX,circleY,50,0,2*Math.PI);
//...

遇到html canvas和javascript问题

1 个答案: