Hundreds of features to explore
Games made in Construct
Your questions answered
Trusted by schools and universities worldwide
Free education resources to use in the classroom
Students do not need accounts with us
What we believe
We are in this together
World class complete documentation
Official and community submitted guides
Learn and share with other game developers
Upload and play games from the Construct community
Game development stories & opinions
Made a more good-looking html for the game canvas. It features auto-positioning of the canvas in center of screen with some jQuery. Could be useful
<!DOCTYPE html> <html> <head> <title>New project</title> <meta charset="UTF-8" /> <style type="text/css"> canvas { border: 1px solid black; } body { background: #000; } #canvasBox { background: #616161; border: 1px solid #8F8F8F; padding: 15px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } #canvasNotSupportedBox { font-family: "arial"; font-size: 12px; text-align: center; background: #818181; color: #fff; padding: 1em; } </style> <script type="text/javascript" src="jquery-1.4.4.min.js"></script> <script type="text/javascript" src="c2runtime.js"></script> <script type="text/javascript"> $(document).ready(function () { pinCanvasOnCenter(); var project = new cr.runtime(document.getElementById("c2canvas")); project.load(); project.go(); }); </script> <script id="pinCanvasOnCenterScreenScript" type="text/javascript"> $(window).load(function(){ pinCanvasOnCenter(); }); $(window).resize(function(){ pinCanvasOnCenter(); }); $(window).resize(); function pinCanvasOnCenter() { $('#canvasBox').css({ position: 'absolute', left: ($(window).width() - $('#canvasBox').outerWidth()) / 2, top: ($(window).height() - $('#canvasBox').outerHeight()) / 2 }); } </script> </head> <body> <div id="canvasBox"> <canvas id="c2canvas" width="640" height="480"> <div id="canvasNotSupportedBox"> Sorry, your browser doesn't support Canvas!<br/> <br/> Please try with: <a href="http://www.google.com/chrome">Chrome 9+</a> <a href="http://www.mozilla.com/en-US/firefox/fx/">Firefox 4+</a> <a href="http://nightly.webkit.org/">Safari 10.6+</a> </div> </div> </div> </body> </html> [/code:y0i4pa0j]
Hey, that's not bad (although it needs the preview scripts included to work as the preview HTML). Mind if we add something like this to the next build?
Develop games in your browser. Powerful, performant & highly capable.
Of course not
It'll look awesome with Construct logo below