html画布和javascript存在问题_Javascript_Html_Html5 Canvas

html画布和javascript存在问题

javascript html html5-canvas

html画布和javascript存在问题,javascript,html,html5-canvas,Javascript,Html,Html5 Canvas,我想做一个游戏，你跳过黑色的敌人，射杀红色的敌人。你扮演圆圈。我的问题是，当你跳的时候，空中和地面都有一个球员的副本。请帮助并提供一个纯javascript。多谢各位 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Title</title> </head> <body> <s

我想做一个游戏，你跳过黑色的敌人，射杀红色的敌人。你扮演圆圈。我的问题是，当你跳的时候，空中和地面都有一个球员的副本。请帮助并提供一个纯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>


标题
帆布{
边框：1px实心#000；
}
var canvas=document.getElementById（“myCanvas”）；
var ctx=canvas.getContext（“2d”）；
var floorX=0；
可变地板=（帆布高度/4）*2.5；
var enemyX=canvas.width；
var Enemy=地板-100；
var enemyType=Math.floor（（Math.random（）*2）+1）；
var=false；
var激光=假；
var-safe=true；
var circleY=地板-50；
var-circleX=70；
文档。addEventListener（“keydown”，keyDownHandler，false）；
文件。addEventListener（“keyup”，keyUpHandler，false）；
函数keyDownHandler（e）{
如果（e.keyCode==32）{
跳跃=正确；
}
}
函数keyUpHandler（e）{
如果（e.keyCode==32）{
跳跃=错误；
}
}
函数绘图（）{
如果（安全）{
clearRect（0,0，canvas.width，canvas.height）；
如果（enemyType==1）{
ctx.fillStyle=“#f00”；
}否则{
ctx.fillStyle=“#000”；
}
如果（灌肠<130）{
如果（enemyType==2）{
如果（跳跃）{
安全=正确；
}否则{
安全=错误；
}
}否则{
安全=错误；
}
}
ctx.fillRect（灌肠，灌肠，50100）；
ctx.fillStyle=“#888”；
ctx.fillRect（地板、地板、帆布、宽度、帆布、高度地板）；
ctx.fillStyle=“#00f”；
如果（跳跃）{
circleY=地板-150；
}否则{
circleY=地板-50；
}
ctx.arc（circleX，circleY，50,0,2*Math.PI）；
ctx.fill（）；
灌肠剂-=15；
}
}
设置间隔（抽签，25）；

我认为这与我的clearRect或if语句有关，但我不知道。谢谢您的帮助。

您需要调用

beginPath（）

来启动新路径

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