New Topic/Question
Reply
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.
MultiQuote
| 