@@ -1,40 +1 @@
-
-<p align="center">
-<img src="https://hacktoberfest.digitalocean.com/assets/HF-full-logo-b05d5eb32b3f3ecc9b2240526104cf4da3187b8b61963dd9042fdc2536e4a76c.svg">
-</p>
-
-
-A community repository to allow enthusiasts and beginners add their projects for [@DigitalOcean's HacktoberFest](https://hacktoberfest.digitalocean.com)
-## About this Repository:
-
-This repository allows any Algos to be added! When adding your own Code, place it in a folder within most suitable category. If there are no folder of that category yet, make a new folder and add it there! Making your PR will get your 1 step closer to your free T-Shirt!
-
-## What is Hacktoberfest?
-
- Hacktoberfest® is open to everyone in our global community. Whether you’re a developer, student learning to code, event host, or company of any size, you can help drive growth of open source and make positive contributions to an ever-growing community. All backgrounds and skill levels are encouraged to complete the challenge.
-
-- Hacktoberfest is a celebration open to everyone in our global community.
-- Pull requests can be made in any GitHub-hosted repositories/projects.
-- You can sign up anytime between October 1 and October 31.
-
-Sign up [Here](https://hacktoberfest.digitalocean.com)
-
-## Making A Thoughtful Pull Request
-
-Pull requests should include the following:
-
-- A title about the project/program you are including
-- Detailed information about the commits
-- No low effort pull requests or duplicate programs
-- Place your Code in the appropriate folder with a README and information on the code
-
-
-
-=======
-## Steps to contribute :
-1. Fork the repository
-2. Add a file or make a change
-3. Create a pull request
-4. Wait for the pr to get merged
-
-### If you like this repo, drop a ⭐
+This is a color game. In this you have to guess the color on the basis of randomly generated color code.
@@ -0,0 +1,172 @@
+function load_images(){
+    //player,virus,gem
+    enemy_image = new Image;
+    enemy_image.src = "Assets/v1.png";
+    
+    player_img = new Image;
+    player_img.src = "Assets/superhero.png";
+    
+    gem_image = new Image;
+    gem_image.src = "Assets/gemm.png";
+    
+    
+}
+
+
+function init(){
+    //define the objects that we will have in the game
+    canvas = document.getElementById("mycanvas");
+    console.log(canvas);
+    W = 700;
+    H = 400;
+    
+    canvas.width = W;
+    canvas.height = H;
+    
+    // create a context 
+    pen = canvas.getContext('2d');
+    console.log(pen);
+    game_over = false;
+    
+    e1 = {
+		x : 150,
+		y : 50,
+		w : 60,
+		h : 60,
+		speed : 20,
+	};
+	e2 = {
+		x : 300,
+		y : 150,
+		w : 60,
+		h : 60,
+		speed : 30,
+	};
+	e3 = {
+		x : 450,
+		y : 20,
+		w : 60,
+		h : 60,
+		speed : 40,
+	};
+    
+    enemy = [e1,e2,e3];
+    
+    player = {
+		x : 20,
+		y : H/2,
+		w : 60,
+		h : 60,
+		speed : 20,
+        moving  : false,
+        health : 100,
+	};
+    
+	gem = {
+		x : W-100,
+		y : H/2,
+		w : 60,
+		h : 60,
+	};
+    //listen to events on the canvas
+    canvas.addEventListener('mousedown',function(){
+        console.log("Mouse Pressed"); 
+        player.moving = true;
+    });
+    canvas.addEventListener('mouseup',function(){
+        console.log("Mouse Released"); 
+        player.moving = false;
+    });
+    
+}
+
+function isOverlap(rect1,rect2){
+    if (rect1.x < rect2.x + rect2.w &&
+   rect1.x + rect1.w > rect2.x &&
+   rect1.y < rect2.y + rect2.h &&
+   rect1.y + rect1.h > rect2.y) {
+    return true
+    }
+    
+    return false;
+    
+}
+
+function draw(){
+    
+    //clear the canvas area for the old frame
+    pen.clearRect(0,0,W,H);
+    
+    pen.fillStyle = "red";
+    //pen.fillRect(box.x,box.y,box.w,box.h);
+    //pen.drawImage(enemy_image,box.x,box.y,box.w,box.h);
+    
+    //draw the player
+    
+    //draw the gem
+    pen.drawImage(player_img,player.x,player.y,player.w,player.h);
+    pen.drawImage(gem_image,gem.x,gem.y,gem.w,gem.h);
+    
+    
+    for(let i=0;i<enemy.length;i++){
+        pen.drawImage(enemy_image,enemy[i].x,enemy[i].y,enemy[i].w,enemy[i].h);
+    }
+    
+    pen.fillStyle = "white";
+    pen.fillText("Score "+player.health,10,10);
+    
+}
+
+function update(){
+    
+    //if the player is moving 
+    if(player.moving==true){
+        player.x += player.speed;
+        player.health += 20;
+    }
+    
+    for(let i=0;i<enemy.length;i++){
+        if(isOverlap(enemy[i],player)){
+            player.health -= 50;
+            if(player.health <0){
+                console.log(player.health);
+                game_over = true;
+                alert("Game Over" + player.health);
+            }
+        }
+    }
+    
+   
+    
+    //overlap overlap
+    if(isOverlap(player,gem)){
+        
+        console.log("You Won");
+        alert("You Won!");
+        game_over = true;
+        return;
+    }
+    
+    //move the box downwards
+    //update each enemy by same logic
+    for(let i=0;i<enemy.length;i++){
+        enemy[i].y += enemy[i].speed;
+        if(enemy[i].y>H-enemy[i].h || enemy[i].y <0){
+            enemy[i].speed *= -1;
+        }   
+    }
+    
+}
+
+function gameloop(){
+    if(game_over==true){
+        clearInterval(f);
+    }
+    draw();
+    update();
+    console.log("In gameloop");
+}
+
+load_images();
+init();
+var f = setInterval(gameloop,100);
@@ -0,0 +1,19 @@
+<html>
+    <head>
+        <title>Game Challenge-1</title>
+        <style>
+            canvas{
+                background-image: url("Assets/back.jpeg");
+                border:5px solid black;
+            
+            }
+        </style>
+        
+    </head>
+    <body>
+        <canvas id="mycanvas"></canvas>
+        <script src="game.js"></script>
+    </body>
+
+
+</html>