js realizes barrage aircraft effect
- 2021-08-09 06:50:34
- OfStack
In this paper, we share the specific code of js to realize the barrage aircraft effect for your reference. The specific contents are as follows
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
width: 70vw;/* The length and width are preferably obj Multiple of */
height: 90vh;
border-width: 10px;
border-style: solid;
border-color: blue;
line-height:600px;/* Vertical center of text */
text-align: center;/* Text centered horizontally */
position: relative;/* Relative positioning */
left: 0px;
top: 0px;
}
/* Opening animation */
@-webkit-keyframes mymove
{
from {top:50vh;}
to {top:100px;}
}
#obj{
-webkit-animation-name:mymove;
-webkit-animation-duration:1s;
-webkit-animation-timing-function:linear;
position: absolute;
left: 30vw;
top: 50vh;
width: 0px;
height: 0px;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 10px solid red;
}
div{
text-align: center;
line-height:30px;
}
</style>
</head>
<body>
<!-- Barrage aircraft
1. Airplanes can move
2. Random barrage rain at the top of the screen
3. The barrage rain hit the plane - Failure
4. Record score
-->
<div id='obj'> Aircraft </div>
<button id='start'> Begin </button> |
<button onclick="stop()"> Suspend </button>
</body>
<script type="text/javascript">
var key = document.body.onkeydown =f; // Registration keydown Event handler
var clientH= document.body.clientHeight;// Get body Gao
var clientW= document.body.clientWidth;// Get body Width
var obj=document.getElementById('obj');// Aircraft object
var borderX=parseInt(getComputedStyle(obj,null).getPropertyValue('border-left'));
var borderY=parseInt(getComputedStyle(obj,null).getPropertyValue('border-bottom'));
var movePx=10;// The distance of each movement of the aircraft
var speed=500;// Rain falling speed
var distance=10;// Rain falling distance
var rainleft=0;// Barrage rain x Coordinates
var raintop=0;// Barrage rain y Coordinates
// Formed rain
function setrain(){
rainleft=parseInt(Math.random()*clientW);
raintop=0;//parseInt(Math.random()*clientH);
let div=document.createElement('div');
div.className ='div';
div.style.borderRadius='50%';
div.style.width='6px';
div.style.height='10px';
div.style.backgroundColor='pink';
div.style.position = 'absolute';
div.style.left=rainleft + 'px';
div.style.top=raintop + 'px';
document.body.appendChild(div);
}
// Rain falling
function downrain(){
var myTop=parseInt(getComputedStyle(obj,null).getPropertyValue('top'));// Get the wizard y Coordinates
var myLeft=parseInt(getComputedStyle(obj,null).getPropertyValue('left'));// Get the wizard x Coordinates
let div=document.getElementsByClassName('div');
// Traversal all Raindrops
for(let i=0;i<div.length-1;i++){
let divleft=parseInt(div[i].style.left);
let divtop=parseInt(div[i].style.top);
div[i].style.top=divtop+distance+'px';
// Determine whether the plane was hit or not
if(Math.abs(divtop-myTop)<borderY && Math.abs(divleft-myLeft)<borderX){
console.log(' Be hit borderY:'+borderY+' borderX:'+borderX);
console.log('------- myTop:'+myTop+' myLeft:'+myLeft);
console.log('------- rainY:'+divtop+' rainX:'+divleft);
stop();
alert(' Be hit ');
}
}
}
// Clear the falling rain
function delrain(){
let div=document.getElementsByClassName('div');
// Traversal all Raindrops
for(let i=0;i<div.length-1;i++){
// div[i].style.left
if(parseInt(div[i].style.top)>clientH){
div[i].parentNode.removeChild(div[i]);
};
}
}
// Begin
document.getElementById('start').onclick=start;
function start(e){
var e = e || window.event; // Standardized event handling
inter=setInterval((setrain),speed);
inter1=setInterval((downrain),speed);
inter2=setInterval((delrain),speed);
}
// Suspend
function stop(){
clearInterval(inter);
clearInterval(inter1);
clearInterval(inter2);
}
// Mobile aircraft
function f (va) {
var e = e || window.event; // Standardized event handling
let s = '';//val.type + " " + val.key; // Gets the keyboard event type and pressed value
let key=va.key;
var myTop=parseInt(getComputedStyle(obj,null).getPropertyValue('top'));// Get the wizard y Coordinates parseInt(obj.style.top);
var myLeft=parseInt(getComputedStyle(obj,null).getPropertyValue('left'));// Get the wizard x Coordinates parseInt(obj.style.left);
var myWidth=borderX;
var myHeight=borderY;
var move=0;
if(key=='w'){
move=myTop-movePx;// Every move 10
if(move<0 || move>clientH){
return false;// Can't exceed the boundary
}
obj.style.top=move+'px';
s=' Upper ';
}
if(key=='s'){
move=myTop+movePx;
if(move<0 || move>clientH-myHeight){
return false;
}
obj.style.top=move+'px';
s=' Under ';
}
if(key=='a'){
move=myLeft-movePx;
if(move<0 || move>clientW){
return false;
}
obj.style.left=move+'px';
s=' Left ';
}
if(key=='d'){
move=myLeft+movePx;
if(move<0 || move>clientW-myWidth){
return false;
}
obj.style.left=move+'px';
s=' Right ';
}
// obj.innerText=s;// Set text & Know the previous elements
// console.log(move+' top:'+myTop+' left:'+myLeft);
} /*f() end--*/
</script>
</html>