问在没有JQuery的特定容器上创建“手电筒”效果
EN

Stack Overflow用户

提问于 2021-04-23 02:50:25

回答 1查看 54关注 0票数 0

我正在为一个项目创建一个游戏，并想在游戏顶部添加一个手电筒效果。

查找与此类似的内容，只查找我网页上的一个特定容器：https://codemyui.com/wp-content/uploads/2019/10/Flashlight-Mouse-Pointer.gif

我试着按照他们的方式去做，但是我不能让它工作。它不能正确地应用于我想要的容器，手电筒也不能工作。我不允许使用JQuery或任何导入这个项目，只有超文本标记语言，CSS和JS。任何帮助都将不胜感激。

下面是适用的代码：

//game flashlight
function update(e) {
  var x = e.clientX || e.touches[0].clientX
  var y = e.clientY || e.touches[0].clientY

  let gameBox = document.getElementById('gameBox');
  gameBox.documentElement.style.setProperty('--cursorX', x + 'px')
  gameBox.documentElement.style.setProperty('--cursorY', y + 'px')
}

document.addEventListener('mousemove', update)
document.addEventListener('touchmove', update)

#gameContainer {
  position: relative;
  height: 1000px;
  width: 1100px;
  float: right;
}

#gameContent {
  float: right;
  margin: 20px 10px 0px 10px;
  width: 1050px;
  border-style: solid;
  background-color: #FFE29C;
  border-color: #E1AA72;
  border-width: 3px;
  padding: 10px;
}

#gameBox {
  position: relative;
  height: 768px;
  width: 768px;
  border-style: solid;
  background-color: #EABF7D;
  border-color: #E1AA72;
  border-width: 3px;
  padding: 10px;
  margin-bottom: 10px;
  float: right;
  text-align: center;
  margin: 0 12% 0 12%;
  line-height: 1em;
}


/* Flashlight Overlay */

#gameContent {
  cursor: none;
  --cursorX: 50vw;
  --cursorY: 50vh;
}

#gameBox:before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: fixed;
  pointer-events: none;
  background: radial-gradient( circle 10vmax at var(--cursorX) var(--cursorY), rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .5) 80%, rgba(0, 0, 0, .95) 100%)
}

<div id="gameContainer">
  <div id="gameContent">
    <div id="gameBox">
      <img id="mapFit" src="images/Temple_Escape.jpg" alt="main map">
      <img id="chest" src="images/chest.png" alt="main map" onclick="chestClick()">
      <img id="chestOpened" src="images/chestopened.png" alt="main map" onclick="chestClick()">
      <img id="gold1" src="images/gold.png" alt="main map" onclick="gold1Click()">
      <img id="gold2" src="images/gold.png" alt="main map" onclick="gold2Click()">
      <img id="gold3" src="images/gold.png" alt="main map" onclick="gold3Click()">
      <img id="gold4" src="images/gold.png" alt="main map" onclick="gold4Click()">
      <img id="gold5" src="images/gold.png" alt="main map" onclick="gold5Click()">
      <img id="gold6" src="images/gold.png" alt="main map" onclick="gold6Click()">
      <img id="podium" src="images/podium.png" alt="main map" onclick="podiumClick()">
      <img id="rope" src="images/rope.png" alt="main map" onclick="ropeClick()">
      <img id="skeleton" src="images/skeleton.png" alt="main map" onclick="skeletonClick()">
      <img id="brokenPickaxe" src="images/brokenpickaxe.png" alt="main map" onclick="pickaxeClick()">
      <img id="stoneSlab1" src="images/stoneslab.png" alt="main map" onclick="slab1Click()">
      <img id="stoneSlab2" src="images/stoneslab.png" alt="main map" onclick="slab2Click()">
      <img id="tile1" src="images/tile1.png" alt="main map" onclick="floorStoneClick()">
      <img id="door1" src="images/door1.png" alt="main map" onclick="exitDoorClick()">
      <img id="redOrb" src="images/redorb.png" alt="main map" onclick="">
      <img id="blueOrb" src="images/blueorb.png" alt="main map" onclick="">
      <img id="greenOrb" src="images/greenorb.png" alt="main map" onclick="">
    </div>
  </div>

