Countdown Anagram Game

Developer
Adam
Size
7,625 Kb
Views
28,336
  1. Countdown Anagram Game Previews
  2. Countdown Anagram Game HTML Codes
  3. Countdown Anagram Game CSS Codes
  4. Countdown Anagram Game JS Codes

How do I make an countdown anagram game?

Can you figure the nine letter word before the clock runs out?. What is a countdown anagram game? How do you make a countdown anagram game? This script and codes were developed by Adam on 27 November 2022, Sunday.

Countdown Anagram Game Previews
IQ Test

Countdown Anagram Game - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Countdown Anagram Game</title> <link href="https://fonts.googleapis.com/css?family=Lato:700|Open+Sans:800" rel="stylesheet"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="clock-wrap"> <div class="clock-border"> <div class="clock"> <div class="face"> <div class="half-circle"></div> <div class="mark"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div class="segment"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div class="centre"> <div class="centre-dial"></div> </div> <div class="dial"></div> <div class="vertical"></div> <div class="horizontal"></div> </div> </div> </div>
</div>
<div class="game"> <div class="buttons"> <button id="new">NEW GAME</button> <button id="reveal">REVEAL</button> </div> <ul id="question"> </ul> <ul id="solution"> </ul>
</div>
<audio src="https://www.dropbox.com/s/2tiba1pxdi9kfq9/Countdown%20-%20Clock%20Only%20Theme%20Song%20-%20TelevisionTunes.com.mp3?raw=1" preload></audio> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Countdown Anagram Game - Script Codes CSS Codes

