JS Implementation Point Balloon Games

Source: Internet
Author: User
Tags event listener

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

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.