10 Replies - 734 Views - Last Post: 01 February 2013 - 08:59 AM

#1 NickClayborne  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 31-January 13

Making a game, and I am a tad lost

Posted 31 January 2013 - 07:55 AM

So, I'm trying to come up with a new game for my internship. I don't want all the answers, but I could definitely use a bit of help to guide me in the right direction. I am a beginner at all this, so I could really use some assistance.

The purpose of my game is simple. There's a blue character and a red character. There's a ball above the red guy. The point is to click anywhere on the screen to make the ball arc to the red character. The ball will automatically arc back to the blue. And once again, you click to bounce it back. As the game progresses, your score increases, and if you fail 3 times, the game is over and your high scores are displayed.

So far, I have the two characters, the ball, and the screen size which is represented by the 'divs' which...I could probably work on and make it better, too.

<html>
<body onkeydown="arrowkeycheck();">
<script>

//Cannon Grab Game
//Objective List
// - Create a ground level*	
// - Create Ball*
// - Create Left Character*
// - Create Right Character*
// - Get Ball to bounce back on click
// - Get Ball to randomly bounce higher
// - Get ball to increase speed as game progresses
// - Get Right character to start at a random distance
// - Create screen size*
// - Scoreboard Database

<script type='text/javascript'>
//LOWER LEVEL ANIMmATION CODE - DON'T MODIFY 
// requestAnim shim layer by Paul Irish
    window.requestAnimFrame = (function(){
      return  window.requestAnimationFrame       || 
              window.webkitRequestAnimationFrame || 
              window.mozRequestAnimationFrame    || 
              window.oRequestAnimationFrame      || 
              window.msRequestAnimationFrame     || 
              function(/* function */ callback, /* DOMElement */ element){
                window.setTimeout(callback, 1000 / 60);
              };
    })();

function animate() {    
    requestAnimFrame( animate );
    update_ball();
}

//END OF LOWER LEVEL ANIMmATION CODE 

//MAKE A LOG FUNCTION TO HELP WITH DEBUGGING
function log(msg){
  document.getElementById('log').innerHTML = msg;
}

//YOUR UPDATE FUNCTION - MOST OF YOUR CODE WILL LIVE HERE
function update_ball(){

  var right = ball.left + ball.style.width;
  var bottom = ball.top + ball.style.height;
	
	if (screen.width < right){
		dx = -dx;		
	}
	
  if (screen.height < bottom){
		dy = -dy;
	}
	
  if (ball.left < 0) {
  	dx = -dx;
  }
	
  if (ball.top < 0) {
  	dy = -dy;
  }
	
	ball.left = ball.left + dx;
  ball.style.left = ball.left + 'px';
  
	ball.top = ball.top + dy;
  ball.style.top = ball.top + 'px';
  
  log ('left: ' + ball.left);
}

//initialization of the game
var dx = 0;
var dy = 0;
ball.left = 25;
ball.top = 25;
animate();

</script>

</script>


<img style="position:absolute; top:450px; left:40px; id="ball" src="ball.jpg" width="30"/>

<div style="position:absolute; top:470px; width:30px; height:30px; background-color:red"></div>
<div style="position:absolute; top:470px; left:500px; width:30px; height:30px; background-color:blue"></div>
<div style="position:absolute; top:500px; width:1000px; height:1px; background-color:black"></div>
<div style="position:absolute; left:1009px; top:-1px; width:1px; height:500px; background-color:black"></div>

<div id="width:1200px; height:1px; color=black" ></div>



</body>

</html>



Right now, the main help that I need is in a few areas.

1) Finding the proper on-click event so that wherever you click on the screen, the ball bounces back.
2) Actually getting the ball to move properly, since I want it to arch back and forth between the two.
3) I also want to figure out a way to get the blue character to position itself randomly each time you start the game.
4) Finally, I would like to figure a way to get a score counter to appear on the upper right corner of the screen.

