One of the things I love about my profession is the seemingly endless possibilities of what can be done using code, and how it gives me the opportunity to be creative. I am especially fascinated by the interaction between the back-end (code) and the front-end (what you see in your browser). After many years in the web development field, I still geek out over how clicking my mouse or touching something with my finger actually causes a reaction on my screen (hey I remember a world before computers were a household item, so can you blame me?) This harmonious blend of coded and visual elements is why I love web development and design so much – to the point where I experiment with it my spare time.
One of my experiments is what I call a “photo guessing game”. [Well it isn’t much of a game, but I have fun with it anyway!] The object of the game below is quite simple: click on (or touch) an area of the black rectangle to reveal part of a photograph that lies underneath. Then try to guess what it’s a photo of in as few guesses as possible. It looks very simple, but appearances can be deceiving. There’s a fair amount of coding logic behind the scenes.
Here is an overview (not in exhaustive detail) of how I created this game:
There was actually a lot that went into creating this photo-guessing game and getting it to work properly.
It started by using Bootstrap as a foundation.
This is done by first linking to the latest Bootstrap CDN (Content Delivery Network), by pasting the following link into the <head> section of a page or post. It needs to appear first in your code, before any other stylesheet links or references: <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
This page from the Bootstrap documentation site contains complete instructions on how to get started using the Bootstrap framework. There are lots of great resources online if you’d like to do some training on this platform, and some classes are free, such as this class from Udemy.
Bootstrap is based upon a CSS grid system (as is the game below). In order to build a CSS grid using Bootstrap you will need to use the CSS class called “container.”
If you’d like the grid to have left and right margins (and not span the entire width of your page, use only “container” as your class, but for a full-width layout use the class “container-fluid” instead. In this particular case I chose to have side margins, so I went with simply “container.”
The container div looks like this: <div class=”container” id=”colorMe”>
Inside the overall div element (that encases all of the html for the game), I created 6 inner div sections to create the rows, and assigned them the Bootstrap class of “row” accordingly. Inside each of the 6 row sections I then created 4 nested div sections, to create 4 columns.
This is how the code for one of the rows is set up:
<div class="row">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3" onclick="noShow(1)" id="block1" style="background-color:black;"><br><br></div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3" onclick="noShow(2)" id="block2" style="background-color:black;"><br><br></div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3" onclick="noShow(3)" id="block3" style="background-color:black;"><br><br></div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3" onclick="noShow(4)" id="block4" style="background-color:black;"><br><br></div>
</div>
(I did cheat a little here and used an inline CSS style to color the background of the 24 blocks black.)
Then I threw in a little twist so that a few of the squares fade away when hovered over. Here is the CSS code for that:
#block4 {
-webkit-transition: all 4s ease-out 0s;
-moz-transition: all 4s ease-out 0s;
-ms-transition: all 4s ease-out 0s;
-o-transition: all 4s ease-out 0s;
transition: all 4s ease-out 0s;
}
#block4:hover {
-webkit-opacity: 0.15;
-moz-opacity: 0.15;
opacity: 0.15;
color: #000;
}
Also, to make sure the images resize nicely for small devices (and never exceed the width of the device), I included this in my CSS:
img {
max-width: 100%;
height: auto;
}
The photos I used for this guessing game are called (retrieved) by JavaScript (JS).
The JS is fairly in-depth so I won’t detail all of it here, but I created a main function for taking an image at random and displaying it when the page is loaded.
To add an additional feature, so the game wouldn’t appear overly simple, I decided to add some JS to call and then load a different color for the outside border each time the “Load new game” button is pressed. In the JS code below it references the “colorMe” id, which is part of the CSS code. This “colorMe” CSS id is referenced inside the opening div tag, as shown above.
function changeColor() {
var color = '#';
var letters = ['5C25CD','DC2F2F','2DAA2D','0000FF','FFFF00','00FFFF','FF00FF',
'C0C0C0','A09CDA','F6C12F','DA9CCC','F0B62C','66A06D','2A84BE'];
color += letters[Math.floor(Math.random() * letters.length)];
var el = document.getElementById("colorMe");
el.style.borderColor = color;
};
The “Load new game” button was easy to create by using the HTML5 “button” tag, and throwing in a little JavaScript to reload the page when the button is pressed:
<button type=”button” class=”btn btn-info” onClick=”window.location.reload()”><small>Load new game</small></button>
I hope you liked this article and that it sparked a little bit of your creativity to go and create something with code!
