Javascript + css3 complete code for developing a balloon hitting game, And css3 balloons

Javascript + css3 complete code for developing a balloon hitting game, And css3 balloons

Effect knowledge point:

Css3 draws balloons, applies custom attributes, random arrays, DOM element operations, advanced callback functions and parameter re-transmission, dynamic layout, mouse events, Timer operations, and new CSS 3 styles.

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; rounded corner: top right bottom left bottom/css3 rotate 45 degrees clockwise/background: # faf9f9; position on the X axis position on the Y axis position on the shadow degree blur color /}. balloon: after {pseudo element content/display: block; position: absolute;

Because the balloon is rotating, the bottom right is actually the bottom right corner */

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; // declare the number of div for Traversing num. // var oBody = document. querySelector ('body'); // var obodypolicdocument.doc umentElement for the method of retrieving elements by the h5 api | document. body; // body compatibility method var wW = window. innerWidth; // obtain the width of the browser window var wH = window. innerHeight; // get the browser window height var timer = null; // initialize the timer variable init (num); function init (num) {for (var I = 0; I <num; I ++) {// for Loop processing plant var randomL = Math. random () * wW; // random left range randomL = Math. min (wW-160, randomL); // canonicalized left position var balloon = document. createElement ('div '); // generate the label balloon with js. className = 'balon'; // set the class name balloon for the created div element. style. left = randomL + 'px '; // change the left value in the element style. style. top = wH + 'px '; balloon. speed = Math. random () * 5 + 1; // Add oBody when creating an element with custom attributes. appendChild (balloon); // Add an element object to the body} timer = setInterval (function () {var oBall = document. querySelectorAll ('. balloon '); // obtain all the balloons on the page for (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 triggers what who does what crash (this, function (xxx) {clearInterval (xxx. timer); // clears the animation timer xxx. parentNode. removeChild (xxx) ;}); // this. parentNode. removeChild (this); init (1) ;}}, 30); function crash (ele, cb) {// after being clicked, play ele. timeouter = setTimeout (function () {cb & cb (ele) ;}, 500) ele. timer = setInterval (function () {ele. speed ++; // acceleration auto-incrementing ele. style. top = ele. offsetTop-ele.speed + 'px '; // accelerates the escape from ele. style. width = ele. offsetWidth-10 + 'px '; // width reduces ele. style. height = ele. offsetHeight-10 + 'px '; // height reduction}, 30)} </script>

Summary

The above is the complete code of the javascript + css3 development balloon game introduced by xiaobian. I hope it will help you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!