Simon turned out to be a little bit easier than Snake to make, especially after already figuring out about event handlers and delays. This took much less time to make and resulted in a fun afternoon project. Maybe I would have been better enjoying the sunshine, but there is something nice about creating a project. It is especially nice when you can play that project as well.
The coding for Simon was fairly straightforward. My approach was similar to how I went about creating Snake in that I made a variable to hold most of the constants and functions required for running the game. I then called the functions and set the variables in order as required by the flow of the game. There are speed controls that I entirely copied out of my Snake game. The control needs to be set so that a user can set the speed after determining that the game is too fast/slow.
The trickiest part of putting this together was setting up timing of the loop to display colors. I searched around online, and found several suggestions for a looping structure that calls itself after a timeout. The function must call the boxes to flash over time, then it must wait until the previous box flashed to go again. I ended up making two functions in the Simon object to handle this functionality.
playHits : function() { //play Hits flashes the colors.
i = this.curPos;
//green = 0, red=1,blue=2,yellow=3
if (this.pattern[i] === 0) {
this.flashColor('#gblock',ghigh,glow);
} if (this.pattern[i] == 1) {
this.flashColor('#rblock',rhigh,rlow);
} if (this.pattern[i] == 2) {
this.flashColor('#bblock',bhigh,blow);
} if (this.pattern[i] == 3) {
this.flashColor('#yblock',yhigh,ylow);
}
if (++this.curPos<this.pattern.length) {
setTimeout( function(){
Simon.playHits();},Simon.speed);
} else {
this.curPos = 0;
}
},
flashColor : function(block,high,low) {
$(block).css('background-color',high);
setTimeout(function() {
$(block).css('background-color',low);
},Simon.speed);
},
The game was fun to make, and could use some styling, but the sun is shining and I'm sick of being inside. The code can be found here, and below, and you can play in a full screen here.