-
Notifications
You must be signed in to change notification settings - Fork 0
/
games.html
146 lines (139 loc) · 19.9 KB
/
games.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE HTML>
<html>
<head>
<title>Games - Saxo_Broko</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="assets/css/main.css" />
</head>
<body>
<div class="page-wrap">
<!-- Nav -->
<nav id="nav">
<ul>
<li><a href="/#"><span class="icon"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="svg-inline--fa fa-home fa-w-18" data-icon="home" data-prefix="fas" viewBox="0 0 576 512"><defs/><path fill="currentColor" d="M280 148L96 300v164a16 16 0 0016 16h112a16 16 0 0016-16v-96a16 16 0 0116-16h64a16 16 0 0116 16v96a16 16 0 0016 16h112a16 16 0 0016-16V300L296 148a12 12 0 00-16 0zm292 103l-84-68V44a12 12 0 00-12-12h-56a12 12 0 00-12 12v73l-90-74a48 48 0 00-61 0L4 251a12 12 0 00-1 17l25 31a12 12 0 0017 2l235-194a12 12 0 0116 0l235 194a12 12 0 0017-2l25-31a12 12 0 00-1-17z"/></svg>
<li><a href="/portfolio"><span class="icon"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="svg-inline--fa fa-camera-retro fa-w-16" data-icon="camera-retro" data-prefix="fas" viewBox="0 0 512 512"><defs/><path fill="currentColor" d="M48 32C22 32 0 54 0 80v352c0 27 22 48 48 48h416c27 0 48-21 48-48V80c0-26-21-48-48-48H48zm0 32h106c3 0 6 3 6 6v20c0 3-3 6-6 6H38c-3 0-6-3-6-6V80c0-9 7-16 16-16zm426 96H38c-3 0-6-3-6-6v-36c0-3 3-6 6-6h138l30-45c1-2 3-3 5-3h253c9 0 16 7 16 16v74c0 3-3 6-6 6zM256 424a120 120 0 110-240 120 120 0 010 240zm0-208a88 88 0 100 176 88 88 0 000-176zm-48 104c-9 0-16-7-16-16 0-35 29-64 64-64 9 0 16 7 16 16s-7 16-16 16c-18 0-32 14-32 32 0 9-7 16-16 16z"/></svg></span></a></li>
<li><a href="/games" class="active"><span class="icon"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="svg-inline--fa fa-gamepad fa-w-20" data-icon="gamepad" data-prefix="fas" viewBox="0 0 640 512"><defs/><path fill="currentColor" d="M480 96H160a160 160 0 10114 272h92A160 160 0 10480 96zM248 268a12 12 0 01-12 12h-52v52a12 12 0 01-12 12h-24a12 12 0 01-12-12v-52H84a12 12 0 01-12-12v-24a12 12 0 0112-12h52v-52a12 12 0 0112-12h24a12 12 0 0112 12v52h52a12 12 0 0112 12zm216 76a40 40 0 1140-40 40 40 0 01-40 40zm64-96a40 40 0 1140-40 40 40 0 01-40 40z"/></svg></span></a></li>
<li><a href="/tools"><span class="icon"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="svg-inline--fa fa-tools fa-w-16" data-icon="tools" data-prefix="fas" viewBox="0 0 512 512"><defs/><path fill="currentColor" d="M501 396L384 279a74 74 0 00-85-14L192 158V96L64 0 0 64l96 128h62l107 107c-14 27-10 62 14 85l117 117c14 15 38 15 52 0l53-53c15-14 15-38 0-52zM332 225c28 0 55 11 75 31l19 19a142 142 0 0082-166c-3-9-14-12-20-5l-75 74-68-11-11-68 74-74c7-7 4-18-5-21-48-11-100 1-137 38-28 29-42 66-41 104l82 82c8-2 17-3 25-3zm-104 82l-57-57L19 403a64 64 0 1090 90l124-123c-8-20-10-42-5-63zM64 472a24 24 0 1124-24c0 13-11 24-24 24z"/></svg></span></a></li>
<li><a href="/eco"><span class="icon"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="svg-inline--fa fa-leaf fa-w-18" data-icon="leaf" data-prefix="fas" viewBox="0 0 576 512"><defs/><path fill="currentColor" d="M546 10c-5-13-21-13-28-2-31 54-87 88-150 88h-80C182 96 96 182 96 288l2 21c63-46 155-85 286-85 9 0 16 7 16 16s-7 16-16 16C133 256 26 410 2 468a32 32 0 0060 24c1-3 21-48 72-90 32 44 94 86 174 77 158-11 268-152 268-325 0-50-11-102-30-144z"/></svg></span></a></li>
<li><a href="/oscar"><span class="icon"><svg mlns="http://www.w3.org/2000/svg" aria-hidden="true" class="svg-inline--fa fa-fish fa-w-18" data-icon="leaf" data-prefix="fas" viewBox="0 0 576 512"><path fill="currentColor" d="M180.5 141.5C219.7 108.5 272.6 80 336 80s116.3 28.5 155.5 61.5c39.1 33 66.9 72.4 81 99.8c4.7 9.2 4.7 20.1 0 29.3c-14.1 27.4-41.9 66.8-81 99.8C452.3 403.5 399.4 432 336 432s-116.3-28.5-155.5-61.5c-16.2-13.7-30.5-28.5-42.7-43.1L48.1 379.6c-12.5 7.3-28.4 5.3-38.7-4.9S-3 348.7 4.2 336.1L50 256 4.2 175.9c-7.2-12.6-5-28.4 5.3-38.6s26.1-12.2 38.7-4.9l89.7 52.3c12.2-14.6 26.5-29.4 42.7-43.1zM448 256c0-17.7-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32s32-14.3 32-32z"/></svg></span></a></li>
<li><a href="https://blog.saxobroko.com"><span class="icon"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="svg-inline--fa fa-pencil-alt fa-w-16" data-icon="pencil-alt" data-prefix="fas" viewBox="0 0 512 512"><defs/><path fill="currentColor" d="M498 142l-46 46c-5 5-13 5-17 0L324 77c-5-5-5-12 0-17l46-46c19-19 49-19 68 0l60 60c19 19 19 49 0 68zm-214-42L22 362 0 484c-3 16 12 30 28 28l122-22 262-262c5-5 5-13 0-17L301 100c-4-5-12-5-17 0zM124 340c-5-6-5-14 0-20l154-154c6-5 14-5 20 0s5 14 0 20L144 340c-6 5-14 5-20 0zm-36 84h48v36l-64 12-32-31 12-65h36v48z"/></svg></span></a></li>
<li><a href="https://saxobroko.kampsite.co/"><span class="icon"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="svg-inline--fa fa-comment-dots fa-w-16" data-icon="comment-dots" data-prefix="fas" viewBox="0 0 512 512"><defs/><path fill="currentColor" d="M256 32C115 32 0 125 0 240c0 50 21 95 57 131-12 50-54 95-55 96-2 2-3 5-1 8s4 5 7 5c66 0 116-32 141-51 32 12 69 19 107 19 141 0 256-93 256-208S397 32 256 32zM128 272a32 32 0 110-64 32 32 0 010 64zm128 0a32 32 0 110-64 32 32 0 010 64zm128 0a32 32 0 110-64 32 32 0 010 64z"/></svg></span></a></li>
<li><a href="https://share.saxobroko.com"><span class="icon"><svg xmlns="http://www.w3.org/2000/svg" class="svg-inline--fa fa-book-user fa-w-14 fa-5x" viewBox="0 0 448 512"><defs/><path fill="currentColor" d="M448 358V26c0-16-10-26-26-26H96C42 0 0 42 0 96v320c0 54 42 96 96 96h326c13 0 26-10 26-26v-16q0-9-10-19c-3-16-3-61 0-73q10-5 10-20zM240 64a64 64 0 11-64 64 64 64 0 0164-64zM128 282c0-32 30-58 67-58h5a103 103 0 0080 0h5c37 0 67 26 67 58v19c0 10-10 19-22 19H150c-12 0-22-9-22-19zm253 166H96c-19 0-32-13-32-32s16-32 32-32h285z"/></svg></span></a></li>
<li><a href="https://status.saxobroko.com"><span class="icon"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="svg-inline--fa fa-check fa-w-16" data-icon="check" data-prefix="fas" viewBox="0 0 512 512"><defs/><path fill="currentColor" d="M174 439L7 273a26 26 0 010-36l37-36c10-10 26-10 36 0l112 112L432 73c10-10 26-10 36 0l37 36c9 10 9 26 0 36L210 439a26 26 0 01-36 0z"/></svg></span></a></li>
<li><a href="/search"><span class="icon"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" data-icon="check" data-prefix="fas" viewBox="0 0 40 40"><defs/><path fill="currentColor" fill-rule="evenodd" d="M27 29c-3 2-7 4-11 4a16 16 0 1113-6l11 10v3h-3L27 29zm-11 1a13 13 0 100-27 13 13 0 000 27z"/></svg></span></a></li>
</ul>
</nav>
<!-- Main -->
<section id="main">
<!-- Section -->
<section>
<div class="inner gamesinn">
<header>
<h1>Games</h1>
</header>
<section class="columns double">
<div class="column">
<header>
<h3>Singleplayer</h3>
</header>
<ol>
<li><a href="./games/2048/index.html#game" target="_blank" class="button">2048</a></li><br />
<li><a href="./games/aotrd/index.html" target="_blank" class="button">Attac of the Red Dots</a></li><br />
<li><a href="./games/atrd/index.html" target="_blank" class="button">Avoid The Red Dots</a></li><br />
<li><a href="./games/coil/index.html" target="_blank" class="button">Coil</a></li><br />
<li><a href="./games/colourblast.html" target="_blank" class="button">Colour Blast </a></li><br />
<li><a href="./games/farblade.html" target="_blank" class="button">Farblade </a></li><br />
<li><a href="./games/ftb.html" target="_blank" class="button">Find the ball </a></li><br />
<li><a href="./games/flappy/index.html" target="_blank" class="button">Flappy Bird</a></li><br />
<li><a href="./games/gomoku.html" target="_blank" class="button">Gomoku </a></li><br />
<li><a href="./games/gaw.html" target="_blank" class="button">Guess-A-Word </a></li><br />
<li><a href="./games/math.html" target="_blank" class="button">Math Quiz </a></li><br />
<li><a href="./games/math2.html" target="_blank" class="button">Math Quiz 2 </a></li><br />
<li><a href="./games/maze.html" target="_blank" class="button">Maze </a></li><br />
<li><a href="./games/minecraft/index.html" target="_blank" class="button">Minecraft</a></li><br />
<li><a href="./games/pacman/index" target="_blank" class="button">Pacman</a></li><br />
<li><a href="./games/pathfinder.html" target="_blank" class="button">Path Finder </a></li><br />
<li><a href="./games/planetdefender.html" target="_blank" class="button">Planet Defender </a></li><br />
<li><a href="./games/pong.html" target="_blank" class="button w3-button">Pong</a></li><br />
<li><a href="./games/racinggame.html" target="_blank" class="button">Racing Game </a></li><br />
<li><a href="./games/reaction.html" target="_blank" class="button">Reaction Test </a></li><br />
<li><a href="./games/singlerps.html" target="_blank" class="button">Rock Paper Scissors </a></li><br />
<li><a href="./games/rubiks/index.html" target="_blank" class="button">Rubiks Cube </a></li><br />
<li><a href="./games/run/index.html" target="_blank" class="button">Run </a></li><br />
<li><a href="./games/runner.html" target="_blank" class="button">Runner </a></li><br />
<li><a href="./games/snake/index.html#game-area" target="_blank" class="button">Snake</a></li><br />
<li><a href="./games/taptaptap/index.html" target="_blank" class="button">TapTapTap</a></li><br />
<li><a href="./games/targetprac.html" target="_blank" class="button">Target Practice </a></li><br />
<li><a href="./games/taxidrift.html" target="_blank" class="button">Taxi Drift </a></li><br />
<li><a href="./games/tennis.html" target="_blank" class="button">Tennis </a></li><br />
<li><a href="./games/tower/index.html" target="_blank" class="button">Tower</a></li><br />
<li><a href="./games/tower2.html" target="_blank" class="button">Tower 2 </a></li><br />
<li><a href="./games/tron/index.html" target="_blank" class="button">Tron</a></li><br>
<li><a href="./games/typing.html" target="_blank" class="button">Typing Game </a></li><br>
<li><a href="./games/unbeatablepong.html" target="_blank" class="button">Unbeatable Pong </a></li><br>
</ol>
</div>
<div class="column">
<header>
<h3>Multiplayer</h3>
</header>
<ol>
<li><a href="./games/multitron/index.html" target="_blank" class="button w3-button w3-gray">Tron</a></li><br />
<li><a href="./games/connect4.html" target="_blank" class="button">Connect 4 </a></li><br />
<li><a href="./games/pig/index.html" target="_blank" class="button">Pig</a></li><br />
<li><a href="./games/ski/index.html" target="_blank" class="button">Ski Race</a></li><br />
<li><a id="abcdef" href="./games/tictactoe.html" target="_blank" class="button">TicTacToe </a></li><br />
<li><a href="./games/multitron/index.html" target="_blank" class="button">Tron</a></li><br />
</ol>
</div>
<div class="column">
<header>
<h3>Online Multiplayer</h3>
</header>
<ol>
<li><a href="./games/chess/index.html" target="_blank" class="button">Chess</a></li><br />
<li><a href="./games/rps/index.html" target="_blank" class="button">Rock, Paper, Scissors!</a></li><br />
</ol>
</div>
</section>
</div>
</section>
<!-- Footer -->
<footer id="footer">
<div class="navbar">
<a href="/#">Home</a>
<a href="/portfolio#">Portfolio</a>
<a href="/games#" class="active">Games</a>
<a href="/tools#">Tools</a>
<a href="/eco#">Eco</a>
<a href="https://blog.saxobroko.com">Blog</a>
</div>
<div class="copyright">
© Saxo_Broko 2015-<script>document.write(new Date().getFullYear())</script><noscript>2022</noscript>.
</div>
<p class="copyright">Saxo_Broko acknowledges the Wurundjeri people of the Kulin Nation and other Traditional Custodians of country throughout Australia and their connections to the land, sea and community. We pay our respect to their elders past and present and extend that respect to all Aboriginal and Torres Strait Islander peoples.</p>
</footer>
</section>
</div>
<!-- Scripts -->
<script>
// Dark Mode
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("darkmode-js",[],t):"object"==typeof exports?exports["darkmode-js"]=t():e["darkmode-js"]=t()}("undefined"!=typeof self?self:this,(function(){return function(e){var t={};function n(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(o,r,function(t){return e[t]}.bind(null,r));return o},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var o=function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)if(Object.prototype.hasOwnProperty.call(e,n)){var o=Object.defineProperty&&Object.getOwnPropertyDescriptor?Object.getOwnPropertyDescriptor(e,n):{};o.get||o.set?Object.defineProperty(t,n,o):t[n]=e[n]}return t.default=e,t}(n(1));var r=o.default;t.default=r,o.IS_BROWSER&&function(e){e.Darkmode=o.default}(window),e.exports=t.default},function(e,t,n){"use strict";function o(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}Object.defineProperty(t,"__esModule",{value:!0}),t.default=t.IS_BROWSER=void 0;var r="undefined"!=typeof window;t.IS_BROWSER=r;var a=function(){function e(t){if(function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),r){t=Object.assign({},{bottom:"32px",right:"32px",left:"unset",time:"0.3s",mixColor:"#fff",backgroundColor:"#fff",buttonColorDark:"#100f2c",buttonColorLight:"#fff",label:"",saveInCookies:!0,autoMatchOsTheme:!0},t);var n="\n .darkmode-layer {\n position: fixed;\n pointer-events: none;\n background: ".concat(t.mixColor,";\n transition: all ").concat(t.time," ease;\n mix-blend-mode: difference;\n }\n\n .darkmode-layer--button {\n width: 3.8rem;\n height: 3.8rem;\n border-radius: 50%;\n right: ").concat(t.right,";\n bottom: ").concat(t.bottom,";\n left: ").concat(t.left,";\n }\n\n .darkmode-layer--simple {\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n transform: scale(1) !important;\n }\n\n .darkmode-layer--expanded {\n transform: scale(100);\n border-radius: 0;\n }\n\n .darkmode-layer--no-transition {\n transition: none;\n }\n\n .darkmode-toggle {\n background: ").concat(t.buttonColorDark,";\n width: 3rem;\n height: 3rem;\n position: fixed;\n border-radius: 50%;\n border:none;\n right: ").concat(t.right,";\n bottom: ").concat(t.bottom,";\n left: ").concat(t.left,";\n cursor: pointer;\n transition: all 0.5s ease;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n .darkmode-toggle--white {\n background: ").concat(t.buttonColorLight,";\n }\n\n .darkmode-toggle--inactive {\n display: none;\n }\n\n .darkmode-background {\n background: ").concat(t.backgroundColor,";\n position: fixed;\n pointer-events: none;\n z-index: -10;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n }\n\n img, .darkmode-ignore {\n isolation: isolate;\n display: inline-block;\n }\n\n @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n .darkmode-toggle {display: none !important}\n }\n\n @supports (-ms-ime-align:auto), (-ms-accelerator:true) {\n .darkmode-toggle {display: none !important}\n }\n "),o=document.createElement("div"),a=document.createElement("button"),i=document.createElement("div");a.innerHTML=t.label,a.classList.add("darkmode-toggle--inactive"),o.classList.add("darkmode-layer"),i.classList.add("darkmode-background");var d="true"===window.localStorage.getItem("darkmode"),s=t.autoMatchOsTheme&&window.matchMedia("(prefers-color-scheme: dark)").matches,l=null===window.localStorage.getItem("darkmode");(!0===d&&t.saveInCookies||l&&s)&&(o.classList.add("darkmode-layer--expanded","darkmode-layer--simple","darkmode-layer--no-transition"),a.classList.add("darkmode-toggle--white"),document.body.classList.add("darkmode--activated")),document.body.insertBefore(a,document.body.firstChild),document.body.insertBefore(o,document.body.firstChild),document.body.insertBefore(i,document.body.firstChild),this.addStyle(n),this.button=a,this.layer=o,this.saveInCookies=t.saveInCookies,this.time=t.time}}var t,n,a;return t=e,(n=[{key:"addStyle",value:function(e){var t=document.createElement("link");t.setAttribute("rel","stylesheet"),t.setAttribute("type","text/css"),t.setAttribute("href","data:text/css;charset=UTF-8,"+encodeURIComponent(e)),document.head.appendChild(t)}},{key:"showWidget",value:function(){var e=this;if(r){var t=this.button,n=this.layer,o=1e3*parseFloat(this.time);t.classList.add("darkmode-toggle"),t.classList.remove("darkmode-toggle--inactive"),t.setAttribute("aria-label","Activate dark mode"),t.setAttribute("aria-checked","false"),t.setAttribute("role","checkbox"),n.classList.add("darkmode-layer--button"),t.addEventListener("click",(function(){var r=e.isActivated();r?(n.classList.remove("darkmode-layer--simple"),t.setAttribute("disabled",!0),setTimeout((function(){n.classList.remove("darkmode-layer--no-transition"),n.classList.remove("darkmode-layer--expanded"),t.removeAttribute("disabled")}),1)):(n.classList.add("darkmode-layer--expanded"),t.setAttribute("disabled",!0),setTimeout((function(){n.classList.add("darkmode-layer--no-transition"),n.classList.add("darkmode-layer--simple"),t.removeAttribute("disabled")}),o)),t.classList.toggle("darkmode-toggle--white"),document.body.classList.toggle("darkmode--activated"),window.localStorage.setItem("darkmode",!r)}))}}},{key:"toggle",value:function(){if(r){var e=this.layer,t=this.isActivated(),n=this.button;e.classList.toggle("darkmode-layer--simple"),document.body.classList.toggle("darkmode--activated"),window.localStorage.setItem("darkmode",!t),n.setAttribute("aria-label","De-activate dark mode"),n.setAttribute("aria-checked","true")}}},{key:"isActivated",value:function(){return r?document.body.classList.contains("darkmode--activated"):null}}])&&o(t.prototype,n),a&&o(t,a),e}();t.default=a}])}));
const options = {
bottom: '64px', // default: '32px'
right: '32px', // default: '32px'
left: 'unset', // default: 'unset'
time: '1s', // default: '0.3s'
mixColor: '#fff', // default: '#fff'
backgroundColor: '#fff', // default: '#fff'
buttonColorDark: '#100f2c', // default: '#100f2c'
buttonColorLight: '#fff', // default: '#fff'
saveInCookies: true, // default: true,
label: '🌓', // default: ''
autoMatchOsTheme: true // default: true
}
const darkmode = new Darkmode(options);
darkmode.showWidget();</script>
</body>
</html>