我正在为一个项目创建一个游戏,并想在游戏顶部添加一个手电筒效果。
查找与此类似的内容,只查找我网页上的一个特定容器: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
发布于 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()
,这样闪光灯就会停留在光标的中心。
https://stackoverflow.com/questions/67219161
复制相似问题