世上也许有玄学,但不会在代码上出现。——鲁迅

关于鼠标与植物偏移的bug

bug描述:
在网页不同缩放倍率下,出现鼠标与植物偏移。

缩放100%↓
PVZ抓虫一 | 鼠标与植物偏移的bug

缩放70%↓
PVZ抓虫一 | 鼠标与植物偏移的bug

缩放130%↓
PVZ抓虫一 | 鼠标与植物偏移的bug
问题原因:
这是因为在网页缩放时,只放大了我们所看到的内容。在网页的html文件代码中,我们会发现一个resizeCanvas()函数,它是用来缩放canvas的大小的。而在An中构建文件时,我们的格子宽高以及格子区域的左内边距和右内边距并不会自动放大缩小。
PVZ抓虫一 | 鼠标与植物偏移的bug

  • 脚本读取的是我们的鼠标在stage上的位置,即stage.mouseX最大值为1280。
  • 试想一下,当我们的stage.mouseX最大时,我们的movingPlant应该在何处?在canvas的最右边。
  • 然而事实上,在网页放大时,我们的鼠标仅仅是在canvas的中间位置。
  • 所以,这就是为什么越往右下角走,两者的偏移量越大。

解决办法:
在整个脚本中,** 所有 **用到stage.mouseX和stage.mouseY的地方,我们都是用全局变量trueMouseX和trueMouseY进行优雅的替代。
需要注意的是,由于这个全局变量每一帧都是在改变的,所以每一帧都需要更新他们的值。
PVZ抓虫一 | 鼠标与植物偏移的bug
PVZ抓虫一 | 鼠标与植物偏移的bug
nice!完美!优雅!

相关文章:

  • 2021-06-09
  • 2021-08-16
  • 2022-12-23
  • 2022-12-23
  • 2022-01-10
  • 2022-01-10
  • 2022-12-23
  • 2021-10-30
猜你喜欢
  • 2022-03-03
  • 2021-05-11
  • 2022-12-23
  • 2022-01-10
  • 2022-12-23
  • 2022-12-23
  • 2021-07-12
相关资源
相似解决方案