Apart direct sticker code:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Dot Balloon</title></Head><Body><!--realization function: JS generate div Move up on the page already different speed Click Balloon Balloon explode disappear 1.js generate div tag and initialize 11 times build 10 2 generate a label 1 creat Eelement 2 Setting Properties ClassName 3 added to parent node 3 generate multiple tags at the same time 1 node fragment 4 Initialize balloon generation location 1 Portrait top = browser height-balloon height 2 Landscape 0-Browser width random//can fetch to 2. Let the balloon move. 1 Get all the balloon nodes 2 Loop all top properties Decrement 3 Timer 3. Click on the balloon, the balloon explodes and disappears 1 mouse click events, event Delegation 2 balloons are clicked down and zoomed out until the dad disappears. RemoveChild Vanishing Animation: 1 speed widening high minus -</Body></HTML>
Here the path of CSS and JS is not written, please introduce yourself. There's really nothing in the HTML, just some notes.
Css:
* {margin:0;padding:0;}Body{background:#ccc;Overflow:Hidden;}. Balloon{position:Absolute;width:160px;Height:160px;Background-color:#faf9f9;/*Fillet Properties*/Border-radius:50% 50% 25% 50%;/*rotate clockwise 45 degrees*/-webkit-transform:Rotate (45deg);-moz-transform:Rotate (45deg);-ms-transform:Rotate (45deg);-o-transform:Rotate (45deg);Transform:Rotate (45deg);/*box Shadow x offset y displacement feather radius color*/Box-shadow:-8px-8px 80px-8px #873940 inset;}. Balloon::after{position:Absolute;content:"';/*content must have*/Bottom:3px; Right:3px;Border:8px Solid Transparent;Border-right-color:#873940;-webkit-transform:Rotate (45deg);-moz-transform:Rotate (45deg);-ms-transform:Rotate (45deg);-o-transform:Rotate (45deg);Transform:Rotate (45deg);Border-radius:50%;}
Js:
varnum = 10;//Get browser width heightvarWH =Window.innerheight, HW=window.innerwidth, BZ= 160;varBalloons =[];init ();//Initialize 10 balloonsMove ();//AnimationAddListener (document.body, ' click ', Clickballoon);//event delegate to add an event listener for the body. //initialization functionfunctioninit () {//creating a DOM fragment varFragment =document.createdocumentfragment (); for(vari = 0; i < num; i++) { varAballoon = document.createelement (' div '); Aballoon.classname= ' Balloon '; varRANDOMX = ~ ~ (Math.random () * (HW-BZ)); RANDOMX= Math.max (0, RANDOMX); ABalloon.style.top= Wh-bz + ' px ';//Set Vertical PositionABalloon.style.left = randomx + ' px ';//Set Landscape positionAballoon.speed = ~ ~ (8 * math.random ()) +1;//set the move -up speedBalloons.push (Aballoon); Fragment.appendchild (Aballoon); } document.body.appendChild (fragment);}//Balloon Move Function//no setinterval: Because SetInterval is prone to drop framesfunctionMove () {//If there are no balloons, stop this settimeout varLen =balloons.length; if(Balloons.length = = 0) { return0; } Else { //Go through all the balloons for(vari = 0; i < Len; i++) { //If the balloon flies out of the browser if(~ ~ (Balloons[i].style.top.slice (0,-2)) <-160) { varme =Balloons[i]; Me.parentNode.removeChild (Me); //to initialize the balloons object after deleting this nodeBalloons = Document.queryselectorall ('. Balloon ')); I--; Len--; } Else{balloons[i].style.top= balloons[i].offsettop-balloons[i].speed + ' px '; }} setTimeout (move,1000/60); }}//Click the balloon functionfunctionClickballoon (event) {if(Event.target.className = = = ' Balloon ')) { //determines whether the class name of the element that triggered the event is balloonBoom.call (Event.target,function () { //Why not put this sentence in boom's if statement: Because, here is the last balloon animation, if we do not want to disappear, want to change the animation, here to modifyConsole.log ( This. parentnode); This. Parentnode.removechild ( This); }.bind (Event.target));//let Evnet.target replace this in boom to execute * * * }}//Balloon explosion FunctionfunctionBoom (CB) {//Note that SetInterval's this is pointing to window without using bind, because SetInterval is always called by the browser //bind: Hard bind, delay trigger function, internal pointer to force binding specified object. //Call is an active trigger This. Timer = SetInterval (function () { if( This. offsetwidth < 10) {clearinterval ( This. Timer); //This.parentNode.removeChild (this);CB && CB ();//CB If present, CB execution}Else { This. speed++; This. Style.width = This. offsetWidth-10 + ' px ';//Width Reduction This. Style.height = This. offsetHeight-10 + ' px ';//Height Reduction}}.bind ( This), 1000/30);}/** AddEventListener: Listen for DOM element events * * Target: Listener Object * Type: listener function type, e.g. Click,mouseover * Func: Listener function*/functionAddListener (target, type, func) {Target.addeventlistener? Target.addeventlistener (Type, func,false): Target.attachevent ("on" +type, func);}functionRemoveListener (target, type, func) {Target.removeeventlistener? Target.removeeventlistener (Type, func,false): Target.detachevent ("on" +type, func);}
You can paste to see the effect, want to continue to do can also optimize the optimization of what. Nothing to say, all in the comments, to pay attention to the point:
At first I did not add judgment to move out of the browser processing, and later found that if you do not click the balloon, let it fly, this element is actually a existence, but the top attribute in a reduced only.
So I would like to add a judgment in the for loop, whether the balloon has flown out of the browser. Yes, delete this node.
But the browser has been an error. Say this removechild () This method cannot be found.
I am very strange, the click Time is also this method Ah, also did not error AH. I can't find it.
It was later found that the balloons[] object was assigned outside the For loop, and an object in the array was deleted from the For loop, but balloons was not dynamically changed. So:
i++ found in the balloons[i], is not what you want. The initialization of the balloons object is done here, and I and Len are reduced by one separately.
JS Implementation Point Balloon Games