Sprite Balloon Sequence -- Changes Colors!!! togagames Follow 2011-08-22 06:36:41 License: MIT License Fork0 Fav0 View279 Balloons will float up from the bottom of the screen simply using sprites + they will change colors. They change to new positions along the bottom! o_O Play Stop Reload Fullscreen Smart Phone Readme JavaScript 112 lines HTML 0 lines CSS 129 lines Balloons will float up from the bottom of the screen simply using sprites + they will change colors. They change to new positions along the bottom! o_O Sprite Balloon Sequence -- Changes Colors!!! /* ================================================================================ R O L L O V E R T O C H A N G E T I L E S ================================================================================ */ // create the tile sets var totalTiles = 20; var i = 0; var colors = Array("red","green","yellow","blue","purple","lightgreen","lightblue"); var set_balloon_sequence = Array("2","3","4","5","6","7"); var top_balloon = "8"; var bottom_balloon = "1"; var newtile = ''; var tileset = set_balloon_sequence;// pick which array tile set to play with var array_sequence = 0; var steps = tileset.length; var previd = 'f'+0; var randcolor = 0; var newcolor = '';// new color each time var newspot = 0;// new place for margin-left each time function hideAll(){ for(i = 0; i < totalTiles; i++){ document.getElementById('f'+i).style.visibility='hidden'; } var intID = 0; intID = setInterval("sequenced_animation()",refresh_time); // set the first color randcolor = Math.floor ( Math.random() * colors.length ); newcolor = colors[randcolor]; } function changeTile(id){// change to a different class on rollover if(id == 'f'+0){//f0 newtile = "sprite balloon "+newcolor+''+bottom_balloon; //balloon is at the bottom of screen so change starting location document.getElementById("sprite_floor").style.marginLeft=newspot+"px"; }else if(id == 'f'+(totalTiles-1)){//f19 //document.write('testing'); newtile = "sprite balloon "+newcolor+''+top_balloon; // since we're at the top we can pick a new color! YAY! randcolor = Math.floor ( Math.random() * colors.length ); newcolor = colors[randcolor]; newspot = Math.floor (Math.random() * 450 ); }else{ newtile = "sprite balloon "+newcolor+''+tileset[array_sequence]; } // make previous balloon invisible and make current one visible document.getElementById(previd).style.visibility='hidden'; document.getElementById(id).style.visibility='visible'; // set the new animated balloon document.getElementById(id).setAttribute("class", newtile); array_sequence++; if(array_sequence == steps){ array_sequence = 0; } previd = id; } /* ============================================================================= A U T O M A T I C S E Q U E N C E R ================================================================================ */ var secs = 0.33;// how many seconds between updates (balloon speed) var refresh_time = secs * 1000; var sequence = 0; // run through the sequence function sequenced_animation(){ // get the sequenced id starting from 0 changeTile('f'+sequence); sequence++; if(sequence == totalTiles){ sequence = 0; } } /* ============================================================================= F I L L I N T H E P A G E W I T H T I L E S ================================================================================ */ document.write('<div id="sprite_holder">'); document.write('<div id="sprite_floor">'); i = totalTiles - 1; for(i = totalTiles-1; i > -1; i--){ document.write('<img src="http://www.as3codes.com/images/transparent.gif" class="sprite balloon red7" id="f'+i+'"/><br />'); } document.write('<!-- END SPRITE FLOOR --></div>'); document.write('<!-- END SPRITE HOLDER --></div>'); // set our interval last after everything has loaded properly hideAll(); Sprite Balloon Sequence -- Changes Colors!!! body { background-color: #DDDDDD; font: 13pt Microsoft Sans Serif; } /* BEGIN SPRITE SURFACE SPREAD */ #sprite_holder{ position:relative; margin:0 auto; margin-top:10px; width:920px;/*920*/ height:880px;/*880*/ border:solid 1px #AB9A74; background-color:#ECE9D8; } #sprite_floor{ position:relative; width:50px; margin-left:0px; } .sprite { background:url(http://www.as3codes.com/images/sprite_sheet2.png); } .balloon { height:40px; } /* Balloon positions and states x first, y second [balloon rising from the ground]*/ .red1 {width:40px; background-position:0px -320px;} .red2 {width:40px; background-position:0px -280px;} .red3 {width:40px; background-position:0px -240px;} .red4 {width:40px; background-position:0px -200px;} .red5 {width:40px; background-position:0px -160px;} .red6 {width:40px; background-position:0px -120px;} .red7 {width:40px; background-position:0px -80px;} .red8 {width:40px; background-position:0px -40px;} .green1 {width:40px; background-position:-40px -320px;} .green2 {width:40px; background-position:-40px -280px;} .green3 {width:40px; background-position:-40px -240px;} .green4 {width:40px; background-position:-40px -200px;} .green5 {width:40px; background-position:-40px -160px;} .green6 {width:40px; background-position:-40px -120px;} .green7 {width:40px; background-position:-40px -80px;} .green8 {width:40px; background-position:-40px -40px;} .yellow1 {width:40px; background-position:-80px -320px;} .yellow2 {width:40px; background-position:-80px -280px;} .yellow3 {width:40px; background-position:-80px -240px;} .yellow4 {width:40px; background-position:-80px -200px;} .yellow5 {width:40px; background-position:-80px -160px;} .yellow6 {width:40px; background-position:-80px -120px;} .yellow7 {width:40px; background-position:-80px -80px;} .yellow8 {width:40px; background-position:-80px -40px;} .blue1 {width:40px; background-position:-120px -320px;} .blue2 {width:40px; background-position:-120px -280px;} .blue3 {width:40px; background-position:-120px -240px;} .blue4 {width:40px; background-position:-120px -200px;} .blue5 {width:40px; background-position:-120px -160px;} .blue6 {width:40px; background-position:-120px -120px;} .blue7 {width:40px; background-position:-120px -80px;} .blue8 {width:40px; background-position:-120px -40px;} .purple1 {width:40px; background-position:-160px -320px;} .purple2 {width:40px; background-position:-160px -280px;} .purple3 {width:40px; background-position:-160px -240px;} .purple4 {width:40px; background-position:-160px -200px;} .purple5 {width:40px; background-position:-160px -160px;} .purple6 {width:40px; background-position:-160px -120px;} .purple7 {width:40px; background-position:-160px -80px;} .purple8 {width:40px; background-position:-160px -40px;} .lightgreen1 {width:40px; background-position:-200px -320px;} .lightgreen2 {width:40px; background-position:-200px -280px;} .lightgreen3 {width:40px; background-position:-200px -240px;} .lightgreen4 {width:40px; background-position:-200px -200px;} .lightgreen5 {width:40px; background-position:-200px -160px;} .lightgreen6 {width:40px; background-position:-200px -120px;} .lightgreen7 {width:40px; background-position:-200px -80px;} .lightgreen8 {width:40px; background-position:-200px -40px;} .lightblue1 {width:40px; background-position:-240px -320px;} .lightblue2 {width:40px; background-position:-240px -280px;} .lightblue3 {width:40px; background-position:-240px -240px;} .lightblue4 {width:40px; background-position:-240px -200px;} .lightblue5 {width:40px; background-position:-240px -160px;} .lightblue6 {width:40px; background-position:-240px -120px;} .lightblue7 {width:40px; background-position:-240px -80px;} .lightblue8 {width:40px; background-position:-240px -40px;} /* END SPRITE AREA */ Balloons will float up from the bottom of the screen simply using sprites + they will change colors. They change to new positions along the bottom! o_O /* ================================================================================ R O L L O V E R T O C H A N G E T I L E S ================================================================================ */ // create the tile sets var totalTiles = 20; var i = 0; var colors = Array("red","green","yellow","blue","purple","lightgreen","lightblue"); var set_balloon_sequence = Array("2","3","4","5","6","7"); var top_balloon = "8"; var bottom_balloon = "1"; var newtile = ''; var tileset = set_balloon_sequence;// pick which array tile set to play with var array_sequence = 0; var steps = tileset.length; var previd = 'f'+0; var randcolor = 0; var newcolor = '';// new color each time var newspot = 0;// new place for margin-left each time function hideAll(){ for(i = 0; i < totalTiles; i++){ document.getElementById('f'+i).style.visibility='hidden'; } var intID = 0; intID = setInterval("sequenced_animation()",refresh_time); // set the first color randcolor = Math.floor ( Math.random() * colors.length ); newcolor = colors[randcolor]; } function changeTile(id){// change to a different class on rollover if(id == 'f'+0){//f0 newtile = "sprite balloon "+newcolor+''+bottom_balloon; //balloon is at the bottom of screen so change starting location document.getElementById("sprite_floor").style.marginLeft=newspot+"px"; }else if(id == 'f'+(totalTiles-1)){//f19 //document.write('testing'); newtile = "sprite balloon "+newcolor+''+top_balloon; // since we're at the top we can pick a new color! YAY! randcolor = Math.floor ( Math.random() * colors.length ); newcolor = colors[randcolor]; newspot = Math.floor (Math.random() * 450 ); }else{ newtile = "sprite balloon "+newcolor+''+tileset[array_sequence]; } // make previous balloon invisible and make current one visible document.getElementById(previd).style.visibility='hidden'; document.getElementById(id).style.visibility='visible'; // set the new animated balloon document.getElementById(id).setAttribute("class", newtile); array_sequence++; if(array_sequence == steps){ array_sequence = 0; } previd = id; } /* ============================================================================= A U T O M A T I C S E Q U E N C E R ================================================================================ */ var secs = 0.33;// how many seconds between updates (balloon speed) var refresh_time = secs * 1000; var sequence = 0; // run through the sequence function sequenced_animation(){ // get the sequenced id starting from 0 changeTile('f'+sequence); sequence++; if(sequence == totalTiles){ sequence = 0; } } /* ============================================================================= F I L L I N T H E P A G E W I T H T I L E S ================================================================================ */ document.write('<div id="sprite_holder">'); document.write('<div id="sprite_floor">'); i = totalTiles - 1; for(i = totalTiles-1; i > -1; i--){ document.write('<img src="http://www.as3codes.com/images/transparent.gif" class="sprite balloon red7" id="f'+i+'"/><br />'); } document.write('<!-- END SPRITE FLOOR --></div>'); document.write('<!-- END SPRITE HOLDER --></div>'); // set our interval last after everything has loaded properly hideAll(); body { background-color: #DDDDDD; font: 13pt Microsoft Sans Serif; } /* BEGIN SPRITE SURFACE SPREAD */ #sprite_holder{ position:relative; margin:0 auto; margin-top:10px; width:920px;/*920*/ height:880px;/*880*/ border:solid 1px #AB9A74; background-color:#ECE9D8; } #sprite_floor{ position:relative; width:50px; margin-left:0px; } .sprite { background:url(http://www.as3codes.com/images/sprite_sheet2.png); } .balloon { height:40px; } /* Balloon positions and states x first, y second [balloon rising from the ground]*/ .red1 {width:40px; background-position:0px -320px;} .red2 {width:40px; background-position:0px -280px;} .red3 {width:40px; background-position:0px -240px;} .red4 {width:40px; background-position:0px -200px;} .red5 {width:40px; background-position:0px -160px;} .red6 {width:40px; background-position:0px -120px;} .red7 {width:40px; background-position:0px -80px;} .red8 {width:40px; background-position:0px -40px;} .green1 {width:40px; background-position:-40px -320px;} .green2 {width:40px; background-position:-40px -280px;} .green3 {width:40px; background-position:-40px -240px;} .green4 {width:40px; background-position:-40px -200px;} .green5 {width:40px; background-position:-40px -160px;} .green6 {width:40px; background-position:-40px -120px;} .green7 {width:40px; background-position:-40px -80px;} .green8 {width:40px; background-position:-40px -40px;} .yellow1 {width:40px; background-position:-80px -320px;} .yellow2 {width:40px; background-position:-80px -280px;} .yellow3 {width:40px; background-position:-80px -240px;} .yellow4 {width:40px; background-position:-80px -200px;} .yellow5 {width:40px; background-position:-80px -160px;} .yellow6 {width:40px; background-position:-80px -120px;} .yellow7 {width:40px; background-position:-80px -80px;} .yellow8 {width:40px; background-position:-80px -40px;} .blue1 {width:40px; background-position:-120px -320px;} .blue2 {width:40px; background-position:-120px -280px;} .blue3 {width:40px; background-position:-120px -240px;} .blue4 {width:40px; background-position:-120px -200px;} .blue5 {width:40px; background-position:-120px -160px;} .blue6 {width:40px; background-position:-120px -120px;} .blue7 {width:40px; background-position:-120px -80px;} .blue8 {width:40px; background-position:-120px -40px;} .purple1 {width:40px; background-position:-160px -320px;} .purple2 {width:40px; background-position:-160px -280px;} .purple3 {width:40px; background-position:-160px -240px;} .purple4 {width:40px; background-position:-160px -200px;} .purple5 {width:40px; background-position:-160px -160px;} .purple6 {width:40px; background-position:-160px -120px;} .purple7 {width:40px; background-position:-160px -80px;} .purple8 {width:40px; background-position:-160px -40px;} .lightgreen1 {width:40px; background-position:-200px -320px;} .lightgreen2 {width:40px; background-position:-200px -280px;} .lightgreen3 {width:40px; background-position:-200px -240px;} .lightgreen4 {width:40px; background-position:-200px -200px;} .lightgreen5 {width:40px; background-position:-200px -160px;} .lightgreen6 {width:40px; background-position:-200px -120px;} .lightgreen7 {width:40px; background-position:-200px -80px;} .lightgreen8 {width:40px; background-position:-200px -40px;} .lightblue1 {width:40px; background-position:-240px -320px;} .lightblue2 {width:40px; background-position:-240px -280px;} .lightblue3 {width:40px; background-position:-240px -240px;} .lightblue4 {width:40px; background-position:-240px -200px;} .lightblue5 {width:40px; background-position:-240px -160px;} .lightblue6 {width:40px; background-position:-240px -120px;} .lightblue7 {width:40px; background-position:-240px -80px;} .lightblue8 {width:40px; background-position:-240px -40px;} /* END SPRITE AREA */ use an iframe compat browser, deer Tweet QR code Embed Design view Code view <script type="text/javascript" src="http://jsdo.it/blogparts/mZOo/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/togagames/mZOo" title="Sprite Balloon Sequence -- Changes Colors!!!">Sprite Balloon Sequence -- Changes Colors!!! - jsdo.it - share JavaScript, HTML5 and CSS</a></p> zip tags background balloons css sprite Tweet twitter Tags background balloons css sprite