亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

JS - 在畫布中圍繞鼠標位置制作一個hitbox?

JS - 在畫布中圍繞鼠標位置制作一個hitbox?

守著星空守著你 2022-11-03 14:56:24
快樂星期天!所以,我只是為了好玩而制作了一個愚蠢的鴨子狩獵翻拍,我有一個問題。在畫布中圍繞鼠標光標制作碰撞框的最佳方法是什么?這是我用來為不同的鴨子設置動畫的代碼,以及用于檢查與邊緣屏幕的碰撞并將它們彈回另一個方向的代碼。我知道可能有 100 種其他(更好的)方法可以做到這一點,但我幾乎是從零開始制作的,到目前為止我真的很喜歡它。那我想做什么?我需要殺鴨子。所以當我點擊一只鴨子時,我可以讓它消失。消失的部分不是問題,我只是不確定如何繼續。非常感謝任何幫助!這是我的動畫和碰撞檢測代碼:function animateDuckSprites(ducks) {  ctx.clearRect(0, 0, canvas.width, canvas.height);  ducks.forEach((duck) => {    imageFrameNumber++; // changes the sprite we look at    imageFrameNumber = imageFrameNumber % totalNumberOfFrames; // Change this from 0 to 1 to 2 ... upto 9 and back to 0 again, then 1...    ctx.drawImage(      duck.sprite,      imageFrameNumber * widthOfSingleImage,      0, // x and y - where in the sprite      widthOfSingleImage,      heightOfImage, // width and height      duck.x,      duck.y, // x and y - where on the screen      widthOfSingleImage,      heightOfImage // width and height    );    checkCollision(duck);  });}function checkCollision(duck) {  if (    duck.x + duck.dx > canvas.width - duck.duckSize ||    duck.x + duck.dx < 10  ) {    duck.dx = -duck.dx;    duck.duckRight = !duck.duckRight;    duck.sprite.src = duck.duckRight ? duck.spriteRight : duck.spriteLeft;  }  if (    duck.y + duck.dy > canvas.height - duck.duckSize ||    duck.y + duck.dy < 25  ) {    duck.dy = -duck.dy;  }  duck.x += duck.dx;  duck.y += duck.dy;}謝謝!編輯:剛想出這個......它有點工作:Pcanvas.addEventListener("click", (e) => {  if (    e.screenX >= blueDuck.x + 50 &&    e.screenX <= blueDuck.x + 200 &&    e.screenY >= blueDuck.y + 160 &&    e.screenY <= blueDuck.y + 220  ) {    console.log("HIT");  }});
查看完整描述

1 回答

?
猛跑小豬

TA貢獻1858條經驗 獲得超8個贊

剛想出這個......它有點工作:P


canvas.addEventListener("click", (e) => {

  if (

    e.screenX >= blueDuck.x + 50 &&

    e.screenX <= blueDuck.x + 200 &&

    e.screenY >= blueDuck.y + 160 &&

    e.screenY <= blueDuck.y + 220

  ) {

    console.log("HIT");

  }

});


查看完整回答
反對 回復 2022-11-03
  • 1 回答
  • 0 關注
  • 121 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號