Game sederhana ini banyak sekali ditemukan pada google, anda bisa mencari digoogle game sederhana yang anda inginkan. berikut source code untuk game ini
<div id="game">
<div id="square0">
</div>
<div id="square1">
</div>
<div id="notepad">
</div>
<div id="pad">
</div>
</div>
<script type="text/javascript">
<!-- BounceGame © 2012 Scott Connell -->
<!-- Source: http://scottconnell.orgfree.com -->
<!-- Release Date: 2012/9/22 -->
<!-- This game runs best inside an iframe -->
<!-- gameWidth and gameHeight must be divisible by 40 evenly. -->
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 = "#0a9"
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 = "#044"
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 = "Bounce Game"
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>
Cara bermainnya cukup mudah kok, tinggal menggeserkan mouse dan arahkan ke sebuah ball agar ball tersebut tidak jatuh atau mudahnya kita membuat ballnya terus memantul.
Sistem score : - mendapatkan nilai 100, jika ballnya memantul dengan sembarang.
untuk score akan dilanjutkan jika player terus bermain sebelum muncul Bounce Game pada layar tapi jika sudah muncul Bounce Game pada layar maka score akan direset.
