New Topic/Question
This topic is locked
http://www.dreaminco...1&#entry1794225
With that in mind, I decided that instead of bouncing the ball back and forth in an arch, and you click it to bounce it off of your character, I want to make it so that the ball just bounces between your character (red) and the character on the right (blue) and the boundaries are where you score. Based on this code that I have, I got a lot of work to do, and I need to figure out which direction I need to go from here.
<html>
<body onkeydown="arrowkeycheck();">
<script>
<script type='text/javascript'>
//Click the button to get the ball to move
//Ball Movement section
function move_right(){
blueball.left=blueball.left+100;
}
//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 ||
file:///C:/Users/Nick/Documents/New%20Game/ball.jpg 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 = blueball.left + blueball.style.width;
var bottom = blueball.top + blueball.style.height;
if (screen.width < right){
dx = -dx;
}
if (screen.height < bottom){
dy = -dy;
}
if (blueball.left < 0) {
dx = -dx;
}
if (blueball.top < 0) {
dy = -dy;
}
blueball.left = blueball.left + dx;
blueball.style.left = blueball.left + 'px';
blueball.top = blueball.top + dy;
blueball.style.top = blueball.top + 'px';
log ('left: ' + blueball.left);
}
//initialization of the game
var dx = 0;
var dy = 0;
blueball.left = 40;
blueball.top = 450;
animate();
</script>
<img style="position:absolute; top:450px; left:40px; id="blueball" src="ball.jpg" width="30"/>
<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>
Objectives from here:
1. Make the ball bounce around, stopping as it hits the left and right walls
2. Add a top and bottom boundary
3. Make ball bounce off of the divs (paddle)
4. Create a scoreboard to go on the top left
5. Create a way to cause the ball hitting the walls to increase the score
6. Make a way that the red div will always be attached to the mouse, so that when you move your mouse, the cursor always controls the red paddle
7. Make the blue paddle always moving up and down on the far right side of the screen, moving between the top and bottom boundary.
8. Make the speed of the blue paddle increase with time
MultiQuote
).
| 