Week 5 Progress

This is where we got to at the end of week 5
CoderDojo · Oct 18, 2013 · 4d190a8 · 4d190a8
1 parent 8cf4372
commit 4d190a8
Show file tree

Hide file tree

Showing 6 changed files with 106 additions and 0 deletions.
diff --git a/JuggleBalls/Week5/BallObject.js b/JuggleBalls/Week5/BallObject.js
@@ -0,0 +1,50 @@
+function BallObject( JQueryElement ) {
+	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.getCurXpos = getCurXpos;
+	this.getCurYpos = getCurYpos;
+
+	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 shrink(pixels) {
+		grow(-pixels);
+	}
+}
diff --git a/JuggleBalls/Week5/CoderDojo-ball.png b/JuggleBalls/Week5/CoderDojo-ball.png
diff --git a/JuggleBalls/Week5/TurtleBall.html b/JuggleBalls/Week5/TurtleBall.html
@@ -0,0 +1,21 @@
+<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>
+	</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>
+	</body>
+</html>
diff --git a/JuggleBalls/Week5/TurtleBall.js b/JuggleBalls/Week5/TurtleBall.js
@@ -0,0 +1,26 @@
+var ball;
+$(document).ready(function() {
+	ball = new BallObject($("#ballDiv"));
+
+	$("#btnUp").click(function() {
+		ball.moveVertical(-10); 
+	});
+	$("#btnDown").click(function() { 
+		ball.moveVertical(10);
+	});
+
+	$("#btnLeft").click(function() {
+		ball.moveHorizontal(-10);
+	});
+
+	$("#btnRight").click(function() {
+		ball.moveHorizontal(10);
+	});
+
+	$("#btnGrow").click(function() {
+		ball.grow(10);
+	});
+	$("#btnShrink").click(function() {
+		ball.shrink(10);
+	});
+});
diff --git a/JuggleBalls/Week5/jquery-1.10.2.min.js b/JuggleBalls/Week5/jquery-1.10.2.min.js
diff --git a/JuggleBalls/Week5/style.css b/JuggleBalls/Week5/style.css
@@ -0,0 +1,3 @@
+#ballDiv {
+	position: absolute;
+}