dshen6/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Now you have all the tools to make a game!
But let's just practice using them for now.

What variable do you change to make the ball fall faster? Try it!
What variable can you change to make the ball fall further?
Let's give our ball horizontal motion!


Create a global var horizontalSpeed, assign it the value 1.
Within the move function body, make another variable called previousLeft, assign it ball.offset().left.
Then use offset() to change the ball's left offset.


Your ball will move right forever unless we stop it.


Make a global var maxLeft, assign it the value 400.
Within the move function body, use a conditional statement to only increase our left offset if our previousLeft is less than maxLeft.


Let's make our ball respond to input.


Uncomment the last 8 lines.
Change the value of horizontalSpeed when the right/left arrow keys are tapped. What happens if horizontalSpeed is a negative value?


When you've gotten this far, give one of your teachers a high-five so we know you're finished! Then rock on below...

Extensions

Make the ball bounce up and down.


When the ball hits maxTop, set gravitySpeed = -gravitySpeed. Why does this work?
Create a minTop variable, assign it a value you choose.
Use another conditional statement to give the ball a ceiling.
How can you make the ball gradually lose height after multiple bounces?


Give the ball a random direction using Math.random() when the user clicks anywhere on the page.


## index.html
<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <div class="ball"></div>
    </body>
</html>

## popcode.json
{"enabledLibraries":["jquery"],"hiddenUIComponents":["console","editor.html","editor.css"]}

## script.js


var ball = $(".ball");
// let's center our ball in the screen by using offset
ball.offset({left: 400});
// then let's make it fall
var gravitySpeed = 1;
var maxTop = 400;

function move() {
    var previousTop = ball.offset().top;
    if (previousTop <= maxTop) {
        ball.offset({top: previousTop + gravitySpeed});
    }
}

setInterval(function() {
    move();
}, 17);

// $("body").keydown(function(e) {
//     if (e.key === "ArrowRight") {
//         // change horizontalSpeed
//     }

//     if (e.key === "ArrowLeft") {
//         // change horizontalSpeed (try negative numbers)
//     }
// });

## styles.css
.ball {
    border-radius: 50%;
	width: 20px;
	height: 20px;
    background: green;
}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Page Title</title>
	</head>
	<body>
	<div class="ball"></div>
	</body>
	</html>



	var ball = $(".ball");
	// let's center our ball in the screen by using offset
	ball.offset({left: 400});
	// then let's make it fall
	var gravitySpeed = 1;
	var maxTop = 400;

	function move() {
	var previousTop = ball.offset().top;
	if (previousTop <= maxTop) {
	ball.offset({top: previousTop + gravitySpeed});
	}
	}

	setInterval(function() {
	move();
	}, 17);

	// $("body").keydown(function(e) {
	// if (e.key === "ArrowRight") {
	// // change horizontalSpeed
	// }

	// if (e.key === "ArrowLeft") {
	// // change horizontalSpeed (try negative numbers)
	// }
	// });
	.ball {
	border-radius: 50%;
	width: 20px;
	height: 20px;
	background: green;
	}