Membuat Bounce Game Dengan Javascript

Kali ini saya akan membagikan game Bounce Game. Cara membuat game bounce ini sangatlah sederhana. Game ini dibuat dengan javascript. Beberapa fitur dalam game sederhana yaitu: kecepatan, menghitung skor, skor flasher, dan menjalankan demo ketika pengguna tidak bermain.


Cara Membuat Game Bounce Game Dengan Javascript
Bounce game







Tertarik untuk mencoba game ini, langsung saja...

 <div id="game">  
 <div id="square0"></div>  
 <div id="square1"></div>  
 <div id="notepad"></div>  
 <div id="pad"></div>  
 </div>  
 <script type="text/javascript">  
 var gameWidth = 360  
 var gameHeight = 320  
 var intervalOne,intervalTwo,timeoutOne,x  
 var angle = 2  
 var tempX = 0  
 var tempY = 0  
 var block = 1  
 var square = 0  
 var squareTop = 0  
 var squareLeft = 0  
 var squareMotion = 1  
 var speed = 80  
 var getPad = 0  
 var nextScore = 0  
 var score = 0  
 var count = 0  
 var collisionOne = 0  
 var collisionTwo = 0  
 var collisionThree = 0  
 document.body.style.margin = "0px"  
 document.body.style.padding = "0px"  
 function setupGame()  
 {  
 document.getElementById("game").style.borderRight = "1px solid #aaa"  
 document.getElementById("game").style.borderRight = "1px solid #aaa"  
 document.getElementById("game").style.borderBottom = "1px solid #aaa"  
 document.getElementById("game").style.width = gameWidth+"px"  
 document.getElementById("game").style.height = gameHeight+"px"  
 document.getElementById("square0").style.position = "absolute"  
 document.getElementById("square0").style.width = "40px"  
 document.getElementById("square0").style.height = "40px"  
 document.getElementById("square0").style.backgroundColor = "#444"  
 document.getElementById("square0").style.display = "none"  
 document.getElementById("square1").style.position = "absolute"  
 document.getElementById("square1").style.width = "40px"  
 document.getElementById("square1").style.height = "40px"  
 document.getElementById("square1").style.backgroundColor = "#444"  
 document.getElementById("square1").style.display = "none"  
 document.getElementById("pad").style.position = "absolute"  
 document.getElementById("pad").style.width = "60px"  
 document.getElementById("pad").style.height = "30px"  
 document.getElementById("pad").style.paddingTop = "10px"  
 document.getElementById("pad").style.textAlign = "center"  
 document.getElementById("pad").style.font = "15px Verdana, sans-serif"  
 document.getElementById("pad").style.backgroundColor = "#000"  
 document.getElementById("pad").style.color = "#fff"  
 document.getElementById("pad").innerHTML = "<a id=\"play\" href=\"javascript:newGame()\">PLAY</a>"  
 document.getElementById("play").style.color = "#fff"  
 document.getElementById("play").style.textDecoration = "none"  
 padTop = Math.floor(gameHeight/2)-20  
 padLeft = Math.floor(gameWidth/2)-30  
 document.getElementById("pad").style.top = padTop+"px"  
 document.getElementById("pad").style.left = padLeft+"px"  
 document.getElementById("notepad").innerHTML = "BounceGame"  
 document.getElementById("notepad").style.padding = "10px"  
 document.getElementById("notepad").style.textAlign = "center"  
 document.getElementById("notepad").style.font = "2.0em Georgia, serif"  
 document.getElementById("notepad").style.fontWeight = "normal"  
 document.getElementById("notepad").style.color = "#222"  
 timeoutOne = setTimeout("intervalTwo = setInterval('demoGame()', speed)", 4000)  
 }  
 function demoGame()  
 {  
 angle = 2  
 clearTimeout(timeoutOne)  
 document.getElementById("square0").style.display = "block"  
 document.getElementById("square1").style.display = "block"  
   if(square == 0)  
   {  
   x = document.getElementById("square0")  
   square = 1  
   }  
   else  
   {  
   x = document.getElementById("square1")  
   square = 0  
   }  
 bounceGame()  
 }  
 function newGame()  
 {  
 block = 0  
 angle = 2  
 tempX = 0  
 tempY = 0  
 square = 0  
 squareTop = 0  
 squareLeft = 0  
 squareMotion = 1  
 nextScore = 0  
 score = 0  
 count = 0  
 collisionOne = 0  
 collisionTwo = 0  
 collisionThree = 0  
 clearTimeout(timeoutOne)  
 clearInterval(intervalOne)  
 clearInterval(intervalTwo)  
 document.getElementById("square0").style.left = "0px"  
 document.getElementById("square0").style.top = "0px"  
 document.getElementById("square0").style.display = "block"  
 document.getElementById("square1").style.left = "0px"  
 document.getElementById("square1").style.top = "0px"  
 document.getElementById("square1").style.display = "block"  
 document.getElementById("pad").style.top = (gameHeight-40)+"px"  
 document.getElementById("pad").innerHTML = ""  
 document.getElementById("notepad").innerHTML = ""  
 intervalOne = setInterval("playGame()", speed)   
 }  
 function playGame()  
 {  
   if(block)  
   {  
   return  
   }  
   if(square == 0)  
   {  
   x = document.getElementById("square0")  
   square = 1  
   }  
   else  
   {  
   x = document.getElementById("square1")  
   square = 0  
   }  
 bounceGame()  
 checkCollision()  
 }  
 function assignM(aM)  
 {  
 squareMotion = aM  
 }  
 function bounceGame()  
 {  
   if(squareMotion==1)  
   {   
     if(squareTop>=(gameHeight-40) && squareLeft>=(gameWidth-40))  
     {  
     assignM(3)  
     moveDR(-40)  
     }  
     if(squareTop>=(gameHeight-40))   
     {   
     assignM(2)  
     moveDL(-40)  
     }   
     else if(squareLeft>=(gameWidth-40))  
     {  
     assignM(4)  
     moveDL(40)  
     }  
     else {  
     moveDR(40)  
     }  
   }  
   else if(squareMotion==2)  
   {  
     if(squareTop<=0 && squareLeft>=(gameWidth-40))  
     {  
     assignM(4)  
     moveDL(40)  
     }  
     if(squareLeft>=(gameWidth-40))  
     {  
     assignM(3)  
     moveDR(-40)  
     }   
     else if(squareTop<=0)  
     {  
     assignM(1)  
     moveDR(40)  
     }  
     else  
     {  
     moveDL(-40)  
     }  
   }  
   else if(squareMotion==3)  
   {  
     if(squareTop<=0 && squareLeft<=0)  
     {  
     assignM(1)  
     moveDR(40)  
     }  
     if(squareTop<=0)  
     {  
     assignM(4)  
     moveDL(40)  
     }   
     else if(squareLeft<=0)  
     {  
     assignM(2)  
     moveDL(-40)  
     }  
     else  
     {  
     moveDR(-40)  
     }  
   }  
   else if(squareMotion==4)  
   {  
     if(squareTop>=(gameHeight-40) && squareLeft<=0)  
     {  
     assignM(2)  
     moveDL(-40)  
     }  
     if(squareLeft<=0)  
     {  
     assignM(1)  
     moveDR(40)  
     }   
     else if(squareTop>=(gameHeight-40))  
     {  
     assignM(3)  
     moveDR(-40)  
     }  
     else  
     {  
     moveDL(40)  
     }  
   }  
 }  
 function moveDR(amount)  
 {   
 save = amount  
 amount = Math.floor(amount/angle)  
   if(angle == 0)  
   {  
   amount = 0  
   }  
 squareLeft += amount   
 x.style.left = squareLeft+"px"  
 squareTop += save   
 x.style.top = squareTop+"px"  
 }  
 function moveDL(amount)  
 {  
 save = amount  
 amount = Math.floor(amount/angle)  
   if(angle == 0)  
   {  
   amount = 0  
   }  
 squareLeft -= amount   
 x.style.left = squareLeft+"px"  
 squareTop += save   
 x.style.top = squareTop+"px"  
 }  
 function assignAngle(aa)  
 {  
   if(aa==1)  
   {  
   angle = 0  
   nextScore = 1000  
   }  
   if(aa==2)  
   {  
   angle = 2  
   nextScore = 100  
   }  
   score += nextScore  
 document.getElementById("pad").innerHTML = nextScore  
 }  
 function flashScore()  
 {  
   if(score > 0)  
   {    
     if(nextScore == "BounceGame")  
     {  
     nextScore = score  
     }  
     else  
     {  
     nextScore = "BounceGame"  
     }  
   document.getElementById("notepad").innerHTML = nextScore  
   }  
   else  
   {  
   document.getElementById("notepad").innerHTML = "BounceGame"  
   }  
 }  
 function countUp()  
 {  
   if(count < (Math.floor(score/10)*8))  
   {  
   count += Math.floor(score/10)  
   }  
   else if(count >= (Math.floor(score/10)*8) && count <= (Math.floor(score/10)*9))  
   {  
     if((Math.floor(score/10)*9) > 200)  
     {  
     count += Math.floor(score/10)  
     }  
     else  
     {  
     count += 10  
     }  
   }  
   else  
   {  
     if(Math.floor(score/10) > 30)  
     {  
     count += 10  
     }  
     else  
     {  
     count += 1  
     }  
   }  
   if(count > score)  
   {  
   count = score  
   clearInterval(intervalOne)  
   intervalOne = setInterval("flashScore()", 2000)   
   }  
 document.getElementById("notepad").innerHTML = count  
 }  
 function checkCollision()  
 {  
 var actualLeft = getPad-30  
   if(squareTop == 0)  
   {  
   document.getElementById("pad").innerHTML = ""  
   }  
   if((squareTop+40)==(gameHeight-40))  
   {  
   difference = Math.floor(squareLeft-actualLeft)  
     if(difference>=(-39)&&difference<4)  
     {  
     collisionOne++  
     collisionTwo = 0  
     collisionThree = 0  
       if(collisionOne > 3)  
       {  
       assignM(Math.floor(Math.random() * 2) + 2)  
       }  
       else  
       {  
       assignM(3)  
       }  
     assignAngle(2)  
     }  
     else if(difference>=5&&difference<15)  
     {  
     collisionOne = 0  
     collisionTwo++  
     collisionThree = 0  
       if(collisionTwo > 3)  
       {  
       assignM(Math.floor(Math.random() * 2) + 2)  
       assignAngle(2)  
       }  
       else  
       {    
       assignM(3)  
       assignAngle(1)  
       }  
     }  
     else if(difference>=15&&difference<59)  
     {  
     collisionOne = 0  
     collisionTwo = 0  
     collisionThree++  
       if(collisionThree > 3)  
       {  
       assignM(Math.floor(Math.random() * 2) + 2)  
       }  
       else  
       {    
       assignM(2)  
       }  
     assignAngle(2)  
     }  
   }  
   else if((squareTop+40)==gameHeight)  
   {  
   block = 1  
   clearInterval(intervalOne)  
   setupGame()  
   intervalOne = setInterval("countUp()", speed)   
   }  
 }  
 function getMouseXY(e)  
 {  
   if(navigator.appName=="Netscape")  
   {   
   tempX = e.pageX  
   tempY = e.pageY  
   }   
   else  
   {   
   tempX = event.clientX + document.body.scrollLeft  
   tempY = event.clientY + document.body.scrollTop  
   }  
   if(tempX < 0)  
   {  
   tempX = 0  
   }   
   getPad = tempX  
   if(getPad <= 30)  
   {  
   getPad = 30  
   }  
   if((getPad-30) > Math.floor(gameWidth-60))  
   {  
   getPad = Math.floor(gameWidth-60)+30  
   }  
   if(!block)  
   {  
   document.getElementById("pad").style.left = (getPad-30)+"px"  
   }  
 }  
 document.onmousemove = getMouseXY  
 setupGame()  
 </script>  

Silahkan sobat kembangkan agar lebih OK... Salam sukses..!
Previous
Next Post »