If there are any ideas to make it better without making it very complicated (I am a beginner, after all), I'd like to hear those as well.

Is This A Good Question/Topic? 0
  • +

Replies To: Making a game, and I am a tad lost

#2 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3838
  • View blog
  • Posts: 13,595
  • Joined: 12-December 12

Re: Making a game, and I am a tad lost

Posted 31 January 2013 - 08:13 AM

You have two closing <script> tags - correct this.

1. You could use document.onclick but if, instead, you create a large DIV you could use the click event for this div and have more control elsewhere.

2. Investigate the Math object to create a formula for an arc.

3. Read Math.random

4. Add an element such as a DIV and set its innerHTML, as you have done with another element. Use CSS, position: fixed; top: 0; right: 0;
Was This Post Helpful? 0
  • +
  • -

#3 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3838
  • View blog
  • Posts: 13,595
  • Joined: 12-December 12

Re: Making a game, and I am a tad lost

Posted 31 January 2013 - 08:19 AM

style.height and width can return a value including the 'px', e.g. '200px'. Use parseInt() to drop the 'px'.
Was This Post Helpful? 0
  • +
  • -

#4 NickClayborne  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 31-January 13

Re: Making a game, and I am a tad lost

Posted 31 January 2013 - 12:53 PM

View Postandrewsw, on 31 January 2013 - 08:19 AM, said:

style.height and width can return a value including the 'px', e.g. '200px'. Use parseInt() to drop the 'px'.

No, I didn't ignore it, I just didn't get the opportunity to get to it yet. I was still mulling a bunch of things over in my head.

Now, with this parseInt(), is it actually going to change anything in terms of how it works or is it just tweaking the code to make it more efficient? Because, right now, with the way you saw my other post, I was just wanting to fix and edit stuff that I already have. I want to focus more on the topic of the game's functionality before I get more into detail of refactoring and tweaking the code to be efficient.
Was This Post Helpful? 0
  • +
  • -

#5 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3838
  • View blog
  • Posts: 13,595
  • Joined: 12-December 12

Re: Making a game, and I am a tad lost

Posted 31 January 2013 - 12:58 PM

Just change this
var right = ball.left + ball.style.width;

and the other line to
var right = ball.left + parseInt(ball.style.width);


Some (particularly older) browsers might return '200px' and parseInt will grab the number 200 from this so that it can be added (rather than concatenated) to ball.left.

For example, if ball.left were 50 you could end up with the text "50200px".
Was This Post Helpful? 1
  • +
  • -

#6 NickClayborne  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 31-January 13

Re: Making a game, and I am a tad lost

Posted 31 January 2013 - 02:10 PM

New issue. Chrome is telling me that 'ball' is not defined. Yet I clearly have the image id there, unless that is not what defines the image itself. I've been racking my brain but I cannot find out what's going on with it. Here's the new code:

<html>
<body onkeydown="arrowkeycheck();">




<script type='text/javascript'>

//Click the button to get the ball to move

//Ball Movement section
function move_right(){
ball.left=ball.left+100;
 log ('left:' + ball.left);
}

//LOWER LEVEL ANIMmATION CODE - DON'T MODIFY 
// requestAnim shim layer by Paul Irish
    window.requestAnimFrame = (function(){
      return  window.requestAnimationFrame       || 
              window.webkitRequestAnimationFrame || 
              window.mozRequestAnimationFrame    || 
              window.oRequestAnimationFrame      || 
              window.msRequestAnimationFrame     || 
              function(/* function */ callback, /* DOMElement */ element){
                window.setTimeout(callback, 1000 / 60);
              };
    })();

function animate() {    
    requestAnimFrame( animate );
    update_ball();
}

//END OF LOWER LEVEL ANIMmATION CODE 

//MAKE A LOG FUNCTION TO HELP WITH DEBUGGING
function log(msg){
  document.getElementById('log').innerHTML = msg;
}

