Issue IOSD#5 resolved

Task make the ball bounce when wall is encountered finished.
akshatbhargava123 · Oct 4, 2017 · 619b6b7 · 619b6b7
1 parent b0ea9d2
commit 619b6b7
Showing 1 changed file with 37 additions and 20 deletions.
diff --git a/Atari Breakout/lesson1.html b/Atari Breakout/lesson1.html
@@ -2,33 +2,50 @@
 <html>
 <head>
     <meta charset="utf-8" />
-    <title>Breakout Lesson 1</title>
+    <title>Atari Breakout</title>
     <style>
     	* { padding: 0; margin: 0; }
     	canvas { background: #eee; display: block; margin: 0 auto; }
     </style>
 </head>
-<body>
-<!--Enter Heading Breakout Lesson 1
+<body style="text-align:center">
+	<h1> Atari Breakout </h1>
+	<canvas width=480 height=320 id="myCanvas">Canvas is not supported, sorry.</canvas>
 
-make a canvas(id is myCanvas) 320*480 (Issue 1)   --> 
+	<script>
+        var canvas = document.getElementById("myCanvas");
+        var ctx = canvas.getContext("2d");
+        var ballRadius = 10;
+        var x = canvas.width / 2;
+        var y = canvas.height - 30;
+        var dx = 4;
+        var dy = -4;
 
-<script>
-	// JavaScript code goes here
-    //We require circle(ball) and rectangles for this game so lesson 1 is how to generate a canvas and draw a circle and rectangle on it.
-
-  var canvas =document.getElementById("");//Give Id (Issue - 1 )
-var ctx = canvas.getContext("2d");
+        function drawBall() {
+            ctx.beginPath();
+            ctx.arc(x, y, ballRadius, 0, Math.PI*2);
+            ctx.fillStyle = "#FFF";
+            ctx.fill();
+            ctx.closePath();
+        }
 
-    ctx.beginPath();
-//draw a rectangle at the top of canvas
-    ctx.closePath();
-
-    ctx.beginPath();
-//draw a circle in the bottom middle of canvas 
-    ctx.closePath();
-
-</script>
+        function draw() {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            drawBall();
+
+            if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
+                dx = -dx;
+            }
 
+            if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
+                dy = -dy;
+            }
+
+            x += dx;
+            y += dy;
+        }
+
+        setInterval(draw, 10);
+	</script>
 </body>
-</html>
+</html>