How to make it more challenging?
Well, we could decrease the time allotted to 30 seconds, or something. But that's terribly unimaginative. Let's try this instead. Our lines thus far have been smooth corners or straight lines. Let's do it with jagged lines! |
| hard.png |
Now add a new option in the ddlDifficulty drop-down list...
<body onload="reset();">
<div class="text_wrapper">
Difficulty:
<select id="ddlDifficulty">
<option value="url(easy.png)" selected>Easy</option>
<option value="url(hard.png)">Hard</option>
</select>
</div>
<div id="pnlMessage" class="text_wrapper"></div>
<div id="pnlTimer" class="text_wrapper">Time left: 0 seconds</div>
<div id="board_wrapper">
</div>
</body>
<div class="text_wrapper">
Difficulty:
<select id="ddlDifficulty">
<option value="url(easy.png)" selected>Easy</option>
<option value="url(hard.png)">Hard</option>
</select>
</div>
<div id="pnlMessage" class="text_wrapper"></div>
<div id="pnlTimer" class="text_wrapper">Time left: 0 seconds</div>
<div id="board_wrapper">
</div>
</body>
When "Hard" is selected and "begin" is clicked, this happens!
Holy shit! Is that some serious mindfuckery, or what?!
Make it look pretty!
Now I have another image here. |
| vmaze.jpg |
I'm going to add it to the board by altering the CSS class board_wrapper, like so.
#board_wrapper
{
width:602px;
height:402px;
margin:50px auto 0 auto;
border:2px solid #000000;
background:url(vmaze.png) left top no-repeat;
background-size:cover;
}
{
width:602px;
height:402px;
margin:50px auto 0 auto;
border:2px solid #000000;
background:url(vmaze.png) left top no-repeat;
background-size:cover;
}
Ta-daaaaaaaaa......
This adds an attractive background to your board and makes it a little less boring.
This concludes my web tutorial for Valentine's Day 2016. Have fun with the game.
Because the path of true love never did run smooth!
T___T
T___T
No comments:
Post a Comment