metaton
@metaton (metaton Go)

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

[javascript]なぜかブロックが消えてしまう

解決したいこと

赤いブロックを操作して白いブロックに当たると白いブロックが消えるゲームを作っていたのですが、何故か当たってないのに消えてしまいます。
ifの書き方が悪いのでしょうが分からなかったので質問させて頂きます。

該当するソースコード

let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
let x = 150;
let y = 100;
let ex = 200;
let ey = 100;

window.onload=function drawRext(){
  var b = document.body;
  var d = document.documentElement;
  kabe();
  heart();
  item();
}

function kabe(){
  ctx.strokeStyle="white"; 
  ctx.strokeRect(150,100,120,120);
  ctx.stroke();
}
function heart(){
  ctx.clearRect(0,0,canvas.width,canvas.height);
  ctx.beginPath()
  ctx.fillStyle="red";
  let hat = ctx.fillRect(x,y,5,5);
  ctx.closePath()
}

function item(){
  ctx.fillStyle="white";
  let itm = ctx.fillRect(ex,ey,5,5);
}
  document.onkeydown=function(e){
  switch(e.key){
    case "ArrowLeft":
      x -= 5;
      break;
    case "ArrowRight":
      x += 5;
      break;
    case "ArrowUp":
      y -= 5;
      break;
    case "ArrowDown":
      y += 5;
      break;
  }

  if (x == ex && y == ey) {
    ctx.clearRect(ex,ey,5,5);
  }
  else {
    item();
  }
  heart();
}

自分で試したこと

色々調べたり見直したりしましたが分かりませんでした。

0

1Answer

item()で表示された白ブロックが、その後に呼ばれるheart()内のclearRect()によって白ブロックごと消されてしまっているのだと思います。

heart()を呼ぶ位置をitem()を呼ぶより前に移動するか、function heart()内にあるctx.clearRect(0,0,canvas.width,canvas.height);の位置を再考するとよいのではないでしょうか。

0Like

Comments

  1. @metaton

    Questioner

    返信ありがとうございます、おかげさま先に進めました。
    ですが次は白いブロックに触れると赤いブロックも消えてしまったのですがどうすればいいでしょう。
  2. @metaton

    Questioner

    恐らく白いブロックの座標をClearRectしたのでその座標にある赤ブロックもきえたのでしょうが解決策が分かりません
  3. @metaton

    Questioner

    ごめんなさい自己解決しました

Your answer might help someone💌