mohamedgomran · hagarabdelwaha · Jan 3, 2018 · Jan 5, 2018 · Jan 5, 2018 · Jan 6, 2018
diff --git a/bk.png b/bk.png
diff --git a/co.png b/co.png
diff --git a/coins.html b/coins.html
@@ -0,0 +1,48 @@
+<html>
+
+<head>
+<title>Collect Coins Game</title>  
+    <style>
+#container {
+  width: 1300px;
+  height: 700px;
+  position: relative;
+  background: gray;
+}
+#player {
+  width: 100px;
+  height: 150px;
+  position: absolute;
+  background-color: red;
+}
+ #coin1 {
+  width: 50px;
+  height: 50px;
+  position:absolute;
+  background-color: yellow;
+}
+    #coin2 {
+  width: 30px;
+  height: 50px;
+  position:absolute;
+  background-color: yellow;
+}
+
+</style>
+
+</head>
+<body>
+  <input type="button" id="btn1" value="Play">
+  <p id="score"></p>
+
+<div id ="container"> 
+  <h2 align="center" > Score : <p id="demo">0</p>  <h2> 
+    <div id ="player">  </div>
+<div id ="coin1">     </div> 
+ <div id ="coin2">     </div> 
+</div>
+
+    <script type="text/javascript" src="coins.js"></script>
+
+</body>
+</html>
diff --git a/coins.js b/coins.js
@@ -0,0 +1,100 @@
+
+     var btn=document.getElementById('btn1')
+
+      var container = document.getElementById("container");
+      container.style.width=innerWidth;
+      container.style.height=innerHeight;
+
+
+      var player = document.getElementById("player");
+      var coin1 = document.getElementById("coin1");  
+      var coin2 = document.getElementById("coin2"); 
+
+      var score=0;
+
+
+      document.getElementById('demo').innerHTML = score;
+
+
+
+
+     //document.getElementById('score').textcontent='gogo'
+
+
+
+     player.style.top=innerHeight-150+'px';
+     coin1.style.right=1+'px';
+     coin1.style.top=innerHeight-200+'px';
+     coin1.style.height=70+'px';
+
+     coin2.style.right=50+'px';
+
+     player.style.width=100+'px';
+
+
+
+   var playerposition=player.style.width;  //return string
+   var ppos='';
+
+          var i=0;
+          while(playerposition[i] != 'p')
+              {
+                  ppos += playerposition[i]
+                  i++;
+              }
+
+
+  //console.log('coin width',pcoin1);
+  console.log("player width ",ppos);
+  console.log("inner width",innerWidth);
+
+   console.log("collision position",innerWidth - ppos )
+
+   console.log(score);
+
+ var coll=innerWidth - ppos -45
+ console.log(coll)
+var move = function ()
+    {
+
+
+    var pos =0;
+    var pos2=0
+
+      // var flag=false
+      var id = setInterval(frame, 3);  
+
+      function frame()
+            {
+                console.log(pos);
+                console.log(score);
+
+
+                //console.log(coin1.style.right,"coin",innerWidth - player.style.width +"player")
+              document.getElementById('demo').innerHTML = score;
+                 if (pos == coll) {
+                          clearInterval(id);
+                           //document.getElementById('demo').innerHTML = score;
+                          score++;
+
+                            pos=0
+                            pos2=0
+                       //  alert('b')
+                            id = setInterval(frame, 3);
+
+                        } else {
+                             pos++; 
+                             pos2++;
+                             coin1.style.right=pos + 'px'; 
+                             coin2.style.right=pos2 + 'px'; 
+
+                          }
+
+
+         }
+
+    }
+
+btn.addEventListener('click',move);
+
+
diff --git a/imgs/Thumbs.db b/imgs/Thumbs.db
diff --git a/imgs/co.jpg b/imgs/co.jpg
diff --git a/imgs/co.png b/imgs/co.png
diff --git a/imgs/ground.png b/imgs/ground.png
diff --git a/imgs/obs.png b/imgs/obs.png
diff --git a/imgs/penguin.png b/imgs/penguin.png
diff --git a/newbegin.css b/newbegin.css
@@ -0,0 +1,38 @@
+#main{
+	width: 750px;
+	height: 500px;
+	position: relative;
+	margin: auto;
+	border-width: 5px;
+	border-style: solid;
+	overflow: hidden;
+	size: fixed;
+
+}
+
+.footer{
+	position: absolute;
+/*	bottom: 0px;
+	width: 750px;
+	height: 70px;*/
+	z-index: -1;
+
+}
+
+/*#footerdiv2{
+	right: -750px;
+}*/
+
+.obs{
+	position: absolute;
+/*	bottom: 30px;
+	right: -100px;
+	width: 100px;
+	height: 100px;*/
+	z-index: -2;
+}
+
+.imgindiv{
+	width: 100%;
+	height: 100%;
+}
diff --git a/newbegin.html b/newbegin.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8" />
+<title>Keyframe Animation Demo</title>
+</head>
+<body>
+  <div id="main">
+      <h2 align="center" > Score : <p id="demo"></p>  <h2> 
+          <h2 align="center" > Player Name : <p id="pname"></p>  <h2> 
+<!--   <div id="footerdiv1" class="footer"><img id="footerimg" class="imgindiv" src="imgs/ground.png"></div>
+  <div id="footerdiv2" class="footer"><img id="footerimg" class="imgindiv" src="imgs/ground.png"></div> -->
+  <!-- <div id="obsdiv" class="obs"><img id="obsimg" class="imgindiv" src="imgs/obs.png"></div> -->
+
+  </div>
+
+  <script type="text/javascript" src="newbegin.js"></script>
+  <link rel="stylesheet" type="text/css" href="newbegin.css">
+
+</body>
+</html>