diff options
| author | elioat <hi@eli.li> | 2023-07-21 11:47:48 -0400 |
|---|---|---|
| committer | elioat <hi@eli.li> | 2023-07-21 11:47:48 -0400 |
| commit | 267b92865e704e875b75f1e6d8d546d235f528c5 (patch) | |
| tree | 1974878922b883c34a3d4418dd0c29437f0f4454 /js/gg | |
| parent | 016b46aa15eb570eb471821c05829755944c3267 (diff) | |
| download | tour-267b92865e704e875b75f1e6d8d546d235f528c5.tar.gz | |
*
Diffstat (limited to 'js/gg')
| -rw-r--r-- | js/gg/game.js | 20 | ||||
| -rw-r--r-- | js/gg/index.html | 38 | ||||
| -rw-r--r-- | js/gg/styles.css | 21 |
3 files changed, 79 insertions, 0 deletions
diff --git a/js/gg/game.js b/js/gg/game.js new file mode 100644 index 0000000..0ba3d89 --- /dev/null +++ b/js/gg/game.js @@ -0,0 +1,20 @@ +const buttons = { + d: { + up: () => document.getElementById("dUp"), + down: () => document.getElementById("dDown"), + right: () => document.getElementById("dRight"), + left: () => document.getElementById("dLeft"), + }, + ab: { + a: () => document.getElementById("a"), + b: () => document.getElementById("b"), + }, + aux: { + start: () => document.getElementById("start"), + select: () => document.getElementById("select"), + }, +}; + +console.log(buttons.ab.a); + +buttons.ab.a.style.backgroundColor = "pink"; diff --git a/js/gg/index.html b/js/gg/index.html new file mode 100644 index 0000000..04b2a52 --- /dev/null +++ b/js/gg/index.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="UTF-8" /> + <title>Hello, world!</title> + <meta name="viewport" content="width=device-width,initial-scale=1" /> + <meta name="description" content="" /> + <link rel="stylesheet" href="styles.css" /> + <script src="game.js"></script> + </head> + <body> + <canvas + id="targetCanvas" + width="512" + height="512" + style="border: 1px solid #000000" + > + </canvas> + <div class="flex-container"> + <fieldset id="dPad" class="flex-item"> + <button id="dUp">Up</button> + <br /> + <button id="dLeft">Left</button> + <button id="dRight">Right</button> + <br /> + <button id="dDown">Down</button> + </fieldset> + <fieldset id="ab" class="flex-item"> + <button id="a">A</button> + <button id="b">B</button> + </fieldset> + </div> + <fieldset id="aux"> + <button id="start">Start</button> + <button id="select">Select</button> + </fieldset> + </body> +</html> diff --git a/js/gg/styles.css b/js/gg/styles.css new file mode 100644 index 0000000..3059105 --- /dev/null +++ b/js/gg/styles.css @@ -0,0 +1,21 @@ +body { + font-family: sans-serif; +} + +canvas { + margin: 0 auto; + display: block; +} + +.flex-container { + display: flex; + flex-flow: row wrap; + justify-content: space-around; + padding: 1em; + margin: 0; +} + +.flex-item { + width: 33vw; + text-align: center; +} |