Created
August 29, 2011 20:51
-
-
Save Fabryz/1179372 to your computer and use it in GitHub Desktop.
HTML5 canvas overlay bug?
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Wander game</title> | |
| <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> | |
| <link type="text/css" rel="stylesheet" href="./css/style.css" media="screen"> | |
| <script type="text/javascript" src="./js/jquery-latest.min.js"></script> | |
| <script type="text/javascript" src="./socket.io/socket.io.js"></script> | |
| <script type="text/javascript" src="./js/Socket.js"></script> | |
| <script type="text/javascript" src="./js/Fps.js"></script> | |
| <script type="text/javascript" src="./js/Player.js"></script> | |
| <script type="text/javascript" src="./js/Tile.js"></script> | |
| <script type="text/javascript" src="./js/Map.js"></script> | |
| <script type="text/javascript" src="./js/Viewport.js"></script> | |
| <script type="text/javascript" src="./js/Game.js"></script> | |
| <script type="text/javascript" src="./js/wander.js"></script> | |
| </head> | |
| <body> | |
| <h1>Wander</h1> | |
| <p>Use the arrow keys to wander around and explore, tab for player list. <a href="./status" title="See the server status">Server status</a>.</p> | |
| <div id="gameUI"> | |
| <div id="gameIntro"> | |
| <h1>Who are you?</h1> | |
| <p>Insert your nick and press Play to start</p> | |
| <p><input type="text" value="Player" id="playerNick" name="playerNick" maxlength="30" /></p> | |
| <p><a href="#" id ="play" class="button disconnected">Connecting...</a></p> | |
| </div> | |
| <div id="gamePlayersList"> | |
| <h1>Players list</h1> | |
| <ul></ul> | |
| </div> | |
| </div> | |
| <p id="fps">XX</p> | |
| <canvas id="gameCanvas" width="480" height="480"> | |
| <p>Looks like your browser does NOT support HTML5 Canvas.</p> | |
| <p>Please get a decent one.</p> | |
| </canvas> | |
| <div id="chatLog"><ul></ul></div> | |
| <input type="text" value="" id="chatMsg" name="chatMsg" maxlength="255" /> | |
| <p id="footer">©2011 Fabrizio Codello - Follow me on <a href="http://twitter.com/#!/fabryz">Twitter</a>!</p> | |
| <a href="https://github.com/Fabryz/wander"><img id="ribbon" src="./img/ribbon.png" alt="Fork me on GitHub"></a> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| background-color: #001022; | |
| color: #FFF; | |
| font-family: Georgia, "Lucida Sans", monospace, serif; | |
| font-size: 62.5%; | |
| margin: 10px; | |
| padding: 0; | |
| } | |
| a { | |
| color: #FFF; | |
| } | |
| a:hover { | |
| color: #1D7CF2; | |
| } | |
| h1 { | |
| font-size: 3.2em; | |
| font-weight: bold; | |
| margin-bottom: .5em; | |
| } | |
| h2 { | |
| margin-bottom: .5em; | |
| } | |
| p { | |
| font-size: 1.5em; | |
| } | |
| #gameUI { | |
| position: absolute; | |
| width: 95%; | |
| height: 480px; /* change according to canvas height */ | |
| margin-top: 1em; | |
| } | |
| #gameIntro, | |
| #gamePlayersList { | |
| background: rgba(0, 0, 0, .8); | |
| margin: 0 auto; | |
| padding: 40px 0; | |
| text-align: center; | |
| -webkit-border-radius: 10px; | |
| -moz-border-radius: 10px; | |
| border-radius: 10px; | |
| } | |
| #gameIntro { | |
| width: 500px; | |
| margin-top: 80px; | |
| } | |
| #gamePlayersList { | |
| width: 90%; | |
| margin-top: 20px; | |
| display: none; | |
| } | |
| #gamePlayersList ul { | |
| font-size: 1.8em; | |
| list-style-type: none; | |
| height: 300px; | |
| overflow: auto; | |
| } | |
| #gameIntro input[type="text"] { | |
| font-size: 1.8em; | |
| margin-top: 10px; | |
| } | |
| #gameIntro a.button { | |
| background: #2488F5; | |
| -webkit-border-radius: 5px; | |
| -moz-border-radius: 5px; | |
| border-radius: 5px; | |
| display: block; | |
| font-size: 3em; | |
| margin: 0 auto; | |
| margin-top: 30px; | |
| padding: 10px; | |
| width: 70%; | |
| text-decoration: none; | |
| } | |
| #gameIntro a.button:hover { | |
| background: #F7F7F7; | |
| color: #333; | |
| text-decoration: none; | |
| } | |
| #gameIntro a.disconnected { | |
| background: #185DA8; | |
| } | |
| #gameCanvas { | |
| background: url('../img/grass.png') 0 0 repeat; | |
| display: block; | |
| margin: 1em auto; | |
| margin-bottom: 0; | |
| } | |
| #debugCanvas { | |
| background-color: #FFF; | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| filter: alpha(opacity=75); | |
| -moz-opacity: 0.75; | |
| opacity: 0.75; | |
| } | |
| #debugLog { | |
| background-color: #FFFFDD; | |
| color: #333; | |
| font-size: 1.5em; | |
| padding: 1em; | |
| width: 50%; | |
| height: 200px; | |
| overflow: auto; | |
| position: fixed; | |
| bottom: 0; | |
| right: 0; | |
| filter: alpha(opacity=75); | |
| -moz-opacity: 0.75; | |
| opacity: 0.75; | |
| } | |
| #debugLog ul { | |
| list-style-type: none; | |
| } | |
| #chatLog { | |
| background-color: #FEFEFE; | |
| color: #333; | |
| font-size: 1.5em; | |
| padding: 1em; | |
| width: 400px; | |
| height: 200px; | |
| overflow: scroll; | |
| margin-top: -220px; | |
| z-index: 999; | |
| } | |
| #chatLog ul { | |
| list-style-type: none; | |
| } | |
| #chatMsg { | |
| display: block; | |
| margin: 0 auto; | |
| font-size: 1.5em; | |
| border: 2px solid #CCC; | |
| } | |
| #footer { | |
| margin-top: 1em; | |
| } | |
| #ribbon { | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| border: 0; | |
| } | |
| /* | |
| * Status | |
| */ | |
| dl { | |
| font-size: 1.5em; | |
| } | |
| dt { | |
| font-weight: bold; | |
| margin-bottom: .5em; | |
| } | |
| dd, | |
| #status-players { | |
| margin-left: 1.5em; | |
| margin-bottom: 1em; | |
| } | |
| #status-players { | |
| list-style-position: inside; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Did you ever find any solution to handling input's when overlayed on the canvas?
I just ran into this issue today. I'm trying to disable all mouseEvents, but I'm using three.js and because the 3D canvas lays itself in the foreground, all mouse functions do not work.
I noticed that I can tab to the input, which is strange. If I find anything I'll make sure to comment here.