A JavaScript game of slots.

2017-05-06 05_27_37-Slots.png

Speaking of one-click JavaScript games, here’s my take on the classic slots game. It basically generates three small numbers at random, and if they all match, you win. Simple.

<!DOCTYPE html>
<html>
<head>
<title>Slots</title>
</head>
<body>
<table border="1">
<tr>
<td><p id="a">?</p></td>
<td><p id="b">?</p></td>
<td><p id="c">?</p></td>
</td>
</tr>
</table>
<td><p id="d">SPIN THE SLOTS</p></td>

<button onclick="myFunction()">Spin</button>

<script>
function myFunction()
{
var aa=Math.floor((Math.random()*2)+1);
var bb=Math.floor((Math.random()*2)+1);
var cc=Math.floor((Math.random()*2)+1);

if (aa==bb && bb==cc)
  {
document.getElementById("d").innerHTML="WIN";
}
else
{
document.getElementById("d").innerHTML="LOSE";
}

document.getElementById("a").innerHTML=aa;
document.getElementById("b").innerHTML=bb;
document.getElementById("c").innerHTML=cc;
}
</script>

</body>
</html>

In a future version I will make gold coins fall from your screen.

One-click sports.

I was recently browsing through my JavaScript library when I came across a series of amusing scripts centered around the idea of creating a game that can be played in just one click. For example, here’s One-click Football:

<!DOCTYPE html>
<html>
<head>
<title>One-click Football</title>
</head>
<body>

<p id="demo1">HOME:</p>
<p id="demo2">VISITORS:</p>

<button onclick="myFunction()">Start game!</button>

<script>
function myFunction()
{
document.getElementById("demo1").innerHTML='HOME: ' + Math.floor((Math.random()*50)+2);
document.getElementById("demo2").innerHTML='VISITORS: ' + Math.floor((Math.random()*50)+2);
}

</script>

</body>
</html>

When this script is run, you’ll see a “Start game” button that gives you the final score of the game in one click without you having to sit through the whole game, not to mention halftime. I also made a variation of this script called One-click Basketball that simply generates higher numbers for the final score.

I also came up with One-click Wrestling.

<!DOCTYPE html>
<html>
<head>
<title>One-click Wrestling</title>
</head>
<body>
<p id="demo">RED vs. BLUE</p>
<button onclick="myFunction()">Wrestle!</button>
<script>
function myFunction(x)
{
var r=Math.random();
var x=document.getElementById("demo")
if (r>0.5)
{
x.innerHTML="RED wrestler won.";
}
else
{
x.innerHTML="BLUE wrestler won.";
}
}
</script>
</body>
</html>

Either the Red or the Blue wrestler will win. Other variations of this script include One-click Chess, One-click Billiards and One-click Racing that simply tell you whether you won or lost.

I close with a script called One-click Politics:

<!DOCTYPE html>
<html>
<head>
<title>One-click Politics</title>
</head>
<body>
<p id="demo"></p>
<button onclick="myFunction()">Submit</button>

<script>
function myFunction(x)
{
var r=Math.random();
var x=document.getElementById("demo")
if (r>0.5)
{
x.innerHTML="Blame it on the Democrats.";
}
else
{
x.innerHTML="Blame it on the Republicans.";
}
}
</script>
</body>
</html>

The possibilities for one-click games like these are truly endless.

A number guessing game in Javascript.

One sure way to tell when you’re making progress in learning a new programming language is being able to create a simple number guessing game. Here’s my Javascript version. It generates a random number between 1 and 100 and tells you if your guesses are too high or too low. Simple.

<!DOCTYPE html>
<html>
<body>
Your guess? <input type=”number” name=”guess”><p>
<p id=”demo1″>Last guess: </p>
<p id=”demo2″></p>
<button onclick=”myFunction(guess)”>Submit</button>
<script>
var x=Math.floor((Math.random()*100)+1);
function myFunction(guess)
{
document.getElementById(“demo1”).innerHTML=’Last guess: ‘+guess.value;
if (guess.value==x)
{
document.getElementById(“demo2”).innerHTML=’You guessed it!’;
}
else if (guess.value<x)
{
document.getElementById(“demo2”).innerHTML=’Too low.’;
}
else
{
document.getElementById(“demo2”).innerHTML=’Too high.’;
}
}
</script>
</body>
</html>

