Skip to content

Commit

Permalink
Merge pull request #382 from Tanmay-Giram/adding-Catch-Me-Card-Game
Browse files Browse the repository at this point in the history
adding Catch Me Card Edition
  • Loading branch information
DhanushNehru authored Nov 21, 2023
2 parents 9e592e9 + 89b4e40 commit f4aaee8
Show file tree
Hide file tree
Showing 6 changed files with 79 additions and 0 deletions.
14 changes: 14 additions & 0 deletions Catch Me Card Edition/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html>
<head>
<title>Catch Me</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<div id="box">
<p>Catch Me</p>
</div>
<script src="script.js"></script>
</body>
</html>
7 changes: 7 additions & 0 deletions Catch Me Card Edition/readme.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
## Catch me if you can


### Using HTML, CSS & JS
##### you can find screenshot in this folder

## Screeen shot: https://github.com/ammy20019/javascript-mini-projects/blob/master/CatchMeIfYouCan/ammy20019/screenshot.PNG
Binary file added Catch Me Card Edition/screenshot.PNG
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
41 changes: 41 additions & 0 deletions Catch Me Card Edition/script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
var box = document.getElementById("box");

var viewWidth = window.innerWidth;
var viewHeight = window.innerHeight;


// Updates the viewport height and width dynamically
window.addEventListener("resize", function(event) {
viewWidth = window.innerWidth;
viewHeight = window.innerHeight;
});



box.addEventListener("mouseover", function(event) {
var boxAttr = box.getBoundingClientRect();

var pos = getNewPosition(boxAttr.width, boxAttr.height);

box.style.top = pos.y + "px";
box.style.left = pos.x + "px";
});



function getNewPosition(boxWidth, boxHeight) {

// The boxWidth and boxHeight are subtracted so that they would not move out from the right and bottom direction
var newX = Math.floor((Math.random() * viewWidth) + 1 - boxWidth);
var newY = Math.floor((Math.random() * viewHeight) + 1 - boxHeight);

// These will satisfy that box does not move go out in the top and left direction
if(newX < 0) {
newX = 0;
}
if(newY < 0) {
newY = 0;
}

return {x: newX, y: newY};
}
15 changes: 15 additions & 0 deletions Catch Me Card Edition/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
#box {
width: 10vw;
height: 10vw;
background-color: #b916f4;
cursor: pointer;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}

#box p {
font-size: 1.7vw;
color: white;
}
2 changes: 2 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -544,6 +544,8 @@ More information about the pack can be found here [Github Student Developer Pack

| | | | |
|------|------|------|------|
| [3D Portfolio](https://github.com/DhanushNehru/Ultimate-Web-Development-Resources/tree/main/3D-Portfolio) | [3D](https://github.com/DhanushNehru/Ultimate-Web-Development-Resources/tree/main/3D) | [Blog Website ](https://github.com/DhanushNehru/Ultimate-Web-Development-Resources/tree/main/Blog-Website) | [Bloggers Website ](https://github.com/DhanushNehru/Ultimate-Web-Development-Resources/tree/main/Blogger-Website-main/blogers%20%20website) |
| [Bootstrap Portfolio](https://github.com/DhanushNehru/Ultimate-Web-Development-Resources/tree/main/Bootstrap%20Portfolio) | [Calculator](https://github.com/DhanushNehru/Ultimate-Web-Development-Resources/tree/main/calculator) | [Catch Me Card Game](https://github.com/Tanmay-Giram/Ultimate-Web-Development-Resources/tree/adding-Catch-Me-Card-Game/Catch%20Me%20Card%20Edition) | | [Chess](https://github.com/DhanushNehru/Ultimate-Web-Development-Resources/tree/main/Chess) | [City Finder](https://github.com/DhanushNehru/Ultimate-Web-Development-Resources/tree/main/City%20Finder) |
| [3D Portfolio](https://github.com/DhanushNehru/Ultimate-Web-Development-Resources/tree/main/3D-Portfolio) | [3D](https://github.com/DhanushNehru/Ultimate-Web-Development-Resources/tree/main/3D) | [ ASCII VALUE GENERATOR ](https://github.com/DhanushNehru/Ultimate-Web-Development-Resources/tree/main/ascii-value-generator) | [Blog Website ](https://github.com/DhanushNehru/Ultimate-Web-Development-Resources/tree/main/Blog-Website) | [Bloggers Website ](https://github.com/DhanushNehru/Ultimate-Web-Development-Resources/tree/main/Blogger-Website-main/blogers%20%20website) |
| [Bootstrap Portfolio](https://github.com/DhanushNehru/Ultimate-Web-Development-Resources/tree/main/Bootstrap%20Portfolio) | [Calculator](https://github.com/DhanushNehru/Ultimate-Web-Development-Resources/tree/main/calculator) | [Chess](https://github.com/DhanushNehru/Ultimate-Web-Development-Resources/tree/main/Chess) | [City Finder](https://github.com/DhanushNehru/Ultimate-Web-Development-Resources/tree/main/City%20Finder) |
| [Clock Project](https://github.com/DhanushNehru/Ultimate-Web-Development-Resources/tree/main/ClockProject) | [Disney Character Game](https://github.com/DhanushNehru/Ultimate-Web-Development-Resources/tree/main/disney-character-game) | [Drum Kit](https://github.com/DhanushNehru/Ultimate-Web-Development-Resources/tree/main/DRUM-KIT) | [Dice Challenge](https://github.com/DhanushNehru/Ultimate-Web-Development-Resources/tree/main/Dice-Challenge) |
Expand Down

0 comments on commit f4aaee8

Please sign in to comment.