Bounce Game by Scott Connell | JavaScriptSource

Bounce Game by Scott Connell

Scott Connell Oct 1, 2012

Abstract

BounceGame is a game built entirely with JavaScript controlled CSS, and does not make use of any of the newer JS frameworks.

Description

BounceGame was built entirely with JavaScript controlled CSS, and does not make use of any of the newer JS frameworks. Some features include an adjustible size, speed, score count up, score flasher, and a demo run when users are not playing.

Code Snippet

<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 = "#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>

Download

Download

Leave a Response

(4 comments)

Yes hello. I tried to copy this game and either my computer or your game is broken and to be honest with you, take a guess it aint me

qasim Jan 16, 2014

but what does the game do??

AcidNinja13 Jul 28, 2013

good browser

jawd Jul 25, 2013

good

soumen samanta Jun 5, 2013