Completed JuggleBalls

JuggleBalls/Finished/BallObject.js

@@ -0,0 +1,104 @@
+function BallObject( JQueryElement ) {
+	var ballHdir = 1;			// Positive if the ball is moving forwards, negative otherwise
+	var ballVdir = 1;			// Positive if the ball is moving down, negative otherwise
+	var BALL_MOVE_AMOUNT = 5;	// Move the ball by 10 pixels at a time.
+	var BALL_MOVE_SPEED = 100;	// Number of milli-seconds between moves.
+
+	var bounds = { x:0, y: 0, w: 500, h: 500 };
+
+	var ballDiv = JQueryElement;
+	var ballImage  = ballDiv.children()[0];
+
+	// sync our object's x and y position with the HTML element
+	var curXpos = JQueryElement.offset().top;
+	var curYpos = JQueryElement.offset().left;
+
+	var hOffset = 0, vOffset = 0;
+
+	// get the width and height of the HTML element
+	// assumes a JQuery element
+	var curWidth = JQueryElement.width();
+	var curHeight = JQueryElement.height();
+
+	function setXpos( xpos ) {
+		ballDiv.css("left", xpos+"px");
+		curXpos = xpos;
+	}
+
+	function setYpos( ypos ) {
+		ballDiv.css("top",ypos+"px");
+		curYpos = ypos;
+	}
+
+	// setup visible functions	
+	this.moveHorizontal = moveHorizontal;
+	this.moveVertical = moveVertical;
+	this.grow = grow;
+	this.shrink = shrink;
+	this.getXpos = getXpos;
+	this.getYpos = getYpos;
+	this.setXpos = setXpos;
+	this.setYpos = setYpos;
+	this.moveBall = move;
+	this.setBounds = setBounds;
+
+	function moveHorizontal( pixels ) {
+		setXpos(curXpos + pixels); 
+	}
+
+	function moveVertical(pixels) {
+		setYpos(curYpos + pixels); 
+	}
+
+	function grow(pixels) {
+		curWidth = curWidth + pixels;
+		curHeight = curHeight + pixels;
+		ballImage.width = curWidth;
+		ballImage.height = curHeight;
+	}
+
+	function shrink(pixels) {
+		grow(-pixels);
+	}
+
+	function getXpos() {
+		return curXpos;
+	}
+
+	function getYpos() {
+		return curYpos;
+	}
+
+	function setBounds( newBounds ) {
+		bounds = newBounds;
+	}
+
+	function move() {
+		// See which direction we're going to move the ball horizontally
+		if ( ballHdir > 0 ) {
+			if ( curXpos + BALL_MOVE_AMOUNT + curWidth > bounds.w  + bounds.x) {
+				ballHdir = -1;
+			}
+		} else {
+			if ( curXpos - BALL_MOVE_AMOUNT < bounds.x ) {
+				ballHdir = 1;
+			}
+		}
+		// See which direction we're going to move the ball vertically.
+		if ( ballVdir > 0 ) {
+			if ( curYpos + BALL_MOVE_AMOUNT + curHeight > bounds.h + bounds.y ) {
+				ballVdir = -1;
+			}
+		} else {
+			if ( curYpos - BALL_MOVE_AMOUNT < bounds.y ) {
+				ballVdir = 1;
+			}
+		}
+
+		setXpos(curXpos+(BALL_MOVE_AMOUNT*ballHdir));
+		setYpos(curYpos+(BALL_MOVE_AMOUNT*ballVdir));
+	}
+
+	setXpos(curXpos);
+	setYpos(curYpos);
+}

JuggleBalls/Finished/Box.js

@@ -0,0 +1,55 @@
+function Box( boxDiv ) {
+	var theDiv = boxDiv;
+	var boxInfo = { x: theDiv.offset().left,
+					y: theDiv.offset().top,
+					w: theDiv.width(),
+					h: theDiv.height()
+				  };
+	var ballRef = [];
+
+	this.addBall = addBall;
+	this.moveBall = moveBall;
+
+	function addBall( theBall ) {
+		ballRef.push(theBall);
+        theBall.setBounds(boxInfo);
+        // Make sure that the ball starts at the top of the box, not at the top of the page.
+        theBall.setXpos(boxInfo.x);
+        theBall.setYpos(boxInfo.y);
+	}
+
+	function moveBall() {
+		if ( ballRef != null ) {
+ /*           var ballNo = 0;
+            for( ballNo = 0; ballNo < ballRef.length; ballNo++) {
+			    ballRef[ballNo].moveBall();
+            } */
+            $(ballRef).each(function(){this.moveBall();});
+			setTimeout(moveBall,10);
+		}
+	}
+
+    theDiv.on("click", function(event) {
+        // Create a div to contain the new ball and set it's css position to be absolute so that
+        // we can control it's placement on the screen.
+        var newBall = $("<div/>", {style:"position:absolute"});
+        // Create the img to reference the image
+        var newImg = $("<img/>", {src: "CoderDojo-ball.png", width:"50px", height:"50px"});
+        // Add the IMG to the DIV
+        newBall.append(newImg);
+        // Add the newly created div as the first element of the body
+        $("body").prepend(newBall);
+        // Now wrap our newly created DIV in a BallObject and add it to the box.
+        addBall(new BallObject(newBall));
+    });
+
+    // If our window resizes, then we want to recalculate the size of the Box div
+    // So add a resize event handler to the window. Then every time the window resizes
+    // we recalculate the values of the boxInfo attributes.
+    $(window).on("resize", function(event) {
+        boxInfo.x = theDiv.offset().left;
+        boxInfo.y = theDiv.offset().top;
+        boxInfo.w = theDiv.width();
+        boxInfo.h = theDiv.height();
+    });
+}

JuggleBalls/Finished/TurtleBall.html

@@ -0,0 +1,25 @@
+<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>

JuggleBalls/Finished/TurtleBall.js

@@ -0,0 +1,36 @@
+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);
+	});
+});

JuggleBalls/Finished/style.css

@@ -0,0 +1,20 @@
+#ballDiv {
+	position: absolute;
+}
+
+.ball-class {
+    position: absolute;
+}
+
+#ballLocation {
+	width: 5%;
+	height: 20pt;
+	border: 1px solid black;
+	float: right;
+}
+
+#ballBox {
+	width: 70%;
+	height: 90%;
+	border: 1px solid green;
+}