Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,700
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    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.

  • #3
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •