Bot Ops is a game I built using HTML5 Canvas and Javascript for my HTML5 seminar class over the course of about 3 weeks. Much of the game’s “coding” is done in Javascript, while the drawing aspect is done through an HTML5 Canvas element. In the game, you play a man in a robot suit who is tasked to traverse to the center of an enemy compound, plant a bomb, and escape before the bomb explodes. You are able to shoot bullets to take down enemies and break through barriers, but enemies can also shoot back. I also implemented a collision detection algorithm from scratch, as well as implementing simple AI for the enemies to walk around and shoot. Here is a code example showing how I implemented the tile-able backgrounds.
//the origin variable holds the location of the original 0,0 location before the game starts scrolling. the i variable.
//This segment of code gets the point of the origin which is best-fitted to start drawing the background from by taking the origin point and subtracting or adding to it in increments of 256 (the height and width of the tile-able image) until both the x and why values are between -256 and 0.
var x = origin.x;
var y = origin.y;
var sqlength=256;//the height and width of the tile-able background
while(x>0){
x-=sqlength;
}
while(y>0){
y-=sqlength;
}
while(x<-sqlength){
x+=sqlength;
}
while(y<-sqlength){
y+=sqlength;
}
//after finding the point to begin drawing from, the tileable image is drawn 12 times (4x3) in a rectangle formation. Since the size of the canvas is guaranteed to be a smaller width and height than the drawn background, The canvas will keep being drawn seamlessly.
for(var k=0; k<4; k++){
for( var l=0; l<3; l++){
ctx.drawImage(images["tileBackgroundImage"],x+ (k*sqlength),y+ (l*sqlength),sqlength,sqlength);
}
}
Bot Ops can be found here.
Link to full Bot Ops source code