I couldn’t resist modifying the script to make it look like you’re can guess the correct number on the first try. Try it on your friends and make them think they’re psychic. Better hope they’re still your friends afterwards.

<!DOCTYPE html>
<html>
<body>
Your guess? <input type=”number” name=”guess”><p>
<p id=”demo1″>Last guess: </p>
<p id=”demo2″></p>
<button onclick=”myFunction(guess)”>Submit</button>
<script>
function myFunction(guess)
{
document.getElementById(“demo1”).innerHTML=’Last guess: ‘ +guess.value;
document.getElementById(“demo2”).innerHTML=’You guessed it on the very first try! You must be a psychic!’;
}
</script>
</body>
</html>

Have much fun.

Breaks countdown timer.

I’ve been playing around with Javascript quite a bit lately and am steadily getting more familiar with its syntax and coding. I’ve been coming up with ideas for new scripts and have been having lots of fun coding them. Truly, this is the best way to learn.

Recently I was cleaning up my script that counts down to my job’s quitting time of 6pm when I came up with a very cool idea. Why not have the script count down to my breaks as well? A short time later I had just the script to do the trick.

<!DOCTYPE html>
<html>
<body>
<p id=”break1″>Morning Break:</p>
<p id=”lunch”>Lunch:</p>
<p id=”break2″>Afternoon Break:</p>
<p id=”outtahere”>Quitting Time:</p>
<button onclick=”myFunction()”>Count down!</button>

<script>
function myFunction()
{
var now = new Date();
var mhrs = 10-now.getHours();
var lhrs = 12-now.getHours();
var lmins = 15-now.getMinutes();
if (lmins < 0) { lmins += 60; }
var ahrs = 15-now.getHours();
var qhrs = 17-now.getHours();
if (mhrs < 0) { mhrs += 24; }
if (lhrs < 0) { lhrs += 24; }
if (ahrs < 0) { ahrs += 24; }
if (qhrs < 0) { qhrs += 24; }
var mins = 60-now.getMinutes();
document.getElementById(‘break1’).innerHTML=’Morning Break: ‘ + mhrs+’ hours, ‘+mins+’ minutes.’;
document.getElementById(‘lunch’).innerHTML=’Lunch: ‘ +lhrs+’ hours, ‘+lmins+’ minutes.’;
document.getElementById(‘break2’).innerHTML=’Afternoon Break: ‘ + ahrs+’ hours, ‘+mins+’ minutes.’;
document.getElementById(‘outtahere’).innerHTML=’Quitting Time: ‘ +qhrs+’ hours, ‘+mins+’ minutes.’;
}
</script>
</body>
</html>

At my job, my morning break is at 11:00am, my lunch break is at 1:15pm, my afternoon break is at 4:00pm and quitting time is 6pm. The script calculates the time remaining until each of those breaks when I click on the “Count Down” button. I didn’t want to have the script run continuously as I wanted to save it as a note in Simplenote, which supports Markdown text and HTML. The script works really well and helps make my job more tolerable as I approach those lifesaving breaks.

Javascript number divider.

I did some more experimenting with Javascript in hopes of being able to enter any number and have the script divide that number by 2. I wanted to have such a script handy for helping me calculate the time remaining until my lunch break or the end of my shift, whichever comes first. By dividing that remaining time by 2, I can calculate the halfway point towards my next break. For example, if there’s 90 minutes until my lunch break, I would divide 90 by 2 to get 45 minutes, so that if I work 45 minutes, I only have another 45 minutes to go before my break. That helps the day go by faster.

Unfortunately, the computer I use at work has Windows XP with Internet Explorer 8, so I’m unable to implement some of the newer features of Javascript. This following script won’t work on browsers newer than Internet Explorer 8 but it works well enough for me to use on the job.

<!DOCTYPE html>
<html>
<body>
<input type=”number” name=”x”><p>
<button onclick=”myFunction(x)”>Do It!</button>
<p id=”demo”></p>

<script>
function myFunction(x)
{
var demoP=document.getElementById(“demo”)
demoP.innerHTML=”= ” + x.value/2;
return y;
}
</script>

</body>
</html>

This script gives you a small form box for entering a number and when you click “Do It!”, it divides that number by 2 and displays the result.