* { box-sizing: border-box;
}
html { font-size: 20px;
}
@media (max-width: 550px) { html { font-size: 16px; }
}
@media (max-width: 400px) { html { font-size: 12px; }
}
body { background-color: #fff9bc;
}
/*Clock*/
.clock-wrap { display: flex; justify-content: center;
}
.clock-border { width: 300px; height: 300px; background-color: #112ebf; border-radius: 50%; border: 3px solid silver; display: flex; justify-content: center; align-items: center;
}
.clock { width: 280px; height: 280px; display: flex; justify-content: center; align-items: center; background-color: #50cfd8; border-radius: 50%;
}
.face { position: relative; width: 260px; height: 260px; display: flex; justify-content: center; align-items: center;
}
.half-circle { width: 130px; height: 260px; position: absolute; top: 0; left: 0; background-color: #edebda; border-radius: 150px 0 0 150px; z-index: 1;
}
.segment > div { width: 120px; height: 120px; top: 0; left: 130px; position: absolute; background-color: #edebda; border-radius: 0 125px 0 0; transform-origin: 0 130px;
}
.backlight { animation: countdown 30s linear forwards;
}
.segment div:nth-child(1) { transform: rotate(0deg); animation-delay: 2.5s;
}
.segment div:nth-child(2) { transform: rotate(15deg); animation-delay: 5s;
}
.segment div:nth-child(3) { transform: rotate(30deg); animation-delay: 7.5s;
}
.segment div:nth-child(4) { transform: rotate(45deg); animation-delay: 10s;
}
.segment div:nth-child(5) { transform: rotate(60deg); animation-delay: 12.5s;
}
.segment div:nth-child(6) { transform: rotate(75deg); animation-delay: 15s;
}
.segment div:nth-child(7) { transform: rotate(90deg); animation-delay: 17.5s;
}
.segment div:nth-child(8) { transform: rotate(105deg); animation-delay: 20s;
}
.segment div:nth-child(9) { transform: rotate(120deg); animation-delay: 22.5s;
}
.segment div:nth-child(10) { transform: rotate(135deg); animation-delay: 25s;
}
.segment div:nth-child(11) { transform: rotate(150deg); animation-delay: 27.5s;
}
.segment div:nth-child(12) { transform: rotate(165deg); animation-delay: 30s;
}
.centre { width: 120px; height: 120px; position: absolute; top: 68px; left: 68px; background-color: #edebda; border-radius: 50%; z-index: 3;
}
.centre-dial { width: 35px; height: 35px; position: absolute; top: 43px; left: 44px; background-color: black; border-radius: 50%; z-index: 5;
}
.dial { position: absolute; top: 10px; left: 120px; border-bottom: 120px solid black; border-left: 10px solid transparent; border-right: 10px solid transparent; transform-origin: 10px 120px; z-index: 4;
}
.turn { animation: turn 30s linear forwards;
}
.horizontal { position: absolute; width: 260px; height: 3px; top: 129px; left: 0; background-color: black; z-index: 3;
}
.vertical { width: 3px; height: 260px; top: 0; left: 128px; position: absolute; background-color: black; z-index: 3;
}
.mark { position: absolute; width: 260px; height: 260px; top: -10px; left: 0; z-index: 2;
}
.mark > div { top: 0; left: 130px; width: 5px; height: 20px; position: absolute; background-color: black; border-radius: 20px; transform-origin: 0 138px;
}
.mark div:nth-of-type(1) { transform: rotate(30deg) translate(0px, 15px);
}
.mark div:nth-of-type(2) { transform: rotate(60deg) translate(0px, 15px);
}
.mark div:nth-of-type(4) { transform: rotate(120deg) translate(0px, 15px);
}
.mark div:nth-of-type(5) { transform: rotate(150deg) translate(0px, 15px);
}
.mark div:nth-of-type(7) { transform: rotate(210deg) translate(0px, 15px);
}
.mark div:nth-of-type(8) { transform: rotate(240deg) translate(0px, 15px);
}
.mark div:nth-of-type(10) { transform: rotate(300deg) translate(0px, 15px);
}
.mark div:nth-of-type(11) { transform: rotate(330deg) translate(0px, 15px);
}
.mark div:nth-of-type(3) { display: none;
}
.mark div:nth-of-type(6) { display: none;
}
.mark div:nth-of-type(9) { display: none;
}
@keyframes countdown { 0% { background-color: #fff787; } 100% { background-color: #fff787; }
}
@keyframes turn { 0% { transform: rotate(0deg); } 100% { transform: rotate(180deg); }
}
/*Game*/
.game { max-width: 600px; height: 300px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; position: relative; z-index: 3;
}
@media (max-width: 550px) { .game { height: 250px; }
}
@media (max-width: 400px) { .game { height: 200px; }
}
.buttons { width: 100%; display: flex; justify-content: space-between;
}
.buttons button { font-family: 'Open Sans', sans-serif; border: 3px solid silver; background-color: #112ebf; color: white; font-size: 1rem; padding: 5px 20px; width: 170px; cursor: pointer;
}
ul { background: #50cfd8; border: 3px solid silver; height: 22.5%; width: 100%; font-family: 'Open Sans', sans-serif; font-weight: 800; display: flex; list-style-type: none; padding: 1%; align-items: center; justify-content: center; cursor: move; color: white;
}
ul li { font-size: 2.5rem; background-color: #112ebf; margin: 0 0.75%; width: 11%; height: 90%; text-align: center; box-shadow: 2px 2px 2px #111111; vertical-align: middle; line-height: 2.5rem;
}

Countdown Anagram Game - Script Codes JS Codes

'use strict';
/*Countdown Anagram Game Drag and drop the tiles into place to form a new nine letter word. Using Jquery and Touch Punch.
*/
var backlight = $('.segment > div');
var dial = $('.dial');
var solution = $('#solution');
var audio = document.querySelector('audio');
function animationHandler() { backlight.removeClass('backlight').width(); dial.removeClass('turn').width(); audio.currentTime = 0; audio.play(); backlight.addClass('backlight'); dial.addClass('turn');
}
function animationStop() { backlight.removeClass('backlight').width(); dial.removeClass('turn').width(); audio.pause();
}
function reset() { animationHandler(); container.empty(); solution.empty();
}
function revealHandler(answer) { reveal.click(function () { solution.empty(); animationStop(); answer.split('').forEach(function (letter) { return solution.append("<li>" + letter + "</li>"); }); });
}
var wordArray = [["QUITESOUR", "TURQUOISE"], ["FREEGROIN", "FOREIGNER"], ["SCARYPOLE", "COSPLAYER"], ["ADMITLANE", "LAMINATED"], ["DUNECRANE", "ENDURANCE"], ["QUITESEXI", "EXQUISITE"], ["TIGERNAME", "GERMINATE"], ["DIRTYROOM", "DORMITORY"], ["INFERCORE", "REINFORCE"], ["VEGDANCES", "SCAVENGED"], ["NOSEMIGHT", "SOMETHING"], ["NOSESTAIN", "SENSATION"], ["LOONYURGE", "NEUROLOGY"], ["DOGGIRUNN", "GROUNDING"], ["BEARDRENT", "BARTENDER"], ["GNATBITER", "BATTERING"], ["TOTEMSNOB", "TOMBSTONE"], ["WATCHLEER", "CARTWHEEL"], ["BLAZENOSY", "LAZYBONES"], ["EACHSTORK", "SHORTCAKE"]];
var container = $('#question');
var newGame = $('#new');
var reveal = $('#reveal');
function startGame() { reset(); var question = wordArray[Math.floor(Math.random() * wordArray.length)]; var scrambledArray = question[0].split(''); scrambledArray.forEach(function (letter) { return container.append("<li>" + letter + "</li>"); }); var answer = question[1]; container.sortable({ axis: "x", stop: function stop() { var attempt = ""; container.children().each(function () { attempt += $(this).text(); }); if (attempt === answer) { solution.empty(); answer.split('').forEach(function (letter) { return solution.append("<li>" + letter + "</li>"); }); } } }); revealHandler(answer);
}
newGame.click(startGame);
//Touch Punch used to allow sortable on touchscreen.
/*! * jQuery UI Touch Punch 0.2.3 * * Copyright 2011–2014, Dave Furfero * Dual licensed under the MIT or GPL Version 2 licenses. * * Depends: * jquery.ui.widget.js * jquery.ui.mouse.js */
!function (a) { function f(a, b) { if (!(a.originalEvent.touches.length > 1)) { a.preventDefault(); var c = a.originalEvent.changedTouches[0], d = document.createEvent("MouseEvents"); d.initMouseEvent(b, !0, !0, window, 1, c.screenX, c.screenY, c.clientX, c.clientY, !1, !1, !1, !1, 0, null), a.target.dispatchEvent(d); } } if (a.support.touch = "ontouchend" in document, a.support.touch) { var e, b = a.ui.mouse.prototype, c = b._mouseInit, d = b._mouseDestroy; b._touchStart = function (a) { var b = this; !e && b._mouseCapture(a.originalEvent.changedTouches[0]) && (e = !0, b._touchMoved = !1, f(a, "mouseover"), f(a, "mousemove"), f(a, "mousedown")); }, b._touchMove = function (a) { e && (this._touchMoved = !0, f(a, "mousemove")); }, b._touchEnd = function (a) { e && (f(a, "mouseup"), f(a, "mouseout"), this._touchMoved || f(a, "click"), e = !1); }, b._mouseInit = function () { var b = this; b.element.bind({ touchstart: a.proxy(b, "_touchStart"), touchmove: a.proxy(b, "_touchMove"), touchend: a.proxy(b, "_touchEnd") }), c.call(b); }, b._mouseDestroy = function () { var b = this; b.element.unbind({ touchstart: a.proxy(b, "_touchStart"), touchmove: a.proxy(b, "_touchMove"), touchend: a.proxy(b, "_touchEnd") }), d.call(b); }; }
}(jQuery);
Countdown Anagram Game - Script Codes
Countdown Anagram Game - Script Codes
Home Page Home
Developer Adam
Username rzencoder
Uploaded November 27, 2022
Rating 3
Size 7,625 Kb
Views 28,336
Do you need developer help for Countdown Anagram Game?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Adam (rzencoder) Script Codes
Name
Markdown Previewer
Scatterplot Graph D3
React Betting App
Scrolling Effects Practice
Wikipedia Viewer
CSS World Flags
React Game of Life
The Crystal Maze
HTML Canvas Paint App
Calculator
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!