//YOUR UPDATE FUNCTION - MOST OF YOUR CODE WILL LIVE HERE
function update_ball(){

  var right = ball.left + parseInt(ball.style.width);
  var bottom = ball.top + parseInt(ball.style.height);
	
	if (screen.width < right){
		dx = -dx;		
	}
	
  if (screen.height < bottom){
		dy = -dy;
	}
	
  if (ball.left < 0) {
  	dx = -dx;
  }
	
  if (ball.top < 0) {
  	dy = -dy;
  }
	
	ball.left = ball.left + dx;
  ball.style.left = ball.left + 'px';
  
	ball.top = ball.top + dy;
  ball.style.top = ball.top + 'px';
  
 
}

//initialization of the game
var dx = 0;
var dy = 0;
ball.left = 40;
ball.top = 450;
animate();

</script>
	

<img style="position:absolute; top:450px; left:40px; id="ball" src="ball.jpg" width="50"/>

<div style="position:absolute; top:420px; width:30px; height:80px; background-color:red"></div>
<div style="position:absolute; top:420px; left:800px; width:30px; height:80px; background-color:blue"></div>


<div id="width:1200px; height:1px; color=black" ></div>


<button onclick="move_right();">Move to the Right</button>
</body>

</html>


Where/how is it that my ball image is undefined?

Ugh, I hate that I know so freaking little about this.
Was This Post Helpful? 0
  • +
  • -

#7 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3838
  • View blog
  • Posts: 13,595
  • Joined: 12-December 12

Re: Making a game, and I am a tad lost

Posted 31 January 2013 - 02:16 PM

Yes, your code makes reference to ball but it is not defined anywhere.

Add
//initialization of the game
var ball = document.getElementById("ball");

but move your whole script to the bottom of the page, just before the closing </body> tag, so that the page elements are available to be referred to in your code.

[If the page hasn't loaded before your code runs then document.getElementById("ball") will return undefined.]

This post has been edited by andrewsw: 31 January 2013 - 02:17 PM

Was This Post Helpful? 0
  • +
  • -

#8 NickClayborne  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 31-January 13

Re: Making a game, and I am a tad lost

Posted 31 January 2013 - 02:19 PM

Great, that worked but let me with the new error:
Uncaught TypeError: Cannot set property 'left' of null

This post has been edited by Dormilich: 04 February 2013 - 02:25 AM

Was This Post Helpful? 0
  • +
  • -

#9 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3838
  • View blog
  • Posts: 13,595
  • Joined: 12-December 12

Re: Making a game, and I am a tad lost

Posted 31 January 2013 - 02:58 PM

It is .style.left etc.

These lines are wrong:
<img style="position:absolute; top:450px; left:40px; id="ball" src="ball.jpg" width="50"/>
<div id="width:1200px; height:1px; color=black" ></div>

Validate your HTML
Always include a DOCTYPE declaration, a <head> tag and a <title>.

This post has been edited by andrewsw: 31 January 2013 - 03:06 PM

Was This Post Helpful? 0
  • +
  • -

#10 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3838
  • View blog
  • Posts: 13,595
  • Joined: 12-December 12

Re: Making a game, and I am a tad lost

Posted 31 January 2013 - 03:13 PM

Quote

Ugh, I hate that I know so freaking little about this.

What book or tutorial are you studying ?
Was This Post Helpful? 0
  • +
  • -

#11 NickClayborne  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 31-January 13

Re: Making a game, and I am a tad lost

Posted 01 February 2013 - 08:59 AM

View Postandrewsw, on 31 January 2013 - 03:13 PM, said:

Quote

Ugh, I hate that I know so freaking little about this.

What book or tutorial are you studying ?

That's the hard part. In our internship, we aren't. Our facilitator essentially runs through a lesson in about 2 hours, giving us the basic tools. The rest is left up to us to figure out how to learn. If I had a book, it would probably be loads easier for me.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1