Bounce Game by Scott Connell

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>