Sprite Balloon Sequence -- Changes Colors!!!

togagames

2011-08-22 06:36:41

License: MIT License

Fork: 0

Fav: 0

View: 279

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];
}

/* =============================================================================
            
                         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('</div>');
  
    
document.write('</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('</div>'); document.write('</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 */

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

Sprite Balloon Sequence -- Changes Colors!!!

tags

Tweet

twitter

Tags