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/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

+
+
+
Start
+
+
+
+ + + \ 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 ๐Ÿ“ธ** + +
Image Description +
+Image Description +
+Image Description + + + + + +
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

+ +
+ + \ 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/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/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 - - - - - -
-

Welcome to Simran's Tic Tac Toe Game

-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Turn for X -
- -
- -
-
-
- - - - \ No newline at end of file + + + + + + + + + Tic Tac Toe + + + +
+

TIC TAC TOE

+
+ + + + + +
+ +
+ confetti +

+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ + + + 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/README.md b/README.md index 24af93b43f..acb8d45eea 100644 --- a/README.md +++ b/README.md @@ -308,12 +308,12 @@ This repository also provides one such platforms where contributers come over an | [Recognizing_Figures](https://github.com/kunjgit/GameZone/tree/main/Games/Recognizing_Figures) | [Roll_The_Dice](https://github.com/kunjgit/GameZone/tree/main/Games/Roll_The_Dice) | | [Black_jackk](https://github.com/kunjgit/GameZone/tree/main/Games/Black_jackk) | - | [Recognizing_Figures](https://github.com/kunjgit/GameZone/tree/main/Games/Recognizing_Figures) | [Screen Pet Game](https://github.com/kunjgit/GameZone/tree/main/Games/Screen-Pet-Game) | - | [Sudoku_light_theme](https://github.com/kunjgit/GameZone/tree/main/Games/Sudoku_light_theme) | | [Find_the_ball](https://github.com/kunjgit/GameZone/tree/main/Games/Find_the_ball) | -|[Color The Page](https://github.com/kunjgit/GameZone/tree/main/Games/Color_The_Page)| +| [Color The Page](https://github.com/kunjgit/GameZone/tree/main/Games/Color_The_Page)| +|[Building Blocks Game](https://github.com/kunjgit/GameZone/tree/main/Games/Building_Block_Game)| +|[Cartoon character guessing game](https://github.com/kunjgit/GameZone/tree/main/Games/Cartoon_Character_Guessing_Game)| |[Carrom Board Game](https://github.com/kunjgit/GameZone/tree/main/Games/carrom)| | [Number_Recall_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Number_Recall_Game) | | [Hit_the_hamster] (https://github.com/kunjgit/GameZone/tree/main/Games/Hit_the_hamster) | @@ -335,6 +335,7 @@ This repository also provides one such platforms where contributers come over an +
diff --git a/assets/images/Building Block Game.png b/assets/images/Building Block Game.png new file mode 100644 index 0000000000..20a3c183c5 Binary files /dev/null and b/assets/images/Building Block Game.png differ diff --git a/assets/images/Cartoon_Character_Guessing_Game.png b/assets/images/Cartoon_Character_Guessing_Game.png new file mode 100644 index 0000000000..04854f84df Binary files /dev/null and b/assets/images/Cartoon_Character_Guessing_Game.png differ diff --git a/assets/images/Tic_Tac_Toe.png b/assets/images/Tic_Tac_Toe.png index 58567752e4..fa31917f69 100644 Binary files a/assets/images/Tic_Tac_Toe.png and b/assets/images/Tic_Tac_Toe.png differ