diff --git a/.github/workflows/pr_tags.yaml b/.github/workflows/pr_tags.yaml
index 726c629b88..44f8d599d4 100644
--- a/.github/workflows/pr_tags.yaml
+++ b/.github/workflows/pr_tags.yaml
@@ -75,4 +75,4 @@
# labels: prLabels.map(function(label) {
# return label.name;
# })
-# });
+# });
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000000..5c297ee2ea
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+
+assets/images/Pixel_Painter.png
diff --git a/Games/Anagram -Word-Game/README.md b/Games/Anagram -Word-Game/README.md
new file mode 100644
index 0000000000..2fa0b996d7
--- /dev/null
+++ b/Games/Anagram -Word-Game/README.md
@@ -0,0 +1,43 @@
+# **Anagram Word Game**
+
+---
+
+
+
+## **Description ๐**
+
+- Anagram Word Game is an engaging web-based game where players are challenged to unscramble a given set of letters to form a correct word. This game is designed to test and enhance players' vocabulary and cognitive skills in a fun and interactive way, providing an enjoyable gaming experience for all ages.
+
+## **Functionalities ๐ฎ**
+
+- Presents players with a scrambled word.
+- Allows players to input their guessed word.
+- Provides instant feedback on the correctness of the guessed word.
+- Generates a new scrambled word for each game session.
+- Tracks and displays the player's score.
+- Features a sleek and intuitive user interface for seamless gaming.
+
+
+
+## **How to play? ๐น๏ธ**
+
+1. Launch the Anagram Word Game in your browser.
+2. Observe the scrambled word presented on the screen.
+3. Enter your guess for the correct word into the provided input field.
+4. Click "Submit Guess" to verify your answer.
+5. If correct, you'll receive a confirmation message and your score will increase; otherwise, try again or click "Give Up" to reveal the correct word.
+6. Click "Next Word" to generate a new scrambled word and continue playing.
+
+
+
+## **Screenshots ๐ธ**
+
+![image](https://github.com/manishh12/GameZone/assets/97523900/c24e9b9f-fdf2-4d3f-87c3-b2780bd27063)
+
+
+
+
+
+
+
+
diff --git a/Games/Anagram -Word-Game/index.html b/Games/Anagram -Word-Game/index.html
new file mode 100644
index 0000000000..25cd275d29
--- /dev/null
+++ b/Games/Anagram -Word-Game/index.html
@@ -0,0 +1,26 @@
+
+
+
+
+
+ Anagram Word Game
+
+
+
+
+
Anagram Word Game
+
+
+
+
Submit Guess
+
Give Up
+
+
Next Word
+
+
+
+
+
+
diff --git a/Games/Anagram -Word-Game/script.js b/Games/Anagram -Word-Game/script.js
new file mode 100644
index 0000000000..05e17dffab
--- /dev/null
+++ b/Games/Anagram -Word-Game/script.js
@@ -0,0 +1,52 @@
+const words = ["javascript", "python", "programming", "developer", "computer"];
+let currentWord = '';
+let scrambledWord = '';
+let score = 0;
+
+function scrambleWord(word) {
+ let scrambled = word.split('').sort(() => 0.5 - Math.random()).join('');
+ return scrambled;
+}
+
+function pickRandomWord() {
+ const randomIndex = Math.floor(Math.random() * words.length);
+ currentWord = words[randomIndex];
+ scrambledWord = scrambleWord(currentWord);
+ document.getElementById('scrambled-word').innerText = scrambledWord;
+}
+
+function checkGuess() {
+ const guess = document.getElementById('guess').value.toLowerCase();
+ if (guess === currentWord) {
+ document.getElementById('result-message').innerText = `Correct! The word was "${currentWord}".`;
+ score += 10;
+ document.getElementById('score').innerText = score;
+ document.getElementById('next-word').style.display = 'inline-block';
+ document.getElementById('submit-guess').disabled = true;
+ document.getElementById('give-up').disabled = true;
+ } else {
+ document.getElementById('result-message').innerText = "Incorrect, try again.";
+ score -= 2;
+ document.getElementById('score').innerText = score;
+ }
+}
+
+function giveUp() {
+ document.getElementById('result-message').innerText = `The correct word was "${currentWord}".`;
+ document.getElementById('next-word').style.display = 'inline-block';
+ document.getElementById('submit-guess').disabled = true;
+ document.getElementById('give-up').disabled = true;
+}
+
+document.getElementById('submit-guess').addEventListener('click', checkGuess);
+document.getElementById('give-up').addEventListener('click', giveUp);
+document.getElementById('next-word').addEventListener('click', () => {
+ document.getElementById('guess').value = '';
+ document.getElementById('result-message').innerText = '';
+ document.getElementById('next-word').style.display = 'none';
+ document.getElementById('submit-guess').disabled = false;
+ document.getElementById('give-up').disabled = false;
+ pickRandomWord();
+});
+
+pickRandomWord();
diff --git a/Games/Anagram -Word-Game/style.css b/Games/Anagram -Word-Game/style.css
new file mode 100644
index 0000000000..7076c95bee
--- /dev/null
+++ b/Games/Anagram -Word-Game/style.css
@@ -0,0 +1,76 @@
+body {
+ font-family: 'Arial', sans-serif;
+ background: linear-gradient(135deg, #0f9997, #e9ecef);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ margin: 0;
+}
+
+.container {
+ text-align: center;
+ background-color: #fff;
+ padding: 20px;
+ border-radius: 12px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ max-width: 400px;
+ width: 100%;
+}
+
+h1 {
+ margin-bottom: 20px;
+ color: #343a40;
+}
+
+#game-container {
+ margin-top: 20px;
+}
+
+#scrambled-word {
+ font-size: 24px;
+ margin-bottom: 20px;
+ color: #007BFF;
+ font-weight: bold;
+}
+
+input {
+ padding: 10px;
+ margin: 5px;
+ font-size: 16px;
+ border: 1px solid #ced4da;
+ border-radius: 4px;
+ width: calc(100% - 22px);
+}
+
+button {
+ padding: 10px 15px;
+ margin: 5px;
+ font-size: 16px;
+ border: 1px solid #007BFF;
+ border-radius: 4px;
+ background-color: #007BFF;
+ color: white;
+ cursor: pointer;
+ width: calc(100% - 22px);
+}
+
+button:hover {
+ background-color: #0056b3;
+}
+
+#result-message {
+ margin-top: 20px;
+ font-size: 18px;
+}
+
+#next-word {
+ display: none;
+ margin-top: 20px;
+}
+
+#score-container {
+ margin-top: 20px;
+ font-size: 18px;
+ color: #495057;
+}
diff --git a/Games/Brick Buster/README.md b/Games/Brick Buster/README.md
new file mode 100644
index 0000000000..510341e58c
--- /dev/null
+++ b/Games/Brick Buster/README.md
@@ -0,0 +1,21 @@
+# Brick Buster
+
+## Description
+Brick Buster is a classic arcade game where players control a paddle at the bottom of the screen, bouncing a ball to destroy bricks at the top of the screen. The goal is to clear all the bricks by hitting them with the ball while preventing the ball from falling off the bottom of the screen.
+
+## Features
+- *Paddle Control*: Players control the paddle using the left and right arrow keys.
+- *Ball Physics*: The ball moves around the screen, bouncing off walls, the paddle, and bricks.
+- *Brick Destruction*: Bricks are destroyed when hit by the ball, and the player scores points.
+- *Level Completion*: The game progresses to the next level when all bricks are destroyed.
+- *Game Over*: The game ends if the ball falls off the bottom of the screen.
+- *Score Tracking*: Displays the player's score.
+- *Winning Condition*: The player wins if all bricks are destroyed.
+
+## How to Play
+1. Use the left and right arrow keys to move the paddle.
+2. Bounce the ball off the paddle to hit and destroy the bricks.
+3. Prevent the ball from falling off the bottom of the screen.
+4. Clear all the bricks to win the game.
+
+Enjoy playing Brick Buster!
\ No newline at end of file
diff --git a/Games/Brick Buster/index.html b/Games/Brick Buster/index.html
new file mode 100644
index 0000000000..96493f6211
--- /dev/null
+++ b/Games/Brick Buster/index.html
@@ -0,0 +1,20 @@
+
+
+
+
+
+ Brick Buster
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Games/Brick Buster/script.js b/Games/Brick Buster/script.js
new file mode 100644
index 0000000000..896e04fed7
--- /dev/null
+++ b/Games/Brick Buster/script.js
@@ -0,0 +1,117 @@
+const paddle = document.getElementById('paddle');
+const ball = document.getElementById('ball');
+const bricksContainer = document.getElementById('bricks');
+const scoreElement = document.getElementById('score');
+
+const gameArea = document.getElementById('game-area');
+const gameAreaRect = gameArea.getBoundingClientRect();
+
+const paddleWidth = paddle.clientWidth;
+const paddleHeight = paddle.clientHeight;
+const ballSize = ball.clientWidth;
+
+let score = 0;
+let ballX = gameAreaRect.width / 2;
+let ballY = gameAreaRect.height / 2;
+let ballSpeedX = 3;
+let ballSpeedY = 3;
+let paddleX = (gameAreaRect.width - paddleWidth) / 2;
+
+const rows = 5;
+const cols = 10;
+const brickWidth = 80;
+const brickHeight = 20;
+const brickMargin = 10;
+
+let bricks = [];
+
+function createBricks() {
+ for (let row = 0; row < rows; row++) {
+ for (let col = 0; col < cols; col++) {
+ const brick = document.createElement('div');
+ brick.classList.add('brick');
+ brick.style.left = `${col * (brickWidth + brickMargin)}px`;
+ brick.style.top = `${row * (brickHeight + brickMargin)}px`;
+ bricksContainer.appendChild(brick);
+ bricks.push(brick);
+ }
+ }
+}
+
+function movePaddle(event) {
+ const step = 20;
+ if (event.key === 'ArrowLeft' && paddleX > 0) {
+ paddleX -= step;
+ } else if (event.key === 'ArrowRight' && paddleX < gameAreaRect.width - paddleWidth) {
+ paddleX += step;
+ }
+
+ updatePaddlePosition();
+}
+
+function updatePaddlePosition() {
+ paddle.style.left = `${paddleX}px`;
+}
+
+function resetBall() {
+ ballX = gameAreaRect.width / 2;
+ ballY = gameAreaRect.height / 2;
+ ballSpeedX = 3;
+ ballSpeedY = -3;
+}
+
+function updateBall() {
+ ballX += ballSpeedX;
+ ballY += ballSpeedY;
+
+ if (ballX <= 0 || ballX >= gameAreaRect.width - ballSize) {
+ ballSpeedX = -ballSpeedX;
+ }
+
+ if (ballY <= 0) {
+ ballSpeedY = -ballSpeedY;
+ }
+
+ if (ballY >= gameAreaRect.height - ballSize) {
+ alert('Game Over');
+ resetBall();
+ }
+
+ const paddleRect = paddle.getBoundingClientRect();
+ const ballRect = ball.getBoundingClientRect();
+
+ if (ballRect.bottom >= paddleRect.top && ballRect.right >= paddleRect.left && ballRect.left <= paddleRect.right) {
+ ballSpeedY = -ballSpeedY;
+ }
+
+ bricks.forEach((brick, index) => {
+ const brickRect = brick.getBoundingClientRect();
+ if (ballRect.right >= brickRect.left && ballRect.left <= brickRect.right && ballRect.bottom >= brickRect.top && ballRect.top <= brickRect.bottom) {
+ ballSpeedY = -ballSpeedY;
+ bricksContainer.removeChild(brick);
+ bricks.splice(index, 1);
+ score++;
+ scoreElement.textContent = `Score: ${score}`;
+ }
+ });
+
+ ball.style.left = `${ballX}px`;
+ ball.style.top = `${ballY}px`;
+
+ if (bricks.length === 0) {
+ alert('You Win!');
+ resetBall();
+ createBricks();
+ }
+}
+
+function gameLoop() {
+ updateBall();
+ requestAnimationFrame(gameLoop);
+}
+
+document.addEventListener('keydown', movePaddle);
+
+createBricks();
+resetBall();
+gameLoop();
\ No newline at end of file
diff --git a/Games/Brick Buster/style.css b/Games/Brick Buster/style.css
new file mode 100644
index 0000000000..b8b617bce5
--- /dev/null
+++ b/Games/Brick Buster/style.css
@@ -0,0 +1,68 @@
+* {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+body {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ background: linear-gradient(45deg, #ff0000, #ff8000);
+ font-family: Arial, sans-serif;
+}
+
+.container {
+ position: relative;
+ width: 800px;
+ height: 600px;
+ border: 2px solid #fff;
+ background: #000;
+ overflow: hidden;
+}
+
+.score {
+ position: absolute;
+ top: 10px;
+ left: 10px;
+ font-size: 1.5rem;
+ color: #fff;
+}
+
+.game-area {
+ position: relative;
+ width: 100%;
+ height: 100%;
+}
+
+.paddle {
+ position: absolute;
+ bottom: 30px;
+ width: 100px;
+ height: 20px;
+ background-color: #fff;
+ border-radius: 10px;
+}
+
+.ball {
+ position: absolute;
+ width: 15px;
+ height: 15px;
+ background-color: #fff;
+ border-radius: 50%;
+}
+
+.bricks {
+ position: relative;
+ width: 100%;
+ height: 200px;
+}
+
+.brick {
+ position: absolute;
+ width: 80px;
+ height: 20px;
+ background-color: #ff8000;
+ border-radius: 5px;
+}
\ No newline at end of file
diff --git a/Games/Buliding Block Game/Readme.md b/Games/Buliding Block Game/Readme.md
new file mode 100644
index 0000000000..3898b5506f
--- /dev/null
+++ b/Games/Buliding Block Game/Readme.md
@@ -0,0 +1,12 @@
+# Building Block Game
+
+## About Building Blocks Game
+Building blocks game is a fun game for kids of all ages. In this game, our target is to construct the highest tower by arranging blocks one over the other such that we never disobey Newtonโs law by this line we mean no block can hang in the air. It has to be over some other block or over the ground.
+
+Project Prerequisites
+To implement this project we need to know the following :
+
+1. Basic concepts of JavaScript
+2. HTML
+3. CSS
+
diff --git a/Games/Buliding Block Game/assets b/Games/Buliding Block Game/assets
new file mode 100644
index 0000000000..3a4e8ef3da
--- /dev/null
+++ b/Games/Buliding Block Game/assets
@@ -0,0 +1 @@
+c:\Users\aasth\OneDrive\Pictures\Screenshots\Screenshot (266).png
\ No newline at end of file
diff --git a/Games/Buliding Block Game/index.html b/Games/Buliding Block Game/index.html
new file mode 100644
index 0000000000..f5b26b88ad
--- /dev/null
+++ b/Games/Buliding Block Game/index.html
@@ -0,0 +1,19 @@
+
+
+
+
+
0
+
Click (or press the spacebar) to place the block
+
+
Game Over
+
You did great, you're the best.
+
Click or spacebar to start again
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Games/Buliding Block Game/script.js b/Games/Buliding Block Game/script.js
new file mode 100644
index 0000000000..2317fc900b
--- /dev/null
+++ b/Games/Buliding Block Game/script.js
@@ -0,0 +1,309 @@
+console.clear();
+var Stage = /** @class */ (function () {
+ function Stage() {
+ // container
+ var _this = this;
+ this.render = function () {
+ this.renderer.render(this.scene, this.camera);
+ };
+ this.add = function (elem) {
+ this.scene.add(elem);
+ };
+ this.remove = function (elem) {
+ this.scene.remove(elem);
+ };
+ this.container = document.getElementById('game');
+ // renderer
+ this.renderer = new THREE.WebGLRenderer({
+ antialias: true,
+ alpha: false
+ });
+ this.renderer.setSize(window.innerWidth, window.innerHeight);
+ this.renderer.setClearColor('#D0CBC7', 1);
+ this.container.appendChild(this.renderer.domElement);
+ // scene
+ this.scene = new THREE.Scene();
+ // camera
+ var aspect = window.innerWidth / window.innerHeight;
+ var d = 20;
+ this.camera = new THREE.OrthographicCamera(-d * aspect, d * aspect, d, -d, -100, 1000);
+ this.camera.position.x = 2;
+ this.camera.position.y = 2;
+ this.camera.position.z = 2;
+ this.camera.lookAt(new THREE.Vector3(0, 0, 0));
+ //light
+ this.light = new THREE.DirectionalLight(0xffffff, 0.5);
+ this.light.position.set(0, 499, 0);
+ this.scene.add(this.light);
+ this.softLight = new THREE.AmbientLight(0xffffff, 0.4);
+ this.scene.add(this.softLight);
+ window.addEventListener('resize', function () { return _this.onResize(); });
+ this.onResize();
+ }
+ Stage.prototype.setCamera = function (y, speed) {
+ if (speed === void 0) { speed = 0.3; }
+ TweenLite.to(this.camera.position, speed, { y: y + 4, ease: Power1.easeInOut });
+ TweenLite.to(this.camera.lookAt, speed, { y: y, ease: Power1.easeInOut });
+ };
+ Stage.prototype.onResize = function () {
+ var viewSize = 30;
+ this.renderer.setSize(window.innerWidth, window.innerHeight);
+ this.camera.left = window.innerWidth / -viewSize;
+ this.camera.right = window.innerWidth / viewSize;
+ this.camera.top = window.innerHeight / viewSize;
+ this.camera.bottom = window.innerHeight / -viewSize;
+ this.camera.updateProjectionMatrix();
+ };
+ return Stage;
+}());
+var Block = /** @class */ (function () {
+ function Block(block) {
+ // set size and position
+ this.STATES = { ACTIVE: 'active', STOPPED: 'stopped', MISSED: 'missed' };
+ this.MOVE_AMOUNT = 12;
+ this.dimension = { width: 0, height: 0, depth: 0 };
+ this.position = { x: 0, y: 0, z: 0 };
+ this.targetBlock = block;
+ this.index = (this.targetBlock ? this.targetBlock.index : 0) + 1;
+ this.workingPlane = this.index % 2 ? 'x' : 'z';
+ this.workingDimension = this.index % 2 ? 'width' : 'depth';
+ // set the dimensions from the target block, or defaults.
+ this.dimension.width = this.targetBlock ? this.targetBlock.dimension.width : 10;
+ this.dimension.height = this.targetBlock ? this.targetBlock.dimension.height : 2;
+ this.dimension.depth = this.targetBlock ? this.targetBlock.dimension.depth : 10;
+ this.position.x = this.targetBlock ? this.targetBlock.position.x : 0;
+ this.position.y = this.dimension.height * this.index;
+ this.position.z = this.targetBlock ? this.targetBlock.position.z : 0;
+ this.colorOffset = this.targetBlock ? this.targetBlock.colorOffset : Math.round(Math.random() * 100);
+ // set color
+ if (!this.targetBlock) {
+ this.color = 0x333344;
+ }
+ else {
+ var offset = this.index + this.colorOffset;
+ var r = Math.sin(0.3 * offset) * 55 + 200;
+ var g = Math.sin(0.3 * offset + 2) * 55 + 200;
+ var b = Math.sin(0.3 * offset + 4) * 55 + 200;
+ this.color = new THREE.Color(r / 255, g / 255, b / 255);
+ }
+ // state
+ this.state = this.index > 1 ? this.STATES.ACTIVE : this.STATES.STOPPED;
+ // set direction
+ this.speed = -0.1 - (this.index * 0.005);
+ if (this.speed < -4)
+ this.speed = -4;
+ this.direction = this.speed;
+ // create block
+ var geometry = new THREE.BoxGeometry(this.dimension.width, this.dimension.height, this.dimension.depth);
+ geometry.applyMatrix(new THREE.Matrix4().makeTranslation(this.dimension.width / 2, this.dimension.height / 2, this.dimension.depth / 2));
+ this.material = new THREE.MeshToonMaterial({ color: this.color, shading: THREE.FlatShading });
+ this.mesh = new THREE.Mesh(geometry, this.material);
+ this.mesh.position.set(this.position.x, this.position.y + (this.state == this.STATES.ACTIVE ? 0 : 0), this.position.z);
+ if (this.state == this.STATES.ACTIVE) {
+ this.position[this.workingPlane] = Math.random() > 0.5 ? -this.MOVE_AMOUNT : this.MOVE_AMOUNT;
+ }
+ }
+ Block.prototype.reverseDirection = function () {
+ this.direction = this.direction > 0 ? this.speed : Math.abs(this.speed);
+ };
+ Block.prototype.place = function () {
+ this.state = this.STATES.STOPPED;
+ var overlap = this.targetBlock.dimension[this.workingDimension] - Math.abs(this.position[this.workingPlane] - this.targetBlock.position[this.workingPlane]);
+ var blocksToReturn = {
+ plane: this.workingPlane,
+ direction: this.direction
+ };
+ if (this.dimension[this.workingDimension] - overlap < 0.3) {
+ overlap = this.dimension[this.workingDimension];
+ blocksToReturn.bonus = true;
+ this.position.x = this.targetBlock.position.x;
+ this.position.z = this.targetBlock.position.z;
+ this.dimension.width = this.targetBlock.dimension.width;
+ this.dimension.depth = this.targetBlock.dimension.depth;
+ }
+ if (overlap > 0) {
+ var choppedDimensions = { width: this.dimension.width, height: this.dimension.height, depth: this.dimension.depth };
+ choppedDimensions[this.workingDimension] -= overlap;
+ this.dimension[this.workingDimension] = overlap;
+ var placedGeometry = new THREE.BoxGeometry(this.dimension.width, this.dimension.height, this.dimension.depth);
+ placedGeometry.applyMatrix(new THREE.Matrix4().makeTranslation(this.dimension.width / 2, this.dimension.height / 2, this.dimension.depth / 2));
+ var placedMesh = new THREE.Mesh(placedGeometry, this.material);
+ var choppedGeometry = new THREE.BoxGeometry(choppedDimensions.width, choppedDimensions.height, choppedDimensions.depth);
+ choppedGeometry.applyMatrix(new THREE.Matrix4().makeTranslation(choppedDimensions.width / 2, choppedDimensions.height / 2, choppedDimensions.depth / 2));
+ var choppedMesh = new THREE.Mesh(choppedGeometry, this.material);
+ var choppedPosition = {
+ x: this.position.x,
+ y: this.position.y,
+ z: this.position.z
+ };
+ if (this.position[this.workingPlane] < this.targetBlock.position[this.workingPlane]) {
+ this.position[this.workingPlane] = this.targetBlock.position[this.workingPlane];
+ }
+ else {
+ choppedPosition[this.workingPlane] += overlap;
+ }
+ placedMesh.position.set(this.position.x, this.position.y, this.position.z);
+ choppedMesh.position.set(choppedPosition.x, choppedPosition.y, choppedPosition.z);
+ blocksToReturn.placed = placedMesh;
+ if (!blocksToReturn.bonus)
+ blocksToReturn.chopped = choppedMesh;
+ }
+ else {
+ this.state = this.STATES.MISSED;
+ }
+ this.dimension[this.workingDimension] = overlap;
+ return blocksToReturn;
+ };
+ Block.prototype.tick = function () {
+ if (this.state == this.STATES.ACTIVE) {
+ var value = this.position[this.workingPlane];
+ if (value > this.MOVE_AMOUNT || value < -this.MOVE_AMOUNT)
+ this.reverseDirection();
+ this.position[this.workingPlane] += this.direction;
+ this.mesh.position[this.workingPlane] = this.position[this.workingPlane];
+ }
+ };
+ return Block;
+}());
+var Game = /** @class */ (function () {
+ function Game() {
+ var _this = this;
+ this.STATES = {
+ 'LOADING': 'loading',
+ 'PLAYING': 'playing',
+ 'READY': 'ready',
+ 'ENDED': 'ended',
+ 'RESETTING': 'resetting'
+ };
+ this.blocks = [];
+ this.state = this.STATES.LOADING;
+ this.stage = new Stage();
+ this.mainContainer = document.getElementById('container');
+ this.scoreContainer = document.getElementById('score');
+ this.startButton = document.getElementById('start-button');
+ this.instructions = document.getElementById('instructions');
+ this.scoreContainer.innerHTML = '0';
+ this.newBlocks = new THREE.Group();
+ this.placedBlocks = new THREE.Group();
+ this.choppedBlocks = new THREE.Group();
+ this.stage.add(this.newBlocks);
+ this.stage.add(this.placedBlocks);
+ this.stage.add(this.choppedBlocks);
+ this.addBlock();
+ this.tick();
+ this.updateState(this.STATES.READY);
+ document.addEventListener('keydown', function (e) {
+ if (e.keyCode == 32)
+ _this.onAction();
+ });
+ document.addEventListener('click', function (e) {
+ _this.onAction();
+ });
+ document.addEventListener('touchstart', function (e) {
+ e.preventDefault();
+ _this.onAction();
+ // ?? this triggers after click on android so you
+ // insta-lose, will figure it out later.
+ });
+ }
+ Game.prototype.updateState = function (newState) {
+ for (var key in this.STATES)
+ this.mainContainer.classList.remove(this.STATES[key]);
+ this.mainContainer.classList.add(newState);
+ this.state = newState;
+ };
+ Game.prototype.onAction = function () {
+ switch (this.state) {
+ case this.STATES.READY:
+ this.startGame();
+ break;
+ case this.STATES.PLAYING:
+ this.placeBlock();
+ break;
+ case this.STATES.ENDED:
+ this.restartGame();
+ break;
+ }
+ };
+ Game.prototype.startGame = function () {
+ if (this.state != this.STATES.PLAYING) {
+ this.scoreContainer.innerHTML = '0';
+ this.updateState(this.STATES.PLAYING);
+ this.addBlock();
+ }
+ };
+ Game.prototype.restartGame = function () {
+ var _this = this;
+ this.updateState(this.STATES.RESETTING);
+ var oldBlocks = this.placedBlocks.children;
+ var removeSpeed = 0.2;
+ var delayAmount = 0.02;
+ var _loop_1 = function (i) {
+ TweenLite.to(oldBlocks[i].scale, removeSpeed, { x: 0, y: 0, z: 0, delay: (oldBlocks.length - i) * delayAmount, ease: Power1.easeIn, onComplete: function () { return _this.placedBlocks.remove(oldBlocks[i]); } });
+ TweenLite.to(oldBlocks[i].rotation, removeSpeed, { y: 0.5, delay: (oldBlocks.length - i) * delayAmount, ease: Power1.easeIn });
+ };
+ for (var i = 0; i < oldBlocks.length; i++) {
+ _loop_1(i);
+ }
+ var cameraMoveSpeed = removeSpeed * 2 + (oldBlocks.length * delayAmount);
+ this.stage.setCamera(2, cameraMoveSpeed);
+ var countdown = { value: this.blocks.length - 1 };
+ TweenLite.to(countdown, cameraMoveSpeed, { value: 0, onUpdate: function () { _this.scoreContainer.innerHTML = String(Math.round(countdown.value)); } });
+ this.blocks = this.blocks.slice(0, 1);
+ setTimeout(function () {
+ _this.startGame();
+ }, cameraMoveSpeed * 1000);
+ };
+ Game.prototype.placeBlock = function () {
+ var _this = this;
+ var currentBlock = this.blocks[this.blocks.length - 1];
+ var newBlocks = currentBlock.place();
+ this.newBlocks.remove(currentBlock.mesh);
+ if (newBlocks.placed)
+ this.placedBlocks.add(newBlocks.placed);
+ if (newBlocks.chopped) {
+ this.choppedBlocks.add(newBlocks.chopped);
+ var positionParams = { y: '-=30', ease: Power1.easeIn, onComplete: function () { return _this.choppedBlocks.remove(newBlocks.chopped); } };
+ var rotateRandomness = 10;
+ var rotationParams = {
+ delay: 0.05,
+ x: newBlocks.plane == 'z' ? ((Math.random() * rotateRandomness) - (rotateRandomness / 2)) : 0.1,
+ z: newBlocks.plane == 'x' ? ((Math.random() * rotateRandomness) - (rotateRandomness / 2)) : 0.1,
+ y: Math.random() * 0.1
+ };
+ if (newBlocks.chopped.position[newBlocks.plane] > newBlocks.placed.position[newBlocks.plane]) {
+ positionParams[newBlocks.plane] = '+=' + (40 * Math.abs(newBlocks.direction));
+ }
+ else {
+ positionParams[newBlocks.plane] = '-=' + (40 * Math.abs(newBlocks.direction));
+ }
+ TweenLite.to(newBlocks.chopped.position, 1, positionParams);
+ TweenLite.to(newBlocks.chopped.rotation, 1, rotationParams);
+ }
+ this.addBlock();
+ };
+ Game.prototype.addBlock = function () {
+ var lastBlock = this.blocks[this.blocks.length - 1];
+ if (lastBlock && lastBlock.state == lastBlock.STATES.MISSED) {
+ return this.endGame();
+ }
+ this.scoreContainer.innerHTML = String(this.blocks.length - 1);
+ var newKidOnTheBlock = new Block(lastBlock);
+ this.newBlocks.add(newKidOnTheBlock.mesh);
+ this.blocks.push(newKidOnTheBlock);
+ this.stage.setCamera(this.blocks.length * 2);
+ if (this.blocks.length >= 5)
+ this.instructions.classList.add('hide');
+ };
+ Game.prototype.endGame = function () {
+ this.updateState(this.STATES.ENDED);
+ };
+ Game.prototype.tick = function () {
+ var _this = this;
+ this.blocks[this.blocks.length - 1].tick();
+ this.stage.render();
+ requestAnimationFrame(function () { _this.tick(); });
+ };
+ return Game;
+}());
+var game = new Game();
\ No newline at end of file
diff --git a/Games/Buliding Block Game/style.css b/Games/Buliding Block Game/style.css
new file mode 100644
index 0000000000..27a7c6c25a
--- /dev/null
+++ b/Games/Buliding Block Game/style.css
@@ -0,0 +1,143 @@
+@import url("https://fonts.googleapis.com/css?family=Comfortaa");
+html, body {
+ margin: 0;
+ overflow: hidden;
+ height: 100%;
+ width: 100%;
+ position: relative;
+ font-family: 'Comfortaa', cursive;
+}
+
+#container {
+ width: 100%;
+ height: 100%;
+}
+#container #score {
+ position: absolute;
+ top: 20px;
+ width: 100%;
+ text-align: center;
+ font-size: 10vh;
+ -webkit-transition: -webkit-transform 0.5s ease;
+ transition: -webkit-transform 0.5s ease;
+ transition: transform 0.5s ease;
+ transition: transform 0.5s ease, -webkit-transform 0.5s ease;
+ color: #333344;
+ -webkit-transform: translatey(-200px) scale(1);
+ transform: translatey(-200px) scale(1);
+}
+#container #game {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+}
+#container .game-over {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 85%;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+}
+#container .game-over * {
+ -webkit-transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
+ transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
+ transition: opacity 0.5s ease, transform 0.5s ease;
+ transition: opacity 0.5s ease, transform 0.5s ease, -webkit-transform 0.5s ease;
+ opacity: 0;
+ -webkit-transform: translatey(-50px);
+ transform: translatey(-50px);
+ color: #333344;
+}
+#container .game-over h2 {
+ margin: 0;
+ padding: 0;
+ font-size: 40px;
+}
+#container .game-ready {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -ms-flex-pack: distribute;
+ justify-content: space-around;
+}
+#container .game-ready #start-button {
+ -webkit-transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
+ transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
+ transition: opacity 0.5s ease, transform 0.5s ease;
+ transition: opacity 0.5s ease, transform 0.5s ease, -webkit-transform 0.5s ease;
+ opacity: 0;
+ -webkit-transform: translatey(-50px);
+ transform: translatey(-50px);
+ border: 3px solid #333344;
+ padding: 10px 20px;
+ background-color: transparent;
+ color: #333344;
+ font-size: 30px;
+}
+#container #instructions {
+ position: absolute;
+ width: 100%;
+ top: 16vh;
+ left: 0;
+ text-align: center;
+ -webkit-transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
+ transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
+ transition: opacity 0.5s ease, transform 0.5s ease;
+ transition: opacity 0.5s ease, transform 0.5s ease, -webkit-transform 0.5s ease;
+ opacity: 0;
+}
+#container #instructions.hide {
+ opacity: 0 !important;
+}
+#container.playing #score, #container.resetting #score {
+ -webkit-transform: translatey(0px) scale(1);
+ transform: translatey(0px) scale(1);
+}
+#container.playing #instructions {
+ opacity: 1;
+}
+#container.ready .game-ready #start-button {
+ opacity: 1;
+ -webkit-transform: translatey(0);
+ transform: translatey(0);
+}
+#container.ended #score {
+ -webkit-transform: translatey(6vh) scale(1.5);
+ transform: translatey(6vh) scale(1.5);
+}
+#container.ended .game-over * {
+ opacity: 1;
+ -webkit-transform: translatey(0);
+ transform: translatey(0);
+}
+#container.ended .game-over p {
+ -webkit-transition-delay: 0.3s;
+ transition-delay: 0.3s;
+}
\ No newline at end of file
diff --git a/Games/Cartoon_Character_Guessing_Game/README.md b/Games/Cartoon_Character_Guessing_Game/README.md
new file mode 100644
index 0000000000..3076efff01
--- /dev/null
+++ b/Games/Cartoon_Character_Guessing_Game/README.md
@@ -0,0 +1,29 @@
+# **Cartoon character guessing game**
+
+---
+
+
+
+## **Description ๐**
+Cartoon character guessing game is a simple game where players have to find the character who is display in image.
+
+
+
+## **How to play? ๐น๏ธ**
+Players can start playing by click on the start button in the home page. For each image there will be four choices. Players have to select one from them. The response will be shown as soon as reacted to the question. Players will have 10s for answer each question.
+
+
+
+## **Screenshots ๐ธ**
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/Games/Cartoon_Character_Guessing_Game/game.html b/Games/Cartoon_Character_Guessing_Game/game.html
new file mode 100644
index 0000000000..77a8952b6d
--- /dev/null
+++ b/Games/Cartoon_Character_Guessing_Game/game.html
@@ -0,0 +1,17 @@
+`
+
+
+
+
+
+
+
+ Cartoon Character Guessing Game
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Games/Cartoon_Character_Guessing_Game/images/image_01.png b/Games/Cartoon_Character_Guessing_Game/images/image_01.png
new file mode 100644
index 0000000000..43d79a6d1c
Binary files /dev/null and b/Games/Cartoon_Character_Guessing_Game/images/image_01.png differ
diff --git a/Games/Cartoon_Character_Guessing_Game/images/image_02.png b/Games/Cartoon_Character_Guessing_Game/images/image_02.png
new file mode 100644
index 0000000000..04854f84df
Binary files /dev/null and b/Games/Cartoon_Character_Guessing_Game/images/image_02.png differ
diff --git a/Games/Cartoon_Character_Guessing_Game/images/image_03.png b/Games/Cartoon_Character_Guessing_Game/images/image_03.png
new file mode 100644
index 0000000000..8a35c3fc89
Binary files /dev/null and b/Games/Cartoon_Character_Guessing_Game/images/image_03.png differ
diff --git a/Games/Cartoon_Character_Guessing_Game/index.html b/Games/Cartoon_Character_Guessing_Game/index.html
new file mode 100644
index 0000000000..26631dc61a
--- /dev/null
+++ b/Games/Cartoon_Character_Guessing_Game/index.html
@@ -0,0 +1,19 @@
+
+
+
+
+
+
+
+
+ Cartoon Character Guessing Game
+
+
+
+
Cartoon Character Guessing Game
+
Start Game
+
+
+
\ No newline at end of file
diff --git a/Games/Cartoon_Character_Guessing_Game/script.js b/Games/Cartoon_Character_Guessing_Game/script.js
new file mode 100644
index 0000000000..5327ce41b9
--- /dev/null
+++ b/Games/Cartoon_Character_Guessing_Game/script.js
@@ -0,0 +1,205 @@
+const data = [
+ {
+ "id": 1,
+ "image_url": "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/Mickey_Mouse_%28poster_version%29.svg/800px-Mickey_Mouse_%28poster_version%29.svg.png",
+ "character_name": "Mickey Mouse"
+ },
+ {
+ "id": 2,
+ "image_url": "https://th.bing.com/th/id/OIP.ggStsRwWxTyMR5U9BIWpFAHaHw?w=176&h=184&c=7&r=0&o=5&dpr=1.3&pid=1.7",
+ "character_name": "SpongeBob SquarePants"
+ },
+ {
+ "id": 3,
+ "image_url": "https://upload.wikimedia.org/wikipedia/en/0/02/Homer_Simpson_2006.png",
+ "character_name": "Homer Simpson"
+ },
+ {
+ "id": 4,
+ "image_url": "https://upload.wikimedia.org/wikipedia/en/5/53/Scooby-Doo.png",
+ "character_name": "Scooby-Doo"
+ },
+ {
+ "id": 5,
+ "image_url": "https://upload.wikimedia.org/wikipedia/en/f/f6/Tom_Tom_and_Jerry.png",
+ "character_name": "Tom Cat"
+ },
+ {
+ "id": 6,
+ "image_url": "https://upload.wikimedia.org/wikipedia/en/2/2f/Jerry_Mouse.png",
+ "character_name": "Jerry Mouse"
+ },
+ {
+ "id": 7,
+ "image_url": "https://www.desicomments.com/wp-content/uploads/2017/02/Image-Of-Donald-Duck.jpg",
+ "character_name": "Donald Duck"
+ },
+ {
+ "id": 8,
+ "image_url": "https://upload.wikimedia.org/wikipedia/en/a/aa/Bart_Simpson_200px.png",
+ "character_name": "Bart Simpson"
+ },
+ {
+ "id": 9,
+ "image_url": "https://upload.wikimedia.org/wikipedia/en/1/17/Bugs_Bunny.svg",
+ "character_name": "Bugs Bunny"
+ },
+ {
+ "id": 10,
+ "image_url": "https://pngimg.com/uploads/pokemon/pokemon_PNG148.png",
+ "character_name": "Pikachu"
+ },
+ {
+ "id": 11,
+ "image_url": "https://vignette.wikia.nocookie.net/vsbattles/images/4/4f/PopEye.png/revision/latest?cb=20160307172307",
+ "character_name": "Popeye"
+ },
+ {
+ "id": 12,
+ "image_url": "https://www.nicepng.com/png/detail/53-534923_cartoon-character-png-fred-flintstone.png",
+ "character_name": "Fred Flintstone"
+ },
+ {
+ "id": 13,
+ "image_url": "https://www.cartoonpics.net/data/media/11/snoopy_friends.png",
+ "character_name": "Snoopy"
+ },
+ {
+ "id": 14,
+ "image_url": "https://images2.wikia.nocookie.net/__cb20130525054541/woodywoodpecker/images/2/26/Woody-woodpecker-tv-04-g.jpg",
+ "character_name": "Woody Woodpecker"
+ },
+ {
+ "id": 15,
+ "image_url": "https://vignette.wikia.nocookie.net/dominios-encantados/images/e/ea/WIKI_BUZ_LIGHTYEAR.jpg/revision/latest?cb=20141222161728&path-prefix=es",
+ "character_name": "Buzz Lightyear"
+ },
+ {
+ "id": 16,
+ "image_url": "https://images6.fanpop.com/image/photos/38800000/Elsa-frozen-38894629-960-960.jpg",
+ "character_name": "Elsa"
+ },
+ {
+ "id": 17,
+ "image_url": "https://upload.wikimedia.org/wikipedia/en/1/17/Batman-BenAffleck.jpg",
+ "character_name": "Batman"
+ }
+]
+const questionWrapper = document.querySelector(".question-wrapper");
+let timeInterval;
+
+function getRandomQuestion() {
+ const randomIndex = Math.floor(Math.random() * data.length);
+ return data[randomIndex];
+}
+function getRandomOption() {
+ const randomIndex = Math.floor(Math.random() * data.length);
+ return data[randomIndex].character_name;
+}
+
+function getRandomOptions(correctCharacter) {
+ let options = [correctCharacter];
+ while (options.length < 4) {
+ let option = getRandomOption();
+ if (!options.includes(option)) {
+ options.push(option);
+ }
+ }
+ return options.sort(() => Math.random() - 0.5); // shuffle the options list
+}
+
+function createResetBtnElement() {
+ let resetBtnElement = document.createElement('button');
+ resetBtnElement.setAttribute('class', 'bg-blue-700 font-bold px-6 py-2 rounded hover:bg-blue-600 text-white focus:ring-2 focus:ring-blue-300 border-2 border-white mr-4')
+ resetBtnElement.addEventListener('click', renderQuestion)
+ resetBtnElement.textContent = 'Reset'
+ resetBtnElement.style.pointerEvents = 'auto';
+ return resetBtnElement;
+}
+
+function createQuitBtnElement() {
+ let quitBtnElement = document.createElement('button');
+ quitBtnElement.setAttribute('class', 'bg-blue-700 font-bold px-6 py-2 rounded hover:bg-blue-600 text-white focus:ring-2 focus:ring-blue-300 border-2 border-blue-700')
+ quitBtnElement.addEventListener('click', () => {
+ window.location.href = 'index.html'
+ })
+ quitBtnElement.textContent = 'Quit'
+ quitBtnElement.style.pointerEvents = 'auto';
+ return quitBtnElement;
+}
+
+function createImageElement(url) {
+ let imgElement = document.createElement('img');
+ imgElement.setAttribute('class', "mx-auto my-8 h-40 w-40")
+ imgElement.setAttribute('src', url);
+
+ return imgElement;
+}
+
+function createTimerElement() {
+ let timerElement = document.createElement('span');
+ timerElement.setAttribute('class', "text-blue-600 bg-white rounded px-2 py-1 font-bold")
+ let timeLeft = 10;
+ timerElement.textContent = `Time Left: ${timeLeft}s`
+ timeInterval = setInterval(() => {
+ timeLeft-=1
+ timerElement.textContent = `Time Left: ${timeLeft}s`
+ if (timeLeft==0) {
+ clearInterval(timeInterval)
+ renderQuestion()
+ return
+ }
+ }, 1000)
+
+ return timerElement;
+}
+
+function createHeaderElement() {
+ let headerElement = document.createElement('h1');
+ headerElement.setAttribute('class', "text-gray-200 flex items-center p-2")
+ headerElement.innerHTML = `Guess who is this! `
+ headerElement.appendChild(createTimerElement())
+
+ return headerElement;
+}
+
+function createOptionsElement(index, option, correctOption) {
+ let optionElement = document.createElement('div');
+ optionElement.setAttribute('class', 'option w-full bg-white shadow-md rounded p-2 flex my-4 flex items-center cursor-pointer hover:bg-blue-100')
+ optionElement.innerHTML = `
+ ${index + 1}
+ ${option}
+ ✓
+ ×
+ `
+
+ optionElement.addEventListener('click', (e) => {
+ if (option === correctOption) {
+ optionElement.classList.add('correct')
+ } else {
+ optionElement.classList.add('wrong')
+ }
+ questionWrapper.style.pointerEvents = 'none';
+ clearInterval(timeInterval)
+ })
+ return optionElement;
+}
+
+function renderQuestion() {
+ questionWrapper.innerHTML = ``;
+ questionWrapper.classList.remove('hide');
+ questionWrapper.style.pointerEvents = 'auto';
+
+ const randomQuestion = getRandomQuestion();
+ const options = getRandomOptions(randomQuestion.character_name);
+
+ questionWrapper.appendChild(createHeaderElement())
+ questionWrapper.appendChild(createImageElement(randomQuestion.image_url))
+ options.map((option, index) => {
+ questionWrapper.appendChild(createOptionsElement(index, option, randomQuestion.character_name))
+ })
+ questionWrapper.appendChild(createResetBtnElement());
+ questionWrapper.appendChild(createQuitBtnElement());
+}
+
+document.addEventListener('DOMContentLoaded', renderQuestion);
diff --git a/Games/Cartoon_Character_Guessing_Game/style.css b/Games/Cartoon_Character_Guessing_Game/style.css
new file mode 100644
index 0000000000..2ee6db02c7
--- /dev/null
+++ b/Games/Cartoon_Character_Guessing_Game/style.css
@@ -0,0 +1,46 @@
+.question-wrapper, .start {
+ max-width: 500px;
+ pointer-events: auto;
+}
+.display {
+ display: block;
+ pointer-events: auto;
+}
+.hide {
+ display: none;
+ pointer-events: none;
+}
+.f {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+.check, .times {
+ display: none;
+}
+.option.correct {
+ background-color: #c1ffc1;
+ color: green;
+}
+.option.correct .no {
+ background-color: green;
+}
+.option.correct .no {
+ background-color: green;
+}
+.option.correct .check {
+ display: inline-block;
+}
+.option.wrong {
+ background-color: #ffc1c1;
+ color: rgb(181, 0, 0);
+}
+.option.wrong .no {
+ background-color: red;
+}
+.option.wrong .no {
+ background-color: red;
+}
+.option.wrong .times {
+ display: inline-block;
+}
\ No newline at end of file
diff --git a/Games/Chess_Game_computer/README.md b/Games/Chess_Game_computer/README.md
new file mode 100644
index 0000000000..4c20db70e1
--- /dev/null
+++ b/Games/Chess_Game_computer/README.md
@@ -0,0 +1,22 @@
+# ๐ฎ AI Chess Game Request
+
+## **Description ๐**
+We propose the development of an AI-powered chess game that offers an engaging and challenging experience to players of all levels. The game will leverage advanced algorithms to provide intelligent gameplay while also offering a user-friendly interface for an immersive gaming experience.
+
+## **functionalities ๐ฎ**
+- **Intelligent AI Opponent**: The game will feature an AI opponent with varying levels of difficulty, from beginner to grandmaster, to provide a challenging experience for players of all skill levels.
+
+## **How to play? ๐น๏ธ**
+- Players can make moves by dragging and dropping chess pieces to desired locations on the board.
+- The game will follow standard chess rules, including move validation and checkmate detection.
+- Players can select the difficulty level of the AI opponent to match their skill level.
+
+
+
+## **Screenshots ๐ธ**
+
+
+![image](../../assets/images/chessComputer.png)
+
+
+
diff --git a/Games/Chess_Game_computer/index.html b/Games/Chess_Game_computer/index.html
new file mode 100644
index 0000000000..92258599ad
--- /dev/null
+++ b/Games/Chess_Game_computer/index.html
@@ -0,0 +1,14 @@
+
+
+
+ Chess Engine
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Games/Chess_Game_computer/script.js b/Games/Chess_Game_computer/script.js
new file mode 100644
index 0000000000..296d7bf0aa
--- /dev/null
+++ b/Games/Chess_Game_computer/script.js
@@ -0,0 +1,1224 @@
+window.onload = function(){
+ var w = window.innerWidth || 360;
+ var h = window.innerHeight || 500;
+
+ var tsw = (w > h) ? h : w;
+
+ var sw = (tsw - 16)/8;
+
+ var container = document.getElementById("container");
+ for(var n = 0; n < 64; n++){
+ var square = document.createElement("div");
+ square.classList.add("square");
+ square.classList.add("s"+n);
+ square.style.height = sw + 'px';
+ square.style.width = sw + 'px';
+ square.style.top = 7+(h-tsw)/4+sw*(Math.floor(n/8)) + 'px';
+ square.style.left = 7+(w-tsw)/2+sw*(Math.floor(n%8)) + 'px';
+ square.style.fontSize = sw*3/4 + 'px';
+ container.appendChild(square);
+ }
+
+ var fonts = {
+ 'k' : '♚',
+ 'q' : '♛',
+ 'r' : '♜',
+ 'b' : '♝',
+ 'n' : '♞',
+ 'p' : '♟',
+ 'l' : '♔',
+ 'w' : '♕',
+ 't' : '♖',
+ 'v' : '♗',
+ 'm' : '♘',
+ 'o' : '♙',
+
+ }
+
+ var values = ['r','n','b','q','k','b','n','r','p','p','p','p','p','p','p','p',0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,'o','o','o','o','o','o','o','o','t','m','v','w','l','v','m','t'];
+ var ck = false;
+ var cr1 = false;
+ var cr2 = false;
+ var cl;
+
+ var sqs = document.getElementsByClassName("square");
+
+ for(var n = 0; n < 64; n++){
+ if(values[n] !== 0){
+ sqs[n].innerHTML = fonts[values[n]];
+ }
+ sqs[n].addEventListener("click",check);
+ }
+
+ function updateSquarecolor(){
+ for(var n = 0; n < 64; n++){
+ if(Math.floor(n/8)%2 === 0){
+ if(n%2 === 0){
+ sqs[n].style.background = '#9ff';
+ }
+ else {
+ sqs[n].style.background = '#5fa';
+ }
+ }
+ else {
+ if(n%2 === 1){
+ sqs[n].style.background = '#9ff';
+ }
+ else {
+ sqs[n].style.background = '#5fa';
+ }
+ }
+ }
+ }
+
+ updateSquarecolor();
+
+ var moveable = false;
+ var moveTarget = "";
+ var moveScopes = [];
+
+
+ function checkBlack(n,values){
+ var target = values[n];
+ var scopes = [];
+ var x = n;
+
+ if(target === "o"){
+ x -= 8;
+ if("prnbkq".indexOf(values[x-1]) >= 0 && x%8 != 0){
+ scopes.push(x-1);
+ }
+ if("prnbkq".indexOf(values[x+1]) >= 0 && x%8 != 7){
+ scopes.push(x+1);
+ }
+ if(x >= 0 && values[x] === 0){
+ scopes.push(x);
+ if(x >= 40){
+ if(x-8 >= 0 && values[x-8] === 0){
+ scopes.push(x-8);
+ }
+ }
+ }
+ }
+
+ else if(target === "t"){
+ x = n;
+ x -= 8;
+ while(x >= 0){
+ if(values[x] === 0){
+ scopes.push(x);
+ }
+ else if("prnbqk".indexOf(values[x]) >= 0){
+ scopes.push(x);
+ break;
+ }
+ else {
+ break;
+ }
+ x -= 8;
+ }
+ x = n;
+ x += 8;
+ while(x < 64){
+ if(values[x] === 0){
+ scopes.push(x);
+ }
+ else if("prnbqk".indexOf(values[x]) >= 0){
+ scopes.push(x);
+ break;
+ }
+ else {
+ break;
+ }
+ x += 8;
+ }
+ x = n;
+ x++;
+ while(x%8 != 0){
+ if(values[x] === 0){
+ scopes.push(x);
+ }
+ else if("prnbqk".indexOf(values[x]) >= 0){
+ scopes.push(x);
+ break;
+ }
+ else {
+ break;
+ }
+ x++;
+ }
+ x = n;
+ x--;
+ while(x%8 != 7){
+ if(values[x] === 0){
+ scopes.push(x);
+ }
+ else if("prnbqk".indexOf(values[x]) >= 0){
+ scopes.push(x);
+ break;
+ }
+ else {
+ break;
+ }
+ x--;
+ }
+ }
+
+ else if(target === "m"){
+ x = n;
+ if(x%8 > 1 && x%8 < 6){
+ x -= 17;
+ if(("prnbqk".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
+ scopes.push(x);
+ }
+ x = n;
+ x -= 15;
+ if(("prnbqk".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
+ scopes.push(x);
+ }
+
+ x = n;
+ x -= 10;
+ if(("prnbqk".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
+ scopes.push(x);
+ }
+ x = n;
+ x -= 6;
+ if(("prnbqk".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
+ scopes.push(x);
+ }
+ x = n;
+ x += 6;
+ if(("prnbqk".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
+ scopes.push(x);
+ }
+ x = n;
+ x += 10;
+ if(("prnbqk".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
+ scopes.push(x);
+ }
+ x = n;
+ x += 15;
+ if(("prnbqk".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
+ scopes.push(x);
+ }
+ x = n;
+ x += 17;
+ if(("prnbqk".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
+ scopes.push(x);
+ }
+ }
+ else {
+ x = n;
+ if(x%8 <= 1){
+ x = n;
+ x -= 15;
+ if(("prnbqk".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
+ scopes.push(x);
+ }
+ x = n;
+ x -= 6;
+ if(("prnbqk".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
+ scopes.push(x);
+ }
+ x = n;
+ x += 10;
+ if(("prnbqk".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
+ scopes.push(x);
+ }
+ x = n;
+ x += 17;
+ if(("prnbqk".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
+ scopes.push(x);
+ }
+ }
+ x = n;
+ if(x%8 === 1){
+ x -= 17;
+ if(("prnbqk".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
+ scopes.push(x);
+ }
+ x = n;
+ x += 15;
+ if(("prnbqk".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
+ scopes.push(x);
+ }
+ }
+ if(x%8 >= 6){
+ x = n;
+ x -= 17;
+ if(("prnbqk".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
+ scopes.push(x);
+ }
+ x = n;
+ x -= 10;
+ if(("prnbqk".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
+ scopes.push(x);
+ }
+ x = n;
+ x += 6;
+ if(("prnbqk".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
+ scopes.push(x);
+ }
+ x = n;
+ x += 15;
+ if(("prnbqk".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
+ scopes.push(x);
+ }
+ }
+ x = n;
+ if(x%8 === 6){
+ x = n;
+ x -= 15;
+ if(("prnbqk".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
+ scopes.push(x);
+ }
+ x = n;
+ x += 17;
+ if(("prnbqk".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
+ scopes.push(x);
+ }
+ }
+ }
+ }
+
+ else if(target === "v"){
+ x = n;
+ x -= 9;
+ while(x >= 0 && x%8 !== 7){
+ if(values[x] === 0){
+ scopes.push(x);
+ }
+ else if("prnbqk".indexOf(values[x]) >= 0){
+ scopes.push(x);
+ break;
+ }
+ else {
+ break;
+ }
+ x -= 9;
+ }
+ x = n;
+ x += 7;
+ while(x < 64 && x%8 !== 7){
+ if(values[x] === 0){
+ scopes.push(x);
+ }
+ else if("prnbqk".indexOf(values[x]) >= 0){
+ scopes.push(x);
+ break;
+ }
+ else {
+ break;
+ }
+ x += 7;
+ }
+ x = n;
+ x += 9;
+ while(x%8 != 0 && x%8 !== 0){
+ if(values[x] === 0){
+ scopes.push(x);
+ }
+ else if("prnbqk".indexOf(values[x]) >= 0){
+ scopes.push(x);
+ break;
+ }
+ else {
+ break;
+ }
+ x += 9;
+ }
+ x = n;
+ x -= 7;
+ while(x%8 != 0){
+ if(values[x] === 0){
+ scopes.push(x);
+ }
+ else if("prnbqk".indexOf(values[x]) >= 0){
+ scopes.push(x);
+ break;
+ }
+ else {
+ break;
+ }
+ x -= 7;
+ }
+ }
+
+ else if(target === "w"){
+ x = n;
+ x -= 8;
+ while(x >= 0){
+ if(values[x] === 0){
+ scopes.push(x);
+ }
+ else if("prnbqk".indexOf(values[x]) >= 0){
+ scopes.push(x);
+ break;
+ }
+ else {
+ break;
+ }
+ x -= 8;
+ }
+ x = n;
+ x += 8;
+ while(x < 64){
+ if(values[x] === 0){
+ scopes.push(x);
+ }
+ else if("prnbqk".indexOf(values[x]) >= 0){
+ scopes.push(x);
+ break;
+ }
+ else {
+ break;
+ }
+ x += 8;
+ }
+ x = n;
+ x++;
+ while(x%8 != 0){
+ if(values[x] === 0){
+ scopes.push(x);
+ }
+ else if("prnbqk".indexOf(values[x]) >= 0){
+ scopes.push(x);
+ break;
+ }
+ else {
+ break;
+ }
+ x++;
+ }
+ x = n;
+ x--;
+ while(x%8 != 7){
+ if(values[x] === 0){
+ scopes.push(x);
+ }
+ else if("prnbqk".indexOf(values[x]) >= 0){
+ scopes.push(x);
+ break;
+ }
+ else {
+ break;
+ }
+ x--;
+ }
+ x = n;
+ x -= 9;
+ while(x >= 0 && x%8 !== 7){
+ if(values[x] === 0){
+ scopes.push(x);
+ }
+ else if("prnbqk".indexOf(values[x]) >= 0){
+ scopes.push(x);
+ break;
+ }
+ else {
+ break;
+ }
+ x -= 9;
+ }
+ x = n;
+ x += 7;
+ while(x < 64 && x%8 !== 7){
+ if(values[x] === 0){
+ scopes.push(x);
+ }
+ else if("prnbqk".indexOf(values[x]) >= 0){
+ scopes.push(x);
+ break;
+ }
+ else {
+ break;
+ }
+ x += 7;
+ }
+ x = n;
+ x += 9;
+ while(x%8 != 0 && x%8 !== 0){
+ if(values[x] === 0){
+ scopes.push(x);
+ }
+ else if("prnbqk".indexOf(values[x]) >= 0){
+ scopes.push(x);
+ break;
+ }
+ else {
+ break;
+ }
+ x += 9;
+ }
+ x = n;
+ x -= 7;
+ while(x%8 != 0){
+ if(values[x] === 0){
+ scopes.push(x);
+ }
+ else if("prnbqk".indexOf(values[x]) >= 0){
+ scopes.push(x);
+ break;
+ }
+ else {
+ break;
+ }
+ x -= 7;
+ }
+ }
+
+ else if(target === "l"){
+ x = n;
+ x += 8;
+ if(("prnbqk".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
+ scopes.push(x);
+ }
+ x = n;
+ x -= 8;
+ if(("prnbqk".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
+ scopes.push(x);
+ }
+ x = n;
+ if(x%8 > 0){
+ x = n;
+ x -= 1;
+ if(("prnbqk".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
+ scopes.push(x);
+ }
+ x = n;
+ x -= 9;
+ if(("prnbqk".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
+ scopes.push(x);
+ }
+
+ x = n;
+ x += 7;
+ if(("prnbqk".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
+ scopes.push(x);
+ }
+ }
+ x = n;
+ if(x%8 < 7){
+ x = n;
+ x += 1;
+ if(("prnbqk".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
+ scopes.push(x);
+ }
+ x = n;
+ x += 9;
+ if(("prnbqk".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
+ scopes.push(x);
+ }
+ x = n;
+ x -= 7;
+ if(("prnbqk".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
+ scopes.push(x);
+ }
+ }
+ x = n;
+ if(!ck){
+ cl = false;
+ if(!cr2){
+ // cl = false;
+ if(values[n+1] === 0 && values[n+2] === 0 && values[n+3] === "t"){
+ scopes.push(x+2);
+ cl = true;
+ }
+ }
+ if(!cr1){
+ // cl = false;
+ if(values[n-1] === 0 && values[n-2] === 0 && values[n-3] === 0 && values[n-4] === "t"){
+ scopes.push(x-2);
+ cl = true;
+ }
+ }
+ }
+ }
+ if(scopes.length) return scopes;
+ }
+
+ function checkWhite(n,values){
+ var target = values[n];
+ var scopes = [];
+ var x = n;
+ if(target === "p"){
+ x += 8;
+ if("otmvlw".indexOf(values[x-1]) >= 0 && x%8 != 0){
+ scopes.push(x-1);
+ }
+ if("otmvlw".indexOf(values[x+1]) >= 0 && x%8 != 7){
+ scopes.push(x+1);
+ }
+ if(x < 64 && values[x] === 0){
+ scopes.push(x);
+ if(x <= 23){
+ if(x+8 >= 0 && values[x+8] === 0){
+ scopes.push(x+8);
+ }
+ }
+ }
+ }
+
+ else if(target === "r"){
+ x = n;
+ x -= 8;
+ while(x >= 0){
+ if(values[x] === 0){
+ scopes.push(x);
+ }
+ else if("otmvlw".indexOf(values[x]) >= 0){
+ scopes.push(x);
+ break;
+ }
+ else {
+ break;
+ }
+ x -= 8;
+ }
+ x = n;
+ x += 8;
+ while(x < 64){
+ if(values[x] === 0){
+ scopes.push(x);
+ }
+ else if("otmvlw".indexOf(values[x]) >= 0){
+ scopes.push(x);
+ break;
+ }
+ else {
+ break;
+ }
+ x += 8;
+ }
+ x = n;
+ x++;
+ while(x%8 != 0){
+ if(values[x] === 0){
+ scopes.push(x);
+ }
+ else if("otmvlw".indexOf(values[x]) >= 0){
+ scopes.push(x);
+ break;
+ }
+ else {
+ break;
+ }
+ x++;
+ }
+ x = n;
+ x--;
+ while(x%8 != 7){
+ if(values[x] === 0){
+ scopes.push(x);
+ }
+ else if("otmvlw".indexOf(values[x]) >= 0){
+ scopes.push(x);
+ break;
+ }
+ else {
+ break;
+ }
+ x--;
+ }
+ }
+
+ else if(target === "n"){
+ x = n;
+ if(x%8 > 1 && x%8 < 6){
+ x -= 17;
+ if(("otmvlw".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
+ scopes.push(x);
+ }
+ x = n;
+ x -= 15;
+ if(("otmvlw".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
+ scopes.push(x);
+ }
+
+ x = n;
+ x -= 10;
+ if(("otmvlw".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
+ scopes.push(x);
+ }
+ x = n;
+ x -= 6;
+ if(("otmvlw".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
+ scopes.push(x);
+ }
+ x = n;
+ x += 6;
+ if(("otmvlw".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
+ scopes.push(x);
+ }
+ x = n;
+ x += 10;
+ if(("otmvlw".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
+ scopes.push(x);
+ }
+ x = n;
+ x += 15;
+ if(("otmvlw".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
+ scopes.push(x);
+ }
+ x = n;
+ x += 17;
+ if(("otmvlw".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
+ scopes.push(x);
+ }
+ }
+ else {
+ x = n;
+ if(x%8 <= 1){
+ x = n;
+ x -= 15;
+ if(("otmvlw".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
+ scopes.push(x);
+ }
+ x = n;
+ x -= 6;
+ if(("otmvlw".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
+ scopes.push(x);
+ }
+ x = n;
+ x += 10;
+ if(("otmvlw".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
+ scopes.push(x);
+ }
+ x = n;
+ x += 17;
+ if(("otmvlw".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
+ scopes.push(x);
+ }
+ }
+ x = n;
+ if(x%8 === 1){
+ x -= 17;
+ if(("otmvlw".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
+ scopes.push(x);
+ }
+ x = n;
+ x += 15;
+ if(("otmvlw".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
+ scopes.push(x);
+ }
+ }
+ if(x%8 >= 6){
+ x = n;
+ x -= 17;
+ if(("otmvlw".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
+ scopes.push(x);
+ }
+ x = n;
+ x -= 10;
+ if(("otmvlw".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
+ scopes.push(x);
+ }
+ x = n;
+ x += 6;
+ if(("otmvlw".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
+ scopes.push(x);
+ }
+ x = n;
+ x += 15;
+ if(("otmvlw".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
+ scopes.push(x);
+ }
+ }
+ x = n;
+ if(x%8 === 6){
+ x = n;
+ x -= 15;
+ if(("otmvlw".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
+ scopes.push(x);
+ }
+ x = n;
+ x += 17;
+ if(("otmvlw".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
+ scopes.push(x);
+ }
+ }
+ }
+ }
+
+ else if(target === "b"){
+ x = n;
+ x -= 9;
+ while(x >= 0 && x%8 !== 7){
+ if(values[x] === 0){
+ scopes.push(x);
+ }
+ else if("otmvlw".indexOf(values[x]) >= 0){
+ scopes.push(x);
+ break;
+ }
+ else {
+ break;
+ }
+ x -= 9;
+ }
+ x = n;
+ x += 7;
+ while(x < 64 && x%8 !== 7){
+ if(values[x] === 0){
+ scopes.push(x);
+ }
+ else if("otmvlw".indexOf(values[x]) >= 0){
+ scopes.push(x);
+ break;
+ }
+ else {
+ break;
+ }
+ x += 7;
+ }
+ x = n;
+ x += 9;
+ while(x%8 != 0 && x%8 !== 0){
+ if(values[x] === 0){
+ scopes.push(x);
+ }
+ else if("otmvlw".indexOf(values[x]) >= 0){
+ scopes.push(x);
+ break;
+ }
+ else {
+ break;
+ }
+ x += 9;
+ }
+ x = n;
+ x -= 7;
+ while(x%8 != 0){
+ if(values[x] === 0){
+ scopes.push(x);
+ }
+ else if("otmvlw".indexOf(values[x]) >= 0){
+ scopes.push(x);
+ break;
+ }
+ else {
+ break;
+ }
+ x -= 7;
+ }
+ }
+
+ else if(target === "q"){
+ x = n;
+ x -= 8;
+ while(x >= 0){
+ if(values[x] === 0){
+ scopes.push(x);
+ }
+ else if("otmvlw".indexOf(values[x]) >= 0){
+ scopes.push(x);
+ break;
+ }
+ else {
+ break;
+ }
+ x -= 8;
+ }
+ x = n;
+ x += 8;
+ while(x < 64){
+ if(values[x] === 0){
+ scopes.push(x);
+ }
+ else if("otmvlw".indexOf(values[x]) >= 0){
+ scopes.push(x);
+ break;
+ }
+ else {
+ break;
+ }
+ x += 8;
+ }
+ x = n;
+ x++;
+ while(x%8 != 0){
+ if(values[x] === 0){
+ scopes.push(x);
+ }
+ else if("otmvlw".indexOf(values[x]) >= 0){
+ scopes.push(x);
+ break;
+ }
+ else {
+ break;
+ }
+ x++;
+ }
+ x = n;
+ x--;
+ while(x%8 != 7){
+ if(values[x] === 0){
+ scopes.push(x);
+ }
+ else if("otmvlw".indexOf(values[x]) >= 0){
+ scopes.push(x);
+ break;
+ }
+ else {
+ break;
+ }
+ x--;
+ }
+ x = n;
+ x -= 9;
+ while(x >= 0 && x%8 !== 7){
+ if(values[x] === 0){
+ scopes.push(x);
+ }
+ else if("otmvlw".indexOf(values[x]) >= 0){
+ scopes.push(x);
+ break;
+ }
+ else {
+ break;
+ }
+ x -= 9;
+ }
+ x = n;
+ x += 7;
+ while(x < 64 && x%8 !== 7){
+ if(values[x] === 0){
+ scopes.push(x);
+ }
+ else if("otmvlw".indexOf(values[x]) >= 0){
+ scopes.push(x);
+ break;
+ }
+ else {
+ break;
+ }
+ x += 7;
+ }
+ x = n;
+ x += 9;
+ while(x%8 != 0 && x%8 !== 0){
+ if(values[x] === 0){
+ scopes.push(x);
+ }
+ else if("otmvlw".indexOf(values[x]) >= 0){
+ scopes.push(x);
+ break;
+ }
+ else {
+ break;
+ }
+ x += 9;
+ }
+ x = n;
+ x -= 7;
+ while(x%8 != 0){
+ if(values[x] === 0){
+ scopes.push(x);
+ }
+ else if("otmvlw".indexOf(values[x]) >= 0){
+ scopes.push(x);
+ break;
+ }
+ else {
+ break;
+ }
+ x -= 7;
+ }
+ }
+
+ else if(target === "k"){
+ x = n;
+ x += 8;
+ if(("otmvlw".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
+ scopes.push(x);
+ }
+ x = n;
+ x -= 8;
+ if(("otmvlw".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
+ scopes.push(x);
+ }
+ x = n;
+ if(x%8 > 0){
+ x = n;
+ x -= 1;
+ if(("otmvlw".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
+ scopes.push(x);
+ }
+ x = n;
+ x -= 9;
+ if(("otmvlw".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
+ scopes.push(x);
+ }
+
+ x = n;
+ x += 7;
+ if(("otmvlw".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
+ scopes.push(x);
+ }
+ }
+ x = n;
+ if(x%8 < 7){
+ x = n;
+ x += 1;
+ if(("otmvlw".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
+ scopes.push(x);
+ }
+ x = n;
+ x += 9;
+ if(("otmvlw".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
+ scopes.push(x);
+ }
+ x = n;
+ x -= 7;
+ if(("otmvlw".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
+ scopes.push(x);
+ }
+ }
+ }
+ if(scopes.length) return scopes;
+ }
+
+ var myTurn = true;
+
+ function check(){
+ if(myTurn){
+ var n = Number(this.classList[1].slice(1));
+ var target = values[n];
+
+ var scopes = checkBlack(n,values) || [];
+
+ var x = n;
+
+ if(!moveable){
+ if(scopes.length > 0){
+ moveable = true;
+ moveTarget = n;
+ moveScopes = scopes.join(",").split(",");
+ }
+ else {
+
+ }
+ }
+ else {
+ if(moveScopes.indexOf(String(n)) >= 0){
+ var checkArr = [];
+ var saveKing = false;
+ for(var z = 0; z < 64; z++){
+ checkArr[z] = values[z];
+ }
+
+ checkArr[n] = checkArr[moveTarget];
+ checkArr[moveTarget] = 0;
+
+ for(var y = 0; y < 64; y++){
+ if("prnbkq".indexOf(checkArr[y]) >= 0){
+ var checkScp = checkWhite(y,checkArr) || [];
+ for(var z = 0; z < checkScp.length; z++){
+ if(checkArr[checkScp[z]] === 'l'){
+ if(!saveKing){
+ alert('Save Your King');
+ saveKing = true;
+ }
+ }
+ }
+ }
+ }
+
+ if(!saveKing){
+ values[n] = values[moveTarget];
+ values[moveTarget] = 0;
+ if(cl){
+ if(n === 62 && moveTarget === 60){
+ values[63] = 0;
+ values[61] = "t";
+ }
+ else if(n === 58 && moveTarget === 60){
+ values[59] = "t";
+ values[56] = 0;
+ }
+ }
+ if(moveTarget === 60){
+ ck = true;
+ }
+ else if(moveTarget === 63){
+ cr2 = true;
+ }
+ else if(moveTarget === 56){
+ cr1 = true;
+ }
+ if(values[n] === "o" && n < 8){
+ values[n] = "w";
+ }
+ moveable = false;
+ scopes = [];
+ myTurn = false;
+ setTimeout(chooseTurn,1000);
+ }
+ }
+ else {
+ moveScopes = [];
+ moveable = false;
+ }
+ }
+
+ updateSquarecolor();
+
+ for(var x = 0; x < 64; x++){
+ sqs[x].innerHTML = fonts[values[x]];
+ if(values[x] === 0){
+ sqs[x].innerHTML = "";
+ }
+ }
+
+ for(var x = 0; x < scopes.length; x++){
+ sqs[scopes[x]].style.background = "#f45";//.classList.add("scope");
+ // alert(scopes)
+ }
+ }
+ }
+
+
+ var arr = [];
+
+ function chooseTurn(){
+ var approved = [];
+ var actions = [];
+ var effects = [];
+
+
+ for(var n = 0; n < 64; n++){
+ if("prnbqk".indexOf(values[n]) >= 0){
+ var scopes = checkWhite(n,values) || [];
+ for(var x = 0; x < scopes.length; x++){
+ var tmp = []//values.join(',').split(',');
+ for(var xx = 0; xx < 64; xx++){
+ tmp[xx] = values[xx]
+ }
+ var effect = 0;
+ var action = Math.random()*3;
+ //Action value
+ var actionValue = tmp[scopes[x]];
+ if(actionValue === "l"){
+ action = 100 + Math.random()*3;
+ }
+ else if(actionValue === "w"){
+ action = 50 + Math.random()*3;
+ }
+ else if(actionValue === "v"){
+ action = 30 + Math.random()*3;
+ }
+ else if(actionValue === "m"){
+ action = 30 + Math.random()*3;
+ }
+ else if(actionValue === "t"){
+ action = 30 + Math.random()*3;
+ }
+ else if(actionValue === "o"){
+ action = 15 + Math.random()*3;
+ }
+ //Effect value
+ tmp[scopes[x]] = tmp[n];
+ tmp[n] = 0;
+ for(var y = 0; y < 64; y++){
+ if("otmvlw".indexOf(values[y]) >= 0){
+ var tmpScp = checkBlack(y,tmp) || [];
+ for(var z = 0; z < tmpScp.length; z++){
+ var effectValue = tmp[tmpScp[z]];
+ if(effectValue == "k"){
+ if(effect < 100){
+ effect = 100;
+ }
+ }
+ else if(effectValue == "q"){
+ if(effect < 50){
+ effect = 50;
+ }
+ }
+ else if(effectValue == "b"){
+ if(effect < 30){
+ effect = 30;
+ }
+ }
+ else if(effectValue == "n"){
+ if(effect < 30){
+ effect = 30;
+ }
+ }
+ else if(effectValue == "r"){
+ if(effect < 30){
+ effect = 30;
+ }
+ }
+ else if(effectValue == "p"){
+ if(effect < 15){
+ effect = 15;
+ }
+ }
+ }
+ }
+ }
+
+
+
+
+ actions.push(action);
+ effects.push(effect);
+ approved.push(n+"-"+scopes[x]);
+ }
+ }
+ }
+
+ //alert(actions);
+
+ var bestEffect = Math.min.apply(null,effects);
+ //alert(bestEffect);
+ if(bestEffect >= 100){
+ alert("You Win");
+ setTimeout(function(){
+ values = ['r','n','b','q','k','b','n','r','p','p','p','p','p','p','p','p',0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,'o','o','o','o','o','o','o','o','t','m','v','w','l','v','m','t'];
+ },100);
+ }
+
+ var tmpA = [];
+ var tmpB = [];
+ var tmpC = [];
+ var bestMove = "";
+
+ for(var n = 0; n < effects.length; n++){
+ if(effects[n] === bestEffect){
+ tmpA.push(actions[n]);
+ tmpB.push(approved[n]);
+ tmpC.push(effects[n]);
+ }
+ }
+ bestMove = tmpB[tmpA.indexOf(Math.max.apply(null,tmpA))];
+ // alert(effects)
+ //alert(bestMove);
+
+
+ if(bestMove){
+ values[Number(bestMove.split("-")[1])] = values[Number(bestMove.split("-")[0])];
+ values[Number(bestMove.split("-")[0])] = 0;
+ if(values[Number(bestMove.split("-")[1])] === "p" && Number(bestMove.split("-")[1]) >= 56){
+ values[Number(bestMove.split("-")[1])] = "q";
+ }
+
+ sqs[bestMove.split("-")[1]].style.background = '#aaf';
+ sqs[bestMove.split("-")[0]].style.background = '#aaf';
+
+ for(var x = 0; x < 64; x++){
+ //sqs[x].style.background = "#afa"//classList.add("scope");
+ sqs[x].innerHTML = fonts[values[x]];
+ if(values[x] === 0){
+ sqs[x].innerHTML = "";
+ }
+ }
+ myTurn = true;
+ }
+ else {
+ //alert('You Win');
+ }
+ }
+}
+//chooseTurn();
\ No newline at end of file
diff --git a/Games/Chess_Game_computer/style.css b/Games/Chess_Game_computer/style.css
new file mode 100644
index 0000000000..20a54210b9
--- /dev/null
+++ b/Games/Chess_Game_computer/style.css
@@ -0,0 +1,28 @@
+body {
+ font-family:chess;
+ margin: 0;
+ background-color:#000;
+}
+
+.square {
+ background:#afa;
+ display:inline-block;
+ border:1px solid #fff;
+ text-align:center;
+ position: absolute;
+ cursor: pointer;
+}
+
+#buymeacoffee {
+ z-index: 10000;
+ position: absolute;
+ bottom: 20px;
+ width: 100%;
+ display: block;
+ text-align: center;
+}
+
+#buymeacoffee img {
+ box-shadow: 0px 2px 6px rgba(255, 255, 255, 0.3);
+ border-radius: 10px;
+}
\ No newline at end of file
diff --git a/Games/Connect_Four/index.html b/Games/Connect_Four/index.html
index 2a0ac4cbe5..8db2d51f94 100644
--- a/Games/Connect_Four/index.html
+++ b/Games/Connect_Four/index.html
@@ -4,8 +4,17 @@
Connect4
+
+
diff --git a/Games/Dsa_quiz_game/README.md b/Games/Dsa_quiz_game/README.md
new file mode 100644
index 0000000000..1fc0f26a1a
--- /dev/null
+++ b/Games/Dsa_quiz_game/README.md
@@ -0,0 +1,37 @@
+# **Dsa_quiz_game**
+
+---
+
+
+
+## **Description ๐**
+
+-The DSA Quiz Game is for educational purposes and contains DSA problems.
+-It will help strengthen concepts.
+-Increase your self-confidence.
+-Easy to play.
+
+## **functionalities ๐ฎ**
+
+-Contains 50+ DSA questions.
+-Randomly selects any 10 questions.
+-Shows results after the game.
+-Displays the correct answer if your answer is wrong.
+
+
+
+## **How to play? ๐น๏ธ**
+-Start by selecting any one option. The game will show you the correct answer if your answer is wrong.
+
+
+
+
+## **Screenshots ๐ธ**
+
+
+![image](../../assets/images/Dsa_quiz1.png)
+![image](../../assets/images/Dsa_quiz2.png)
+
+
+
+
diff --git a/Games/Dsa_quiz_game/index.html b/Games/Dsa_quiz_game/index.html
new file mode 100644
index 0000000000..2b9c36c0c3
--- /dev/null
+++ b/Games/Dsa_quiz_game/index.html
@@ -0,0 +1,26 @@
+
+
+
+
+
+
+ Quizz App
+
+
+
+
Simple Quiz
+
+
This is Question
+
+ Answer1
+ Answer2
+ Answer3
+ Answer4
+
+
Next
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Games/Dsa_quiz_game/script.js b/Games/Dsa_quiz_game/script.js
new file mode 100644
index 0000000000..52981b7406
--- /dev/null
+++ b/Games/Dsa_quiz_game/script.js
@@ -0,0 +1,414 @@
+const questions = [
+ {
+ question: "What is the time complexity of accessing an element in an array by its index?",
+ answers: [
+ {text: "O(1)", correct: true},
+ {text: "O(n)", correct: false},
+ {text: "O(log n)", correct: false},
+ {text: "O(n^2)", correct: false},
+ ]
+ },
+ {
+ question: "What data structure is a Last-In-First-Out (LIFO) data structure?",
+ answers: [
+ {text: "Stack", correct: true},
+ {text: "Queue", correct: false},
+ {text: "Linked List", correct: false},
+ {text: "Tree", correct: false},
+ ]
+ },
+ {
+ question: "What is the time complexity of inserting an element at the end of an array?",
+ answers: [
+ {text: "O(1)", correct: false},
+ {text: "O(n)", correct: true},
+ {text: "O(log n)", correct: false},
+ {text: "O(n^2)", correct: false},
+ ]
+ },
+ {
+ question: "Which data structure uses First-In-First-Out (FIFO) ordering?",
+ answers: [
+ {text: "Queue", correct: true},
+ {text: "Stack", correct: false},
+ {text: "Linked List", correct: false},
+ {text: "Tree", correct: false},
+ ]
+ },
+ {
+ question: "What is the time complexity of inserting an element at the beginning of an array?",
+ answers: [
+ {text: "O(1)", correct: false},
+ {text: "O(n)", correct: true},
+ {text: "O(log n)", correct: false},
+ {text: "O(n^2)", correct: false},
+ ]
+ },
+ {
+ question: "Which data structure organizes elements in a hierarchical structure?",
+ answers: [
+ {text: "Tree", correct: true},
+ {text: "Stack", correct: false},
+ {text: "Queue", correct: false},
+ {text: "Linked List", correct: false},
+ ]
+ },
+ {
+ question: "What is the time complexity of searching for an element in a binary search tree?",
+ answers: [
+ {text: "O(1)", correct: false},
+ {text: "O(n)", correct: false},
+ {text: "O(log n)", correct: true},
+ {text: "O(n^2)", correct: false},
+ ]
+ },
+ {
+ question: "Which data structure allows elements to be accessed in a LIFO (Last-In-First-Out) manner?",
+ answers: [
+ {text: "Stack", correct: true},
+ {text: "Queue", correct: false},
+ {text: "Linked List", correct: false},
+ {text: "Tree", correct: false},
+ ]
+ },
+ {
+ question: "What is the time complexity of inserting an element in the middle of an array?",
+ answers: [
+ {text: "O(1)", correct: false},
+ {text: "O(n)", correct: true},
+ {text: "O(log n)", correct: false},
+ {text: "O(n^2)", correct: false},
+ ]
+ },
+ {
+ question: "Which data structure does not have a fixed size?",
+ answers: [
+ {text: "Linked List", correct: true},
+ {text: "Stack", correct: false},
+ {text: "Queue", correct: false},
+ {text: "Tree", correct: false},
+ ]
+ },
+ {
+ question: "What is the time complexity of inserting an element at the end of a linked list?",
+ answers: [
+ {text: "O(1)", correct: false},
+ {text: "O(n)", correct: true},
+ {text: "O(log n)", correct: false},
+ {text: "O(n^2)", correct: false},
+ ]
+ },
+ {
+ question: "Which data structure allows elements to be accessed in a FIFO (First-In-First-Out) manner?",
+ answers: [
+ {text: "Queue", correct: true},
+ {text: "Stack", correct: false},
+ {text: "Linked List", correct: false},
+ {text: "Tree", correct: false},
+ ]
+ },
+ {
+ question: "What is the time complexity of deleting an element at the beginning of a linked list?",
+ answers: [
+ {text: "O(1)", correct: true},
+ {text: "O(n)", correct: false},
+ {text: "O(log n)", correct: false},
+ {text: "O(n^2)", correct: false},
+ ]
+ },
+ {
+ question: "Which data structure represents a collection of elements, each identified by at least one array index or key?",
+ answers: [
+ {text: "Array", correct: true},
+ {text: "Linked List", correct: false},
+ {text: "Queue", correct: false},
+ {text: "Stack", correct: false},
+ ]
+ },
+ {
+ question: "What is the time complexity of finding an element in a hash table?",
+ answers: [
+ {text: "O(1)", correct: true},
+ {text: "O(log n)", correct: false},
+ {text: "O(n)", correct: false},
+ {text: "O(n^2)", correct: false},
+ ]
+ },
+ {
+ question: "Which data structure allows for constant time insertion and deletion of elements at both ends?",
+ answers: [
+ {text: "Deque", correct: true},
+ {text: "Linked List", correct: false},
+ {text: "Queue", correct: false},
+ {text: "Stack", correct: false},
+ ]
+ },
+ {
+ question: "What is the time complexity of finding an element in a sorted array using binary search?",
+ answers: [
+ {text: "O(1)", correct: false},
+ {text: "O(log n)", correct: true},
+ {text: "O(n)", correct: false},
+ {text: "O(n^2)", correct: false},
+ ]
+ },
+ {
+ question: "Which data structure follows the Last-In-First-Out (LIFO) principle?",
+ answers: [
+ {text: "Stack", correct: true},
+ {text: "Queue", correct: false},
+ {text: "Deque", correct: false},
+ {text: "Linked List", correct: false},
+ ]
+ },
+ {
+ question: "What is the time complexity of appending an element to the end of a dynamic array (with resizing)?",
+ answers: [
+ {text: "O(1)", correct: false},
+ {text: "O(log n)", correct: false},
+ {text: "O(n)", correct: false},
+ {text: "Amortized O(1)", correct: true},
+ ]
+ },
+ {
+ question: "Which data structure is based on the principle of First-In-First-Out (FIFO)?",
+ answers: [
+ {text: "Queue", correct: true},
+ {text: "Stack", correct: false},
+ {text: "Deque", correct: false},
+ {text: "Linked List", correct: false},
+ ]
+ },
+ {
+ question: "What is the time complexity of finding the minimum (or maximum) element in a min (or max) heap?",
+ answers: [
+ {text: "O(1)", correct: true},
+ {text: "O(log n)", correct: false},
+ {text: "O(n)", correct: false},
+ {text: "O(n^2)", correct: false},
+ ]
+ },
+ {
+ question: "Which data structure can be used to efficiently implement a priority queue?",
+ answers: [
+ {text: "Heap", correct: true},
+ {text: "Stack", correct: false},
+ {text: "Queue", correct: false},
+ {text: "Linked List", correct: false},
+ ]
+ },
+ {
+ question: "What is the time complexity of inserting an element at the beginning of a linked list?",
+ answers: [
+ {text: "O(1)", correct: true},
+ {text: "O(log n)", correct: false},
+ {text: "O(n)", correct: false},
+ {text: "O(n^2)", correct: false},
+ ]
+ },
+ {
+ question: "What is the purpose of a linked list?",
+ answers: [
+ {text: "To store data in a linear structure with a dynamic size", correct: true},
+ {text: "To sort data efficiently", correct: false},
+ {text: "To implement recursive algorithms", correct: false},
+ {text: "To perform mathematical operations", correct: false},
+ ]
+ },
+ {
+ question: "What is a stack?",
+ answers: [
+ {text: "A data structure that follows the Last-In-First-Out (LIFO) principle", correct: true},
+ {text: "A data structure that follows the First-In-First-Out (FIFO) principle", correct: false},
+ {text: "A data structure that organizes elements in a hierarchical structure", correct: false},
+ {text: "A data structure that allows elements to be accessed in any order", correct: false},
+ ]
+ },
+ {
+ question: "What is the purpose of a binary heap?",
+ answers: [
+ {text: "To implement priority queues efficiently", correct: true},
+ {text: "To sort data in ascending order", correct: false},
+ {text: "To perform recursive algorithms", correct: false},
+ {text: "To store key-value pairs for efficient retrieval", correct: false},
+ ]
+ },
+ {
+ question: "What is a binary tree?",
+ answers: [
+ {text: "A tree data structure in which each node has at most two children", correct: true},
+ {text: "A tree data structure in which each node has exactly two children", correct: false},
+ {text: "A tree data structure with more than two children per node", correct: false},
+ {text: "A tree data structure with no children", correct: false},
+ ]
+ },
+ {
+ question: "What is a binary search tree (BST)?",
+ answers: [
+ {text: "A binary tree in which the left subtree of a node contains only nodes with keys less than the node's key and the right subtree contains only nodes with keys greater than the node's key", correct: true},
+ {text: "A binary tree that is sorted in descending order", correct: false},
+ {text: "A binary tree that contains duplicate nodes", correct: false},
+ {text: "A binary tree in which every node has exactly two children", correct: false},
+ ]
+ },
+ {
+ question: "What is a balanced binary tree?",
+ answers: [
+ {text: "A binary tree in which the height of the left and right subtrees of any node differ by at most one", correct: true},
+ {text: "A binary tree that contains only nodes with even keys", correct: false},
+ {text: "A binary tree in which every node has exactly two children", correct: false},
+ {text: "A binary tree in which all leaf nodes are at the same level", correct: false},
+ ]
+ },
+ {
+ question: "What is a graph?",
+ answers: [
+ {text: "A data structure that consists of a set of nodes (vertices) and a set of edges that connect pairs of nodes", correct: true},
+ {text: "A data structure that represents hierarchical relationships between elements", correct: false},
+ {text: "A data structure used for storing key-value pairs", correct: false},
+ {text: "A data structure that allows for efficient search, insertion, and deletion operations", correct: false},
+ ]
+ },
+ {
+ question: "What is a directed graph?",
+ answers: [
+ {text: "A graph in which the edges have a direction, indicating a one-way connection between nodes", correct: true},
+ {text: "A graph in which all nodes are connected to each other", correct: false},
+ {text: "A graph in which the edges have weights assigned to them", correct: false},
+ {text: "A graph in which the edges do not have a direction, indicating a two-way connection between nodes", correct: false},
+ ]
+ },
+ {
+ question: "What is a weighted graph?",
+ answers: [
+ {text: "A graph in which each edge is assigned a numerical value, called a weight", correct: true},
+ {text: "A graph in which the nodes have different sizes", correct: false},
+ {text: "A graph in which the nodes have different colors", correct: false},
+ {text: "A graph in which each edge is assigned a direction", correct: false},
+ ]
+ },
+ {
+ question: "What is the adjacency matrix of a graph?",
+ answers: [
+ {text: "A two-dimensional array where the value at index [i][j] represents whether there is an edge from node i to node j", correct: true},
+ {text: "A tree data structure used for storing key-value pairs", correct: false},
+ {text: "A data structure that represents hierarchical relationships between elements", correct: false},
+ {text: "A data structure used for representing binary trees", correct: false},
+ ]
+ },
+ {
+ question: "What is the depth-first search (DFS) algorithm used for in graphs?",
+ answers: [
+ {text: "To explore as far as possible along each branch before backtracking", correct: true},
+ {text: "To find the shortest path between two nodes in a weighted graph", correct: false},
+ {text: "To find the minimum spanning tree of a graph", correct: false},
+ {text: "To find the topological ordering of a directed acyclic graph (DAG)", correct: false},
+ ]
+ },
+ {
+ question: "What is the breadth-first search (BFS) algorithm used for in graphs?",
+ answers: [
+ {text: "To explore all the neighbor nodes at the present depth before moving on to the nodes at the next depth level", correct: true},
+ {text: "To find the shortest path between two nodes in a weighted graph", correct: false},
+ {text: "To find the minimum spanning tree of a graph", correct: false},
+ {text: "To find the topological ordering of a directed acyclic graph (DAG)", correct: false},
+ ]
+ },
+ {
+ question: "What is a spanning tree of a graph?",
+ answers: [
+ {text: "A subgraph that is a tree and includes all the vertices of the original graph", correct: true},
+ {text: "A tree data structure used for storing key-value pairs", correct: false},
+ {text: "A data structure that represents hierarchical relationships between elements", correct: false},
+ {text: "A data structure used for representing binary trees", correct: false},
+ ]
+ }
+
+];
+const questionElement = document.getElementById('question');
+const answerButtons = document.getElementById('answer-btn');
+const nextButton = document.getElementById('next-btn');
+let currentquinx = 0;
+let score = 0;
+let shuffledQuestions = [];
+
+function startquiz() {
+ currentquinx = 0;
+ score = 0;
+ nextButton.innerHTML = "Next";
+ shuffledQuestions = questions.sort(() => Math.random() - 0.5).slice(0, 10); // Shuffle and select 10 questions
+ ShowQuestion();
+}
+
+function ShowQuestion() {
+ resetState();
+ let currentque = shuffledQuestions[currentquinx];
+ let questionNo = currentquinx + 1;
+ questionElement.innerHTML = questionNo + ". " + currentque.question;
+ currentque.answers.forEach(answer => {
+ const button = document.createElement('button');
+ button.innerHTML = answer.text;
+ button.classList.add("btn");
+ button.addEventListener('click', () => checkAnswer(answer.correct));
+ answerButtons.appendChild(button);
+ if(answer.correct) {
+ button.dataset.correct = answer.correct;
+ }
+ button.addEventListener("click", selectAnswer);
+
+ })
+}
+
+function resetState() {
+ nextButton.style.display = 'none';
+ while (answerButtons.firstChild) {
+ answerButtons.removeChild(answerButtons.firstChild);
+ }
+}
+
+function selectAnswer(e) {
+ const selectedBtn = e.target;
+ const isCorrect = selectedBtn.dataset.correct === "true";
+
+ if (isCorrect) {
+ selectedBtn.classList.add("correct");
+ score++;
+ } else {
+ selectedBtn.classList.add("incorrect");
+ }
+
+ Array.from(answerButtons.children).forEach(button => {
+ if (button.dataset.correct === "true") {
+ button.classList.add("correct");
+ }
+ button.disabled = true;
+ });
+
+ nextButton.style.display = "block";
+}
+
+function ShowScore() {
+ resetState();
+ questionElement.innerHTML = `You scored ${score} out of ${shuffledQuestions.length} !`;
+ nextButton.innerHTML = "Play Again";
+ nextButton.style.display = "block";
+}
+
+function handleNextButton() {
+ currentquinx++;
+ if(currentquinx < shuffledQuestions.length) {
+ ShowQuestion();
+ } else {
+ ShowScore();
+ }
+}
+
+nextButton.addEventListener("click", () => {
+ if(currentquinx < shuffledQuestions.length) {
+ handleNextButton();
+ } else {
+ startquiz();
+ }
+});
+
+startquiz();
diff --git a/Games/Dsa_quiz_game/style.css b/Games/Dsa_quiz_game/style.css
new file mode 100644
index 0000000000..3fd9887f5c
--- /dev/null
+++ b/Games/Dsa_quiz_game/style.css
@@ -0,0 +1,83 @@
+*
+{
+ margin: 0;
+ padding: 0;
+ font-family: 'Poppins',sans-serif;
+ box-sizing: border-box;
+}
+body
+{
+ background: #001e4d;
+
+}
+.app
+{
+ background: #fff;
+ width: 90%;
+ max-width: 600px;
+ margin: 100px auto 0;
+ border-radius: 10px;
+ padding: 30px;
+}
+.app h1
+{
+ font-weight: 25px;
+ color: #001e4d;
+ font-weight: 600px;
+ border-bottom: 1px solid #333;
+ padding-bottom: 30px;
+}
+.quiz
+{
+ padding: 20px 0;
+}
+.quiz h2
+{
+ font-size: 18px;
+ color: #001e4d;
+ font-weight: 600px;
+}
+.btn
+{
+ background: #fff;
+ color: #222;
+ font-weight: 500px;
+ width: 100%;
+ border: 1px solid #222;
+ padding: 10px;
+ margin: 10px 0;
+ text-align: left;
+ border-radius: 4px;
+ cursor: pointer;
+ transition:all 0.5s;
+}
+
+.btn:hover:not([disabled]) {
+ background: #222;
+ color: #fff;
+}
+
+.btn:disabled {
+ cursor: no-drop;
+}
+#next-btn
+{
+ background: #001e4d;
+ color: #fff;
+ font-weight: 500px;
+ width: 150px;
+ border:0;
+ padding: 10px;
+ margin: 20px auto 0;
+ border-radius: 4px;
+ cursor: pointer;
+ display: none;
+}
+.correct
+{
+ background: #9aeabc;
+}
+.incorrect
+{
+ background: #ff9393;
+}
\ No newline at end of file
diff --git a/Games/Gravity_Simulation_Game/README.md b/Games/Gravity_Simulation_Game/README.md
new file mode 100644
index 0000000000..a20659d485
--- /dev/null
+++ b/Games/Gravity_Simulation_Game/README.md
@@ -0,0 +1,15 @@
+# **Gravity_Simulation_Game**
+
+## **Description ๐**
+Observe and Differentiate between the gravitational fields of Sun, Mercury, Venus, Earth, Moon, Mars, Jupiter, Saturn, Uranus, Neptune and Pluto.
+
+## **How to play? ๐น๏ธ**
+First the user needs to select a celestial body of our solar system among the given options. Then a simulation of various balls of various shapes and colors colliding with each other and jumping under the influence of gravity is shown, until all the balls come at rest at the floor.
+This way user can feel and enjoy the diverse gravitation of the planetary bodies our solar system.
+
+## **Screenshots ๐ธ**
+![ss5](https://github.com/Sara1428/GameZone/assets/146193518/eec47058-4532-49e3-8cbe-2f1893fd5ad4)
+
+## **Working video ๐น**
+https://github.com/Sara1428/GameZone/assets/146193518/8bfecb13-40d2-4d5e-b7e4-e47325c60293
+
diff --git a/Games/Gravity_Simulation_Game/index.html b/Games/Gravity_Simulation_Game/index.html
new file mode 100644
index 0000000000..7e1b92f56f
--- /dev/null
+++ b/Games/Gravity_Simulation_Game/index.html
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+
+ Enjoy Gravity !
+ Select a Celestial Body from below
+
+ Sun
+ Mercury
+ Venus
+ Earth
+ Moon
+ Mars
+ Jupiter
+ Saturn
+ Uranus
+ Neptune
+ Pluto
+
+
+ Click Here To Start !
+
+ Click Here To Stop Current Simulation !
+ Reset Canvas !
+
+
+
+
+
\ No newline at end of file
diff --git a/Games/Gravity_Simulation_Game/script.js b/Games/Gravity_Simulation_Game/script.js
new file mode 100644
index 0000000000..f618b90529
--- /dev/null
+++ b/Games/Gravity_Simulation_Game/script.js
@@ -0,0 +1,153 @@
+// Learn to code this at:
+// https://www.youtube.com/watch?v=3b7FyIxWW94
+
+// Initial Setup
+document.getElementById('bt').addEventListener('click', function(){
+ location.reload();
+})
+document.getElementById('btn').addEventListener('click', function(){
+ location.reload();
+})
+document.getElementById('b').addEventListener('click', function(){
+var canvas = document.querySelector('canvas');
+var c = canvas.getContext('2d');
+
+canvas.width = innerWidth;
+canvas.height = innerHeight/2;
+
+
+// Variables
+var mouse = {
+ x: innerWidth / 2,
+ y: innerHeight / 2
+};
+
+var colors = [
+ 'rgb(235, 1, 40)',
+ 'white',
+ 'black',
+ 'pink'
+];
+
+var gravity = 0.2;
+var x = document.getElementsByName('opt');
+var friction = 0.98;
+if(x[0].checked)
+ gravity=27.4;
+if(x[1].checked)
+ gravity=0.37;
+if(x[2].checked)
+ gravity=0.89;
+if(x[3].checked)
+ gravity=0.98;
+if(x[4].checked)
+ gravity=0.162;
+if(x[5].checked)
+ gravity=0.37;
+if(x[6].checked)
+ gravity=2.31;
+if(x[7].checked)
+ gravity=0.9;
+if(x[8].checked)
+ gravity=0.87;
+if(x[9].checked)
+ gravity=1.1;
+if(x[10].checked)
+ gravity=0.07;
+
+document.getElementById('dd').style.display='none';
+addEventListener("mousemove", function(event) {
+ mouse.x = event.clientX;
+ mouse.y = event.clientY;
+});
+
+addEventListener("resize", function() {
+ canvas.width = innerWidth;
+ canvas.height = innerHeight;
+ init();
+});
+
+addEventListener("click", function(event) {
+ init();
+});
+
+
+// Utility Functions
+function randomIntFromRange(min,max) {
+ return Math.floor(Math.random() * (max - min + 1) + min);
+}
+
+function randomColor(colors) {
+ return colors[Math.floor(Math.random() * colors.length)];
+}
+
+
+// Objects
+function Ball(x, y, dx, dy, radius, color) {
+ this.x = x;
+ this.y = y;
+ this.dx = dx;
+ this.dy = dy;
+ this.radius = radius;
+ this.color = color;
+
+ this.update = function() {
+ if (this.y + this.radius + this.dy> canvas.height) {
+ this.dy = -this.dy;
+ this.dy = this.dy * friction;
+ this.dx = this.dx * friction;
+ } else {
+ this.dy += gravity;
+ }
+
+ if (this.x + this.radius >= canvas.width || this.x - this.radius <= 0) {
+ this.dx = -this.dx * friction;
+ }
+
+ this.x += this.dx;
+ this.y += this.dy;
+ this.draw();
+ };
+
+ this.draw = function() {
+ c.beginPath();
+ c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
+ c.fillStyle = this.color;
+ c.fill();
+ c.stroke();
+ c.closePath();
+ };
+}
+
+
+// Implementation
+var ballArray = [];
+
+function init() {
+ ballArray = [];
+
+ for (let i = 0; i < 600; i++) {
+ var radius = randomIntFromRange(8, 20);
+ var x = randomIntFromRange(radius, canvas.width - radius);
+ var y = randomIntFromRange(0, canvas.height - radius);
+ var dx = randomIntFromRange(-3, 3)
+ var dy = randomIntFromRange(-2, 2)
+ ballArray.push(new Ball(x, y, dx, dy, radius, randomColor(colors)));
+ }
+}
+
+// Animation Loop
+function animate() {
+ requestAnimationFrame(animate);
+
+ c.clearRect(0, 0, canvas.width, canvas.height);
+
+ for (let i = 0; i < ballArray.length; i++) {
+ ballArray[i].update();
+ }
+}
+
+init();
+animate();
+}
+)
\ No newline at end of file
diff --git a/Games/Gravity_Simulation_Game/style.css b/Games/Gravity_Simulation_Game/style.css
new file mode 100644
index 0000000000..424932852d
--- /dev/null
+++ b/Games/Gravity_Simulation_Game/style.css
@@ -0,0 +1,78 @@
+/* body {
+ margin: 0;
+ overflow: hidden;
+ } */
+
+ @media only screen and (min-width: 600px) {
+ canvas{
+ margin: auto;
+ }
+h1,h3{
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ text-align: center;
+ color: rgb(243, 63, 63);
+}
+#dd{
+ color: rgb(245, 53, 53);
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ font-size: 1em;
+ padding: 0px 260px;
+}
+input{
+ accent-color: rgb(240, 61, 91);
+}
+
+
+button{
+ display: block;
+ margin: auto;
+ margin-bottom: 0px;
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ border: 2px solid rgb(235, 1, 40);
+ background-color: white;
+ cursor: pointer;
+ transition-duration: 0.5s;
+}
+
+button:hover{
+ background-color: rgb(236, 36, 36);
+ color: white;
+}
+ }
+
+ @media only screen and (max-width: 600px) {
+ canvas{
+ margin: auto;
+ }
+ h1,h3{
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ text-align: center;
+ color: rgb(243, 63, 63);
+ }
+ #dd{
+ color: rgb(245, 53, 53);
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ font-size: 1em;
+ padding: 0px;
+ }
+ input{
+ accent-color: rgb(240, 61, 91);
+ }
+
+
+ button{
+ display: block;
+ margin: auto;
+ margin-bottom: 0px;
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ border: 2px solid rgb(235, 1, 40);
+ background-color: white;
+ cursor: pointer;
+ transition-duration: 0.5s;
+ }
+
+ button:hover{
+ background-color: rgb(236, 36, 36);
+ color: white;
+ }
+ }
diff --git a/Games/Master_Typing/README.md b/Games/Master_Typing/README.md
index a35a28d628..158e7a14d1 100644
--- a/Games/Master_Typing/README.md
+++ b/Games/Master_Typing/README.md
@@ -38,3 +38,4 @@
[Video](https://i.imgur.com/w56sUaV.mp4)
[Video] (https://imgur.com/a/uxx8hlM)
+
diff --git a/Games/Menja_block_breaker/README.md b/Games/Menja_block_breaker/README.md
new file mode 100644
index 0000000000..5c68f770cd
--- /dev/null
+++ b/Games/Menja_block_breaker/README.md
@@ -0,0 +1,18 @@
+# Block Breaker Game
+
+## Description
+The Block Breaker Game is a classic arcade-style game where the player controls a paddle to bounce a ball and break blocks. The objective is to clear all the blocks on the screen by hitting them with the ball while preventing the ball from falling off the screen using the paddle.
+
+## Features
+- **Multiple Levels:** Progressive difficulty with increasing levels.
+- **Power-Ups:** Various power-ups to enhance gameplay (e.g., paddle size increase, extra balls).
+- **Score Tracking:** Keeps track of the player's score.
+- **Sound Effects:** Engaging sound effects for different actions like hitting blocks, catching power-ups, etc.
+- **Responsive Controls:** Smooth and responsive paddle controls.
+
+## Gameplay
+- Use the left and right arrow keys to move the paddle.
+- Prevent the ball from falling off the bottom of the screen by bouncing it back with the paddle.
+- Break all the blocks on the screen to advance to the next level.
+- Collect power-ups for special abilities and higher scores.
+
diff --git a/Games/Menja_block_breaker/index.html b/Games/Menja_block_breaker/index.html
new file mode 100644
index 0000000000..dd8641f679
--- /dev/null
+++ b/Games/Menja_block_breaker/index.html
@@ -0,0 +1,50 @@
+
+
+
+
+
+ Menja
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Games/Menja_block_breaker/script.js b/Games/Menja_block_breaker/script.js
new file mode 100644
index 0000000000..f4ee8312af
--- /dev/null
+++ b/Games/Menja_block_breaker/script.js
@@ -0,0 +1,1664 @@
+let gameSpeed = 1;
+const BLUE = { r: 0x67, g: 0xd7, b: 0xf0 };
+const GREEN = { r: 0xa6, g: 0xe0, b: 0x2c };
+const PINK = { r: 0xfa, g: 0x24, b: 0x73 };
+const ORANGE = { r: 0xfe, g: 0x95, b: 0x22 };
+const allColors = [BLUE, GREEN, PINK, ORANGE];
+const getSpawnDelay = () => {
+ const spawnDelayMax = 1400;
+ const spawnDelayMin = 550;
+ const spawnDelay = spawnDelayMax - state.game.cubeCount * 3.1;
+ return Math.max(spawnDelay, spawnDelayMin);
+}
+const doubleStrongEnableScore = 2000;
+const slowmoThreshold = 10;
+const strongThreshold = 25;
+const spinnerThreshold = 25;
+let pointerIsDown = false;
+let pointerScreen = { x: 0, y: 0 };
+let pointerScene = { x: 0, y: 0 };
+const minPointerSpeed = 60;
+const hitDampening = 0.1;
+const backboardZ = -400;
+const shadowColor = '#262e36';
+const airDrag = 0.022;
+const gravity = 0.3;
+const sparkColor = 'rgba(170,221,255,.9)';
+const sparkThickness = 2.2;
+const airDragSpark = 0.1;
+const touchTrailColor = 'rgba(170,221,255,.62)';
+const touchTrailThickness = 7;
+const touchPointLife = 120;
+const touchPoints = [];
+const targetRadius = 40;
+const targetHitRadius = 50;
+const makeTargetGlueColor = target => {
+ return 'rgb(170,221,255)';
+};const fragRadius = targetRadius / 3;
+const canvas = document.querySelector('#c');
+const cameraDistance = 900;
+const sceneScale = 1;
+const cameraFadeStartZ = 0.45*cameraDistance;
+const cameraFadeEndZ = 0.65*cameraDistance;
+const cameraFadeRange = cameraFadeEndZ - cameraFadeStartZ;
+const allVertices = [];
+const allPolys = [];
+const allShadowVertices = [];
+const allShadowPolys = [];
+const GAME_MODE_RANKED = Symbol('GAME_MODE_RANKED');
+const GAME_MODE_CASUAL = Symbol('GAME_MODE_CASUAL');
+const MENU_MAIN = Symbol('MENU_MAIN');
+const MENU_PAUSE = Symbol('MENU_PAUSE');
+const MENU_SCORE = Symbol('MENU_SCORE');
+const state = {
+ game: {
+ mode: GAME_MODE_RANKED,
+ time: 0,
+ score: 0,
+ cubeCount: 0
+ },
+ menus: {
+ active: MENU_MAIN
+ }
+};
+
+const isInGame = () => !state.menus.active;
+const isMenuVisible = () => !!state.menus.active;
+const isCasualGame = () => state.game.mode === GAME_MODE_CASUAL;
+const isPaused = () => state.menus.active === MENU_PAUSE;
+const highScoreKey = '__menja__highScore';
+const getHighScore = () => {
+ const raw = localStorage.getItem(highScoreKey);
+ return raw ? parseInt(raw, 10) : 0;
+};
+let _lastHighscore = getHighScore();
+const setHighScore = score => {
+ _lastHighscore = getHighScore();
+ localStorage.setItem(highScoreKey, String(score));
+};
+const isNewHighScore = () => state.game.score > _lastHighscore;
+const invariant = (condition, message) => {
+ if (!condition) throw new Error(message);
+};
+const $ = selector => document.querySelector(selector);
+const handleClick = (element, handler) => element.addEventListener('click', handler);
+const handlePointerDown = (element, handler) => {
+ element.addEventListener('touchstart', handler);
+ element.addEventListener('mousedown', handler);
+};
+const formatNumber = num => num.toLocaleString();
+const PI = Math.PI;
+const TAU = Math.PI * 2;
+const ETA = Math.PI * 0.5;
+const clamp = (num, min, max) => Math.min(Math.max(num, min), max);
+const lerp = (a, b, mix) => (b - a) * mix + a;
+const random = (min, max) => Math.random() * (max - min) + min;
+const randomInt = (min, max) => ((Math.random() * (max - min + 1)) | 0) + min;
+const pickOne = arr => arr[Math.random() * arr.length | 0];
+const colorToHex = color => {
+ return '#' +
+ (color.r | 0).toString(16).padStart(2, '0') +
+ (color.g | 0).toString(16).padStart(2, '0') +
+ (color.b | 0).toString(16).padStart(2, '0');
+};
+const shadeColor = (color, lightness) => {
+ let other, mix;
+ if (lightness < 0.5) {
+ other = 0;
+ mix = 1 - (lightness * 2);
+ } else {
+ other = 255;
+ mix = lightness * 2 - 1;
+ }
+ return '#' +
+ (lerp(color.r, other, mix) | 0).toString(16).padStart(2, '0') +
+ (lerp(color.g, other, mix) | 0).toString(16).padStart(2, '0') +
+ (lerp(color.b, other, mix) | 0).toString(16).padStart(2, '0');
+};
+const _allCooldowns = [];
+const makeCooldown = (rechargeTime, units=1) => {
+ let timeRemaining = 0;
+ let lastTime = 0;
+ const initialOptions = { rechargeTime, units };
+ const updateTime = () => {
+ const now = state.game.time;
+ if (now < lastTime) {
+ timeRemaining = 0;
+ } else {
+ timeRemaining -= now-lastTime;
+ if (timeRemaining < 0) timeRemaining = 0;
+ }
+ lastTime = now;
+ };
+
+ const canUse = () => {
+ updateTime();
+ return timeRemaining <= (rechargeTime * (units-1));
+ };
+
+ const cooldown = {
+ canUse,
+ useIfAble() {
+ const usable = canUse();
+ if (usable) timeRemaining += rechargeTime;
+ return usable;
+ },
+ mutate(options) {
+ if (options.rechargeTime) {
+ timeRemaining -= rechargeTime-options.rechargeTime;
+ if (timeRemaining < 0) timeRemaining = 0;
+ rechargeTime = options.rechargeTime;
+ }
+ if (options.units) units = options.units;
+ },
+ reset() {
+ timeRemaining = 0;
+ lastTime = 0;
+ this.mutate(initialOptions);
+ }
+ };
+
+ _allCooldowns.push(cooldown);
+
+ return cooldown;
+};
+
+const resetAllCooldowns = () => _allCooldowns.forEach(cooldown => cooldown.reset());
+
+const makeSpawner = ({ chance, cooldownPerSpawn, maxSpawns }) => {
+ const cooldown = makeCooldown(cooldownPerSpawn, maxSpawns);
+ return {
+ shouldSpawn() {
+ return Math.random() <= chance && cooldown.useIfAble();
+ },
+ mutate(options) {
+ if (options.chance) chance = options.chance;
+ cooldown.mutate({
+ rechargeTime: options.cooldownPerSpawn,
+ units: options.maxSpawns
+ });
+ }
+ };
+};
+const normalize = v => {
+ const mag = Math.hypot(v.x, v.y, v.z);
+ return {
+ x: v.x / mag,
+ y: v.y / mag,
+ z: v.z / mag
+ };
+}
+const add = a => b => a + b;
+const scaleVector = scale => vector => {
+ vector.x *= scale;
+ vector.y *= scale;
+ vector.z *= scale;
+};
+function cloneVertices(vertices) {
+ return vertices.map(v => ({ x: v.x, y: v.y, z: v.z }));
+}
+function copyVerticesTo(arr1, arr2) {
+ const len = arr1.length;
+ for (let i=0; i {
+ const targetVertex = target[i];
+
+ const x1 = v.x;
+ const y1 = v.z*sinX + v.y*cosX;
+ const z1 = v.z*cosX - v.y*sinX;
+
+ const x2 = x1*cosY - z1*sinY;
+ const y2 = y1;
+ const z2 = x1*sinY + z1*cosY;
+
+ const x3 = x2*cosZ - y2*sinZ;
+ const y3 = x2*sinZ + y2*cosZ;
+ const z3 = z2;
+
+ targetVertex.x = x3 * sX + tX;
+ targetVertex.y = y3 * sY + tY;
+ targetVertex.z = z3 * sZ + tZ;
+ });
+}
+
+const projectVertex = v => {
+ const focalLength = cameraDistance * sceneScale;
+ const depth = focalLength / (cameraDistance - v.z);
+ v.x = v.x * depth;
+ v.y = v.y * depth;
+};
+
+const projectVertexTo = (v, target) => {
+ const focalLength = cameraDistance * sceneScale;
+ const depth = focalLength / (cameraDistance - v.z);
+ target.x = v.x * depth;
+ target.y = v.y * depth;
+};
+
+const PERF_START = () => {};
+const PERF_END = () => {};
+const PERF_UPDATE = () => {};
+
+function makeCubeModel({ scale=1 }) {
+ return {
+ vertices: [
+
+ { x: -scale, y: -scale, z: scale },
+ { x: scale, y: -scale, z: scale },
+ { x: scale, y: scale, z: scale },
+ { x: -scale, y: scale, z: scale },
+
+ { x: -scale, y: -scale, z: -scale },
+ { x: scale, y: -scale, z: -scale },
+ { x: scale, y: scale, z: -scale },
+ { x: -scale, y: scale, z: -scale }
+ ],
+ polys: [
+
+ { vIndexes: [0, 1, 2, 3] },
+
+ { vIndexes: [7, 6, 5, 4] },
+
+ { vIndexes: [3, 2, 6, 7] },
+
+ { vIndexes: [4, 5, 1, 0] },
+
+ { vIndexes: [5, 6, 2, 1] },
+
+ { vIndexes: [0, 3, 7, 4] }
+ ]
+ };
+}
+
+function makeRecursiveCubeModel({ recursionLevel, splitFn, color, scale=1 }) {
+ const getScaleAtLevel = level => 1 / (3 ** level);
+
+ let cubeOrigins = [{ x: 0, y: 0, z: 0 }];
+
+ for (let i=1; i<=recursionLevel; i++) {
+ const scale = getScaleAtLevel(i) * 2;
+ const cubeOrigins2 = [];
+ cubeOrigins.forEach(origin => {
+ cubeOrigins2.push(...splitFn(origin, scale));
+ });
+ cubeOrigins = cubeOrigins2;
+ }
+
+ const finalModel = { vertices: [], polys: [] };
+
+ const cubeModel = makeCubeModel({ scale: 1 });
+ cubeModel.vertices.forEach(scaleVector(getScaleAtLevel(recursionLevel)));
+
+ const maxComponent = getScaleAtLevel(recursionLevel) * (3 ** recursionLevel - 1);
+
+ cubeOrigins.forEach((origin, cubeIndex) => {
+
+ const occlusion = Math.max(
+ Math.abs(origin.x),
+ Math.abs(origin.y),
+ Math.abs(origin.z)
+ ) / maxComponent;
+
+ const occlusionLighter = recursionLevel > 2
+ ? occlusion
+ : (occlusion + 0.8) / 1.8;
+
+ finalModel.vertices.push(
+ ...cubeModel.vertices.map(v => ({
+ x: (v.x + origin.x) * scale,
+ y: (v.y + origin.y) * scale,
+ z: (v.z + origin.z) * scale
+ }))
+ );
+
+ finalModel.polys.push(
+ ...cubeModel.polys.map(poly => ({
+ vIndexes: poly.vIndexes.map(add(cubeIndex * 8))
+ }))
+ );
+ });
+
+ return finalModel;
+}
+
+function mengerSpongeSplit(o, s) {
+ return [
+
+ { x: o.x + s, y: o.y - s, z: o.z + s },
+ { x: o.x + s, y: o.y - s, z: o.z + 0 },
+ { x: o.x + s, y: o.y - s, z: o.z - s },
+ { x: o.x + 0, y: o.y - s, z: o.z + s },
+ { x: o.x + 0, y: o.y - s, z: o.z - s },
+ { x: o.x - s, y: o.y - s, z: o.z + s },
+ { x: o.x - s, y: o.y - s, z: o.z + 0 },
+ { x: o.x - s, y: o.y - s, z: o.z - s },
+
+ { x: o.x + s, y: o.y + s, z: o.z + s },
+ { x: o.x + s, y: o.y + s, z: o.z + 0 },
+ { x: o.x + s, y: o.y + s, z: o.z - s },
+ { x: o.x + 0, y: o.y + s, z: o.z + s },
+ { x: o.x + 0, y: o.y + s, z: o.z - s },
+ { x: o.x - s, y: o.y + s, z: o.z + s },
+ { x: o.x - s, y: o.y + s, z: o.z + 0 },
+ { x: o.x - s, y: o.y + s, z: o.z - s },
+
+ { x: o.x + s, y: o.y + 0, z: o.z + s },
+ { x: o.x + s, y: o.y + 0, z: o.z - s },
+ { x: o.x - s, y: o.y + 0, z: o.z + s },
+ { x: o.x - s, y: o.y + 0, z: o.z - s }
+ ];
+}
+
+function optimizeModel(model, threshold=0.0001) {
+ const { vertices, polys } = model;
+
+ const compareVertices = (v1, v2) => (
+ Math.abs(v1.x - v2.x) < threshold &&
+ Math.abs(v1.y - v2.y) < threshold &&
+ Math.abs(v1.z - v2.z) < threshold
+ );
+
+ const comparePolys = (p1, p2) => {
+ const v1 = p1.vIndexes;
+ const v2 = p2.vIndexes;
+ return (
+ (
+ v1[0] === v2[0] ||
+ v1[0] === v2[1] ||
+ v1[0] === v2[2] ||
+ v1[0] === v2[3]
+ ) && (
+ v1[1] === v2[0] ||
+ v1[1] === v2[1] ||
+ v1[1] === v2[2] ||
+ v1[1] === v2[3]
+ ) && (
+ v1[2] === v2[0] ||
+ v1[2] === v2[1] ||
+ v1[2] === v2[2] ||
+ v1[2] === v2[3]
+ ) && (
+ v1[3] === v2[0] ||
+ v1[3] === v2[1] ||
+ v1[3] === v2[2] ||
+ v1[3] === v2[3]
+ )
+ );
+ };
+
+ vertices.forEach((v, i) => {
+ v.originalIndexes = [i];
+ });
+
+ for (let i=vertices.length-1; i>=0; i--) {
+ for (let ii=i-1; ii>=0; ii--) {
+ const v1 = vertices[i];
+ const v2 = vertices[ii];
+ if (compareVertices(v1, v2)) {
+ vertices.splice(i, 1);
+ v2.originalIndexes.push(...v1.originalIndexes);
+ break;
+ }
+ }
+ }
+
+ vertices.forEach((v, i) => {
+ polys.forEach(p => {
+ p.vIndexes.forEach((vi, ii, arr) => {
+ const vo = v.originalIndexes;
+ if (vo.includes(vi)) {
+ arr[ii] = i;
+ }
+ });
+ });
+ });
+
+ polys.forEach(p => {
+ const vi = p.vIndexes;
+ p.sum = vi[0] + vi[1] + vi[2] + vi[3];
+ });
+ polys.sort((a, b) => b.sum - a.sum);
+
+ for (let i=polys.length-1; i>=0; i--) {
+ for (let ii=i-1; ii>=0; ii--) {
+ const p1 = polys[i];
+ const p2 = polys[ii];
+ if (p1.sum !== p2.sum) break;
+ if (comparePolys(p1, p2)) {
+ polys.splice(i, 1);
+ polys.splice(ii, 1);
+ i--;
+ break;
+ }
+ }
+ }
+
+ return model;
+}
+
+class Entity {
+ constructor({ model, color, wireframe=false }) {
+ const vertices = cloneVertices(model.vertices);
+ const shadowVertices = cloneVertices(model.vertices);
+ const colorHex = colorToHex(color);
+ const darkColorHex = shadeColor(color, 0.4);
+
+ const polys = model.polys.map(p => ({
+ vertices: p.vIndexes.map(vIndex => vertices[vIndex]),
+ color: color,
+ wireframe: wireframe,
+ strokeWidth: wireframe ? 2 : 0,
+ strokeColor: colorHex,
+ strokeColorDark: darkColorHex,
+ depth: 0,
+ middle: { x: 0, y: 0, z: 0 },
+ normalWorld: { x: 0, y: 0, z: 0 },
+ normalCamera: { x: 0, y: 0, z: 0 }
+ }));
+
+ const shadowPolys = model.polys.map(p => ({
+ vertices: p.vIndexes.map(vIndex => shadowVertices[vIndex]),
+ wireframe: wireframe,
+ normalWorld: { x: 0, y: 0, z: 0 }
+ }));
+
+ this.projected = {};
+ this.model = model;
+ this.vertices = vertices;
+ this.polys = polys;
+ this.shadowVertices = shadowVertices;
+ this.shadowPolys = shadowPolys;
+ this.reset();
+ }
+
+ reset() {
+ this.x = 0;
+ this.y = 0;
+ this.z = 0;
+ this.xD = 0;
+ this.yD = 0;
+ this.zD = 0;
+
+ this.rotateX = 0;
+ this.rotateY = 0;
+ this.rotateZ = 0;
+ this.rotateXD = 0;
+ this.rotateYD = 0;
+ this.rotateZD = 0;
+
+ this.scaleX = 1;
+ this.scaleY = 1;
+ this.scaleZ = 1;
+
+ this.projected.x = 0;
+ this.projected.y = 0;
+ }
+
+ transform() {
+ transformVertices(
+ this.model.vertices,
+ this.vertices,
+ this.x,
+ this.y,
+ this.z,
+ this.rotateX,
+ this.rotateY,
+ this.rotateZ,
+ this.scaleX,
+ this.scaleY,
+ this.scaleZ
+ );
+
+ copyVerticesTo(this.vertices, this.shadowVertices);
+ }
+
+ project() {
+ projectVertexTo(this, this.projected);
+ }
+}
+
+const targets = [];
+
+const targetPool = new Map(allColors.map(c=>([c, []])));
+const targetWireframePool = new Map(allColors.map(c=>([c, []])));
+
+const getTarget = (() => {
+
+ const slowmoSpawner = makeSpawner({
+ chance: 0.5,
+ cooldownPerSpawn: 10000,
+ maxSpawns: 1
+ });
+
+ let doubleStrong = false;
+ const strongSpawner = makeSpawner({
+ chance: 0.3,
+ cooldownPerSpawn: 12000,
+ maxSpawns: 1
+ });
+
+ const spinnerSpawner = makeSpawner({
+ chance: 0.1,
+ cooldownPerSpawn: 10000,
+ maxSpawns: 1
+ });
+
+ const axisOptions = [
+ ['x', 'y'],
+ ['y', 'z'],
+ ['z', 'x']
+ ];
+
+ function getTargetOfStyle(color, wireframe) {
+ const pool = wireframe ? targetWireframePool : targetPool;
+ let target = pool.get(color).pop();
+ if (!target) {
+ target = new Entity({
+ model: optimizeModel(makeRecursiveCubeModel({
+ recursionLevel: 1,
+ splitFn: mengerSpongeSplit,
+ scale: targetRadius
+ })),
+ color: color,
+ wireframe: wireframe
+ });
+
+ target.color = color;
+ target.wireframe = wireframe;
+
+ target.hit = false;
+ target.maxHealth = 0;
+ target.health = 0;
+ }
+ return target;
+ }
+
+ return function getTarget() {
+ if (doubleStrong && state.game.score <= doubleStrongEnableScore) {
+ doubleStrong = false;
+
+ } else if (!doubleStrong && state.game.score > doubleStrongEnableScore) {
+ doubleStrong = true;
+ strongSpawner.mutate({ maxSpawns: 2 });
+ }
+
+ let color = pickOne([BLUE, GREEN, ORANGE]);
+ let wireframe = false;
+ let health = 1;
+ let maxHealth = 3;
+ const spinner = state.game.cubeCount >= spinnerThreshold && isInGame() && spinnerSpawner.shouldSpawn();
+
+ if (state.game.cubeCount >= slowmoThreshold && slowmoSpawner.shouldSpawn()) {
+ color = BLUE;
+ wireframe = true;
+ }
+ else if (state.game.cubeCount >= strongThreshold && strongSpawner.shouldSpawn()) {
+ color = PINK;
+ health = 3;
+ }
+
+ const target = getTargetOfStyle(color, wireframe);
+ target.hit = false;
+ target.maxHealth = maxHealth;
+ target.health = health;
+ updateTargetHealth(target, 0);
+
+ const spinSpeeds = [
+ Math.random() * 0.1 - 0.05,
+ Math.random() * 0.1 - 0.05
+ ];
+
+ if (spinner) {
+
+ spinSpeeds[0] = -0.25;
+ spinSpeeds[1] = 0;
+ target.rotateZ = random(0, TAU);
+ }
+
+ const axes = pickOne(axisOptions);
+
+ spinSpeeds.forEach((spinSpeed, i) => {
+ switch (axes[i]) {
+ case 'x':
+ target.rotateXD = spinSpeed;
+ break;
+ case 'y':
+ target.rotateYD = spinSpeed;
+ break;
+ case 'z':
+ target.rotateZD = spinSpeed;
+ break;
+ }
+ });
+
+ return target;
+ }
+})();
+
+const updateTargetHealth = (target, healthDelta) => {
+ target.health += healthDelta;
+
+ if (!target.wireframe) {
+ const strokeWidth = target.health - 1;
+ const strokeColor = makeTargetGlueColor(target);
+ for (let p of target.polys) {
+ p.strokeWidth = strokeWidth;
+ p.strokeColor = strokeColor;
+ }
+ }
+};
+
+const returnTarget = target => {
+ target.reset();
+ const pool = target.wireframe ? targetWireframePool : targetPool;
+ pool.get(target.color).push(target);
+};
+
+function resetAllTargets() {
+ while(targets.length) {
+ returnTarget(targets.pop());
+ }
+}
+
+const frags = [];
+
+const fragPool = new Map(allColors.map(c=>([c, []])));
+const fragWireframePool = new Map(allColors.map(c=>([c, []])));
+
+const createBurst = (() => {
+
+ const basePositions = mengerSpongeSplit({ x:0, y:0, z:0 }, fragRadius*2);
+ const positions = cloneVertices(basePositions);
+ const prevPositions = cloneVertices(basePositions);
+ const velocities = cloneVertices(basePositions);
+
+ const basePositionNormals = basePositions.map(normalize);
+ const positionNormals = cloneVertices(basePositionNormals);
+
+ const fragCount = basePositions.length;
+
+ function getFragForTarget(target) {
+ const pool = target.wireframe ? fragWireframePool : fragPool;
+ let frag = pool.get(target.color).pop();
+ if (!frag) {
+ frag = new Entity({
+ model: makeCubeModel({ scale: fragRadius }),
+ color: target.color,
+ wireframe: target.wireframe
+ });
+ frag.color = target.color;
+ frag.wireframe = target.wireframe;
+ }
+ return frag;
+ }
+
+ return (target, force=1) => {
+
+ transformVertices(
+ basePositions, positions,
+ target.x, target.y, target.z,
+ target.rotateX, target.rotateY, target.rotateZ,
+ 1, 1, 1
+ );
+ transformVertices(
+ basePositions, prevPositions,
+ target.x - target.xD, target.y - target.yD, target.z - target.zD,
+ target.rotateX - target.rotateXD, target.rotateY - target.rotateYD, target.rotateZ - target.rotateZD,
+ 1, 1, 1
+ );
+
+ for (let i=0; i {
+ frag.reset();
+ const pool = frag.wireframe ? fragWireframePool : fragPool;
+ pool.get(frag.color).push(frag);
+};
+
+const sparks = [];
+const sparkPool = [];
+
+function addSpark(x, y, xD, yD) {
+ const spark = sparkPool.pop() || {};
+
+ spark.x = x + xD * 0.5;
+ spark.y = y + yD * 0.5;
+ spark.xD = xD;
+ spark.yD = yD;
+ spark.life = random(200, 300);
+ spark.maxLife = spark.life;
+
+ sparks.push(spark);
+
+ return spark;
+}
+
+function sparkBurst(x, y, count, maxSpeed) {
+ const angleInc = TAU / count;
+ for (let i=0; i {
+ if (Math.random() < 0.4) {
+ projectVertex(v);
+ addSpark(
+ v.x,
+ v.y,
+ random(-12, 12),
+ random(-12, 12)
+ );
+ }
+ });
+}
+
+function returnSpark(spark) {
+ sparkPool.push(spark);
+}
+
+const hudContainerNode = $('.hud');
+
+function setHudVisibility(visible) {
+ if (visible) {
+ hudContainerNode.style.display = 'block';
+ } else {
+ hudContainerNode.style.display = 'none';
+ }
+}
+
+const scoreNode = $('.score-lbl');
+const cubeCountNode = $('.cube-count-lbl');
+
+function renderScoreHud() {
+ if (isCasualGame()) {
+ scoreNode.style.display = 'none';
+ cubeCountNode.style.opacity = 1;
+ } else {
+ scoreNode.innerText = `SCORE: ${state.game.score}`;
+ scoreNode.style.display = 'block';
+ cubeCountNode.style.opacity = 0.65 ;
+ }
+ cubeCountNode.innerText = `CUBES SMASHED: ${state.game.cubeCount}`;
+}
+
+renderScoreHud();
+
+handlePointerDown($('.pause-btn'), () => pauseGame());
+
+const slowmoNode = $('.slowmo');
+const slowmoBarNode = $('.slowmo__bar');
+
+function renderSlowmoStatus(percentRemaining) {
+ slowmoNode.style.opacity = percentRemaining === 0 ? 0 : 1;
+ slowmoBarNode.style.transform = `scaleX(${percentRemaining.toFixed(3)})`;
+}
+
+const menuContainerNode = $('.menus');
+const menuMainNode = $('.menu--main');
+const menuPauseNode = $('.menu--pause');
+const menuScoreNode = $('.menu--score');
+
+const finalScoreLblNode = $('.final-score-lbl');
+const highScoreLblNode = $('.high-score-lbl');
+
+function showMenu(node) {
+ node.classList.add('active');
+}
+
+function hideMenu(node) {
+ node.classList.remove('active');
+}
+
+function renderMenus() {
+ hideMenu(menuMainNode);
+ hideMenu(menuPauseNode);
+ hideMenu(menuScoreNode);
+
+ switch (state.menus.active) {
+ case MENU_MAIN:
+ showMenu(menuMainNode);
+ break;
+ case MENU_PAUSE:
+ showMenu(menuPauseNode);
+ break;
+ case MENU_SCORE:
+ finalScoreLblNode.textContent = formatNumber(state.game.score);
+ if (isNewHighScore()) {
+ highScoreLblNode.textContent = 'New High Score!';
+ } else {
+ highScoreLblNode.textContent = `High Score: ${formatNumber(getHighScore())}`;
+ }
+ showMenu(menuScoreNode);
+ break;
+ }
+
+ setHudVisibility(!isMenuVisible());
+ menuContainerNode.classList.toggle('has-active', isMenuVisible());
+ menuContainerNode.classList.toggle('interactive-mode', isMenuVisible() && pointerIsDown);
+}
+
+renderMenus();
+
+handleClick($('.play-normal-btn'), () => {
+ setGameMode(GAME_MODE_RANKED);
+ setActiveMenu(null);
+ resetGame();
+});
+
+handleClick($('.play-casual-btn'), () => {
+ setGameMode(GAME_MODE_CASUAL);
+ setActiveMenu(null);
+ resetGame();
+});
+
+handleClick($('.resume-btn'), () => resumeGame());
+handleClick($('.menu-btn--pause'), () => setActiveMenu(MENU_MAIN));
+
+handleClick($('.play-again-btn'), () => {
+ setActiveMenu(null);
+ resetGame();
+});
+
+handleClick($('.menu-btn--score'), () => setActiveMenu(MENU_MAIN));
+
+handleClick($('.play-normal-btn'), () => {
+ setGameMode(GAME_MODE_RANKED);
+ setActiveMenu(null);
+ resetGame();
+});
+
+handleClick($('.play-casual-btn'), () => {
+ setGameMode(GAME_MODE_CASUAL);
+ setActiveMenu(null);
+ resetGame();
+});
+
+handleClick($('.resume-btn'), () => resumeGame());
+handleClick($('.menu-btn--pause'), () => setActiveMenu(MENU_MAIN));
+
+handleClick($('.play-again-btn'), () => {
+ setActiveMenu(null);
+ resetGame();
+});
+
+handleClick($('.menu-btn--score'), () => setActiveMenu(MENU_MAIN));
+
+function setActiveMenu(menu) {
+ state.menus.active = menu;
+ renderMenus();
+}
+
+function setScore(score) {
+ state.game.score = score;
+ renderScoreHud();
+}
+
+function incrementScore(inc) {
+ if (isInGame()) {
+ state.game.score += inc;
+ if (state.game.score < 0) {
+ state.game.score = 0;
+ }
+ renderScoreHud();
+ }
+}
+
+function setCubeCount(count) {
+ state.game.cubeCount = count;
+ renderScoreHud();
+}
+
+function incrementCubeCount(inc) {
+ if (isInGame()) {
+ state.game.cubeCount += inc;
+ renderScoreHud();
+ }
+}
+
+function setGameMode(mode) {
+ state.game.mode = mode;
+}
+
+function resetGame() {
+ resetAllTargets();
+ state.game.time = 0;
+ resetAllCooldowns();
+ setScore(0);
+ setCubeCount(0);
+ spawnTime = getSpawnDelay();
+}
+
+function pauseGame() {
+ isInGame() && setActiveMenu(MENU_PAUSE);
+}
+
+function resumeGame() {
+ isPaused() && setActiveMenu(null);
+}
+
+function endGame() {
+ handleCanvasPointerUp();
+ if (isNewHighScore()) {
+ setHighScore(state.game.score);
+ }
+ setActiveMenu(MENU_SCORE);
+}
+
+window.addEventListener('keydown', event => {
+ if (event.key === 'p') {
+ isPaused() ? resumeGame() : pauseGame();
+ }
+});
+
+let spawnTime = 0;
+const maxSpawnX = 450;
+const pointerDelta = { x: 0, y: 0 };
+const pointerDeltaScaled = { x: 0, y: 0 };
+
+const slowmoDuration = 1500;
+let slowmoRemaining = 0;
+let spawnExtra = 0;
+const spawnExtraDelay = 300;
+let targetSpeed = 1;
+
+function tick(width, height, simTime, simSpeed, lag) {
+ PERF_START('frame');
+ PERF_START('tick');
+
+ state.game.time += simTime;
+
+ if (slowmoRemaining > 0) {
+ slowmoRemaining -= simTime;
+ if (slowmoRemaining < 0) {
+ slowmoRemaining = 0;
+ }
+ targetSpeed = pointerIsDown ? 0.075 : 0.3;
+ } else {
+ const menuPointerDown = isMenuVisible() && pointerIsDown;
+ targetSpeed = menuPointerDown ? 0.025 : 1;
+ }
+
+ renderSlowmoStatus(slowmoRemaining / slowmoDuration);
+
+ gameSpeed += (targetSpeed - gameSpeed) / 22 * lag;
+ gameSpeed = clamp(gameSpeed, 0, 1);
+
+ const centerX = width / 2;
+ const centerY = height / 2;
+
+ const simAirDrag = 1 - (airDrag * simSpeed);
+ const simAirDragSpark = 1 - (airDragSpark * simSpeed);
+
+ const forceMultiplier = 1 / (simSpeed * 0.75 + 0.25);
+ pointerDelta.x = 0;
+ pointerDelta.y = 0;
+ pointerDeltaScaled.x = 0;
+ pointerDeltaScaled.y = 0;
+ const lastPointer = touchPoints[touchPoints.length - 1];
+
+ if (pointerIsDown && lastPointer && !lastPointer.touchBreak) {
+ pointerDelta.x = (pointerScene.x - lastPointer.x);
+ pointerDelta.y = (pointerScene.y - lastPointer.y);
+ pointerDeltaScaled.x = pointerDelta.x * forceMultiplier;
+ pointerDeltaScaled.y = pointerDelta.y * forceMultiplier;
+ }
+ const pointerSpeed = Math.hypot(pointerDelta.x, pointerDelta.y);
+ const pointerSpeedScaled = pointerSpeed * forceMultiplier;
+
+ touchPoints.forEach(p => p.life -= simTime);
+
+ if (pointerIsDown) {
+ touchPoints.push({
+ x: pointerScene.x,
+ y: pointerScene.y,
+ life: touchPointLife
+ });
+ }
+
+ while (touchPoints[0] && touchPoints[0].life <= 0) {
+ touchPoints.shift();
+ }
+
+ PERF_START('entities');
+
+ spawnTime -= simTime;
+ if (spawnTime <= 0) {
+ if (spawnExtra > 0) {
+ spawnExtra--;
+ spawnTime = spawnExtraDelay;
+ } else {
+ spawnTime = getSpawnDelay();
+ }
+ const target = getTarget();
+ const spawnRadius = Math.min(centerX * 0.8, maxSpawnX);
+ target.x = (Math.random() * spawnRadius * 2 - spawnRadius);
+ target.y = centerY + targetHitRadius * 2;
+ target.z = (Math.random() * targetRadius*2 - targetRadius);
+ target.xD = Math.random() * (target.x * -2 / 120);
+ target.yD = -20;
+ targets.push(target);
+ }
+
+ const leftBound = -centerX + targetRadius;
+ const rightBound = centerX - targetRadius;
+ const ceiling = -centerY - 120;
+ const boundDamping = 0.4;
+
+ targetLoop:
+ for (let i = targets.length - 1; i >= 0; i--) {
+ const target = targets[i];
+ target.x += target.xD * simSpeed;
+ target.y += target.yD * simSpeed;
+
+ if (target.y < ceiling) {
+ target.y = ceiling;
+ target.yD = 0;
+ }
+
+ if (target.x < leftBound) {
+ target.x = leftBound;
+ target.xD *= -boundDamping;
+ } else if (target.x > rightBound) {
+ target.x = rightBound;
+ target.xD *= -boundDamping;
+ }
+
+ if (target.z < backboardZ) {
+ target.z = backboardZ;
+ target.zD *= -boundDamping;
+ }
+
+ target.yD += gravity * simSpeed;
+ target.rotateX += target.rotateXD * simSpeed;
+ target.rotateY += target.rotateYD * simSpeed;
+ target.rotateZ += target.rotateZD * simSpeed;
+ target.transform();
+ target.project();
+
+ if (target.y > centerY + targetHitRadius * 2) {
+ targets.splice(i, 1);
+ returnTarget(target);
+ if (isInGame()) {
+ if (isCasualGame()) {
+ incrementScore(-25);
+ } else {
+ endGame();
+ }
+ }
+ continue;
+ }
+
+ const hitTestCount = Math.ceil(pointerSpeed / targetRadius * 2);
+
+ for (let ii=1; ii<=hitTestCount; ii++) {
+ const percent = 1 - (ii / hitTestCount);
+ const hitX = pointerScene.x - pointerDelta.x * percent;
+ const hitY = pointerScene.y - pointerDelta.y * percent;
+ const distance = Math.hypot(
+ hitX - target.projected.x,
+ hitY - target.projected.y
+ );
+
+ if (distance <= targetHitRadius) {
+
+ if (!target.hit) {
+ target.hit = true;
+
+ target.xD += pointerDeltaScaled.x * hitDampening;
+ target.yD += pointerDeltaScaled.y * hitDampening;
+ target.rotateXD += pointerDeltaScaled.y * 0.001;
+ target.rotateYD += pointerDeltaScaled.x * 0.001;
+
+ const sparkSpeed = 7 + pointerSpeedScaled * 0.125;
+
+ if (pointerSpeedScaled > minPointerSpeed) {
+ target.health--;
+ incrementScore(10);
+
+ if (target.health <= 0) {
+ incrementCubeCount(1);
+ createBurst(target, forceMultiplier);
+ sparkBurst(hitX, hitY, 8, sparkSpeed);
+ if (target.wireframe) {
+ slowmoRemaining = slowmoDuration;
+ spawnTime = 0;
+ spawnExtra = 2;
+ }
+ targets.splice(i, 1);
+ returnTarget(target);
+ } else {
+ sparkBurst(hitX, hitY, 8, sparkSpeed);
+ glueShedSparks(target);
+ updateTargetHealth(target, 0);
+ }
+ } else {
+ incrementScore(5);
+ sparkBurst(hitX, hitY, 3, sparkSpeed);
+ }
+ }
+
+ continue targetLoop;
+ }
+ }
+
+ target.hit = false;
+ }
+
+ const fragBackboardZ = backboardZ + fragRadius;
+
+ const fragLeftBound = -width;
+ const fragRightBound = width;
+
+ for (let i = frags.length - 1; i >= 0; i--) {
+ const frag = frags[i];
+ frag.x += frag.xD * simSpeed;
+ frag.y += frag.yD * simSpeed;
+ frag.z += frag.zD * simSpeed;
+
+ frag.xD *= simAirDrag;
+ frag.yD *= simAirDrag;
+ frag.zD *= simAirDrag;
+
+ if (frag.y < ceiling) {
+ frag.y = ceiling;
+ frag.yD = 0;
+ }
+
+ if (frag.z < fragBackboardZ) {
+ frag.z = fragBackboardZ;
+ frag.zD *= -boundDamping;
+ }
+
+ frag.yD += gravity * simSpeed;
+ frag.rotateX += frag.rotateXD * simSpeed;
+ frag.rotateY += frag.rotateYD * simSpeed;
+ frag.rotateZ += frag.rotateZD * simSpeed;
+ frag.transform();
+ frag.project();
+
+ if (
+
+ frag.projected.y > centerY + targetHitRadius ||
+
+ frag.projected.x < fragLeftBound ||
+ frag.projected.x > fragRightBound ||
+
+ frag.z > cameraFadeEndZ
+ ) {
+ frags.splice(i, 1);
+ returnFrag(frag);
+ continue;
+ }
+ }
+
+ for (let i = sparks.length - 1; i >= 0; i--) {
+ const spark = sparks[i];
+ spark.life -= simTime;
+ if (spark.life <= 0) {
+ sparks.splice(i, 1);
+ returnSpark(spark);
+ continue;
+ }
+ spark.x += spark.xD * simSpeed;
+ spark.y += spark.yD * simSpeed;
+ spark.xD *= simAirDragSpark;
+ spark.yD *= simAirDragSpark;
+ spark.yD += gravity * simSpeed;
+ }
+
+ PERF_END('entities');
+
+ PERF_START('3D');
+
+ allVertices.length = 0;
+ allPolys.length = 0;
+ allShadowVertices.length = 0;
+ allShadowPolys.length = 0;
+ targets.forEach(entity => {
+ allVertices.push(...entity.vertices);
+ allPolys.push(...entity.polys);
+ allShadowVertices.push(...entity.shadowVertices);
+ allShadowPolys.push(...entity.shadowPolys);
+ });
+
+ frags.forEach(entity => {
+ allVertices.push(...entity.vertices);
+ allPolys.push(...entity.polys);
+ allShadowVertices.push(...entity.shadowVertices);
+ allShadowPolys.push(...entity.shadowPolys);
+ });
+
+ allPolys.forEach(p => computePolyNormal(p, 'normalWorld'));
+ allPolys.forEach(computePolyDepth);
+ allPolys.sort((a, b) => b.depth - a.depth);
+
+ allVertices.forEach(projectVertex);
+
+ allPolys.forEach(p => computePolyNormal(p, 'normalCamera'));
+
+ PERF_END('3D');
+
+ PERF_START('shadows');
+
+ transformVertices(
+ allShadowVertices,
+ allShadowVertices,
+ 0, 0, 0,
+ TAU/8, 0, 0,
+ 1, 1, 1
+ );
+
+ allShadowPolys.forEach(p => computePolyNormal(p, 'normalWorld'));
+
+ const shadowDistanceMult = Math.hypot(1, 1);
+ const shadowVerticesLength = allShadowVertices.length;
+ for (let i=0; i {
+ if (p.wireframe) {
+ ctx.lineWidth = 2;
+ ctx.beginPath();
+ const { vertices } = p;
+ const vCount = vertices.length;
+ const firstV = vertices[0];
+ ctx.moveTo(firstV.x, firstV.y);
+ for (let i=1; i {
+ if (!p.wireframe && p.normalCamera.z < 0) return;
+
+ if (p.strokeWidth !== 0) {
+ ctx.lineWidth = p.normalCamera.z < 0 ? p.strokeWidth * 0.5 : p.strokeWidth;
+ ctx.strokeStyle = p.normalCamera.z < 0 ? p.strokeColorDark : p.strokeColor;
+ }
+
+ const { vertices } = p;
+ const lastV = vertices[vertices.length - 1];
+ const fadeOut = p.middle.z > cameraFadeStartZ;
+
+ if (!p.wireframe) {
+ const normalLight = p.normalWorld.y * 0.5 + p.normalWorld.z * -0.5;
+ const lightness = normalLight > 0
+ ? 0.1
+ : ((normalLight ** 32 - normalLight) / 2) * 0.9 + 0.1;
+ ctx.fillStyle = shadeColor(p.color, lightness);
+ }
+
+ if (fadeOut) {
+
+ ctx.globalAlpha = Math.max(0, 1 - (p.middle.z - cameraFadeStartZ) / cameraFadeRange);
+ }
+
+ ctx.beginPath();
+ ctx.moveTo(lastV.x, lastV.y);
+ for (let v of vertices) {
+ ctx.lineTo(v.x, v.y);
+ }
+
+ if (!p.wireframe) {
+ ctx.fill();
+ }
+ if (p.strokeWidth !== 0) {
+ ctx.stroke();
+ }
+
+ if (fadeOut) {
+ ctx.globalAlpha = 1;
+ }
+ });
+ PERF_END('drawPolys');
+
+ PERF_START('draw2D');
+
+ ctx.strokeStyle = sparkColor;
+ ctx.lineWidth = sparkThickness;
+ ctx.beginPath();
+ sparks.forEach(spark => {
+ ctx.moveTo(spark.x, spark.y);
+
+ const scale = (spark.life / spark.maxLife) ** 0.5 * 1.5;
+ ctx.lineTo(spark.x - spark.xD*scale, spark.y - spark.yD*scale);
+
+ });
+ ctx.stroke();
+
+ ctx.strokeStyle = touchTrailColor;
+ const touchPointCount = touchPoints.length;
+ for (let i=1; i 68) {
+ frameTime = 68;
+ }
+
+ const halfW = width / 2;
+ const halfH = height / 2;
+
+ pointerScene.x = pointerScreen.x / viewScale - halfW;
+ pointerScene.y = pointerScreen.y / viewScale - halfH;
+
+ const lag = frameTime / 16.6667;
+ const simTime = gameSpeed * frameTime;
+ const simSpeed = gameSpeed * lag;
+ tick(width, height, simTime, simSpeed, lag);
+
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+ const drawScale = dpr * viewScale;
+ ctx.scale(drawScale, drawScale);
+ ctx.translate(halfW, halfH);
+ draw(ctx, width, height, viewScale);
+ ctx.setTransform(1, 0, 0, 1, 0, 0);
+ }
+ const raf = () => requestAnimationFrame(frameHandler);
+
+ raf();
+}
+
+function handleCanvasPointerDown(x, y) {
+ if (!pointerIsDown) {
+ pointerIsDown = true;
+ pointerScreen.x = x;
+ pointerScreen.y = y;
+
+ if (isMenuVisible()) renderMenus();
+ }
+}
+
+function handleCanvasPointerUp() {
+ if (pointerIsDown) {
+ pointerIsDown = false;
+ touchPoints.push({
+ touchBreak: true,
+ life: touchPointLife
+ });
+ if (isMenuVisible()) renderMenus();
+ }
+}
+function handleCanvasPointerMove(x, y) {
+ if (pointerIsDown) {
+ pointerScreen.x = x;
+ pointerScreen.y = y;
+ }
+}
+
+if ('PointerEvent' in window) {
+ canvas.addEventListener('pointerdown', event => {
+ event.isPrimary && handleCanvasPointerDown(event.clientX, event.clientY);
+ });
+
+ canvas.addEventListener('pointerup', event => {
+ event.isPrimary && handleCanvasPointerUp();
+ });
+
+ canvas.addEventListener('pointermove', event => {
+ event.isPrimary && handleCanvasPointerMove(event.clientX, event.clientY);
+ });
+
+ document.body.addEventListener('mouseleave', handleCanvasPointerUp);
+} else {
+ let activeTouchId = null;
+ canvas.addEventListener('touchstart', event => {
+ if (!pointerIsDown) {
+ const touch = event.changedTouches[0];
+ activeTouchId = touch.identifier;
+ handleCanvasPointerDown(touch.clientX, touch.clientY);
+ }
+ });
+ canvas.addEventListener('touchend', event => {
+ for (let touch of event.changedTouches) {
+ if (touch.identifier === activeTouchId) {
+ handleCanvasPointerUp();
+ break;
+ }
+ }
+ });
+ canvas.addEventListener('touchmove', event => {
+ for (let touch of event.changedTouches) {
+ if (touch.identifier === activeTouchId) {
+ handleCanvasPointerMove(touch.clientX, touch.clientY);
+ event.preventDefault();
+ break;
+ }
+ }
+ }, { passive: false });
+}
+
+setupCanvases();
\ No newline at end of file
diff --git a/Games/Menja_block_breaker/style.css b/Games/Menja_block_breaker/style.css
new file mode 100644
index 0000000000..87ffba7281
--- /dev/null
+++ b/Games/Menja_block_breaker/style.css
@@ -0,0 +1,242 @@
+body {
+ margin: 0;
+ background-color: #000;
+ background-image: radial-gradient(ellipse at top, #335476 0.0%, #31506e 11.1%, #304b67 22.2%, #2f4760 33.3%, #2d4359 44.4%, #2c3f51 55.6%, #2a3a4a 66.7%, #293643 77.8%, #28323d 88.9%, #262e36 100.0%);
+ height: 100vh;
+ overflow: hidden;
+
+ font-family: monospace;
+ font-weight: bold;
+ letter-spacing: 0.06em;
+ color: rgba(255, 255, 255, 0.75);
+}
+
+#c {
+ display: block;
+ touch-action: none;
+ transform: translateZ(0);
+}
+
+.hud__score,
+.pause-btn {
+ position: fixed;
+ font-size: calc(14px + 2vw + 1vh);
+}
+
+.hud__score {
+ top: 0.65em;
+ left: 0.65em;
+ pointer-events: none;
+ user-select: none;
+}
+
+.cube-count-lbl {
+ font-size: 0.46em;
+}
+
+.pause-btn {
+ position: fixed;
+ top: 0;
+ right: 0;
+ padding: 0.8em 0.65em;
+}
+
+.pause-btn > div {
+ position: relative;
+ width: 0.8em;
+ height: 0.8em;
+ opacity: 0.75;
+}
+
+.pause-btn > div::before,
+.pause-btn > div::after {
+ content: '';
+ display: block;
+ width: 34%;
+ height: 100%;
+ position: absolute;
+ background-color: #fff;
+}
+
+.pause-btn > div::after {
+ right: 0;
+}
+
+.slowmo {
+ position: fixed;
+ bottom: 0;
+ width: 100%;
+ pointer-events: none;
+ opacity: 0;
+ transition: opacity 0.4s;
+ will-change: opacity;
+}
+
+.slowmo::before {
+ content: 'SLOW-MO';
+ display: block;
+ font-size: calc(8px + 1vw + 0.5vh);
+ margin-left: 0.5em;
+ margin-bottom: 8px;
+}
+
+.slowmo::after {
+ content: '';
+ display: block;
+ position: fixed;
+ bottom: 0;
+ width: 100%;
+ height: 1.5vh;
+ background-color: rgba(0, 0, 0, 0.25);
+ z-index: -1;
+}
+
+.slowmo__bar {
+ height: 1.5vh;
+ background-color: rgba(255, 255, 255, 0.75);
+ transform-origin: 0 0;
+}
+.menus::before {
+ content: '';
+ pointer-events: none;
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ background-color: #000;
+ opacity: 0;
+ transition: opacity 0.2s;
+ transition-timing-function: ease-in;
+}
+
+.menus.has-active::before {
+ opacity: 0.08;
+ transition-duration: 0.4s;
+ transition-timing-function: ease-out;
+}
+
+.menus.interactive-mode::before {
+ opacity: 0.02;
+}
+.menu {
+ pointer-events: none;
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ user-select: none;
+ text-align: center;
+ color: rgba(255, 255, 255, 0.9);
+ opacity: 0;
+ visibility: hidden;
+ transform: translateY(30px);
+ transition-property: opacity, visibility, transform;
+ transition-duration: 0.2s;
+ transition-timing-function: ease-in;
+}
+
+.menu.active {
+ opacity: 1;
+ visibility: visible;
+ transform: translateY(0);
+ transition-duration: 0.4s;
+ transition-timing-function: ease-out;
+}
+
+.menus.interactive-mode .menu.active {
+ opacity: 0.6;
+}
+
+.menus:not(.interactive-mode) .menu.active > * {
+ pointer-events: auto;
+}
+h1 {
+ font-size: 4rem;
+ line-height: 0.95;
+ text-align: center;
+ font-weight: bold;
+ margin: 0 0.65em 1em;
+}
+
+h2 {
+ font-size: 1.2rem;
+ line-height: 1;
+ text-align: center;
+ font-weight: bold;
+ margin: -1em 0.65em 1em;
+}
+
+.final-score-lbl {
+ font-size: 5rem;
+ margin: -0.2em 0 0;
+}
+
+.high-score-lbl {
+ font-size: 1.2rem;
+ margin: 0 0 2.5em;
+}
+
+button {
+ display: block;
+ position: relative;
+ width: 200px;
+ padding: 12px 20px;
+ background: transparent;
+ border: none;
+ outline: none;
+ user-select: none;
+ font-family: monospace;
+ font-weight: bold;
+ font-size: 1.4rem;
+ color: #fff;
+ opacity: 0.75;
+ transition: opacity 0.3s;
+}
+
+button::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ background-color: rgba(255, 255, 255, 0.15);
+ transform: scale(0, 0);
+ opacity: 0;
+ transition: opacity 0.3s, transform 0.3s;
+}
+button:active {
+ opacity: 1;
+}
+
+button:active::before {
+ transform: scale(1, 1);
+ opacity: 1;
+}
+
+.credits {
+ position: fixed;
+ width: 100%;
+ left: 0;
+ bottom: 20px;
+}
+
+a {
+ color: white;
+}
+@media (min-width: 1025px) {
+ button:hover {
+ opacity: 1;
+ }
+
+ button:hover::before {
+ transform: scale(1, 1);
+ opacity: 1;
+ }
+}
diff --git a/Games/Penguins_Can't_Fly/Penguins_Can't_Fly1.png b/Games/Penguins_Can't_Fly/Penguins_Can't_Fly1.png
new file mode 100644
index 0000000000..244b26cc73
Binary files /dev/null and b/Games/Penguins_Can't_Fly/Penguins_Can't_Fly1.png differ
diff --git a/Games/Penguins_Can't_Fly/Penguins_Can't_Fly2.png b/Games/Penguins_Can't_Fly/Penguins_Can't_Fly2.png
new file mode 100644
index 0000000000..0fba67a53f
Binary files /dev/null and b/Games/Penguins_Can't_Fly/Penguins_Can't_Fly2.png differ
diff --git a/Games/Penguins_Can't_Fly/Penguins_Can't_Fly3.png b/Games/Penguins_Can't_Fly/Penguins_Can't_Fly3.png
new file mode 100644
index 0000000000..b311fa77ae
Binary files /dev/null and b/Games/Penguins_Can't_Fly/Penguins_Can't_Fly3.png differ
diff --git a/Games/Penguins_Can't_Fly/README.md b/Games/Penguins_Can't_Fly/README.md
new file mode 100644
index 0000000000..6e009d6646
--- /dev/null
+++ b/Games/Penguins_Can't_Fly/README.md
@@ -0,0 +1,19 @@
+# Description #
+The game involves a penguin,shark and clouds with the motive of the penguin to avoid the sharks
+
+# Functionalities #
+1.Theme song
+2.Bounce song
+3.End-of-game song
+4.Score update
+5.Highest score update
+6.The speed of the shark increases every 15 points scored
+
+# How to play #
+1. Press the left arrow to move left
+2. Press the right arrow to move right
+3. Press the down arrow to move down
+4. Moving out of the screen in either direction makes a new penguin appear from the opposite direction
+5. The more the penguin falls, the greater the score
+6. Getting eaten up by the shark ends the game
+7. Press Enter to restart the game
diff --git a/Games/Penguins_Can't_Fly/Terserah.ttf b/Games/Penguins_Can't_Fly/Terserah.ttf
new file mode 100644
index 0000000000..f62f634fc6
Binary files /dev/null and b/Games/Penguins_Can't_Fly/Terserah.ttf differ
diff --git a/Games/Penguins_Can't_Fly/bounce.mp3 b/Games/Penguins_Can't_Fly/bounce.mp3
new file mode 100644
index 0000000000..81efec77ba
Binary files /dev/null and b/Games/Penguins_Can't_Fly/bounce.mp3 differ
diff --git a/Games/Penguins_Can't_Fly/cloud1.png b/Games/Penguins_Can't_Fly/cloud1.png
new file mode 100644
index 0000000000..de1a12d5f9
Binary files /dev/null and b/Games/Penguins_Can't_Fly/cloud1.png differ
diff --git a/Games/Penguins_Can't_Fly/cloud2.png b/Games/Penguins_Can't_Fly/cloud2.png
new file mode 100644
index 0000000000..7520c18596
Binary files /dev/null and b/Games/Penguins_Can't_Fly/cloud2.png differ
diff --git a/Games/Penguins_Can't_Fly/cloud3.png b/Games/Penguins_Can't_Fly/cloud3.png
new file mode 100644
index 0000000000..d8b74844aa
Binary files /dev/null and b/Games/Penguins_Can't_Fly/cloud3.png differ
diff --git a/Games/Penguins_Can't_Fly/game_over.mp3 b/Games/Penguins_Can't_Fly/game_over.mp3
new file mode 100644
index 0000000000..da649b6b69
Binary files /dev/null and b/Games/Penguins_Can't_Fly/game_over.mp3 differ
diff --git a/Games/Penguins_Can't_Fly/high_score.txt b/Games/Penguins_Can't_Fly/high_score.txt
new file mode 100644
index 0000000000..aa92725341
--- /dev/null
+++ b/Games/Penguins_Can't_Fly/high_score.txt
@@ -0,0 +1 @@
+76
\ No newline at end of file
diff --git a/Games/Penguins_Can't_Fly/jetpack_shark.png b/Games/Penguins_Can't_Fly/jetpack_shark.png
new file mode 100644
index 0000000000..54bd0baff8
Binary files /dev/null and b/Games/Penguins_Can't_Fly/jetpack_shark.png differ
diff --git a/Games/Penguins_Can't_Fly/main.py b/Games/Penguins_Can't_Fly/main.py
new file mode 100644
index 0000000000..0c767a5ca7
--- /dev/null
+++ b/Games/Penguins_Can't_Fly/main.py
@@ -0,0 +1,211 @@
+import pygame
+import random
+
+pygame.init()
+pygame.mixer.init() #for music and audio files in pygame
+WIDTH=500
+HEIGHT=650
+fps=60 #sets the framerate-the number of times the timer ticks per second
+timer=pygame.time.Clock()
+font=pygame.font.Font(r"Terserah.ttf",24) #Font style and font size
+huge_font=pygame.font.Font(r"Terserah.ttf",42) #Font style and font size
+pygame.display.set_caption("Penguins Can't Fly")
+
+screen=pygame.display.set_mode([WIDTH,HEIGHT])
+bg=(135,206,235)
+game_over=False
+clouds=[[200,100,1],[50,330,2],[350,330,3],[200,500,1]]
+cloud_images=[]
+for i in range(1,4):
+ img=pygame.image.load(f'cloud{i}.png') #loads new image from a file
+ cloud_images.append(img)
+
+player_x=240
+player_y=40
+penguin=pygame.transform.scale(pygame.image.load('penguin.png'),(50,50)) #scales the penguin to a new dimension
+direction=-1
+y_speed=0
+gravity=0.2
+x_speed=3
+x_direction=0
+score=0
+total_distance=0
+file=open('high_score.txt','r')
+read=file.readlines()
+first_high=int(read[0])
+high_score=first_high
+shark=pygame.transform.scale(pygame.image.load('jetpack_shark.png'),(300,200))
+enemies=[[-234,random.randint(400,HEIGHT-100),1]] #the last value '1' specifies the direction of movement of the shark
+pygame.mixer.music.load('theme.mp3') #Load a music file for playback
+bounce=pygame.mixer.Sound('bounce.mp3') #Create a new Sound object from a file or buffer object
+end_sound=pygame.mixer.Sound('game_over.mp3')
+pygame.mixer.music.play()
+pygame.mixer.music.set_volume(0.2)
+
+
+def draw_clouds(cloud_list,images):
+ platforms=[]
+ for j in range(len(cloud_list)):
+ image=images[cloud_list[j][2]-1]
+ platform=pygame.rect.Rect((cloud_list[j][0]+5,cloud_list[j][1]+40),(120,10)) #displays the rectangle
+ screen.blit(image,(cloud_list[j][0],cloud_list[j][1])) #displays the image drawn on the screen
+ pygame.draw.rect(screen,'gray',[cloud_list[j][0]+5,cloud_list[j][1]+40,120,3])
+ platforms.append(platform)
+ return platforms
+
+def draw_player(x_pos,y_pos,player_img,direc):
+ if direc== -1:
+ player_img=pygame.transform.flip(player_img,False,True) #flips image in the y-direction keeping it unchanged in the x-direction
+ screen.blit(player_img,(x_pos,y_pos)) #draws the player_img onto the screen at the coordinates specified
+ player_rect=pygame.rect.Rect((x_pos+7,y_pos+40),(36,10))
+ #pygame.draw.rect(screen,'green',player_rect,3)
+ return player_rect
+
+def draw_enemies(enemy_list,shark_img):
+ enemy_rects=[]
+ for j in range(len(enemy_list)):
+ enemy_rect=pygame.rect.Rect((enemy_list[j][0]+40,enemy_list[j][1]+50),(215,70))
+ #pygame.draw.rect(screen,'orange',enemy_rect,3)
+ enemy_rects.append(enemy_rect)
+ if(enemy_list[j][2]==1):
+ screen.blit(shark_img,(enemy_list[j][0],enemy_list[j][1]))
+ elif(enemy_list[j][2]==-1):
+ screen.blit(pygame.transform.flip(shark_img,1,0),(enemy_list[j][0],enemy_list[j][1]))
+ return enemy_rects
+
+def move_enemies(enemy_list,current_score):
+ enemy_speed=2+current_score//15
+ for j in range(len(enemy_list)):
+ if(enemy_list[j][2]==1):
+ if(enemy_list[j][0]-235):
+ enemy_list[j][0]-=enemy_speed #increase the x_coord if still on the screen
+ else:
+ enemy_list[j][2]=1 #reverse the direction if off the screen
+ if(enemy_list[j][1]<-100):
+ enemy_list[j][1]=random.randint(HEIGHT,HEIGHT+500) #if the shark goes offscreen in the vertical direction, make a new shark beneath the screen
+ return enemy_list,current_score
+
+def update_objects(cloud_list,play_y,enemy_list):
+ lowest_cloud=0
+ update_speed=5
+ if play_y>200:
+ play_y-=update_speed #moves the player up as well as the clouds up so that it seems that the surrounding is falling
+ for q in range(len(enemy_list)):
+ enemy_list[q][1]-=update_speed
+ for j in range(len(cloud_list)):
+ cloud_list[j][1]-=update_speed
+ if(cloud_list[j][1]>lowest_cloud):
+ lowest_cloud=cloud_list[j][1]
+
+ if lowest_cloud<600: #randomly generate one or two clouds
+ num_clouds=random.randint(1,2)
+ if num_clouds==1:
+ x_pos=random.randint(0,WIDTH-70)
+ y_pos=random.randint(HEIGHT+100,HEIGHT+300)
+ cloud_type=random.randint(1,3)
+ cloud_list.append([x_pos,y_pos,cloud_type])
+ else:
+ x_pos=random.randint(0,WIDTH//2-70) #also ensure that the two clouds generated don't overlap with each other
+ y_pos=random.randint(HEIGHT+100,HEIGHT+300)
+ cloud_type=random.randint(1,3)
+ cloud_list.append([x_pos,y_pos,cloud_type])
+
+ x_pos2=random.randint(WIDTH//2+70,WIDTH-70)
+ y_pos2=random.randint(HEIGHT+100,HEIGHT+300)
+ cloud_type2=random.randint(1,3)
+ cloud_list.append([x_pos2,y_pos2,cloud_type2])
+ return play_y,cloud_list,enemy_list
+
+
+run=True
+while run:
+ screen.fill(bg)
+ timer.tick(fps)
+ cloud_platforms=draw_clouds(clouds,cloud_images)
+ player=draw_player(player_x,player_y,penguin,direction)
+ enemy_boxes=draw_enemies(enemies,shark)
+ enemies,score=move_enemies(enemies,score)
+ player_y,clouds,enemies=update_objects(clouds,player_y,enemies)
+ if game_over:
+ player_y=-300
+ end_text=huge_font.render('Penguins can\'t Fly',True,'black') #draw text on a new Surface
+ end_text2=font.render('Game Over: Press Enter to Restart',True,'black')
+ screen.blit(end_text,(70,20))
+ screen.blit(end_text2,(60,80))
+ y_speed=0
+
+ for i in range(len(cloud_platforms)): #the collsion detection
+ if direction== -1 and player.colliderect(cloud_platforms[i]):
+ y_speed*=-1 #reverses the direction of the penguin
+ if y_speed>-2: #keeps a minimum speed of -2
+ y_speed=-2
+ bounce.play()
+
+
+ for event in pygame.event.get(): #get events from the queue
+ if event.type==pygame.QUIT:
+ run=False
+ if event.type==pygame.KEYDOWN: #a key is pressed
+ if event.key==pygame.K_LEFT: #left arrow is pressed
+ x_direction=-1
+ elif event.key==pygame.K_RIGHT: #right arrow is pressed
+ x_direction=1
+ if event.key==pygame.K_RETURN and game_over:
+ game_over=False
+ player_x=240
+ player_y=40
+ direction=-1
+ y_speed=0
+ x_direction=0
+ score=0
+ total_distance=0
+ enemies=[[-234,random.randint(400,HEIGHT-100),1]]
+ clouds=[[200,100,1],[50,330,2],[350,330,3],[200,500,1]]
+ pygame.mixer.music.play()
+
+ if event.type==pygame.KEYUP: #a key is released
+ if event.key==pygame.K_LEFT:
+ x_direction=0
+ elif event.key==pygame.K_RIGHT:
+ x_direction=0
+
+ if(y_speed<5 and not game_over):
+ y_speed+=gravity #increases the speed in the y-direction
+ player_y+=y_speed #increases the y-position of the penguin
+ if(y_speed<0):
+ direction=1 #if the y-speed is negative penguin is going up
+ else:
+ direction=-1 #else down
+ player_x+=x_speed*x_direction
+ if player_x>WIDTH: #handles the case when the penguin goes off screen in the x-direction
+ player_x=-30
+ elif player_x<-50:
+ player_x=WIDTH-20
+
+ for i in range(len(enemy_boxes)):
+ if player.colliderect(enemy_boxes[i]) and not game_over:
+ end_sound.play()
+ game_over=True
+ if(score>first_high):
+ file=open('high_score.txt','w')
+ write_score=str(score)
+ file.write(write_score)
+ file.close()
+ first_high=score
+
+ total_distance+=y_speed
+ score=round(total_distance/100)
+ score_text=font.render(f'Score: {score}',True,'black')
+ screen.blit(score_text,(10,HEIGHT-70))
+ high_score=max(score,high_score)
+ score_text2=font.render(f'High Score: {high_score}',True,'black')
+ screen.blit(score_text2,(10,HEIGHT-40))
+
+ pygame.display.flip() #Update the full display Surface to the screen
+pygame.quit()
+
diff --git a/Games/Penguins_Can't_Fly/penguin.png b/Games/Penguins_Can't_Fly/penguin.png
new file mode 100644
index 0000000000..cb5a5eabe0
Binary files /dev/null and b/Games/Penguins_Can't_Fly/penguin.png differ
diff --git a/Games/Penguins_Can't_Fly/theme.mp3 b/Games/Penguins_Can't_Fly/theme.mp3
new file mode 100644
index 0000000000..ef9c7dfdb6
Binary files /dev/null and b/Games/Penguins_Can't_Fly/theme.mp3 differ
diff --git a/Games/Penguins_Can't_Fly/wee.mp3 b/Games/Penguins_Can't_Fly/wee.mp3
new file mode 100644
index 0000000000..7a5d1782e1
Binary files /dev/null and b/Games/Penguins_Can't_Fly/wee.mp3 differ
diff --git a/Games/Physics_Quizz/README.md b/Games/Physics_Quizz/README.md
new file mode 100644
index 0000000000..57ce18a954
--- /dev/null
+++ b/Games/Physics_Quizz/README.md
@@ -0,0 +1,25 @@
+# **Physics Quiz**
+
+
+## **Description ๐**
+It is a basic Physics Questions Quiz.
+
+
+
+
+## **Functionalities ๐ฎ**
+
+Player need to find the correct answer to the maximum number of questions within 1 minute/60 seconds.
+
+
+
+## **How to play? ๐น๏ธ**
+
+1. Start the quiz on your preferred platform.
+2. Click on the Start Quiz button to start the quiz.
+3. Your goal is to answer maximum number of questions within 60 seconds.
+
+
+
+## **Screenshots ๐ธ**
+![image](https://github.com/kunjgit/GameZone/assets/168436423/d76615f7-7a71-4178-b54f-d07dbb47cd42)
\ No newline at end of file
diff --git a/Games/Physics_Quizz/assets/background_image.jpeg b/Games/Physics_Quizz/assets/background_image.jpeg
new file mode 100644
index 0000000000..5098048648
Binary files /dev/null and b/Games/Physics_Quizz/assets/background_image.jpeg differ
diff --git a/Games/Physics_Quizz/index.html b/Games/Physics_Quizz/index.html
new file mode 100644
index 0000000000..694fd6dc01
--- /dev/null
+++ b/Games/Physics_Quizz/index.html
@@ -0,0 +1,26 @@
+
+
+
+
+ Quiz App
+
+
+
+
+
+
Physics Quiz Game
+
+
+
Start Quiz
+
+ Time Left: 0
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Games/Physics_Quizz/script.js b/Games/Physics_Quizz/script.js
new file mode 100644
index 0000000000..7d93152600
--- /dev/null
+++ b/Games/Physics_Quizz/script.js
@@ -0,0 +1,186 @@
+const quizQuestions = [
+ {
+ question: "A substance which takes the shape of its container and has a definite volume is a ",
+ options: ["solid", "liquid", "gas", "crystal"],
+ correctAnswer: "liquid"
+ },
+ {
+ question: "What happens to a gas when the temperature decreases ",
+ options: ["It expands", "It rises.", "It condenses", "It becomes less dense."],
+ correctAnswer: "It condenses"
+ },
+ {
+ question: "Any material that does not allow heat to pass through it easily is called ",
+ options: ["conductor", "expand", "contract", "insulator"],
+ correctAnswer: "insulator"
+ },
+ {
+ question: "A material through which heat and electricity flow easily is called ",
+ options: ["Resistancer", "conductor", "Short circuit", "insulator"],
+ correctAnswer: "conductor"
+ },
+ {
+ question: "If you were on the Moon, there would be a change in your ",
+ options: ["weight and mass", "weight", "mass", "voulme"],
+ correctAnswer: "weight"
+ },
+ {
+ question: "The process by which a liquid changes to a gas is called ",
+ options: ["evaporation", "condensation", "precipitation", "transpiration"],
+ correctAnswer: "evaporation"
+ },
+ {
+ question: "The ability to do work is called ",
+ options: ["rest", "force", "motion", "energy"],
+ correctAnswer: "energy"
+ },
+ {
+ question: "A force that occurs when an object rubs against another object ",
+ options: ["friction", "conduction", "thermometer", "radiation"],
+ correctAnswer: "friction"
+ },
+ {
+ question: "Something that makes an object start moving, stop moving, speed up, or slow down is a ",
+ options: ["position", "force", "effort", "load"],
+ correctAnswer: "force"
+ },
+ {
+ question: "The buildup of electric charges in one place is called ",
+ options: ["Static electricity", "Electric charge", "Electric field", "Electric circuit"],
+ correctAnswer: "Static electricity"
+ },
+ {
+ question: "The force that attracts a body toward the center of Earth, or toward any other physical body having mass.",
+ options: ["planet", "weightless", "gravity", "orbit"],
+ correctAnswer: "gravity"
+ },
+ {
+ question: "The atoms in which state shake, but don't move freely?",
+ options: ["liquid", "solid", "gas", "mixture"],
+ correctAnswer: "solid"
+ },
+ {
+ question: "An example of a gas is ",
+ options: ["chocolate syrup", "a rock", " a pencil", "helium"],
+ correctAnswer: "helium"
+ },
+ {
+ question: "The temperature at which a gas becomes a liquid is called the ",
+ options: ["freezing point", "condensation point", "boiling point", "sublimation"],
+ correctAnswer: "boiling point"
+ },
+ {
+ question: "Water freezes at what temperature?",
+ options: ["212 degrees F", "32 degrees C", "32 degrees F", "212 degrees C"],
+ correctAnswer: "32 degrees F"
+ }
+];
+
+// Variables to track quiz state
+let currentQuestionIndex = 0;
+let score = 0;
+let timeLeft = 60;
+let timerInterval;
+
+// Function to start the quiz
+function startQuiz() {
+ document.getElementById("start-button").style.display = "none";
+ displayQuestion();
+ startTimer();
+}
+
+// Function to display a question and its options
+function displayQuestion() {
+ const currentQuestion = quizQuestions[currentQuestionIndex];
+ const questionText = document.getElementById("question-text");
+ const answerButtons = document.getElementById("answer-buttons");
+
+ // Clear previous question and answer options
+ questionText.innerHTML = "";
+ answerButtons.innerHTML = "";
+
+ // Display the current question
+ questionText.innerHTML = currentQuestion.question;
+
+ // Create answer buttons for each option
+ currentQuestion.options.forEach(option => {
+ const button = document.createElement("button");
+ button.innerText = option;
+ button.classList.add("answer-button");
+ answerButtons.appendChild(button);
+
+ // Add click event listener to check the answer
+ button.addEventListener("click", function () {
+ checkAnswer(option, button);
+ });
+ });
+}
+
+// Function to check the selected answer
+function checkAnswer(selectedOption, button) {
+ const currentQuestion = quizQuestions[currentQuestionIndex];
+ const answerButtons = document.getElementById("answer-buttons");
+
+ // Check if the selected answer is correct
+ if (selectedOption === currentQuestion.correctAnswer) {
+ score++;
+ button.style.backgroundColor = "darkgreen";
+ } else {
+ // Indicate the selected answer is wrong
+ button.style.backgroundColor = "red";
+
+ // Display the correct answer if the selected answer is incorrect
+ const correctAnswerElement = document.createElement("div");
+ correctAnswerElement.classList.add("correct-answer");
+ correctAnswerElement.innerText = `Correct Answer: ${currentQuestion.correctAnswer}`;
+ answerButtons.appendChild(correctAnswerElement);
+ }
+
+ // Move to the next question or end the quiz after a short delay
+ setTimeout(() => {
+ currentQuestionIndex++;
+ if (currentQuestionIndex < quizQuestions.length) {
+ displayQuestion();
+ } else {
+ endQuiz();
+ }
+ }, 1000);
+}
+
+// Function to start the timer
+function startTimer() {
+ // Update the timer text immediately
+ document.getElementById("timer").textContent = timeLeft;
+
+ timerInterval = setInterval(function () {
+ timeLeft--;
+
+ // Update the timer text
+ document.getElementById("timer").textContent = timeLeft;
+
+ // End the quiz if time runs out
+ if (timeLeft <= 0) {
+ endQuiz();
+ }
+ }, 1000);
+}
+
+// Function to end the quiz
+function endQuiz() {
+ // Stop the timer
+ clearInterval(timerInterval);
+
+ // Calculate the score percentage
+ const scorePercentage = (score / quizQuestions.length) * 100;
+
+ // Display the final score
+ const questionContainer = document.getElementById("question-container");
+ questionContainer.innerHTML = `
+ Quiz Completed!
+ Your Score: ${score} out of ${quizQuestions.length}
+ Score Percentage: ${scorePercentage}%
+ `;
+}
+
+
+document.getElementById("start-button").addEventListener("click", startQuiz);
diff --git a/Games/Physics_Quizz/style.css b/Games/Physics_Quizz/style.css
new file mode 100644
index 0000000000..bbec90d511
--- /dev/null
+++ b/Games/Physics_Quizz/style.css
@@ -0,0 +1,75 @@
+body {
+ background-color: #f2f2f2;
+ font-family: Arial, sans-serif;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ background-image: url('./background-image/backgroundimage.jpeg');
+ background-size: cover;
+
+}
+
+.quiz-container {
+ max-width: 500px;
+ background-color: #5c50dd;
+ border-radius: 10px;
+ padding: 20px;
+ animation: fadeIn 1s ease-in-out;
+ box-shadow: 0 4px 6px rgba(25, 89, 172, 0.1);
+ transition: box-shadow 0.3s ease-in-out;
+}
+
+h1 {
+ text-align: center;
+
+}
+
+#question-container {
+ margin-bottom: 20px;
+}
+
+#question-text {
+ font-size: 18px;
+ margin-bottom: 10px;
+}
+
+#answer-buttons {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ grid-gap: 10px;
+}
+
+button {
+ height: 40px;
+ font-size: 16px;
+ background-color: #dfdedf;
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+}
+
+button:hover {
+ background-color: #26c488;
+}
+
+#controls-container {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ font-weight: "bold";
+}
+
+#timer-container {
+ display: flex;
+ align-items: center;
+}
+
+#timer-text {
+ font-size: 14px;
+}
+
+#timer {
+ font-weight: bold;
+ margin-left: 5px;
+}
\ No newline at end of file
diff --git a/Games/Quick_Click/README.md b/Games/Quick_Click/README.md
new file mode 100644
index 0000000000..a8e368f522
--- /dev/null
+++ b/Games/Quick_Click/README.md
@@ -0,0 +1,39 @@
+Quick Click Game using HTML, CSS, and JavaScript. The game features a grid of square , with one square becoming active randomly to show a Different Colour. The player must click the active square to score points. The game will end if the player clicks a non-active Square or when the timer reaches zero.
+
+Features
+
+ Play memory game with short musical notes.
+ Difficulty levels to adjust the number of musical pairs.
+ Track your score and high score.
+ Clean and responsive design for any device.
+How to Play
+
+ Clicking the start button initializes the game with a score of 0 and a timer set to 60 seconds.
+ A Yellow Square appears randomly in one of the squares every second.
+
+ Scoring:
+
+ Clicking the active square (with the Yellow Square) increments the score by 1.
+ The Yellow Square disappears and reappears in another random square.
+
+ Game End Conditions:
+
+ Clicking a non-active square ends the game with a "You Lose!" message.
+ The timer reaching zero ends the game with a "Time's Up! Game Over!" message displaying the final score.
+
+ Resetting:
+
+ At the end of the game, the active Yellow Square disappears, event listeners are removed, and the start button is re-enabled.
+
+Technologies Used
+
+ HTML: Creates the structure of the game board and interface.
+ CSS: Styles the game elements for a visually appealing experience.
+ JavaScript: Manages the game logic, including card flipping, matching sounds, and scorekeeping.
+Running the Game
+
+ Ensure you have a web browser installed on your computer (e.g., Chrome, Firefox, Safari).
+ Clone or download the project files.
+ Open the index.html file in your web browser.
+ The game should launch and be ready to play!
+
diff --git a/Games/Quick_Click/assets/Images/image.png b/Games/Quick_Click/assets/Images/image.png
new file mode 100644
index 0000000000..41d0f7dc35
Binary files /dev/null and b/Games/Quick_Click/assets/Images/image.png differ
diff --git a/Games/Quick_Click/index.html b/Games/Quick_Click/index.html
new file mode 100644
index 0000000000..9c345b7c68
--- /dev/null
+++ b/Games/Quick_Click/index.html
@@ -0,0 +1,33 @@
+
+
+
+
+
+
+ Quick Click
+
+
+
+
+ Quick Click
+
+ Score: 0
+ Time: 60 s
+
+
+ Start Game
+
+
+
+
+
\ No newline at end of file
diff --git a/Games/Quick_Click/script.js b/Games/Quick_Click/script.js
new file mode 100644
index 0000000000..03e9b10968
--- /dev/null
+++ b/Games/Quick_Click/script.js
@@ -0,0 +1,61 @@
+const circles = document.querySelectorAll('.circle');
+const scoreDisplay = document.getElementById('score');
+const timeDisplay = document.getElementById('time');
+const startButton = document.getElementById('start');
+let score = 0;
+let activeCircle = null;
+let gameTimer = null;
+let countdownTimer = null;
+let timeLeft = 60;
+
+function randomCircle() {
+ circles.forEach(circle => circle.classList.remove('active'));
+ const randomIndex = Math.floor(Math.random() * circles.length);
+ activeCircle = circles[randomIndex];
+ activeCircle.classList.add('active');
+ console.log("Random Circle Selected:", activeCircle);
+}
+
+function startGame() {
+ score = 0;
+ timeLeft = 60;
+ scoreDisplay.textContent = score;
+ timeDisplay.textContent = timeLeft;
+ startButton.disabled = true;
+ randomCircle();
+ gameTimer = setInterval(randomCircle, 1000);
+ countdownTimer = setInterval(countDown, 1000);
+ circles.forEach(circle => circle.addEventListener('click', whack));
+ console.log("Game Started");
+}
+
+function whack(event) {
+ if (event.target === activeCircle) {
+ score++;
+ scoreDisplay.textContent = score;
+ activeCircle.classList.remove('active');
+ randomCircle();
+ } else {
+ endGame('You Lose!');
+ }
+}
+
+function countDown() {
+ timeLeft--;
+ timeDisplay.textContent = timeLeft;
+ if (timeLeft <= 0) {
+ endGame('Time\'s Up! Game Over!');
+ }
+}
+
+function endGame(message) {
+ console.log("Game Ended:", message);
+ clearInterval(gameTimer);
+ clearInterval(countdownTimer);
+ circles.forEach(circle => circle.classList.remove('active'));
+ circles.forEach(circle => circle.removeEventListener('click', whack));
+ startButton.disabled = false;
+ alert(`${message} Your final score is ${score}`);
+}
+
+startButton.addEventListener('click', startGame);
\ No newline at end of file
diff --git a/Games/Quick_Click/style.css b/Games/Quick_Click/style.css
new file mode 100644
index 0000000000..5bd09e6d77
--- /dev/null
+++ b/Games/Quick_Click/style.css
@@ -0,0 +1,48 @@
+body {
+ font-family: Arial, sans-serif;
+ text-align: center;
+ background-color: #f0f0f0;
+ margin: 0;
+ padding: 0;
+}
+
+h1 {
+ margin-top: 20px;
+}
+
+.scoreboard {
+ margin: 20px 0;
+ font-size: 1.5em;
+}
+
+.grid {
+ display: grid;
+ grid-template-columns: repeat(3, 100px);
+ grid-gap: 10px;
+ justify-content: center;
+ margin: 20px auto;
+}
+
+.circle {
+ width: 100px;
+ height: 100px;
+ background-color: #ccc;
+ border-radius: 50%;
+ position: relative;
+ cursor: pointer;
+}
+
+.circle.active {
+ background-image: url('GameZone\Games\Reflex_text\Mole2.jpg');
+ background-size: cover;
+ background-position: center;
+ background-color: #ffd700;
+ /* Fallback background color */
+}
+
+button {
+ margin-top: 20px;
+ padding: 10px 20px;
+ font-size: 1em;
+ cursor: pointer;
+}
\ No newline at end of file
diff --git a/Games/Reverse Memory Game b/Games/Reverse Memory Game
new file mode 100644
index 0000000000..8b13789179
--- /dev/null
+++ b/Games/Reverse Memory Game
@@ -0,0 +1 @@
+
diff --git a/Games/Reverse Memory/README.md b/Games/Reverse Memory/README.md
new file mode 100644
index 0000000000..178c314332
--- /dev/null
+++ b/Games/Reverse Memory/README.md
@@ -0,0 +1,44 @@
+# Reverse Memory Game
+
+The Reverse Memory Game is a fun and challenging memory game where you must recall a sequence of colors in reverse order. With each successful recall, the sequence length increases, making the game progressively harder.
+
+## How to Play
+
+1. **Select Grid Size**: Choose the grid size (3x3, 4x4, 5x5, or 6x6) from the dropdown menu.
+2. **Start Game**: Click the "Start Game" button to begin.
+3. **Memorize Colors**: A color will briefly appear on one of the grid squares. Memorize its position.
+4. **Recall Sequence**: After the color disappears, click the grid squares in the reverse order of the sequence shown.
+5. **Level Up**: If you recall the sequence correctly, a new color will be added to the sequence. Continue to recall the sequence in reverse order as the length increases.
+6. **Game Over**: If you select the wrong grid square, the game will end and prompt you to try again.
+
+## Features
+
+- **Reverse Memory**: Recall colors in reverse order for a unique challenge.
+- **Level Up System**: Sequence length increases with each correct recall.
+- **Customizable Grid Size**: Choose from 3x3, 4x4, 5x5, or 6x6 grid sizes.
+- **Simple Interface**: Easy to learn with a familiar grid and vibrant colors.
+- **Feedback**: Visual cues for right and wrong answers to enhance engagement.
+
+## Setup and Installation
+
+1. **Clone the repository**:
+ ```sh
+ git clone https://github.com/your-username/reverse-memory-game.git
+2. cd reverse-memory-game
+3. Run the HTML file in your Browser
+4. Play and make fun
+
+reverse-memory-game/
+โโโ index.html
+โโโ styles.css
+โโโ script.js
+
+## License
+This project is licensed under the MIT License.
+
+## Contributing
+Contributions are welcome! Feel free to open an issue or submit a pull request.
+
+## Acknowledgments
+This game was inspired by classic memory games and is designed to challenge and improve your memory skills.
+Special thanks to the contributors and the open-source community for their support.
diff --git a/Games/Reverse Memory/index.html b/Games/Reverse Memory/index.html
new file mode 100644
index 0000000000..4ac10f0583
--- /dev/null
+++ b/Games/Reverse Memory/index.html
@@ -0,0 +1,29 @@
+
+
+
+
+
+ Reverse Memory Game
+
+
+
+
+
Reverse Memory Game
+
+ Select Grid Size:
+
+ 3x3
+ 4x4
+ 5x5
+ 6x6
+
+ Start Game
+
+
+
+
+
+
+
+
+
diff --git a/Games/Reverse Memory/script.js b/Games/Reverse Memory/script.js
new file mode 100644
index 0000000000..69fff3c3ce
--- /dev/null
+++ b/Games/Reverse Memory/script.js
@@ -0,0 +1,128 @@
+const colors = ['#e57373', '#81c784', '#64b5f6', '#ffd54f', '#ba68c8', '#ff8a65'];
+let gridSize = 3;
+let sequence = [];
+let userSequence = [];
+let level = 0;
+
+document.addEventListener('DOMContentLoaded', () => {
+ const gridContainer = document.getElementById('grid-container');
+ const startButton = document.getElementById('start-button');
+ const gridSizeSelect = document.getElementById('grid-size');
+ const status = document.getElementById('status');
+
+ // Start button click event
+ startButton.addEventListener('click', startGame);
+
+ // Grid size change event
+ gridSizeSelect.addEventListener('change', (e) => {
+ gridSize = parseInt(e.target.value);
+ createGrid();
+ });
+
+ // Square click event
+ gridContainer.addEventListener('click', (e) => {
+ if (e.target.classList.contains('grid-square')) {
+ handleSquareClick(e.target.dataset.index);
+ }
+ });
+
+ function createGrid() {
+ gridContainer.innerHTML = '';
+ gridContainer.style.gridTemplateColumns = `repeat(${gridSize}, 100px)`;
+ for (let i = 0; i < gridSize * gridSize; i++) {
+ const square = document.createElement('div');
+ square.classList.add('grid-square');
+ square.dataset.index = i;
+ gridContainer.appendChild(square);
+ }
+ }
+
+ function startGame() {
+ level = 0;
+ sequence = [];
+ userSequence = [];
+ status.textContent = 'Game started!';
+ nextLevel();
+ }
+
+ function nextLevel() {
+ level++;
+ userSequence = [];
+ const randomSquare = Math.floor(Math.random() * gridSize * gridSize);
+ const newColor = colors[Math.floor(Math.random() * colors.length)];
+ sequence.push({ index: randomSquare, color: newColor });
+ displaySequence();
+ }
+
+ function displaySequence() {
+ let i = 0;
+ const interval = setInterval(() => {
+ const squareData = sequence[i];
+ const square = document.querySelector(`[data-index='${squareData.index}']`);
+ showColor(square, squareData.color);
+ i++;
+ if (i >= sequence.length) {
+ clearInterval(interval);
+ }
+ }, 1000);
+ }
+
+ function showColor(square, color) {
+ const originalColor = square.style.backgroundColor;
+ square.style.backgroundColor = color;
+ setTimeout(() => {
+ square.style.backgroundColor = originalColor;
+ }, 500);
+ }
+
+ function handleSquareClick(index) {
+ if (userSequence.length < sequence.length) {
+ const square = document.querySelector(`[data-index='${index}']`);
+ const squareData = sequence[sequence.length - userSequence.length - 1];
+ showColor(square, squareData.color);
+ userSequence.push({ index: parseInt(index), color: squareData.color });
+
+ // Check the sequence after each click
+ if (!checkPartialSequence()) {
+ status.textContent = 'Wrong! Try again.';
+ resetGame();
+ return;
+ }
+
+ // If the full sequence is entered, validate it
+ if (userSequence.length === sequence.length) {
+ if (checkSequence()) {
+ status.textContent = 'Correct! Next level...';
+ setTimeout(nextLevel, 1000);
+ } else {
+ status.textContent = 'Wrong! Try again.';
+ resetGame();
+ }
+ }
+ }
+ }
+
+ function checkPartialSequence() {
+ // Check the user sequence against the reversed sequence up to the current length
+ for (let i = 0; i < userSequence.length; i++) {
+ if (userSequence[i].index !== sequence[sequence.length - 1 - i].index) {
+ return false;
+ }
+ }
+ return true;
+ }
+
+ function checkSequence() {
+ // Check if the entire user sequence matches the reversed game sequence
+ return userSequence.every((data, index) => data.index === sequence[sequence.length - 1 - index].index);
+ }
+
+ function resetGame() {
+ sequence = [];
+ userSequence = [];
+ level = 0;
+ }
+
+ // Create the initial grid
+ createGrid();
+});
diff --git a/Games/Reverse Memory/styles.css b/Games/Reverse Memory/styles.css
new file mode 100644
index 0000000000..2f06af729e
--- /dev/null
+++ b/Games/Reverse Memory/styles.css
@@ -0,0 +1,84 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
+
+body {
+ font-family: 'Roboto', sans-serif;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ margin: 0;
+ background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
+}
+
+#game-container {
+ text-align: center;
+ background-color: rgba(255, 255, 255, 0.9);
+ padding: 20px;
+ border-radius: 15px;
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+}
+
+h1 {
+ color: #333;
+ margin-bottom: 20px;
+}
+
+#controls {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin-bottom: 20px;
+}
+
+#grid-size {
+ margin-left: 10px;
+ padding: 5px;
+ font-size: 16px;
+ border-radius: 5px;
+ border: 1px solid #ccc;
+}
+
+#grid-container {
+ display: grid;
+ grid-gap: 10px;
+ margin: 20px auto;
+}
+
+.grid-square {
+ width: 100px;
+ height: 100px;
+ background-color: #ddd;
+ border: 2px solid #ccc;
+ cursor: pointer;
+ transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
+ border-radius: 10px;
+}
+
+.grid-square:hover {
+ transform: scale(1.1);
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+}
+
+#start-button {
+ padding: 10px 20px;
+ font-size: 16px;
+ cursor: pointer;
+ background-color: #333;
+ color: white;
+ border: none;
+ border-radius: 10px;
+ transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
+ margin-left: 10px;
+}
+
+#start-button:hover {
+ background-color: #555;
+ transform: scale(1.1);
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+}
+
+#status {
+ margin-top: 20px;
+ font-size: 18px;
+ color: #333;
+}
diff --git a/Games/Taash Game/README.md b/Games/Taash Game/README.md
new file mode 100644
index 0000000000..747d250379
--- /dev/null
+++ b/Games/Taash Game/README.md
@@ -0,0 +1,12 @@
+# Taash Game
+The player has to get a hand with a value as close to 21 as possible without going over.
+A hand that goes over 21 is a bust.
+The players in a Taash Game plays against the dealer. Each player has to beat the dealer's hand in order to win.
+
+In Taash Game, the suits have no meaning.
+1. Number cards have a value equal to their number.
+2. All the picture cards (Jacks, Queens, and Kings) are worth 10.
+3. Aces are worth 1.
+4. The table keeps a record of total wins,loses and draws
+5. Click on "Restart" Button to start a new game
+6. Click on "Deal" Button to clear the field
diff --git a/Games/Taash Game/images/10.png b/Games/Taash Game/images/10.png
new file mode 100644
index 0000000000..01be5daa37
Binary files /dev/null and b/Games/Taash Game/images/10.png differ
diff --git a/Games/Taash Game/images/2.png b/Games/Taash Game/images/2.png
new file mode 100644
index 0000000000..2f1d24063f
Binary files /dev/null and b/Games/Taash Game/images/2.png differ
diff --git a/Games/Taash Game/images/3.png b/Games/Taash Game/images/3.png
new file mode 100644
index 0000000000..7c804ae15b
Binary files /dev/null and b/Games/Taash Game/images/3.png differ
diff --git a/Games/Taash Game/images/4.png b/Games/Taash Game/images/4.png
new file mode 100644
index 0000000000..ea50674261
Binary files /dev/null and b/Games/Taash Game/images/4.png differ
diff --git a/Games/Taash Game/images/5.png b/Games/Taash Game/images/5.png
new file mode 100644
index 0000000000..f456f1e71d
Binary files /dev/null and b/Games/Taash Game/images/5.png differ
diff --git a/Games/Taash Game/images/6.png b/Games/Taash Game/images/6.png
new file mode 100644
index 0000000000..46b86bcc59
Binary files /dev/null and b/Games/Taash Game/images/6.png differ
diff --git a/Games/Taash Game/images/7.png b/Games/Taash Game/images/7.png
new file mode 100644
index 0000000000..1a21883717
Binary files /dev/null and b/Games/Taash Game/images/7.png differ
diff --git a/Games/Taash Game/images/8.png b/Games/Taash Game/images/8.png
new file mode 100644
index 0000000000..277705b131
Binary files /dev/null and b/Games/Taash Game/images/8.png differ
diff --git a/Games/Taash Game/images/9.png b/Games/Taash Game/images/9.png
new file mode 100644
index 0000000000..b3fdc074b0
Binary files /dev/null and b/Games/Taash Game/images/9.png differ
diff --git a/Games/Taash Game/images/A.png b/Games/Taash Game/images/A.png
new file mode 100644
index 0000000000..bb25fee819
Binary files /dev/null and b/Games/Taash Game/images/A.png differ
diff --git a/Games/Taash Game/images/J.png b/Games/Taash Game/images/J.png
new file mode 100644
index 0000000000..7960a94e7a
Binary files /dev/null and b/Games/Taash Game/images/J.png differ
diff --git a/Games/Taash Game/images/K.png b/Games/Taash Game/images/K.png
new file mode 100644
index 0000000000..c9d1c990ea
Binary files /dev/null and b/Games/Taash Game/images/K.png differ
diff --git a/Games/Taash Game/images/Q.png b/Games/Taash Game/images/Q.png
new file mode 100644
index 0000000000..6499247e29
Binary files /dev/null and b/Games/Taash Game/images/Q.png differ
diff --git a/Games/Taash Game/index.html b/Games/Taash Game/index.html
new file mode 100644
index 0000000000..2d05937546
--- /dev/null
+++ b/Games/Taash Game/index.html
@@ -0,0 +1,62 @@
+
+
+
+
+ Taash Game
+
+
+
+
+
+
+
Taash Game
+
Let's Play
+
+
+
+
You: 0
+
+
+
+
Dealer: 0
+
+
+
+
+
+
+ Hit
+
+
+ Stand
+
+
+ Deal
+
+
+ Restart
+
+
+
+
+
+
+
+
+
+
+
+
+ 0
+ 0
+ 0
+
+
+
+
+
+
+
diff --git a/Games/Taash Game/script.js b/Games/Taash Game/script.js
new file mode 100644
index 0000000000..b38f56eeed
--- /dev/null
+++ b/Games/Taash Game/script.js
@@ -0,0 +1,250 @@
+let blackjackGame = {
+ you: {
+ scoreSpan: "#your-blackjack-result",
+ div: "#your-box",
+ boxSize: ".flex-blackjack-row-2 div",
+ score: 0,
+ },
+
+ dealer: {
+ scoreSpan: "#dealer-blackjack-result",
+ div: "#dealer-box",
+ boxSize: ".flex-blackjack-row-2 div",
+ score: 0,
+ },
+
+ cards: ["2", "3", "4", "5", "6", "7", "8", "9", "10", "K", "J", "Q", "A"],
+
+ cardsMap: {
+ 2: 2,
+ 3: 3,
+ 4: 4,
+ 5: 5,
+ 6: 6,
+ 7: 7,
+ 8: 8,
+ 9: 9,
+ 10: 10,
+ K: 10,
+ J: 10,
+ Q: 10,
+ A: [1, 11],
+ },
+
+ wins: 0,
+ losses: 0,
+ draws: 0,
+ isStand: false,
+ isTurnsOver: false,
+ pressOnce: false,
+};
+
+const YOU = blackjackGame["you"];
+const DEALER = blackjackGame["dealer"];
+
+const hitSound = new Audio("sounds/swish.m4a");
+const winSound = new Audio("sounds/cash.mp3");
+const loseSound = new Audio("sounds/aww.mp3");
+
+let windowWidth = window.screen.width;
+let windowHeight = window.screen.height;
+let winner;
+
+//Button Event Listeners
+document
+ .querySelector("#blackjack-hit-button")
+ .addEventListener("click", blackjackHit);
+document
+ .querySelector("#blackjack-stand-button")
+ .addEventListener("click", blackjackStand);
+document
+ .querySelector("#blackjack-deal-button")
+ .addEventListener("click", blackjackDeal);
+document
+ .querySelector("#blackjack-reset-button")
+ .addEventListener("click", blackjackRestart);
+
+function blackjackHit() {
+ if (blackjackGame["isStand"] === false) {
+ let card = randomCard();
+ showCard(card, YOU);
+ updateScore(card, YOU);
+ showScore(YOU);
+ }
+}
+
+function randomCard() {
+ let randomIndex = Math.floor(Math.random() * 13);
+ return blackjackGame["cards"][randomIndex];
+}
+
+function showCard(card, activePlayer) {
+ if (activePlayer["score"] <= 21) {
+ let cardImage = document.createElement("img");
+ cardImage.src = `images/${card}.png`;
+ cardImage.style = `width:${widthSize()}; height:${heightSize()};`;
+ document.querySelector(activePlayer["div"]).appendChild(cardImage);
+ hitSound.play();
+ }
+}
+
+function widthSize() {
+ if (windowWidth > 1000) {
+ let newWidthSize = window.screen.width * 0.1;
+ return newWidthSize;
+ } else {
+ return window.screen.width * 0.18;
+ }
+}
+
+function heightSize() {
+ if (windowHeight > 700) {
+ let newHeightSize = window.screen.height * 0.18;
+ return newHeightSize;
+ } else {
+ return window.screen.height * 0.15;
+ }
+}
+
+function updateScore(card, activePlayer) {
+ if (card === "A") {
+ if (activePlayer["score"] + blackjackGame["cardsMap"][card][1] <= 21) {
+ activePlayer["score"] += blackjackGame["cardsMap"][card][1];
+ } else {
+ activePlayer["score"] += blackjackGame["cardsMap"][card][0];
+ }
+ } else {
+ activePlayer["score"] += blackjackGame["cardsMap"][card];
+ }
+
+ console.log(activePlayer["score"]);
+}
+
+function showScore(activePlayer) {
+ //Bust logic if score is over 21
+ if (activePlayer["score"] > 21) {
+ document.querySelector(activePlayer["scoreSpan"]).textContent = "BUST!";
+ document.querySelector(activePlayer["scoreSpan"]).style.color = "red";
+ } else {
+ document.querySelector(activePlayer["scoreSpan"]).textContent =
+ activePlayer["score"];
+ }
+}
+
+function blackjackStand() {
+ if (blackjackGame.pressOnce === false) {
+ blackjackGame["isStand"] = true;
+ let yourImages = document
+ .querySelector("#your-box")
+ .querySelectorAll("img");
+
+ for (let i = 0; i < yourImages.length; i++) {
+ let card = randomCard();
+ showCard(card, DEALER);
+ updateScore(card, DEALER);
+ showScore(DEALER);
+ }
+
+ blackjackGame["isTurnsOver"] = true;
+
+ computeWinner();
+ showWinner(winner);
+ }
+
+ blackjackGame.pressOnce = true;
+}
+
+function computeWinner() {
+ if (YOU["score"] <= 21) {
+ if (YOU["score"] > DEALER["score"] || DEALER["score"] > 21) {
+ winner = YOU;
+ } else if (YOU["score"] < DEALER["score"]) {
+ winner = DEALER;
+ } else if (YOU["score"] === DEALER["score"]) {
+ winner = "Draw";
+ }
+ } else if (YOU["score"] > 21 && DEALER["score"] <= 21) {
+ winner = DEALER;
+ } else if (YOU["score"] > 21 && DEALER["score"] > 21) {
+ winner = "None";
+ }
+
+ return winner;
+}
+
+function showWinner(winner) {
+ let message, messageColor;
+
+ if (winner === YOU) {
+ message = "You Won";
+ messageColor = "#00e676";
+ document.querySelector("#wins").textContent = blackjackGame["wins"] += 1;
+ winSound.play();
+ } else if (winner === DEALER) {
+ message = "You Lost";
+ messageColor = "red";
+ document.querySelector("#losses").textContent = blackjackGame[
+ "losses"
+ ] += 1;
+ loseSound.play();
+ } else if (winner === "Draw") {
+ message = "You Drew";
+ messageColor = "yellow";
+ document.querySelector("#draws").textContent = blackjackGame["draws"] += 1;
+ loseSound.play();
+ } else if (winner === "None") {
+ message = "You Both Busted!";
+ messageColor = "orange";
+ loseSound.play();
+ }
+
+ document.querySelector("#blackjack-result").textContent = message;
+ document.querySelector("#blackjack-result").style.color = messageColor;
+}
+
+function blackjackDeal() {
+ if (blackjackGame["isTurnsOver"] === true) {
+ // Select all the images in both the user and dealer box
+ let yourImages = document
+ .querySelector("#your-box")
+ .querySelectorAll("img");
+ let dealerImages = document
+ .querySelector("#dealer-box")
+ .querySelectorAll("img");
+
+ document.querySelector("#blackjack-result").style.color = "white";
+
+ //Sets the user and dealers scors to zero
+ YOU["score"] = DEALER["score"] = 0;
+ document.querySelector("#your-blackjack-result").textContent = 0;
+ document.querySelector("#dealer-blackjack-result").textContent = 0;
+
+ //Reset color back to white
+ document.querySelector("#your-blackjack-result").style.color = "white";
+ document.querySelector("#dealer-blackjack-result").style.color = "white";
+
+ //Reset to Let's Play
+ document.querySelector("#blackjack-result").textContent = "Lets Play";
+
+ //Removes the cards in the user's box
+ for (let i = 0; i < yourImages.length; i++) {
+ yourImages[i].remove();
+ dealerImages[i].remove();
+ }
+
+ blackjackGame["isStand"] = false;
+ blackjackGame.pressOnce = false;
+ blackjackGame["isTurnsOver"] = false;
+ }
+}
+
+function blackjackRestart() {
+ blackjackDeal();
+ document.querySelector("#wins").textContent = 0;
+ document.querySelector("#losses").textContent = 0;
+ document.querySelector("#draws").textContent = 0;
+
+ blackjackGame.wins = 0;
+ blackjackGame.losses = 0;
+ blackjackGame.draws = 0;
+}
diff --git a/Games/Taash Game/sounds/aww.mp3 b/Games/Taash Game/sounds/aww.mp3
new file mode 100644
index 0000000000..1a57bae92e
Binary files /dev/null and b/Games/Taash Game/sounds/aww.mp3 differ
diff --git a/Games/Taash Game/sounds/cash.mp3 b/Games/Taash Game/sounds/cash.mp3
new file mode 100644
index 0000000000..0aa9e10e6f
Binary files /dev/null and b/Games/Taash Game/sounds/cash.mp3 differ
diff --git a/Games/Taash Game/sounds/clap.mp3 b/Games/Taash Game/sounds/clap.mp3
new file mode 100644
index 0000000000..8b13789179
--- /dev/null
+++ b/Games/Taash Game/sounds/clap.mp3
@@ -0,0 +1 @@
+
diff --git a/Games/Taash Game/sounds/swish.m4a b/Games/Taash Game/sounds/swish.m4a
new file mode 100644
index 0000000000..1e27ba6840
Binary files /dev/null and b/Games/Taash Game/sounds/swish.m4a differ
diff --git a/Games/Taash Game/style.css b/Games/Taash Game/style.css
new file mode 100644
index 0000000000..f0ce85e2cc
--- /dev/null
+++ b/Games/Taash Game/style.css
@@ -0,0 +1,65 @@
+body {
+ background: url("https://images.pexels.com/photos/956999/milky-way-starry-sky-night-sky-star-956999.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
+ background-repeat: no-repeat;
+ background-size: cover;
+
+ padding:10px;
+}
+
+
+.container {
+ margin: 0 auto;
+ text-align: center;
+ color: white;
+ width:75%;
+
+}
+
+.flex-blackjack-row-1,
+.flex-blackjack-row-2,
+.flex-blackjack-row-3 {
+ display: flex;
+ padding: 5px;
+ flex-wrap: wrap;
+ flex-direction: row;
+ justify-content: space-evenly;
+}
+
+.flex-blackjack-row-2 div {
+ padding: 10px;
+ border: 1px solid black;
+
+ flex: 1;
+ height: 350px;
+ text-align: center;
+}
+
+.flex-blackjack-row-2 div img {
+ padding: 10px;
+}
+
+table {
+ border: 3px solid black;
+ border-collapse: collapse;
+ padding:10px;
+ width:45%;
+ background-color: white;
+ text-align: center;
+}
+table td {
+ border: 2px solid black;
+}
+
+.flex-blackjack-row-3 div {
+ padding: 5px;
+}
+
+.flex-blackjack-row-3 button {
+ padding: 10 px;
+ margin-bottom: 10px;
+}
+
+.flex-blackjack-row-2, .flex-blackjack-row-3{
+ background-image: url(https://i.stack.imgur.com/q02th.jpg);
+ border: 3px solid black;
+}
diff --git a/Games/Tic_Tac_Toe/README.md b/Games/Tic_Tac_Toe/README.md
index a0925b7e2c..0f10a277e3 100644
--- a/Games/Tic_Tac_Toe/README.md
+++ b/Games/Tic_Tac_Toe/README.md
@@ -1,29 +1,32 @@
-# **Tic_Tac_Toe**
-
----
-
-
-
-## **Description ๐**
-- X and O have to play turn by turn.
-- whose ever turn it is ,it will be displayed on screen.
-
-
-## **Functionalities ๐ฎ**
-- There is sound on each and every turn.
-- The gif will appear if any one wins.
-- The game can also restart in between if required.
-
-
-## **How to play? ๐น๏ธ**
-- X player always plays first.He can click on any 9 of the boxes.
-- Next is O's urn he can click in any 9 of the boxes.
-- If any 3 appear the same either X or O in row,column or digonally then he wins.
-
-
-
-## **Screenshots ๐ธ**
-
-![image](..//..//assets/images/Tic_Tac_Toe.png)
-
-
+---
+
+# Tic Tac Toe Game
+
+Welcome to Tic Tac Toe Game!, a classic game of Tic Tac Toe brought to life with HTML, CSS, and JavaScript. This simple yet engaging web application allows users to enjoy the timeless game in a modern and interactive way.
+
+## Features:
+
+- **Responsive Design:** Play the game seamlessly on any device, thanks to the responsive design that adapts to various screen sizes.
+
+- **Intuitive Interface:** The user-friendly interface makes it easy for players to understand the game rules and navigate through the application effortlessly.
+
+- **CSS Animations:** Enjoy subtle and appealing animations that enhance the gaming experience, creating a visually pleasing atmosphere.
+
+- **Smart AI Opponent (Coming Soon):** Test your skills against a computer opponent with an intelligent AI. The AI adapts to your moves, providing a challenging single-player experience.
+
+## How to Play:
+
+1. Clone the repository to your local machine.
+2. Open the [Tic-Tac-Toe](https://oxoxgame.netlify.app/) in your preferred web browser.
+3. Start a new game and take turns with your opponent to place your X or O on the grid.
+4. The first player to get three in a row (horizontally, vertically, or diagonally) wins the game.
+
+## Technologies Used:
+
+- **HTML:** The structure of the game.
+- **CSS:** Styling and animations for a visually appealing experience.
+- **JavaScript:** Logic for gameplay, user interaction, and implementing the Tic Tac Toe rules.
+
+Feel free to report issues, or suggest improvements. Let the Tic Tac Toe battles begin!
+
+---
diff --git a/Games/Tic_Tac_Toe/confetti.gif b/Games/Tic_Tac_Toe/confetti.gif
new file mode 100644
index 0000000000..9ad928fc11
Binary files /dev/null and b/Games/Tic_Tac_Toe/confetti.gif differ
diff --git a/Games/Tic_Tac_Toe/favicon.png b/Games/Tic_Tac_Toe/favicon.png
new file mode 100644
index 0000000000..4ebd3d36b4
Binary files /dev/null and b/Games/Tic_Tac_Toe/favicon.png differ
diff --git a/Games/Tic_Tac_Toe/sounds/gameover.mp3 b/Games/Tic_Tac_Toe/gameover.mp3
similarity index 100%
rename from Games/Tic_Tac_Toe/sounds/gameover.mp3
rename to Games/Tic_Tac_Toe/gameover.mp3
diff --git a/Games/Tic_Tac_Toe/index.html b/Games/Tic_Tac_Toe/index.html
index 03bb0c29ac..30118aa2e3 100644
--- a/Games/Tic_Tac_Toe/index.html
+++ b/Games/Tic_Tac_Toe/index.html
@@ -1,48 +1,44 @@
-
-
-
-
-
-
- Tic Tac Toe
-
-
-
-
-
-
-
- My Tic Tac Toe Game
-
-
-
-
Welcome to Simran's Tic Tac Toe Game
-
-
-
-
-
-
- Turn for X
-
-
Reset
-
-
-
-
-
-
-
-
-
\ No newline at end of file
+
+
+
+
+
+
+
+
+ Tic Tac Toe
+
+
+
+
+
TIC TAC TOE
+
+ Player 1 :
+
+ Player 2 :
+
+ Start
+
+
+
+
+
+
+
Reset
+
+
+
+
+
+
diff --git a/Games/Tic_Tac_Toe/sounds/music.mp3 b/Games/Tic_Tac_Toe/music.mp3
similarity index 100%
rename from Games/Tic_Tac_Toe/sounds/music.mp3
rename to Games/Tic_Tac_Toe/music.mp3
diff --git a/Games/Tic_Tac_Toe/script.js b/Games/Tic_Tac_Toe/script.js
index a02e7545c3..4c145c52d3 100644
--- a/Games/Tic_Tac_Toe/script.js
+++ b/Games/Tic_Tac_Toe/script.js
@@ -1,100 +1,96 @@
-let music = new Audio("sounds/music.mp3");
-let audioTurn = new Audio("sounds/ting.mp3");
-let gameover = new Audio("sounds/gameover.mp3");
-let turn = "X";
-let isgameover = false;
+let gameoverAudio = new Audio("gameover.mp3")
+let turnAudio = new Audio("ting.mp3")
+let turn = 'X'
+let gameover = false;
+let music = new Audio("music.mp3")
+
+const info = document.querySelector('.info')
+const reset = document.querySelector('#reset')
+const start = document.querySelector('#start')
+const playerInfo = document.querySelector('.playerInfo')
+const gameContainer = document.querySelector('.gameContainer')
+const p1 = document.querySelector('.p1')
+const p2 = document.querySelector('.p2')
+const line = document.querySelector('.line')
+
+
+start.addEventListener('click', () => {
+ playerInfo.style.display = 'none';
+ gameContainer.style.display = 'flex';
+ info.innerText = 'Turn for ' + p1.value + ' (' + turn + ')';
+ music.play()
+})
-music.play();
-// Function to change the turn
const changeTurn = () => {
- return turn === "X" ? "0" : "X";
-};
+ return turn === 'X' ? 'O' : 'X';
+}
-// Function to check for a win
const checkWin = () => {
- let boxtext = document.getElementsByClassName("boxtext");
- let wins = [
- [0, 1, 2, 5, 5, 0],
- [3, 4, 5, 5, 15, 0],
- [6, 7, 8, 5, 25, 0],
- [0, 3, 6, -5, 15, 90],
- [1, 4, 7, 5, 15, 90],
- [2, 5, 8, 15, 15, 90],
- [0, 4, 8, 5, 15, 45],
- [2, 4, 6, 5, 15, 135],
- ];
- let isDraw = true; // Flag to check if it's a draw
-
- wins.forEach((e) => {
- if (
- boxtext[e[0]].innerText === boxtext[e[1]].innerText &&
- boxtext[e[2]].innerText === boxtext[e[1]].innerText &&
- boxtext[e[0]].innerText !== ""
- ) {
- document.querySelector(".info").innerText =
- boxtext[e[0]].innerText + " Won";
- music.pause();
- gameover.play();
- music.play();
- isgameover = true;
- document
- .querySelector(".imgbox")
- .getElementsByTagName("img")[0].style.width = "200px";
- document.querySelector(
- ".line"
- ).style.transform = `translate(${e[3]}vw, ${e[4]}vw) rotate(${e[5]}deg)`;
- document.querySelector(".line").style.width = "20vw";
- isDraw = false;
- document.querySelector(".imgbox").style.display = "block";
- }
- });
+ let boxText = document.querySelectorAll('.boxText')
+ let wins = [
+ [0, 1, 2, '24%', 0,0],
+ [3, 4, 5, '50%', 0,0],
+ [6, 7, 8, '75%', 0,0],
+ [0, 3, 6, '50%', '-34%','90'],
+ [1, 4, 7, '50%', 0,'90'],
+ [2, 5, 8, '50%', '33%','90'],
+ [0, 4, 8, '50%',0,'45'],
+ [2, 4, 6, '50%', 0,'135']
+ ]
+ wins.forEach(e => {
+ if ((boxText[e[0]].innerText === boxText[e[1]].innerText) && (boxText[e[2]].innerText === boxText[e[1]].innerText) && (boxText[e[0]].innerText !== '')) {
+ if (boxText[e[0]].innerText === 'X') {
+ info.innerText = p1.value + ' Wins !'
+ } else {
+ info.innerText = p2.value + ' Wins !'
+ }
+ document.querySelector('.confetti').style.visibility = 'visible';
+ line.style.visibility = 'visible'
+ line.style.top = e[3];
+ line.style.left = e[4];
+ line.style.transform = `rotate(${e[5]}deg)`;
+ music.pause()
+ music.currentTime = 0;
+ gameoverAudio.play()
+ gameover = true;
+ }
+ })
+}
- // Check for a draw
- if (isDraw) {
- let filledBoxes = Array.from(boxtext).every(
- (element) => element.innerText !== ""
- );
- if (filledBoxes) {
- document.querySelector(".info").innerText = "It's a Draw!";
- music.pause();
- gameover.play();
- music.play();
- isgameover = true;
- }
- }
-};
+let boxes = document.querySelectorAll('.box')
+Array.from(boxes).forEach((e) => {
+ let boxText = e.querySelector('.boxText')
+ e.addEventListener("click", () => {
+ if (boxText.innerText === '') {
+ boxText.innerText = turn
+ turnAudio.play();
+ turn = changeTurn();
+ checkWin();
+ if (!gameover) {
+ if (turn === 'X') {
+ info.innerText = 'Turn for ' + p1.value + ' (' + turn + ')';
+ } else {
+ info.innerText = 'Turn for ' + p2.value + ' (' + turn + ')';
-// Game Logic
-music.play();
-let boxes = document.getElementsByClassName("box");
-Array.from(boxes).forEach((element) => {
- let boxtext = element.querySelector(".boxtext");
- element.addEventListener("click", () => {
- if (boxtext.innerText === "") {
- boxtext.innerText = turn;
- turn = changeTurn();
- audioTurn.play();
- checkWin();
- if (!isgameover) {
- document.getElementsByClassName("info")[0].innerText =
- "Turn for " + turn;
- }
- }
- });
-});
+ }
+ }
+ }
+ })
-// Add onclick listener to reset button
-reset.addEventListener("click", () => {
+})
- document.querySelector(".imgbox").style.display = "none";
+reset.addEventListener('click', () => {
+ let boxText = document.querySelectorAll('.boxText')
+ Array.from(boxText).forEach(e => {
+ e.innerText = ''
+ turn = 'X'
+ info.innerText = 'Turn for ' + p1.value + ' (' + turn + ')';
+ document.querySelector('.confetti').style.visibility = 'hidden';
+ line.style.transform = '';
+ line.style.visibility = 'hidden'
+ gameover = false;
+ music.play()
- let boxtexts = document.querySelectorAll(".boxtext");
- Array.from(boxtexts).forEach((element) => {
- element.innerText = "";
- });
- turn = "X";
- isgameover = false;
- document.querySelector(".line").style.width = "0vw";
- document.getElementsByClassName("info")[0].innerText = "Turn for " + turn;
-});
\ No newline at end of file
+ })
+})
diff --git a/Games/Tic_Tac_Toe/sounds/excited.gif b/Games/Tic_Tac_Toe/sounds/excited.gif
deleted file mode 100644
index ac0ecac27e..0000000000
Binary files a/Games/Tic_Tac_Toe/sounds/excited.gif and /dev/null differ
diff --git a/Games/Tic_Tac_Toe/style.css b/Games/Tic_Tac_Toe/style.css
index b9dfe77dd1..19949d23ef 100644
--- a/Games/Tic_Tac_Toe/style.css
+++ b/Games/Tic_Tac_Toe/style.css
@@ -1,170 +1,156 @@
-@import url("https://fonts.googleapis.com/css2?family=Baloo+Bhaina+2&family=Roboto&display=swap");
* {
- margin: 0;
- padding: 0;
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ color: #d62828;
+ font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
body {
- background-color: #e4f9f5;
+ height: 100vh;
+ background-color: #eae2b7;
+ display: flex;
+ justify-content: center;
+ align-items: center;
}
-nav {
- background-color: #66bfbf;
- color: white;
- height: 70px;
- font-size: 27px;
- display: flex;
- align-items: center;
- font-family: "Roboto", sans-serif;
- justify-content: center;
+.card {
+ padding: 2rem;
+ border-radius: 40px;
+ display: flex;
+ background-color: #fcbf49;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
}
-nav ul {
- list-style-type: none;
+.heading {
+ color: #003049;
+}
+
+.heading:hover {
+ color: #d62828;
+}
+
+.info {
+ margin: 1rem;
}
.gameContainer {
- display: flex;
- align-items: center;
- flex-direction: row-reverse;
- justify-content: center;
- margin-top: 7%;
+ display: none;
+ flex-direction: column;
+ margin: auto;
+ justify-content: center;
+ align-items: center;
+ margin-top: 10px;
+ margin-bottom: 10px;
+ position: relative;
+
}
.container {
- width: 80%;
- display: grid;
- grid-template-rows: repeat(3, 10vw);
- grid-template-columns: repeat(3, 10vw);
- font-family: "Roboto", sans-serif;
- position: relative;
+ display: grid;
+ grid-template-rows: repeat(3, 7vw);
+ grid-template-columns: repeat(3, 7vw);
}
-.box {
- border: 2px solid black;
- font-size: 7vw;
- cursor: pointer;
- display: flex;
- justify-content: center;
- align-items: center;
+.line {
+ background-color: #003049;
+ height: 3px;
+ width: 20vw;
+ position: absolute;
+ visibility: hidden;
}
-.box:hover {
- background-color: #c1ece4;
+.playerInfo {
+ display: flex;
+ flex-direction: column;
+ padding: 1rem;
+ font-size: large;
}
-.info {
- position: absolute;
- /* right: 1260px; */
- font-size: 2.1rem;
- font-weight: 1000;
- padding-left: 50px;
- padding-right: 50px;
- text-align: center;
-
- color: #66bfbf;
+label,
+input {
+ margin: 0.5rem;
+ font-size: large;
+ padding: 0.5rem;
+ border: none;
+ border-radius: 10px;
+}
+
+input:focus {
+ outline: #d62828da solid;
+
}
-.gameInfo {
- text-align: center;
- width: 100%;
- padding-top: 15px;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- font-family: "Baloo Bhaina 2", cursive;
- color: #66bfbf;
+.box {
+ border: 2px solid #f77f00;
+ cursor: pointer;
+ font-size: 5vw;
+ display: flex;
+ justify-content: center;
+ align-items: center;
}
-.gameInfo h1 {
- font-size: 2.5rem;
+.box:hover {
+ background-color: #ff8400a9;
}
-.gaming {
- display: flex;
- gap: 30px;
- margin-top: 30px;
+
+#reset,
+#start {
+ border-color: #f77f00;
+ border-radius: 10px;
+ font-size: large;
+ margin-top: 1.4rem;
+ padding: 0.5rem;
+ cursor: pointer;
+ z-index: 2;
}
-.imgbox {
- margin-top: 20px;
+.confetti {
+ position: absolute;
+ visibility: hidden;
+ z-index: 1;
+ width: 400px;
}
-.imgbox img {
- width: 0;
- transition: width 1s ease-in-out;
+@media screen and (max-width:770px) {
+ .gameContainer {
+ flex-wrap: wrap;
+ }
+
+ .container {
+ grid-template-rows: repeat(3, 17vw);
+ grid-template-columns: repeat(3, 17vw);
+ }
+
+ .box{
+ font-size: 20vw;
+ }
+
+ .line {
+ width: 51vw;
+ }
+
+ .card {
+ height: fit-content;
+ width: 80vw;
+ }
}
.br-0 {
- border-right: 0;
+ border-right: 0;
}
.bl-0 {
- border-left: 0;
+ border-left: 0;
}
.bt-0 {
- border-top: 0;
+ border-top: 0;
}
.bb-0 {
- border-bottom: 0;
-}
-
-#reset {
- margin: 0 23px;
- padding: 4px 30px;
- background: #e4f9f5;
- border: 3px solid #66bfbf;
- border-radius: 6px;
- cursor: pointer;
- font-family: "Baloo Bhaina 2";
- font-size: 20px;
- color: #66bfbf;
- font-weight: bolder;
- position: relative;
- top: 270px;
- right: -7px;
-}
-#reset:hover {
- background-color: #66bfbf;
- color: #ffffff;
-}
-
-.line {
- background-color: black;
- height: 7px;
- width: 0;
- position: absolute;
- background-color: #57c5b6;
- transition: width 1s ease-in-out;
-}
-
-@media screen and (max-width: 1000px) {
- .gameContainer {
- flex-direction: column-reverse;
- }
- .gameInfo {
- width: 100%;
- margin-top: 34px;
- }
- .gameInfo h1 {
- font-size: 1.5rem;
- }
- .container {
- width: 60%;
- grid-template-rows: repeat(3, 18vw);
- grid-template-columns: repeat(3, 20vw);
- position: relative;
- bottom: 25px;
- }
- .info{
- top: 226px;
- right: 1rem;
- }
- #reset{
- position:relative;
- top: 590px;
- }
+ border-bottom: 0;
}
\ No newline at end of file
diff --git a/Games/Tic_Tac_Toe/sounds/ting.mp3 b/Games/Tic_Tac_Toe/ting.mp3
similarity index 100%
rename from Games/Tic_Tac_Toe/sounds/ting.mp3
rename to Games/Tic_Tac_Toe/ting.mp3
diff --git a/Games/Treasure Hunt/README.md b/Games/Treasure Hunt/README.md
new file mode 100644
index 0000000000..2ca20e30fd
--- /dev/null
+++ b/Games/Treasure Hunt/README.md
@@ -0,0 +1,31 @@
+# Treasure Hunt
+
+Treasure Hunt is a simple and fun game where players navigate through a grid to find hidden treasures. Use your intuition and a bit of luck to uncover the treasure in the least number of attempts!
+
+## How to Play
+
+1. **Objective**: Find the hidden treasure on the grid.
+2. **Gameplay**:
+ - Click on any cell in the 3x3 grid to search for the treasure.
+ - If the cell contains the treasure, you'll see the treasure image.
+ - If the cell does not contain the treasure, you'll see a wrong guess image.
+ - The game will display the number of attempts you have made.
+3. **Restart**:
+ - Click the "Restart" button to start a new game.
+
+## Features
+
+- **Visual Feedback**: Different images for treasure and wrong guesses.
+- **Attempts Counter**: Keep track of the number of attempts made to find the treasure.
+- **Restart Functionality**: Easily restart the game to play again.
+
+## Screenshots
+
+![Treasure Hunt](../../assets/images/Treasure_Hunt.png)
+
+## Try It Out
+
+You can try out the game by opening the `index.html` file in your web browser.
+
+
+
diff --git a/Games/Treasure Hunt/assets/cell-bg.png b/Games/Treasure Hunt/assets/cell-bg.png
new file mode 100644
index 0000000000..422daf101e
Binary files /dev/null and b/Games/Treasure Hunt/assets/cell-bg.png differ
diff --git a/Games/Treasure Hunt/assets/treasure.png b/Games/Treasure Hunt/assets/treasure.png
new file mode 100644
index 0000000000..e96c77af53
Binary files /dev/null and b/Games/Treasure Hunt/assets/treasure.png differ
diff --git a/Games/Treasure Hunt/assets/wrong.png b/Games/Treasure Hunt/assets/wrong.png
new file mode 100644
index 0000000000..8e17cd9b00
Binary files /dev/null and b/Games/Treasure Hunt/assets/wrong.png differ
diff --git a/Games/Treasure Hunt/index.html b/Games/Treasure Hunt/index.html
new file mode 100644
index 0000000000..e0186f56d6
--- /dev/null
+++ b/Games/Treasure Hunt/index.html
@@ -0,0 +1,28 @@
+
+
+
+
+
+ Treasure Hunt
+
+
+
+ Treasure Hunt
+
+ Find the hidden treasure!
+ Restart
+
+
+
diff --git a/Games/Treasure Hunt/script.js b/Games/Treasure Hunt/script.js
new file mode 100644
index 0000000000..23e9ab2832
--- /dev/null
+++ b/Games/Treasure Hunt/script.js
@@ -0,0 +1,37 @@
+// Game variables
+const cells = document.querySelectorAll('.cell');
+const clueElement = document.getElementById('clue');
+const restartButton = document.getElementById('restart-button');
+let treasureLocation;
+let attempts;
+
+// Function to start/restart the game
+function startGame() {
+ // Hide treasure and reset attempts
+ cells.forEach(cell => cell.style.backgroundImage = 'url("assets/cell-bg.png")');
+ treasureLocation = Math.floor(Math.random() * 9) + 1;
+ attempts = 0;
+ clueElement.innerText = 'Find the hidden treasure!';
+}
+
+// Function to handle cell click
+function handleCellClick(event) {
+ const cellId = parseInt(event.target.id.split('-')[1]);
+ attempts++;
+ if (cellId === treasureLocation) {
+ event.target.style.backgroundImage = 'url("assets/treasure.png")';
+ clueElement.innerText = `Congratulations! You found the treasure in ${attempts} attempts.`;
+ } else {
+ event.target.style.backgroundImage = 'url("assets/wrong.png")';
+ clueElement.innerText = `Keep looking! Attempts: ${attempts}`;
+ }
+}
+
+// Add event listeners to cells
+cells.forEach(cell => cell.addEventListener('click', handleCellClick));
+
+// Add event listener to restart button
+restartButton.addEventListener('click', startGame);
+
+// Start the game initially
+startGame();
diff --git a/Games/Treasure Hunt/styles.css b/Games/Treasure Hunt/styles.css
new file mode 100644
index 0000000000..c9cf241e8c
--- /dev/null
+++ b/Games/Treasure Hunt/styles.css
@@ -0,0 +1,49 @@
+body {
+ font-family: Arial, sans-serif;
+ text-align: center;
+ background-color: #f0f0f0;
+ margin: 0;
+ padding: 20px;
+}
+
+h1 {
+ margin-bottom: 20px;
+}
+
+#game-container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin-bottom: 20px;
+}
+
+#map {
+ display: grid;
+ grid-template-columns: repeat(3, 100px);
+ grid-template-rows: repeat(3, 100px);
+ gap: 10px;
+}
+
+.cell {
+ width: 100px;
+ height: 100px;
+ background-image: url('assets/cell-bg.png');
+ background-size: cover;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 24px;
+ cursor: pointer;
+ border: 2px solid #ccc;
+}
+
+#clue {
+ font-size: 18px;
+ margin-bottom: 20px;
+}
+
+#restart-button {
+ padding: 10px 20px;
+ font-size: 16px;
+ cursor: pointer;
+}
diff --git a/Games/Turn_on_the_light/README.md b/Games/Turn_on_the_light/README.md
new file mode 100644
index 0000000000..56a7c1ae00
--- /dev/null
+++ b/Games/Turn_on_the_light/README.md
@@ -0,0 +1,54 @@
+# Turn On the Light
+
+Turn On the Light is a web-based puzzle game where players rotate cable segments to turn on the light by connecting all segments correctly.
+
+## Table of Contents
+
+- [Installation](#installation)
+- [Usage](#usage)
+- [Game Rules](#game-rules)
+- [Levels](#levels)
+- [Credits](#credits)
+
+## Installation
+
+1. Clone the repository:
+ ```
+ git clone https://github.com/yourusername/turn-on-the-light.git
+ ```
+2. Navigate to the project directory:
+ ```
+ cd turn-on-the-light
+ ```
+
+## Usage
+
+1. Open `index.html` in your web browser to start the game.
+2. The game will load and you can start playing by following the instructions on the screen.
+
+## Game Rules
+
+- Click on cable segments to rotate them clockwise.
+- Align all segments correctly to complete the circuit and turn on the light.
+- The game consists of multiple levels, each with increasing difficulty.
+
+## Levels
+
+The game includes 12 levels. Each level is represented by a 5x4 matrix. The segments are described in the `levels` array in `script.js`.
+
+## **Screenshots ๐ธ**
+
+![Turn_on_the_light](https://github.com/kunjgit/GameZone/assets/images/turnonthelight.jpg)
+
+
+
+## **Created By ๐ฆ**
+
+[Vijay Shanker Sharma](https://github.com/thevijayshankersharma)
+
+
+
+## Credits
+- Libraries: [jQuery](https://jquery.com/), [Hammer.js](https://hammerjs.github.io/)
+
+
diff --git a/Games/Turn_on_the_light/index.html b/Games/Turn_on_the_light/index.html
new file mode 100644
index 0000000000..ff0f5168e5
--- /dev/null
+++ b/Games/Turn_on_the_light/index.html
@@ -0,0 +1,44 @@
+
+
+
+
+
+
+
+ Turn On the Light
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
TURN ON
+
THE LIGHT
+
Level: 0
+
Moves: 0
+
+
+
+
+ Click on cable
+ segments to rotate
+ clockwise until all
+ the segments are in
+ the correct position.
+
+
+
+
NEXT LEVEL
+
+
+
+
diff --git a/Games/Turn_on_the_light/script.js b/Games/Turn_on_the_light/script.js
new file mode 100644
index 0000000000..8f5c4adc7c
--- /dev/null
+++ b/Games/Turn_on_the_light/script.js
@@ -0,0 +1,270 @@
+var playing = true;
+// levels.length = 12 (number of levels)
+// each element of levels array is composed of an array
+// The game board is a 5x4 matrix
+// I define values for the sides of
+// each cell of the 5x4 matrix:
+// 1 = top
+// 2 = right
+// 3 = bottom
+// 4 = left
+// each element of this sub array defines
+// the piece (.blocks) of the game starting top-left
+// each of the values define what to show,
+// example: 141_90
+ // 14 indicates that the curved line
+ // will go from top (1) to left (4)
+ // the third caharacter is a 1
+ // this indicates where to draw the arrow
+ // as this 3rd character is 1,
+ // the arrow will be shown at top
+ // the underscore separates the arrow
+ // definition from the initial rotation (deg)
+ // this deg values can be 0 (no rotation al all)
+ // is deg===0 then the brick background is shown
+// there are some special values for this elements:
+ // x = brick with a cross
+ // y = brick with top-right & bottom-left lines
+ // z = brick with top-left & bottom-right lines
+var levels = [
+ ["122_0","242_90","242_0","242_-90","141_0"],
+ ["122_180","343_0","","232_0","141_90","","122_90","242_-90","141_-90"],
+ ["x","343_90","232_-90","244_180","131_90","122_-90","242_-180","y","z","141_90","","122_-90","122_-90","141_90"],
+ ["133_90","343_-90","232_180","242_90","141_-90","122_90","y","121_90","x","344_-90","233_90","122_-90","343_90","z","141_180","121_90","242_0","122_180","141_90"],
+ ["122_90","343_180","232_90","242_180","141_-90","233_180","z","x","y","344_180","133_90","y","z","z","141_90","122_180","242_-90","141_180","233_180","121_-90"],
+ ["y","242_90","343_-90","232_180","z","232_90","242_180","x","141_180","141_180","131_90","122_180","x","244_-90","344_90","122_0","244_180","144_90","122_90","144_0"],
+ ["122_90","343_-90","232_180","242_-90","141_-90","233_180","z","z","242_90","343_90","133_180","121_180","x","344_90","133_-90","122_-90","242_90","141_180","121_180","144_90"],
+ ["133_-90","232_90","343_180","232_180","141_90","122_0","z","y","y","344_-90","232_180","z","y","x","141_90","121_-90","144_180","121_90","144_90","144_-90"],
+ ["122_90","242_-90","343_90","344_180","131_-90","233_90","244_90","144_180","z","141_180","133_-90","121_-90","z","y","344_90","122_-90","242_180","141_-90","122_180","141_90"],
+ ["133_-90","233_180","344_180","232_90","141_-90","122_-90","y","x","z","343_90","233_180","z","x","141_-90","133_90","122_180","141_-90","121_90","244_180","144_-90"],
+ ["122_180","343_-90","232_90","343_-90","131_90","233_180","144_90","131_-90","133_180","131_-90","133_90","232_00","z","z","141_180","122_90","141_-90","122_-90","141_180"],
+ ["133_180","232_180","242_-90","343_90","131_90","122_180","x","343_90","122_-90","141_180","233_90","x","x","244_180","344_-90","122_-90","141_180","122_90","242_180","141_-90"]
+];
+// toverify array contain the matrix elements to be verify,
+// when rotation degree for each elements of toverify iz zero
+// then the level is complete - see verify() function
+var toverify = [
+ [1,3],
+ [0,4,6,7,8],
+ [4,5,6,9,12,13],
+ [0,2,3,4,5,7,9,11,12,14,17,18],
+ [0,1,2,3,4,5,10,15,16,17],
+ [1,2,3,5,6,8,10,16,17],
+ [0,1,2,3,4,5,8,9,10,11,13,14,15,16,17,18,19],
+ [0,1,2,3,4,5,9,10,14,15,16,17,18],
+ [0,1,2,4,5,6,7,9,10,14,15,16,17,18,19],
+ [0,1,2,3,4,5,9,10,13,14,15,16,17,18,19],
+ [0,1,2,3,4,5,6,7,8,9,10,11,14,15,16,17,18,19],
+ [0,1,2,3,4,5,7,8,9,10,13,14,15,16,17,18,19]
+];
+// completed_paths is an array with SVG paths to show
+// the animation when a level is completed
+var completed_paths = [
+ ' ',
+ ' ',
+ ' ',
+ ' ',
+ ' ',
+ ' ',
+ ' ',
+ ' ',
+ ' ',
+ ' ',
+ ' ',
+ ' '
+];
+$(document).ready(function() {
+ $("body").delegate("#b_next","click",function() {
+ var level = parseInt($("#level span").html());
+ show_level(level);
+ });
+ $("body").delegate("#b_menu","click",function() {
+ $("body").css("background-color","#f0f0f0");
+ $("#complete").html("");
+ $("#b_menu,#b_next,#level,#moves").hide();
+ $("#info,#mainpath,#maincircle,#div_levels,#lighton").show();
+ $(".blocks").remove();
+ });
+ $("body").delegate(".b_levels","click",function() {
+ var level = parseInt($(this).children("div").html());
+ $("#info,#div_levels").hide();
+ $("#mainpath,#maincircle").hide();
+ show_level(level-1);
+ });
+ $("body").delegate(".blocks","click",function() {
+ // rotates the block 90 deg clockwise
+ if (playing) {
+ blocked = parseInt($(this).data("blocked"));
+ if (blocked===0) {
+ $(".blocks").css("z-index",100);
+ angle = parseInt($(this).data("angle"))+90;
+ $(this).css({
+ "transition":"200ms linear all",
+ "z-index":"101",
+ "transform:":"rotate("+angle+"deg)",
+ "-moz-transform":"rotate("+angle+"deg)",
+ "-webkit-transform":"rotate("+angle+"deg)",
+ "-o-transform":"rotate("+angle+"deg)",
+ "-ms-transform":"rotate("+angle+"deg)",
+ "-khtml-transform":"rotate("+angle+"deg)"
+ });
+ $(this).data("angle",angle);
+ moves = parseInt($("#moves span").html());
+ $("#moves span").html(moves+1);
+ verify();
+ }
+ }
+ });
+ show_level_buttons();
+});
+function show_level_buttons() {
+ var level = 1;
+ for (var i=0;i<3;i++) {
+ for (var j=0;j<4;j++) {
+ bhtml = '';
+ $("#div_levels").append(bhtml);
+ level++;
+ }
+ }
+}
+function verify() {
+ // see if all block's rotation angle is zero
+ // using javascript mod
+ complete = true;
+ var level = parseInt($("#level span").html());
+ var verify_paths = toverify[level-1];
+ for (var i=0;i';
+ html += ''
+ $("#complete").html(html).show();
+ var myPath = document.getElementById("motionpath");
+ var length = myPath.getTotalLength();
+ var speed = length/400;
+ html = '';
+ html += ' ';
+ $("#complete circle").html(html);
+ var level = parseInt($("#level span").html());
+ $(".b_levels:eq("+(level-1)+")").css({
+ "border":"2px solid #006100",
+ "color":"#006100",
+ "background-color":"#ffffff"
+ });
+ if (level<12) {
+ $("#b_next").show();
+ }
+ $("body").css("background-color","#f0f0f0");
+ $("#lighton").show();
+}
+function show_blocks() {
+ var paths = '';
+
+ paths += ' ';
+
+ paths += ' ';
+ paths += ' ';
+ paths += ' ';
+ paths += ' ';
+
+ paths += ' ';
+ paths += ' ';
+ paths += ' ';
+ paths += ' ';
+
+ paths += ' ';
+ paths += ' ';
+ paths += '';
+ paths += ' ';
+ var c = 0;
+ for (var i=0;i<4;i++) {
+ for (var j=0;j<5;j++) {
+ $("#game").append(""+paths+"
");
+ c++;
+ }
+ }
+}
+function show_level(level) {
+ // show blocks according level
+ $("body").css("background-color","#c0c0c0");
+ playing = true;
+ $("#complete").html("").hide();
+ $(".blocks").remove();
+ show_blocks();
+ $("#level span").html(level+1);
+ $("#moves span").html(0);
+ $("#level,#moves,#b_menu").show();
+ $("#lighton,#b_next").hide();
+ level_paths = levels[level];
+ $(".blocks").css({
+ "background-image":"url(https://i.imgur.com/0Fc0TuZ.png)",
+ "cursor":"default"
+ }).data("angle","0").data("blocked","1").show();
+ $(".blocks circle,.blocks polyline,.blocks path,.blocks line").hide();
+ for (var i=0;i {
order++;
}
};
+function calls(){
+ swal("*INSTRUCTION - HOW TO PLAY*","The objective of this game is to find the password of 4 digits within 4 tries.\n\n\n~HINT-1:Digit in the black box-This digit is not used to form the vault's password.\n\n~HINT-2:Digit in the yellow box-This digit is used to form the vault's password but is not in it's correct position.\n\n~HINT-3:Digit in the blue box-This digit is used to form the vault's password and is in it's correct'position.\n\n\nAlso remember that the vault's password can have repeated digits.")
+};
\ No newline at end of file
diff --git a/Games/Wault_master/dist/output.css b/Games/Wault_master/dist/output.css
index e2bd2d6a25..3e5c95d843 100644
--- a/Games/Wault_master/dist/output.css
+++ b/Games/Wault_master/dist/output.css
@@ -1100,4 +1100,18 @@ input[type=number] {
.md\:flex-row-reverse {
flex-direction: row-reverse;
}
+}
+.b1{
+ background-color: white;
+ border-radius: 10px;
+ padding: 10px 4px;
+ display:flex;
+ font-size: 15px;
+ font-style:oblique;
+ box-shadow: 0 5px #999;
+}
+.b1:active{
+ background-color: grey;
+ box-shadow: 0 3px #666;
+ transform: translateY(1px);
}
\ No newline at end of file
diff --git a/Games/Wault_master/index.html b/Games/Wault_master/index.html
index ec6a1f9d89..2ac57327d2 100644
--- a/Games/Wault_master/index.html
+++ b/Games/Wault_master/index.html
@@ -12,11 +12,15 @@
Wault - Home
+
+
+ How to play?
+
diff --git a/Games/Whack_a_Mole/README.md b/Games/Whack_a_Mole/README.md
index 8fe44ffaed..939ec8339e 100644
--- a/Games/Whack_a_Mole/README.md
+++ b/Games/Whack_a_Mole/README.md
@@ -35,5 +35,8 @@
![image](/Games/Whack_a_Mole/whac-a-mole%20.png)
+
+ [Video] (https://imgur.com/a/8onaepi)
+
diff --git a/Games/Whack_a_Mole/audio/game-music.mp3 b/Games/Whack_a_Mole/audio/game-music.mp3
new file mode 100644
index 0000000000..aa23091304
Binary files /dev/null and b/Games/Whack_a_Mole/audio/game-music.mp3 differ
diff --git a/Games/Whack_a_Mole/audio/game-over.mp3 b/Games/Whack_a_Mole/audio/game-over.mp3
new file mode 100644
index 0000000000..1aa090c20f
Binary files /dev/null and b/Games/Whack_a_Mole/audio/game-over.mp3 differ
diff --git a/Games/Whack_a_Mole/index.html b/Games/Whack_a_Mole/index.html
index 5caae89eb4..c1a21b52ea 100644
--- a/Games/Whack_a_Mole/index.html
+++ b/Games/Whack_a_Mole/index.html
@@ -19,10 +19,16 @@ Score:0
- Start New Game
+ Start New Game
+
+
+
+
+
+