By changing the mathematical operation in the “demoP.innerHTML=”= ” + x.value/2;” line, I am able to use this script as a solid template for creating other scripts that do simple calculations such as converting minutes to hours.

I’m not ashamed to admit I’m still a novice when it comes to Javascript. The secret is taking advantage of online tutorials such as the ones at W3Schools and doing some fearless experimenting. When creating simple scripts like the one above, the worst that can happen is the script not running at all.

Mental math booster.

One of the books I’m reading on my Kindle is Secrets of Mental Math: The Mathemagician’s Guide to Lightning Calculation and Amazing Math Tricks by renowned mathemagician Arthur Benjamin. The techniques he uses to do his astonishing mental calculations are amazingly simple and need only a little practice before you too can do math without a calculator. He reveals his secrets in this very fun book.

The book does include exercises to help me practice what I learned but after finishing them I was hungry for more numbers to crunch, so I decided to see what I could create using Javascript. I came up with the following script that serves the purpose perfectly.

<body>
<p id=”num1″>0</p>
<p id=”num2″>0</p>
<p id=”ans1″>Sum:</p>
<p id=”ans2″>Difference:</p>

<button onclick=”myFunction()”>Get Numbers</button>
<button onclick=”myFunction2()”>Calculate</button>

<script>
function myFunction()
{
var x=Math.floor(Math.random()*999);
var y=Math.floor(Math.random()*999);
document.getElementById(“num1”).innerHTML=x;
document.getElementById(“num2”).innerHTML=y;
document.getElementById(“ans1”).innerHTML=”Sum: “+ 0;
document.getElementById(“ans2”).innerHTML=”Difference: “+0;
a=x+y;
b=x-y;
}

function myFunction2(x,y)
{
document.getElementById(“ans1”).innerHTML=”Sum: “+ a;
document.getElementById(“ans2”).innerHTML=”Difference: “+b;
return a,b;
}
</script>
</body>

Running this script yields the following output:

2013-12-14 19_58_18-Mental Math Booster

When you click on “Get Numbers” you will see two randomly generated numbers for you to add and subtract in your head. When you think you have the answers figured out, click on “Calculate” to display the calculated sum and difference of the two numbers to see if you were right.

When I tested the script, I got the following two numbers to play with.

844
293

To mentally add these numbers, just break the process down to simpler steps. Instead of adding 293 as a whole, start by adding 200 to 844, which gives us 1044. Next we add 90 to get 1134 and finally we add 3 to get the sum of 1137.

Subtracting those two numbers is just as easy. Just round up 293 to 300 and subtract that from 844, which gives us 544. Then add the 7 you took away when you rounded up and you get 551, which is the answer.

This is really making math fun again. I still don’t know why it’s not taught like this at school.

Javascript countdown to 6pm.

My working hours were recently changed to a more accommodating  schedule in which I now leave at 6pm as opposed to 11pm before. As a result I modified my Javascript countdown script to reflect my new departure time and while I was at it I changed the format to appear as a clock showing the hours and minutes remaining until 6pm. While I was at it I worked in a border around the numbers to make it look nice and pretty, like this:

1020

That means as I type this post, there are 10 hours and 20 minutes until 6pm.

Here’s the modified script.

<html>
<head>
<title>Countdown Clock</title>
</head>
<body>
<script type=”text/javascript”>
// From: http://www.webdeveloper.com/forum/showthread.php?t=215504
// Modified for: http://www.webdeveloper.com/forum/showthread.php?t=220174
var definedTime = new Date(’23:00′); // military time to countdown TO
function ShowTimes() {
var now = new Date();
var hrs = 17-now.getHours();
if (hrs < 0) { hrs += 24; }
var mins = 60-now.getMinutes();
var secs = 60-now.getSeconds();
var str = ”;
str += ‘<center><table border=”5″><tr><td><p style=”font-size:xx-large;”>’+hrs+’:’+mins+'</p></td></tr></table></center>’;
document.getElementById(‘countdownToMidnight’).innerHTML = str;
}

var _cntDown;
function StopTimes() { clearInterval(_cntDown); }
</script>
</head>
<body onload=”_cntDown=setInterval(‘ShowTimes()’,1000)”>
<div id=”countdownToMidnight”></div>
</body>
</html>

If you want the countdown clock to count down to 5pm instead, you would change the 17 (highlighted in red) to 16.