我正在研究游戏速度雷达。我希望它在屏幕上可拖动。我发现以下适用于我的Javascript:
https://www.w3schools.com/howto/howto_js_draggable.asp
我将其实现为游戏中雷达的代码,并且效果很好。唯一的事情是我可以将其拖离屏幕。现在,我想限制雷达始终显示在屏幕上。这是我的雷达现场演示:
<html>
<head>
</head>
<body>
<div id="fullcontainer">
<div id="policeradar">
<!-- <div id="policeradar"> -->
<div id="policeradarheader">
<div class="antennalabel antennalabeltop">Front Antenna</div>
<div class="logo">WraithRS</div>
<div class="main">
<div class="container">
<div class="typecontainer">
<div class="text"><span class="fwdsame">SAME</span></div>
<div class="text"><span class="fwdopp">OPP</span></div>
<div class="text"><span class="fwdxmit">XMIT</span></div>
</div>
<div class="typecontainer">
<div class="text"><span class="bwdsame">SAME</span></div>
<div class="text"><span class="bwdopp">OPP</span></div>
<div class="text"><span class="bwdxmit">XMIT</span></div>
</div>
</div>
<div class="container">
<div class="patrolcontainer">
<div class="speedsourcecontainer target" data-target="fwdspeed">
<div class="speednumber text"></div>
<div class="speednumber text"></div>
<div class="speednumber text"></div>
</div>
<div class="label">FWD</div>
</div>
<div class="patrolcontainer">
<div class="speedsourcecontainer target" data-target="bwdspeed">
<div class="speednumber text"></div>
<div class="speednumber text"></div>
<div class="speednumber text"></div>
</div>
<div class="label">BWD</div>
</div>
</div>
<div class="container" style="width: 5px;">
<div class="arrowbox">
<i class="fa fa-arrow-up fwdarrowfront"></i>
<i class="fa fa-arrow-down fwdarrowback"></i>
</div>
<div class="arrowbox">
<i class="fa fa-arrow-up bwdarrowfront"></i>
<i class="fa fa-arrow-down bwdarrowback"></i>
</div>
</div>
<div class="container">
<div class="patrolcontainer" style="margin-top: 20px;">
<div class="speedfastcontainer target" data-target="fwdfast">
<div class="speednumber text"></div>
<div class="speednumber text"></div>
<div class="speednumber text"></div>
</div>
<div class="label">FWD FAST</div>
</div>
<div class="patrolcontainer" style="margin-bottom: 20px;">
<div class="speedfastcontainer target" data-target="bwdfast">
<div class="speednumber text"></div>
<div class="speednumber text"></div>
<div class="speednumber text"></div>
</div>
<div class="label">BWD FAST</div>
</div>
</div>
<div class="container">
<div class="patrolcontainer">
<div class="speedfastcontainer patrol" data-target="patrolspeed">
<div class="speednumber text"></div>
<div class="speednumber text"></div>
<div class="speednumber text"></div>
</div>
<div class="label">PATROL SPEED</div>
</div>
</div>
</div>
<div class="antennalabel antennalabelbottom">Rear Antenna</div>
</div>
</div>
<div id="policeradarrc" style="display: none;">
<div class="container">
<button class="toggle" data-action="radar_toggle">TOGGLE RADAR</button>
</div>
<div class="label">FRONT ANTENNA</div>
<div class="container">
<button class="rowbutton frontopp" data-action="radar_frontopp">OPP</button>
<button class="rowbutton frontxmit" data-action="radar_frontxmit">XMIT</button>
<button class="rowbutton frontsame" data-action="radar_frontsame">SAME</button>
</div>
<div class="breakline"></div>
<div class="container">
<button class="rowbutton rearopp" data-action="radar_rearopp">OPP</button>
<button class="rowbutton rearxmit" data-action="radar_rearxmit">XMIT</button>
<button class="rowbutton rearsame" data-action="radar_rearsame">SAME</button>
</div>
<div class="label">REAR ANTENNA</div>
<div class="container">
<button class="limit" data-action="radar_setlimit">SET FAST LIMIT</button>
</div>
<div class="container">
<button class="limit" data-action="radar_speedtype" style="margin-top: 0px;">TOGGLE SPEED TYPE</button>
</div>
<div class="container">
<button class="close" data-action="close">CLOSE</button>
</div>
</div>
</div>
<script>
dragElement(document.getElementById("policeradar"));
function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id + "header")) {
document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
} else {
elmnt.onmousedown = dragMouseDown;
}
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}
function closeDragElement() {
document.onmouseup = null;
document.onmousemove = null;
}
}
</script>
</body>
</html>
html, body {
overflow:hidden;
max-width: 100%;
max-height: 100%;
display: block;
flex-direction: column;
}
@font-face {
font-family: "Digital-7";
src: url( "digital-7.regular.ttf" );
}
#fullcontainer {
height: 100%;
width: 100%;
}
#policeradar {
width: 495px;
height: 202px;
position: absolute;
margin: 0;
z-index: 9;
color: white;
padding: 10px;
background: rgba( 20, 20, 20, 0.97 );
background: linear-gradient( to bottom, rgb( 50, 50, 50 ), rgb( 25, 25, 25 ) );
border-radius: 10px;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
#policeradarheader {
width: 495px;
height: 202px;
position: absolute;
padding: 10px;
cursor: move;
z-index: 10;
color: #fff;
}
#policeradar .antennalabel {
font-family: Verdana;
font-size: 14px;
font-weight: bold;
text-align: center;
width: 100%;
position: absolute;
}
#policeradar .antennalabeltop {
top: 0;
left: 0;
padding-top: 5px;
}
#policeradar .antennalabelbottom {
bottom: 0;
left: 0;
padding-bottom: 5px;
}
#policeradar .logo {
font-family: Verdana;
font-size: 17px;
font-weight: bold;
bottom: 15px;
right: 20px;
position: absolute;
}
#policeradar .main {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
width: 100%;
height: 100%;
}
#policeradar .patrolcontainer {
background-color: black;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
#policeradar .typecontainer {
background-color: black;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
width: 0;
}
#policeradar .typecontainer .text {
font-family: Verdana;
font-size: 10px;
line-height: 27px;
margin-left: 13px;
color: black;
}
#policeradar .typecontainer .active {
color: white;
}
#policeradar .container {
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
justify-content: space-around;
}
#policeradar .arrowbox {
justify-content: center;
align-items: center;
}
#policeradar .arrowbox i {
font-size: 20px;
padding-top: 5px;
padding-bottom: 5px;
color: black;
}
#policeradar .arrowbox .active {
color: white;
}
#policeradar .arrowbox .inactive {
color: black;
}
#policeradar .container .label {
font-family: Verdana;
font-weight: bold;
font-size: 10px;
text-align: center;
}
#policeradar .container .speedsourcecontainer {
width: 135px;
height: 58px;
display: flex;
justify-content: space-around;
}
#policeradar .container .speedsourcecontainer .speednumber {
width: 100%;
}
#policeradar .container .speedsourcecontainer .text {
font-family: "Digital-7";
font-size: 58px;
line-height: 58px;
width: 100%;
text-align: center;
}
#policeradar .container .target {
background: rgb( 200, 0, 0 );
background: linear-gradient( to bottom, rgb( 220, 0, 40 ), rgb( 90, 0, 0 ) );
}
#policeradar .container .patrol {
background: rgb( 0, 125, 0 );
background: linear-gradient( to bottom, rgb( 0, 150, 0 ), rgb( 0, 75, 0 ) );
}
#policeradar .container .locked {
color: rgb( 50, 0, 0 );
}
#policeradar .container .speedfastcontainer {
width: 99px;
height: 50px;
display: flex;
flex-direction: row;
justify-content: space-around;
}
#policeradar .container .speedfastcontainer .speednumber {
width: 100%;
}
#policeradar .container .speedfastcontainer .text {
font-family: "Digital-7";
font-size: 50px;
line-height: 50px;
width: 100%;
text-align: center;
}
/* Police Radar - Remote Control */
#policeradarrc {
width: 290px;
height: 350px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
padding: 10px 5px;
color: white;
background-color: rgba( 20, 20, 20, 0.95 );
border-radius: 5px;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
#policeradarrc .breakline {
width: 230px;
height: 10px;
background-color: white;
}
#policeradarrc .label {
font-family: Verdana;
}
#policeradarrc .container {
font-family: Verdana;
align-items: center;
}
#policeradarrc .container button {
display: inline-block;
cursor: pointer;
text-decoration: none;
outline: none;
border: none;
}
#policeradarrc .container button:hover {
background-color: #6cd3f9;
}
#policeradarrc .container button:active {
background-color: #56a8c7;
}
#policeradarrc .container .toggle {
padding: 5px 15px;
font-size: 16px;
text-align: center;
color: black;
background-color: white;
border-radius: 15px;
margin-bottom: 15px;
}
#policeradarrc .container .limit {
padding: 5px 15px;
font-size: 16px;
text-align: center;
color: black;
background-color: white;
border-radius: 15px;
margin-top: 15px;
}
#policeradarrc .container .close {
padding: 3px 7px;
font-size: 12px;
}
#policeradarrc .container .rowbutton {
width: 60px;
height: 60px;
}
#policeradarrc .container .frontopp {
border-top-left-radius: 50%;
}
#policeradarrc .container .frontsame {
border-top-right-radius: 50%;
}
#policeradarrc .container .rearopp {
border-bottom-left-radius: 50%;
}
#policeradarrc .container .rearsame {
border-bottom-right-radius: 50%;
}
我尝试了很多东西,但似乎无法弄清
问候!