About JavaScript and CSS3 developing full code for balloon games

This article mainly introduces the JavaScript and CSS3 Development balloon Games complete code, has a certain reference value, now share to everyone, the need for friends can refer to

This is a simple but impressive small game, playing balloon games implementation code, mainly based on JS and CSS3, based on CSS3 balloon, specific implementation code for everyone reference under this article

Effect Knowledge Points:

CSS3 Balloon, custom attribute application, random array, DOM element manipulation, advanced callback function and parameter multiplexing, dynamic layout, mouse event, timer application, CSS3 new style, etc.

The CSS code is as follows:

<style>{margin:0;padding:0;} Body{background: #434343; overflow:hidden}.balloon{position:absolute;left:0;top:0;margin:auto;width:160px;height : 160px; Fillet: Left upper right top right lower left bottom/css3 rotate clockwise 45 degrees/background: #faf9f9; position of x axis y axis position Shadow diffusion degree fuzziness color/}.balloon:after{content of pseudo-element/display:blo Ck;position:absolute;

Because the balloon is spinning now just below the right corner is actually */

right:0px;width:0px;height:0px;border:8px solid #dbbdbd; Border-top-color:transparent;border-bottom-color: Transparent;border-left-color:transparent;transform:rotate (45deg); border-radius:16px;} #wrap {width:200px;height:200px;background:red;} </style>

The JavaScript code is as follows:

<script> var num = 10; Declares the number to traverse Num to p//var obody = document.queryselector (' body '); H5 API gets the elements of the method var Obody=document.documentelement | | Document.body; Body gets compatibility notation Var ww=window.innerwidth; Gets the width of the browser window var wh=window.innerheight;      Gets the browser window height var timer=null;  Initializes the timer variable init (num);    function init (num) {for (Var i=0;i<num;i++) {//for cycle cycle processing plant var randoml=math.random () *ww; Random left Range randoml=math.min (WW-160,RANDOML); Canonical left position var balloon = document.createelement (' P '); Use JS to generate tags balloon.classname= ' balloon '; Set the class name balloon.style.left=randoml+ ' px ' for the created P element;      Change the value of the left in the style of the element balloon.style.top=wh+ ' px '; Balloon.speed=math.random () *5+1; Custom attributes are added when creating elements obody.appendchild (balloon); add element object in Body}} timer=setinterval (function () {var oball=document.queryselectorall ('. Balloon ');//Get page All balloons fo      R (Var i=0,len=oball.length;i<len;i++) {oball[i].style.top = oball[i].offsettop-oball[i].speed+ ' px '; Oball[i].onClick=function () {//Who triggered what did something Crash (this,function (XXX) {clearinterval (Xxx.timer);//Clear Animation timer        Xxx.parentNode.removeChild (XXX);        });          This.parentNode.removeChild (this);      Init (1);  }}},30);    function Crash (ELE,CB) {//is clicked after the vent effect ele.timeouter=settimeout (function () {CB&AMP;&AMP;CB (ele); },500) Ele.timer=setinterval (function () {ele.speed++;//acceleration increment ele.style.top=ele.offsettop-ele.speed+ ' px ';//+ Speed escape ele.style.width=ele.offsetwidth-10+ ' px '; Width reduction ele.style.height=ele.offsetheight-10+ ' px '; Height reduction},30)}</script>

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!