Home
About
Editor Web OL
Code Learn
Html - 5
Css - 3
Code StyleKali ini kita membahas cara membuat game bounce dengan javascript di blog. Oke langsung saja kita implementasikan. Berikut kodenya :
dan ini hasilnya :
<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 aniframe -->
<!-- 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= "#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>
<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 aniframe -->
<!-- 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= "#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>
dan ini hasilnya :
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 = "PLAY"
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="collisionone" collisionthree="0" collisiontwo="0" if="if"> 3)
{
assignM(Math.floor(Math.random()* 2) + 2)
}
else
{
assignM(3)
}
assignAngle(2)
}
else if (difference>=5&&difference<15 collisionone="0" collisionthree="0" collisiontwo="collisiontwo" if="if"> 3)
{
assignM(Math.floor(Math.random()* 2) + 2)
assignAngle(2)
}
else
{
assignM(3)
assignAngle(1)
}
}
else if (difference>=15&&difference<59 collisionone="0" collisionthree="collisionthree" collisiontwo="0" if="if"> 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()
Tidak ada komentar:
Posting Komentar
Berkomentarlah jika ada pertanyaan seputar artikel ini dengan santun bahasa Indonesia yang baik.