Quick Tip

Display CPMStar ads at the start of HTML5 game

Create a css file as following * { padding: 0; margin: 0; } body{ padding:0px; margin:0px; overflow-x: hidden; } canvas { touch-action-delay: none; touch-action: none; -ms-touch-action: none; } #topContainer{ position: relative; overflow: hidden; } #adContainer{ position:absolute; top:0px; left:0px; width:100%; height:100%; text-align:center; background-color:rgba(0,0,0,0.9); z-index:1000; } #closeBtn{ cursor:pointer; background-color:#2196F3; width:250px; margin:20px auto; padding:10px; font:bold 14px Arial; color:#FFF; text-transform:uppercase; } Create game HTML as following <!DOCTYPE html> <html> <head> <title>HTML5 Game</title> <meta name=”author” content=”Netexl” /> <meta name=”description” content=”HTML5 Game.” /> <meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″ /> <link rel=”stylesheet” href=”app.css”> <script src=”phaser.min.js”></script> <script src=”game.js”></script> </head> <body> <div id=”topContainer” style=”width:500px;”> <div id=”mygame”></div> <div id=”adContainer”> <div style=”margin-top:20px”> <script language=”Javascript”> var cpmstar_rnd=Math.round(Math.random()*999999); var cpmstar_pid=xxxxx; document.writeln(“<SCR”+”IPT language=’Javascript’ src=’//server.cpmstar.com/view.aspx?poolid=”+cpmstar_pid+”&script=1&rnd=”+cpmstar_rnd+”‘></SCR”+”IPT>”); </script> </div> <div id=”closeBtn” onclick=”closeAd()”></div> </div> </div> <script src=”ads.js”></script> </body> </html> Replace cpmstar_pid with your pid The ad is initialized and loaded as soon as HTML is loaded. The ad is positioned on top of HTML5 game area. We will initialized a timer which[…]