215 lines
12 KiB
HTML
215 lines
12 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en" >
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>CodePen - A Pure CSS Game - You Must Build a Lighthouse.</title>
|
||
|
|
<link rel="stylesheet" href="./style.css">
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<!-- partial:index.partial.html -->
|
||
|
|
<input type="checkbox" id="gfxmenu" />
|
||
|
|
<input type="radio" name="gfx" id="good" checked />
|
||
|
|
<input type="radio" name="gfx" id="poor" />
|
||
|
|
<x id="graphics">
|
||
|
|
<label class="gfx" for="gfxmenu">Graphics Quality</label>
|
||
|
|
<label class="gfx" for="good">Very Pretty</label>
|
||
|
|
<label class="gfx" for="poor">Quite Pretty</label>
|
||
|
|
</x>
|
||
|
|
|
||
|
|
<sky><time>
|
||
|
|
<sun></sun>
|
||
|
|
</time></sky>
|
||
|
|
<stars><i></i></stars>
|
||
|
|
|
||
|
|
<sunset></sunset>
|
||
|
|
<colour>
|
||
|
|
|
||
|
|
<input type="radio" name="r23" id="cb23" class="hs house row4 col1" />
|
||
|
|
<input type="radio" name="r23" id="cb23s" class="hs shed row4 col1" />
|
||
|
|
<input type="radio" name="r24" id="cb24" class="hs house row4 col2" />
|
||
|
|
<input type="radio" name="r24" id="cb24s" class="hs shed row4 col2" />
|
||
|
|
<input type="radio" name="r25" id="cb25" class="hs house row4 col3" />
|
||
|
|
<input type="radio" name="r23" id="cb25s" class="hs shed row4 col3" />
|
||
|
|
<input type="radio" name="r26" id="cb26" class="hs house row4 col4" />
|
||
|
|
<input type="radio" name="r26" id="cb26s" class="hs shed row4 col4" />
|
||
|
|
<br />
|
||
|
|
<input type="radio" name="r19" id="cb19" class="hs house row3 col1" />
|
||
|
|
<input type="radio" name="r19" id="cb19s" class="hs shed row3 col1" />
|
||
|
|
<input type="radio" name="r20" id="cb20" class="hs house row3 col2" />
|
||
|
|
<input type="radio" name="r20" id="cb20s" class="hs shed row3 col2" />
|
||
|
|
<input type="radio" name="r21" id="cb21" class="hs house row3 col3" />
|
||
|
|
<input type="radio" name="r21" id="cb21s" class="hs shed row3 col3" />
|
||
|
|
<input type="radio" name="r22" id="cb22" class="hs house row3 col4" />
|
||
|
|
<input type="radio" name="r22" id="cb22s" class="hs shed row3 col4" />
|
||
|
|
<br />
|
||
|
|
<input type="radio" name="r15" id="cb15" class="hs house row2 col1" />
|
||
|
|
<input type="radio" name="r15" id="cb15s" class="hs shed row2 col1" />
|
||
|
|
<input type="radio" name="r16" id="cb16" class="hs house row2 col2" />
|
||
|
|
<input type="radio" name="r16" id="cb16s" class="hs shed row2 col2" />
|
||
|
|
<input type="radio" name="r17" id="cb17" class="hs house row2 col3" />
|
||
|
|
<input type="radio" name="r17" id="cb17s" class="hs shed row2 col3" checked />
|
||
|
|
<input type="radio" name="r18" id="cb18" class="hs house row2 col4" />
|
||
|
|
<input type="radio" name="r18" id="cb18s" class="hs shed row2 col4" />
|
||
|
|
<br />
|
||
|
|
<input type="radio" name="r11" id="cb11" class="hs house row1 col1" />
|
||
|
|
<input type="radio" name="r11" id="cb11s" class="hs shed row1 col1" />
|
||
|
|
<input type="radio" name="r12" id="cb12" class="hs house row1 col2" />
|
||
|
|
<input type="radio" name="r12" id="cb12s" class="hs shed row1 col2" />
|
||
|
|
<input type="radio" name="r13" id="cb13" class="hs house row1 col3" />
|
||
|
|
<input type="radio" name="r13" id="cb13s" class="hs shed row1 col3" />
|
||
|
|
<input type="radio" name="r14" id="cb14" class="hs house row1 col4" />
|
||
|
|
<input type="radio" name="r14" id="cb14s" class="hs shed row1 col4" />
|
||
|
|
<br />
|
||
|
|
|
||
|
|
<input type="radio" name="r23" id="ncb23" class="row4 col1" title="ncb23" />
|
||
|
|
<input type="radio" name="r24" id="ncb24" class="row4 col2" title="ncb24" />
|
||
|
|
<input type="radio" name="r25" id="ncb25" class="row4 col3" title="ncb25" />
|
||
|
|
<input type="radio" name="r26" id="ncb26" class="row4 col4" title="ncb26" />
|
||
|
|
<br />
|
||
|
|
<input type="radio" name="r19" id="ncb19" class="row3 col1" title="ncb19" />
|
||
|
|
<input type="radio" name="r20" id="ncb20" class="row3 col2" title="ncb20" />
|
||
|
|
<input type="radio" name="r21" id="ncb21" class="row3 col3" title="ncb21" />
|
||
|
|
<input type="radio" name="r22" id="ncb22" class="row3 col4" title="ncb22" />
|
||
|
|
<br />
|
||
|
|
<input type="radio" name="r15" id="ncb15" class="row2 col1" title="ncb15" />
|
||
|
|
<input type="radio" name="r16" id="ncb16" class="row2 col2" title="ncb16" />
|
||
|
|
<input type="radio" name="r17" id="ncb17" class="row2 col3" title="ncb17" />
|
||
|
|
<input type="radio" name="r18" id="ncb18" class="row2 col4" title="ncb18" />
|
||
|
|
<br />
|
||
|
|
<input type="radio" name="r11" id="ncb11" class="row1 col1" title="ncb11" />
|
||
|
|
<input type="radio" name="r12" id="ncb12" class="row1 col2" title="ncb12" />
|
||
|
|
<input type="radio" name="r13" id="ncb13" class="row1 col3" title="ncb13" />
|
||
|
|
<input type="radio" name="r14" id="ncb14" class="row1 col4" title="ncb14" />
|
||
|
|
<br />
|
||
|
|
<input type="radio" id="done" />
|
||
|
|
|
||
|
|
<div class="lh">
|
||
|
|
<light></light>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div class="main">
|
||
|
|
<island></island>
|
||
|
|
|
||
|
|
<tree><i></i><i></i></tree>
|
||
|
|
<tree><i></i><i></i></tree>
|
||
|
|
|
||
|
|
<shed>
|
||
|
|
<label class="row1 col1 shedlabel" for="ncb11" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
|
||
|
|
<label class="row1 col2 shedlabel" for="ncb12" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
|
||
|
|
<label class="row1 col3 shedlabel" for="ncb13" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
|
||
|
|
<label class="row1 col4 shedlabel" for="ncb14" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
|
||
|
|
|
||
|
|
<label class="row2 col1 shedlabel" for="ncb15" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
|
||
|
|
<label class="row2 col2 shedlabel" for="ncb16" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
|
||
|
|
<label class="row2 col3 shedlabel" for="ncb17" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
|
||
|
|
<label class="row2 col4 shedlabel" for="ncb18" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
|
||
|
|
|
||
|
|
<label class="row3 col1 shedlabel" for="ncb19" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
|
||
|
|
<label class="row3 col2 shedlabel" for="ncb20" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
|
||
|
|
<label class="row3 col3 shedlabel" for="ncb21" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
|
||
|
|
<label class="row3 col4 shedlabel" for="ncb22" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
|
||
|
|
</shed>
|
||
|
|
|
||
|
|
<house>
|
||
|
|
|
||
|
|
<label class="row1 col1 houselabel" for="ncb11" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
|
||
|
|
<label class="row1 col2 houselabel" for="ncb12" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
|
||
|
|
<label class="row1 col3 houselabel" for="ncb13" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
|
||
|
|
<label class="row1 col4 houselabel" for="ncb14" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
|
||
|
|
|
||
|
|
<label class="row2 col1 houselabel" for="ncb15" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
|
||
|
|
<label class="row2 col2 houselabel" for="ncb16" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
|
||
|
|
<label class="row2 col3 houselabel" for="ncb17" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
|
||
|
|
<label class="row2 col4 houselabel" for="ncb18" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
|
||
|
|
|
||
|
|
<label class="row3 col1 houselabel" for="ncb19" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
|
||
|
|
<label class="row3 col2 houselabel" for="ncb20" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
|
||
|
|
<label class="row3 col3 houselabel" for="ncb21" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
|
||
|
|
<label class="row3 col4 houselabel" for="ncb22" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label>
|
||
|
|
|
||
|
|
<label class="row4 col1 houselabel" for="ncb23" title="Tap to build"><i></i><i></i><i></i><i></i></label>
|
||
|
|
<label class="row4 col2 houselabel" for="ncb24" title="Tap to build"><i></i><i></i><i></i><i></i></label>
|
||
|
|
<label class="row4 col3 houselabel" for="ncb25" title="Tap to build"><i></i><i></i><i></i><i></i></label>
|
||
|
|
<label class="row4 col4 houselabel" for="ncb26" title="Tap to build"><i></i><i></i><i></i><i></i></label>
|
||
|
|
</house>
|
||
|
|
|
||
|
|
<hbtn>
|
||
|
|
|
||
|
|
<label class="row1 col1 buttons" for="cb11" title="Tap to build"></label>
|
||
|
|
<label class="row1 col2 buttons" for="cb12" title="Tap to build"></label>
|
||
|
|
<label class="row1 col3 buttons" for="cb13" title="Tap to build"></label>
|
||
|
|
<label class="row1 col4 buttons" for="cb14" title="Tap to build"></label>
|
||
|
|
|
||
|
|
<label class="row2 col1 buttons" for="cb15" title="Tap to build"></label>
|
||
|
|
<label class="row2 col2 buttons" for="cb16" title="Tap to build"></label>
|
||
|
|
<label class="row2 col3 buttons" for="cb17" title="Tap to build"></label>
|
||
|
|
<label class="row2 col4 buttons" for="cb18" title="Tap to build"></label>
|
||
|
|
|
||
|
|
<label class="row3 col1 buttons" for="cb19" title="Tap to build"></label>
|
||
|
|
<label class="row3 col2 buttons" for="cb20" title="Tap to build"></label>
|
||
|
|
<label class="row3 col3 buttons" for="cb21" title="Tap to build"></label>
|
||
|
|
<label class="row3 col4 buttons" for="cb22" title="Tap to build"></label>
|
||
|
|
|
||
|
|
<label class="row4 col1 buttons" for="cb23" title="Tap to build"></label>
|
||
|
|
<label class="row4 col2 buttons" for="cb24" title="Tap to build"></label>
|
||
|
|
<label class="row4 col3 buttons" for="cb25" title="Tap to build"></label>
|
||
|
|
<label class="row4 col4 buttons" for="cb26" title="Tap to build"></label>
|
||
|
|
</hbtn>
|
||
|
|
|
||
|
|
<sbtn>
|
||
|
|
|
||
|
|
<label class="row1 col1 buttons" for="cb11s" title="Tap to build"></label>
|
||
|
|
<label class="row1 col2 buttons" for="cb12s" title="Tap to build"></label>
|
||
|
|
<label class="row1 col3 buttons" for="cb13s" title="Tap to build"></label>
|
||
|
|
<label class="row1 col4 buttons" for="cb14s" title="Tap to build"></label>
|
||
|
|
|
||
|
|
<label class="row2 col1 buttons" for="cb15s" title="Tap to build"></label>
|
||
|
|
<label class="row2 col2 buttons" for="cb16s" title="Tap to build"></label>
|
||
|
|
<label class="row2 col3 buttons" for="cb17s" title="Tap to build"></label>
|
||
|
|
<label class="row2 col4 buttons" for="cb18s" title="Tap to build"></label>
|
||
|
|
|
||
|
|
<label class="row3 col1 buttons" for="cb19s" title="Tap to build"></label>
|
||
|
|
<label class="row3 col2 buttons" for="cb20s" title="Tap to build"></label>
|
||
|
|
<label class="row3 col3 buttons" for="cb21s" title="Tap to build"></label>
|
||
|
|
<label class="row3 col4 buttons" for="cb22s" title="Tap to build"></label>
|
||
|
|
</sbtn>
|
||
|
|
<grass></grass>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<water><i></i></water>
|
||
|
|
|
||
|
|
<div class="lh">
|
||
|
|
<lens></lens>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<text>
|
||
|
|
<welldone>
|
||
|
|
<label for="done">✕</label>
|
||
|
|
<p>NICE ONE!</p>
|
||
|
|
<p>You built a lighthouse before nightfall!</p>
|
||
|
|
<p>The ships and islanders are safe!</p>
|
||
|
|
</welldone>
|
||
|
|
</text>
|
||
|
|
<text>
|
||
|
|
<gameover>
|
||
|
|
<label for="done">✕</label>
|
||
|
|
<p>GAME OVER!</p>
|
||
|
|
<p>I'm afraid I have some very bad news...</p>
|
||
|
|
<p>A ship has crashed into your beautiful island.</p>
|
||
|
|
<p>Everybody is dead!</p>
|
||
|
|
<p>Soz! You should build a lighthouse.</p>
|
||
|
|
<a href="" title="Try Again">Try Again</a>
|
||
|
|
</gameover>
|
||
|
|
</text>
|
||
|
|
</colour>
|
||
|
|
<div class="ss">
|
||
|
|
<lens></lens>
|
||
|
|
</div>
|
||
|
|
<sig><i></i></sig>
|
||
|
|
<!-- partial -->
|
||
|
|
<script src="./script.js"></script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|