Number game
How do I make an number game?
Numbers appear in a list and can only be removed by typing them on the keyboard. The game speeds up as you beat each level (clearing a list).. What is a number game? How do you make a number game? This script and codes were developed by Billy Brown on 30 September 2022, Friday.
Number game - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Number game</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ * { margin: 0; padding: 0;
}
body { font-family: monospace;
}
p { max-width: 25em;
}
small { font-size: 0.8em;
}
.left { float: left;
}
.numbers,
.message { font-size: 2em; margin: 0.5em; padding: 0.5em; width: 15em;
}
.numbers { border: 1px dashed black; display: block;
}
.message { background: lightyellow; border: 1px dashed #ca5; box-shadow: 0 0 0 5px lightyellow, 0 0 0 6px #fec; display: inline-block; text-align: center;
}
.mobile-in { display: none; font-size: 2em; margin: 0.5em; padding: 0.125em; width: 2em;
}
@media (max-width: 30em) { .mobile-in { display: block; }
}
.level { font-size: 2em; padding: 0.5em;
}
.rules { font-size: 1.2em; line-height: 1.3; padding: 1em;
}
.iehider { background: white; height: 100%; position: absolute; width: 100%;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="left"> <span data-js="numbers" class="numbers">> </span> <span data-js="message" class="message"><small>Press Enter to start</small></span> <input type="text" class="mobile-in" maxlength="1" autofocus>
</div>
<div class="left"> <p data-js="level" class="level">Level: _</p> <p class="rules">Numbers appear in a list and can only be removed by typing them on the keyboard. The game speeds up as you beat each level (clearing a list). Typing the wrong number will add an extra one to the list, so be careful!</p>
</div>
<!--[if IE]><div class="iehider"></div><![endif]--> <script src="js/index.js"></script>
</body>
</html>
Number game - Script Codes CSS Codes
* { margin: 0; padding: 0;
}
body { font-family: monospace;
}
p { max-width: 25em;
}
small { font-size: 0.8em;
}
.left { float: left;
}
.numbers,
.message { font-size: 2em; margin: 0.5em; padding: 0.5em; width: 15em;
}
.numbers { border: 1px dashed black; display: block;
}
.message { background: lightyellow; border: 1px dashed #ca5; box-shadow: 0 0 0 5px lightyellow, 0 0 0 6px #fec; display: inline-block; text-align: center;
}
.mobile-in { display: none; font-size: 2em; margin: 0.5em; padding: 0.125em; width: 2em;
}
@media (max-width: 30em) { .mobile-in { display: block; }
}
.level { font-size: 2em; padding: 0.5em;
}
.rules { font-size: 1.2em; line-height: 1.3; padding: 1em;
}
.iehider { background: white; height: 100%; position: absolute; width: 100%;
}
Number game - Script Codes JS Codes
var nums = document.querySelector('[data-js="numbers"]'), msg = document.querySelector('[data-js="message"]'), level = document.querySelector('[data-js="level"]'), MAX_LENGTH = 20, levelCounter = 1, counter = 0, inVal = null, numVal = "", START_BUFFER = 2, interval = 2000, speed = 10.0, intervalID = null, message = "", MAX_LEVEL = 15;
onkeydown = function(e) { if (counter == 0 && e.keyCode == 13) { run(); } else if (counter > START_BUFFER && numVal.length < MAX_LENGTH) { if (e.keyCode >= 48 && e.keyCode <= 57) { inVal = e.keyCode - 48; if (numVal.indexOf(inVal + "") == -1) { updateNums(); return; } for (var i = 0; i < numVal.length; i++) { numVal = numVal.replace(inVal, ""); } refreshNums(); checkWin(); } }
}
function run() { counter = 0; level.innerHTML = "Level: " + levelCounter; message = "Wait..."; refreshMessage(); intervalID = setInterval("updateNums()", interval);
}
function updateNums() { var num = Math.floor(Math.random() * 10); numVal += num.toString(); refreshNums(); counter++; if (counter > START_BUFFER) { message = "Go!"; refreshMessage(); } if (numVal.length === MAX_LENGTH) { clearInterval(intervalID); message = "You lose!"; refreshMessage(); return; }
}
function refreshNums() { nums.innerHTML = "> " + numVal;
}
function refreshMessage() { msg.innerHTML = message;
}
function checkWin() { if (numVal.length === 0) { clearInterval(intervalID); message = "You Win!"; refreshMessage(); if (levelCounter < MAX_LEVEL) { levelCounter++; interval -= interval / speed; return run(); } return; }
}
Developer | Billy Brown |
Username | _Billy_Brown |
Uploaded | September 30, 2022 |
Rating | 3 |
Size | 3,790 Kb |
Views | 22,264 |
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!
Name | Size |
Aperture-style lens | 3,703 Kb |
Pure CSS image slider | 2,256 Kb |
Cropper.js example | 8,683 Kb |
CSS-Tricks lodge button | 3,247 Kb |
Single-element Twitter button | 3,173 Kb |
Pure CSS change stylesheet | 4,004 Kb |
Mandelbrot Fractal | 2,706 Kb |
A Pen by Billy Brown | 1,824 Kb |
Slideout Sidebar | 3,596 Kb |
Playing with FlexBox | 3,162 Kb |
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!
Name | Username | Size |
IbrahimJabbari-Effect14 | Ibrahimjabbari | 1,919 Kb |
Custom checkbox example | Capelo | 3,495 Kb |
Prototype Responsive Homepage | Heyitsolivia | 7,677 Kb |
DFF Website | Hawcubite | 10,123 Kb |
Drill-down Map | Good886 | 8,484 Kb |
JQuery AJAX reddit Exercise | Btholt | 1,777 Kb |
Sencha Touch 2.3.1 Basic Grid Example | Trozdol | 2,770 Kb |
Project MMetro beta | Atomicsong | 5,157 Kb |
Part 19 Bootstrap split button dropdown | Venkatesha | 1,601 Kb |
Cake | Kennyname | 7,220 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!