以下是应用该代码后的网站外观。1：https://i.stack.imgur.com/Z8pd9.jpg

javascript

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-04-24 08:58:42

不知道documentElement是从哪里来的，但它绝对不属于那里。

没有它，它似乎可以正常工作：

//game flashlight
let gameBox = document.getElementById('gameBox');
function update(e) {
  var x = e.clientX || e.touches && e.touches[0].clientX || 0;
  var y = e.clientY || e.touches && e.touches[0].clientY || 0;

  gameBox.style.setProperty('--cursorX', 'calc(' + x + 'px + 9vmax)');
  gameBox.style.setProperty('--cursorY', 'calc(' + y + 'px - 6vmax)');
}

document.addEventListener('mousemove', update)
document.addEventListener('touchmove', update)

#gameContainer {
  position: relative;
  height: 1000px;
  width: 1100px;
  float: right;
}

#gameContent {
  float: right;
  margin: 20px 10px 0px 10px;
  width: 1050px;
  border-style: solid;
  background-color: #FFE29C;
  border-color: #E1AA72;
  border-width: 3px;
  padding: 10px;
}

#gameBox {
  position: relative;
  height: 768px;
  width: 768px;
  border-style: solid;
  background-color: #EABF7D;
  border-color: #E1AA72;
  border-width: 3px;
  padding: 10px;
  margin-bottom: 10px;
  float: right;
  text-align: center;
  margin: 0 12% 0 12%;
  line-height: 1em;
}


/* Flashlight Overlay */

#gameContent {
  cursor: none;
  --cursorX: 50vw;
  --cursorY: 50vh;
}

#gameBox:before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: fixed;
  pointer-events: none;
  background: radial-gradient( circle 10vmax at var(--cursorX) var(--cursorY), rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .5) 80%, rgba(0, 0, 0, .95) 100%)
}

<div id="gameContainer">
  <div id="gameContent">
    <div id="gameBox">
      <img id="mapFit" src="images/Temple_Escape.jpg" alt="main map">
      <img id="chest" src="images/chest.png" alt="main map" onclick="chestClick()">
      <img id="chestOpened" src="images/chestopened.png" alt="main map" onclick="chestClick()">
      <img id="gold1" src="images/gold.png" alt="main map" onclick="gold1Click()">
      <img id="gold2" src="images/gold.png" alt="main map" onclick="gold2Click()">
      <img id="gold3" src="images/gold.png" alt="main map" onclick="gold3Click()">
      <img id="gold4" src="images/gold.png" alt="main map" onclick="gold4Click()">
      <img id="gold5" src="images/gold.png" alt="main map" onclick="gold5Click()">
      <img id="gold6" src="images/gold.png" alt="main map" onclick="gold6Click()">
      <img id="podium" src="images/podium.png" alt="main map" onclick="podiumClick()">
      <img id="rope" src="images/rope.png" alt="main map" onclick="ropeClick()">
      <img id="skeleton" src="images/skeleton.png" alt="main map" onclick="skeletonClick()">
      <img id="brokenPickaxe" src="images/brokenpickaxe.png" alt="main map" onclick="pickaxeClick()">
      <img id="stoneSlab1" src="images/stoneslab.png" alt="main map" onclick="slab1Click()">
      <img id="stoneSlab2" src="images/stoneslab.png" alt="main map" onclick="slab2Click()">
      <img id="tile1" src="images/tile1.png" alt="main map" onclick="floorStoneClick()">
      <img id="door1" src="images/door1.png" alt="main map" onclick="exitDoorClick()">
      <img id="redOrb" src="images/redorb.png" alt="main map" onclick="">
      <img id="blueOrb" src="images/blueorb.png" alt="main map" onclick="">
      <img id="greenOrb" src="images/greenorb.png" alt="main map" onclick="">
    </div>
  </div>

我添加了calc()，这样闪光灯就会停留在光标的中心。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/67219161

复制

相似问题

问在没有JQuery的特定容器上创建“手电筒”效果
EN

回答 1

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在没有JQuery的特定容器上创建“手电筒”效果EN

回答 1

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在没有JQuery的特定容器上创建“手电筒”效果
EN