Oyunum görüntüsü şu şekildedir.
Bu oyunu geliştirirken html5'in canvas elemanını kullandım. JQuery metodlarını kullandım.Oyunun içindeki bileşenler top nesnesi hariç canvasın kendi grafik elamanlarıdır. Top nesnesi ise 50x50 png formatında resimdir.
Örneğin sol taraftaki kale nesnesinin kodları şu şekildedir.
BobContext.beginPath();
BobContext.fillStyle = 'red';
BobContext.rect(0, 100,5,200);
BobContext.fill();
BobContext.lineWidth = 1;
BobContext.stroke();
BobContext.closePath();
Örneğin ortadaki yeşil yuvarlağın kodları şu şekildedir.
BobContext.beginPath();
BobContext.arc(BobContext.canvas.width/2, BobContext.canvas.height/2, BobContext.canvas.width/20, 0, 2 * Math.PI, false);
BobContext.fillStyle = 'green';
BobContext.fill();
BobContext.lineWidth = 2;
BobContext.stroke();
BobContext.closePath();
Örneğin kalelerin kenarları ile çarpışma kodları şu şekildedir.
//kale 1 üst çarpişma
if(objBob.x == 0 && (objBob.y<100)){
objBob.dx = -objBob.dx ;
}//kale1 alt çarpişma
if(objBob.x == 0 && (objBob.y > 300)){
objBob.dx = -objBob.dx ;
}//kale 2 üst çarpişma
if(objBob.x == areaW-5 && (objBob.y<100)){
objBob.dx = -objBob.dx ;
}//kale 2 alt çarpişma
if(objBob.x == areaW-5 && (objBob.y > 300 )){
objBob.dx = -objBob.dx ;
}