HTML5 Canvas Game: "Just Hit The Button

Open In Editor Video Publish Your Code

<!DOCTYPE html>
<html lang="en">
    <head><base href='https://cdn.jsdelivr.net/gh/faralong/all@main/hitbutton/' /><meta name='robots' content='noindex'>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name ="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
        <meta charset="utf-8"/>
        <meta http-equiv="pragma" content="no-cache"/>
        
        <style>
            body {
                background: #000000;
                color: #cccccc;
                margin: 0px;
                padding: 0px;
                border: 0px;
				overflow: hidden;
            }
            canvas {
                image-rendering: optimizeSpeed;
                -webkit-interpolation-mode: nearest-neighbor;
                -ms-touch-action: none;
                touch-action: none;
                margin: 0px;
                padding: 0px;
                border: 0px;
            }
			#canvas {
				display: block;
				margin: 0 auto;
			}
			#loading_screen {
				left: 0px !important;
				width: 100%;
				height: 100%;
				object-fit: contain;
			}
            :-webkit-full-screen #canvas {
                width: 100%;
                height: 100%;
            }
            :-webkit-full-screen {
                width: 100%;
                height: 100%;
            } 
        </style>		
    
          <style type="text/css">
            .no-select {
            -webkit-touch-callout: none; /* iOS Safari */
            -webkit-user-select: none; /* Safari */
            -khtml-user-select: none; /* Konqueror HTML */
            -moz-user-select: none; /* Old versions of Firefox */
            -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
            }
          </style>
        
          <script type="text/javascript">
            setTimeout(function(){
              if(document.getElementsByTagName("canvas").length) {
                document.getElementsByTagName("body")[0].classList.add("no-select")
              }
            }, 2000);
          </script>
          
        </head>
    <body onload="startResizing();">
		<canvas id="canvas" width="1920" height="1080" >
			<p>Your browser doesn't support HTML5 canvas.</p>
		</canvas>
        <script type="text/javascript" src="html5game/Just Hit The Buttonn.js"></script>
        <script>window.onload = GameMaker_Init;</script>
		<script>
			startResizing();
			function startResizing(){
				resizing();
				setInterval(resizing, 1000)
			}
			function resizing(){
				var 
				browserWidth 	= window.innerWidth,
				browserHeight	= window.innerHeight,
				gameWidth		= 1920,
				gameHeight		= 1080,
				scale			= Math.min(browserWidth / gameWidth, browserHeight / gameHeight);
				document.getElementById('canvas').setAttribute("style", "width:" + (gameWidth * scale) + "px");
				document.getElementById('canvas').setAttribute("style", "height:" + (gameHeight * scale) + "px");
				document.getElementById('canvas').style.cursor = 'none';
			}
		</script>
    <script>function fnSendMsg(evt){
          if(typeof window.parent.postMessage == 'function') {
            window.parent.postMessage('keypress-from-game', '*');
          } else if(typeof window.top.postMessage == 'function' && window.top != window.self) {
            window.top.postMessage('keypress-from-game', '*');
          }
        }
        document.body.addEventListener('click', function(event) {
          fnSendMsg(event);
        });
        document.addEventListener('keypress', function(event) {
        	 fnSendMsg(event);
        });
        document.addEventListener('keydown', function (e) {
        	 fnSendMsg(event);
        });
        document.addEventListener('keyup', function (e) {
        	  fnSendMsg(event);
        });
        </script></body>
</html>

HTML5 Canvas Game: "Just Hit The Button

Recommended

Firefly Button

Basic HTML Button Example

Toothed Toggle

HTML

CSS

JS

Recommended

Firefly Button

Basic HTML Button Example

Toothed Toggle

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS