ET - Software Development Projects - Shut the Box

Shut the Box Project

Starter code for your main page

Instructions:

Use the code below to start your main page for the game.
Copy the block of code into a new HTML file called 'index' in a 'ShutTheBox' named folder. Save it as an HTML file.

You will need to copy and paste the image tag in this block of code to hold a total of 9 images. Make a folder called 'images' and one inside called 'tiles.' Then, use an Internet search to find images of the digits 1 through 9. Save the images into the 'tiles' folder with the names "1.png, 2.png, ..." for each of the images. You can use .jpg format but you will have to change the code if you do so.

HTML file

                
<!DOCTYPE html> 
<html> 
<head> 
    <title> Shut the Box</title> 
    <link rel="stylesheet" type="text/css" href="stbStyles.css"> 
</head> 
<body> 
    <div id="wrapper"> 
        <header> 
            <h1> Shut The Box</h1> 
        </header> 
        <div id="tiles"> 
            <h3>  Roll the dice and select a combination of values that match the total on the dice.</h3> 
            <img src="images/tiles/1.png" class="numbers" id="1" onclick="select(1)"> 
        </div> 
    </div> 
</body> 
</html>

This is an example of what the page should look like after you create your .css file and saved the images for our tiles 1-9. A demo of game page