item()で表示された白ブロックが、その後に呼ばれるheart()内のclearRect()によって白ブロックごと消されてしまっているのだと思います。
heart()を呼ぶ位置をitem()を呼ぶより前に移動するか、function heart()内にあるctx.clearRect(0,0,canvas.width,canvas.height);の位置を再考するとよいのではないでしょうか。
Like!
[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
0