Go Back   CodingForums.com > :: Client side development > JavaScript programming

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 02-21-2013, 07:00 PM   PM User | #1
cotumb
New to the CF scene

 
Join Date: Feb 2013
Posts: 4
Thanks: 0
Thanked 0 Times in 0 Posts
cotumb is an unknown quantity at this point
Post Help Me CHange This

The following code is a code I made for a block game. I want to change the squares that move around and bounce off the pad to an image on my computer. How do I do this?



Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<title>BounceGame Source</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>

<body>

<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 gameHeight = 320
var gameWidth = 360

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 = "#ef6b00"
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 = "#ef6b00"
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 = "#fce216"
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"
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 = "#0000FF"

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 = "Bounce"
		}

	document.getElementById("notepad").innerHTML = nextScore
	}
	else
	{
	document.getElementById("notepad").innerHTML = "Bounce"
	}
}

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>


</body>
</html>

Last edited by VIPStephan; 02-21-2013 at 08:35 PM.. Reason: added code BB tags
cotumb is offline   Reply With Quote
Old 02-21-2013, 08:36 PM   PM User | #2
VIPStephan
The fat guy next door


 
VIPStephan's Avatar
 
Join Date: Jan 2006
Location: Halle (Saale), Germany
Posts: 7,614
Thanks: 5
Thanked 865 Times in 842 Posts
VIPStephan is a jewel in the roughVIPStephan is a jewel in the roughVIPStephan is a jewel in the rough
If you post any code please put it in between [CODE][/CODE] tags. It makes scanning your posts much easier. You can do this by clicking the small ‘#’ icon above the reply field.
__________________
Don’t click this link!
VIPStephan is offline   Reply With Quote
Old 02-22-2013, 01:43 PM   PM User | #3
cotumb
New to the CF scene

 
Join Date: Feb 2013
Posts: 4
Thanks: 0
Thanked 0 Times in 0 Posts
cotumb is an unknown quantity at this point
Fixed Request

That confuses me, doesn't the post already have a separated part for the code?
But here it is:
Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<title>BounceGame Source</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>

<body>

<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 gameHeight = 320
var gameWidth = 360

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 = "#ef6b00"
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 = "#ef6b00"
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 = "#fce216"
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"
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 = "#0000FF"

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 = "Bounce"
		}

	document.getElementById("notepad").innerHTML = nextScore
	}
	else
	{
	document.getElementById("notepad").innerHTML = "Bounce"
	}
}

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>


</body>
</html>
Please help me change this. I posted it on the games tab of
the-bounce.webs.com and it won't work the same way as the regular file would. Please help.
cotumb is offline   Reply With Quote
Reply

Bookmarks

Tags
block, change, game, image

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 01:19 PM.


Advertisement
Log in to turn off these ads.