Work to date after week 8

This code is your starting point to get the ball bouncing up and down the screen. Modify the function moveBall in BallObject.js to make it happen.
CoderDojo · Nov 11, 2013 · ad8ded1 · ad8ded1
1 parent 2290ffa
commit ad8ded1
Show file tree

Hide file tree

Showing 7 changed files with 203 additions and 0 deletions.
diff --git a/JuggleBalls/Week8/BallObject.js b/JuggleBalls/Week8/BallObject.js
@@ -0,0 +1,94 @@
+function BallObject( JQueryElement ) {
+	var ballHdir =1; // Positive 1 if ball moving forwards, negative 1 if moving back.
+	var ballVdir =1; // Positive 1 if moving down the screen, negative 1 if moving up
+	var BALL_MOVE_AMOUNT = 5;	// Number of pixels to move the ball each time.
+
+	var bounds = null;
+
+	var ballDiv = JQueryElement;
+	var ballImage = ballDiv.children()[0];
+
+	// sync our object's x and y position with the HTML element
+	var curXpos = JQueryElement.offset().left;
+	var curYpos = JQueryElement.offset().top;
+
+	// get the width and height of the HTML element
+	// assumes a JQuery element
+	var curWidth = JQueryElement.width();
+	var curHeight = JQueryElement.height();
+
+	// setup visible functions	
+	this.moveHorizontal = moveHorizontal;
+	this.moveVertical = moveVertical;
+	this.grow = grow;
+	this.shrink = shrink;
+	this.getXpos = getCurXpos;
+	this.getYpos = getCurYpos;
+	this.moveBall = moveBall;
+	this.setBounds = setBounds;
+
+	function moveHorizontal( pixels ) {
+		curXpos = curXpos + pixels;
+		ballDiv.css("left", curXpos+"px");
+	}
+
+	function moveVertical(pixels) {
+		curYpos = curYpos + pixels;
+		ballDiv.css("top",curYpos+"px");
+	}
+
+	function grow(pixels) {
+		curWidth = curWidth + pixels;
+		curHeight = curHeight + pixels;
+		ballImage.width = curWidth;
+		ballImage.height = curHeight;
+	}
+
+	function getCurXpos() {
+		return curXpos;
+	}
+
+	function getCurYpos() {
+		return curYpos;
+	}
+
+	function setXpos( newXpos ) {
+		ballDiv.css("left", newXpos+"px");
+		curXpos = newXpos;
+	}
+
+	function setYpos( newYpos ) {
+		ballDiv.css("top", newYpos+"px");
+		curYpos= newYpos;
+	}
+
+	function setBounds( newBounds ) {
+		bounds = newBounds;
+	}
+
+	function shrink(pixels) {
+		grow(-pixels);
+	}
+
+	function moveBall() {
+		// Check of the ball is moving to the right
+		if ( ballHdir == 1 ) {
+			// Check if we're going to hit the RHS of the box
+			if ( curXpos + curWidth + BALL_MOVE_AMOUNT  > bounds.w + bounds.x ) {
+				ballHdir = -1;
+			}
+		} else {
+			if ( curXpos - BALL_MOVE_AMOUNT < bounds.x ) {
+				ballHdir = 1;
+			}
+		}
+
+		// Your Challenge: With the call to setXpos below commented out you should be able to make
+		// the ball go up and down the screen by copying what we did to make it move side-to-side and
+		// adapting it appropriately. If you then remove the comment maker (//) before the call to setXpos
+		// you should see the ball bounce around the screen.
+
+//		setXpos( curXpos + ( BALL_MOVE_AMOUNT * ballHdir) );
+		setYpos( curYpos + (BALL_MOVE_AMOUNT * ballVdir ));
+	}
+}
diff --git a/JuggleBalls/Week8/CoderDojo-ball.png b/JuggleBalls/Week8/CoderDojo-ball.png
diff --git a/JuggleBalls/Week8/TurtleBall.html b/JuggleBalls/Week8/TurtleBall.html
@@ -0,0 +1,23 @@
+<html>
+	<head>
+		<title>TurtleBall</title>
+		<link rel="stylesheet" type="text/css" href="style.css"/>
+		<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
+		<script type="text/javascript" src="TurtleBall.js"></script>
+		<script type="text/javascript" src="BallObject.js"></script>
+		<script type="text/javascript" src="box.js"></script>
+	</head>
+	<body>
+		<button id="btnUp">Up</button>
+		<button id="btnDown">Down</button>
+		<button id="btnLeft">Left</button>
+		<button id="btnRight">Right</button>
+		<button id="btnGrow">Grow</button>
+		<button id="btnShrink">Shrink</button>
+		<div id="ballDiv">
+			<img src="CoderDojo-ball.png" width='50px' height='50px'/>
+		</div>
+		<div id="ballLocation"></div>
+		<div id="ballBox"></div>
+	</body>
+</html>
diff --git a/JuggleBalls/Week8/TurtleBall.js b/JuggleBalls/Week8/TurtleBall.js
@@ -0,0 +1,35 @@
+var ball;
+$(document).ready(function() {
+	ball = new BallObject($("#ballDiv"));
+	var locDiv = $("#ballLocation");
+
+	var box = new Box($("#ballBox"));
+	box.addBall(ball);
+	box.moveBall();
+
+	$("#btnUp").click(function() {
+		ball.moveVertical(-10); 
+		locDiv.html(ball.getXpos()+","+ball.getYpos());
+	});
+	$("#btnDown").click(function() { 
+		ball.moveVertical(10);
+		locDiv.html(ball.getXpos()+","+ball.getYpos());
+	});
+
+	$("#btnLeft").click(function() {
+		ball.moveHorizontal(-10);
+		locDiv.html(ball.getXpos()+","+ball.getYpos());
+	});
+
+	$("#btnRight").click(function() {
+		ball.moveHorizontal(10);
+		locDiv.html(ball.getXpos()+","+ball.getYpos());
+	});
+
+	$("#btnGrow").click(function() {
+		ball.grow(10);
+	});
+	$("#btnShrink").click(function() {
+		ball.shrink(10);
+	});
+});
diff --git a/JuggleBalls/Week8/box.js b/JuggleBalls/Week8/box.js
@@ -0,0 +1,29 @@
+function Box( boxDiv ) {
+	var theDiv = boxDiv;
+	var boxInfo = {
+			x: theDiv.offset().left,  // this.x = theDiv.offset().left,
+			y: theDiv.offset.top,
+			w: theDiv.width(),
+			h: theDiv.height()
+		};
+
+	var ballRef = null;
+
+	this.addBall = addBall;
+	this.moveBall = moveBall;
+
+	function addBall( theBall ) {
+		ballRef = theBall;
+		ballRef.setBounds(boxInfo);
+	}
+
+	function moveBall() {
+		if ( ballRef != null ) {
+			ballRef.moveBall();
+			setTimeout(moveBall,10);
+		} else {
+			alert("You need to add a ball to the box");
+		}
+	}
+
+}
diff --git a/JuggleBalls/Week8/jquery-1.10.2.min.js b/JuggleBalls/Week8/jquery-1.10.2.min.js
diff --git a/JuggleBalls/Week8/style.css b/JuggleBalls/Week8/style.css
@@ -0,0 +1,16 @@
+#ballDiv {
+	position: absolute;
+}
+
+#ballLocation {
+	width: 5%;
+	height: 20pt;
+	border:1px solid black;
+	float: right;
+}	
+
+#ballBox {
+	width: 70%;
+	height: 90%;
+	border: 1px solid green;
+}