Step 3: Mocking It Up

Defining the Screen

In HTML, the easiet way to define an LCD screen is to use DIVs with fixed locations. We'll want to wrap the LCD elements in a DIV so we can use absolute positioning for the inner elements and have it play nice with the rest of our HTML. For now we're just using text rather than images to move the project along. We can spend some time drawing graphics for each of these elements later. The ID for each of the elements matches our hand drawn mockup from earlier. We'll use those IDs in the CSS stylesheet as well as the game code to show and hide the elements based on the game logic.

Note: View Source of this page to see the stylesheet being used.

        <div id="screen">
            <div id="element_0">Position 1</div>
            <div id="element_1">Falling 1</div>
            <div id="element_2">Position 2</div>
            <div id="element_3">Falling 2</div>
            <div id="element_4">Falling 3</div>
            <div id="element_5">Falling 4</div>
            <div id="element_6">Falling 5</div>
            <div id="element_7">Falling 6</div>
            <div id="element_8">Falling 7</div>
            <div id="element_9">Falling 8</div>
            <div id="element_10">Falling 9</div>
            <div id="element_11">Falling 10</div>
            <div id="element_12">Falling 11</div>
            <div id="element_13">Falling 12</div>
            <div id="element_14">Falling 13</div>
            <div id="element_15">Falling 14</div>
            <div id="element_16">Falling 15</div>
            <div id="element_17">Falling 16</div>
            <div id="element_18">Falling 17</div>
            <div id="element_19">Falling 18</div>
            <div id="element_20">Falling 19</div>
            <div id="element_21">Safe</div>
            <div id="element_22">Player Position 1</div>
            <div id="element_23">Player Position 2</div>
            <div id="element_24">Player Position 3</div>
            <div id="element_25">Bell Position 1</div>
            <div id="element_26">Bell Position 2</div>
            <div id="element_27">Miss 1</div>
            <div id="element_28">Miss 2</div>
            <div id="element_29">Miss 3</div>
            <div id="element_30">Fire 1</div>
            <div id="element_31">Fire 2</div>
            <div id="element_32">Fire 3</div>
            <div id="element_33">Fire 4</div>
            <div id="element_34">Fireman</div>
            <div id="element_35">Dead 1</div>
            <div id="element_36">Dead 2</div>
            <div id="element_37">Dead 3</div>

"LCD" Screen

Left and Right Arrow Keys change the player position.

Position 1
Falling 1
Position 2
Falling 2
Falling 3
Falling 4
Falling 5
Falling 6
Falling 7
Falling 8
Falling 9
Falling 10
Falling 11
Falling 12
Falling 13
Falling 14
Falling 15
Falling 16
Falling 17
Falling 18
Falling 19
Player Position 1
Player Position 2
Player Position 3
Bell Position 1
Bell Position 2
Miss 1
Miss 2
Miss 3
Fire 1
Fire 2
Fire 3
Fire 4
Dead 1
Dead 2
Dead 3
Copyright 2018 RetroLCD