diff options
| author | Mark Powers <markppowers0@gmail.com> | 2020-05-17 12:32:49 -0500 |
|---|---|---|
| committer | Mark Powers <markppowers0@gmail.com> | 2020-05-17 12:32:49 -0500 |
| commit | b5de6d44e0f291f6fcbe035f4a15edcab1491aad (patch) | |
| tree | 258cfeea0e16d7608812e0c75869abcb0a784839 | |
| parent | 000b1bcc517891a16bcccc313079c96f214b6f40 (diff) | |
Add clickable buttons to snake
| -rw-r--r-- | src/index.html | 2 | ||||
| -rw-r--r-- | src/snake/index.html | 34 |
2 files changed, 33 insertions, 3 deletions
diff --git a/src/index.html b/src/index.html index ba8f42d..53e274e 100644 --- a/src/index.html +++ b/src/index.html @@ -38,7 +38,7 @@ <h2>Arcade</h2> <ul> <!-- Does not work <li><a href="/pinball">Pinball (demo)</a></li> --> - <li><a href="/snake">Snake</a><span class="score"></span></li> + <li><a href="/snake">Snake</a><span class="score"></span><span class="mobile"></span></li> <li><a href="/stacker">Stacker</a><span class="score"></span><span class="mobile"></span></li> <li><a href="/math">Math mini games</a></li> <li><a href="/pp/index.html">Picture pieces</a></li> diff --git a/src/snake/index.html b/src/snake/index.html index ea982cf..ba1781e 100644 --- a/src/snake/index.html +++ b/src/snake/index.html @@ -5,11 +5,41 @@ <title>Snake</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> - <!-- <link rel="stylesheet" type="text/css" href="/css/styles.css"> --> + <style> + .spacer { + width: 60px; + height: 60px; + display: inline-block; + } + .btn { + width: 60px; + height: 60px; + display: inline-block; + background-color: blue; + } + </style> </head> <body style="padding:0; margin:0; overflow:hidden;"> - <canvas width="400" height="400" id="canvas"></canvas> + <div><canvas width="400" height="400" id="canvas"></canvas></div> + <div > + <span class="spacer"></span> + <span class="spacer"></span> + <span class="btn" onclick="keyPush({keyCode: 38})"></span> + <span class="spacer"></span> + </div> + <div> + <span class="spacer"></span> + <span class="btn" onclick="keyPush({keyCode: 37})"></span> + <span class="spacer"></span> + <span class="btn" onclick="keyPush({keyCode: 39})"></span> + </div> + <div> + <span class="spacer"></span> + <span class="spacer"></span> + <span class="btn" onclick="keyPush({keyCode: 40})"></span> + <span class="spacer"></span> + </div> <script src="/highscore.js"></script> <script> var tileCountWidth = 40; |