Create a css file\u00a0as following<\/p>\n
* {\r\n\tpadding: 0;\r\n\tmargin: 0;\r\n}\r\nbody{\r\n\tpadding:0px;\r\n\tmargin:0px;\r\n\toverflow-x: hidden;\r\n}\r\ncanvas {\r\n\ttouch-action-delay: none;\r\n\ttouch-action: none;\r\n\t-ms-touch-action: none;\r\n}\r\n#topContainer{\r\n\tposition: relative; overflow: hidden;\r\n}\r\n#adContainer{\r\n position:absolute;\r\n top:0px;\r\n left:0px;\r\n width:100%;\r\n height:100%;\r\n text-align:center;\r\n background-color:rgba(0,0,0,0.9);\r\n z-index:1000;\r\n}\r\n#closeBtn{\r\n cursor:pointer;\r\n background-color:#2196F3;\r\n width:250px;\r\n margin:20px auto;\r\n padding:10px;\r\n font:bold 14px Arial;\r\n color:#FFF;\r\n text-transform:uppercase; \r\n}<\/pre>\nCreate game\u00a0HTML\u00a0as following<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <title>HTML5 Game<\/title>\r\n <meta name=\"author\" content=\"Netexl\" \/>\r\n <meta name=\"description\" content=\"HTML5 Game.\" \/>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1\" \/>\r\n\t<link rel=\"stylesheet\" href=\"app.css\">\r\n <script src=\"phaser.min.js\"><\/script>\r\n <script src=\"game.js\"><\/script>\r\n<\/head>\r\n<body>\r\n <div id=\"topContainer\" style=\"width:500px;\">\r\n\t\t<div id=\"mygame\"><\/div>\r\n\t\t<div id=\"adContainer\">\r\n\t\t\t <div style=\"margin-top:20px\">\r\n\t\t\t\t <script language=\"Javascript\">\r\n\t\t\t\t\t\tvar cpmstar_rnd=Math.round(Math.random()*999999);\r\n\t\t\t\t\t\tvar cpmstar_pid=xxxxx;\r\n\t\t\t\t\t\tdocument.writeln(\"<SCR\"+\"IPT language='Javascript' src='\/\/server.cpmstar.com\/view.aspx?poolid=\"+cpmstar_pid+\"&script=1&rnd=\"+cpmstar_rnd+\"'><\/SCR\"+\"IPT>\");\r\n\t\t\t\t <\/script>\r\n\t\t\t <\/div>\r\n\t\t\t <div id=\"closeBtn\" onclick=\"closeAd()\"><\/div>\r\n\t\t <\/div>\r\n\t<\/div>\r\n <script src=\"ads.js\"><\/script>\r\n<\/body>\r\n<\/html><\/pre>\nReplace cpmstar_pid<\/strong> with your pid<\/p>\nThe ad is initialized and loaded\u00a0as soon as HTML is loaded. The ad is positioned on top of HTML5 game area.<\/p>\n
We will initialized a timer which will enable closeAd button after\u00a0a predefined interval (normally 5 or 10 secs)<\/p>\n
var counter = 0;\r\nvar counterId = setInterval(adCounter, 1000);\r\nvar canClose = false;\r\nfunction closeAd(){\r\n if(canClose){\r\n\t\tdocument.getElementById(\"topContainer\").removeChild(document.getElementById(\"adContainer\"));\t\t\t\t\t\r\n }\r\n}\r\nfunction adCounter() {\r\n if (counter > 9) {\r\n clearInterval(counterId);\r\n document.getElementById(\"closeBtn\").innerHTML = \"Close and play game\";\r\n canClose = true;\r\n return;\r\n }\r\n counter++;\r\n document.getElementById(\"closeBtn\").innerHTML = \"You can close ad in \" + (10 - counter).toString() + \" seconds\";\r\n}<\/pre>\nBelow is the skeleton game code.<\/p>\n
\/\/ ---------------boot---------------------\r\nBoot = {\r\n init: function () {\r\n },\r\n preload: function () {\r\n\t\tmygame.stage.backgroundColor = '#52bad2';\r\n mygame.load.spritesheet(\"background\", \"background.png\", 250, 250);\r\n mygame.load.image(\"loading\", \"loading.png\");\t\t\r\n\t},\r\n create: function () {\r\n mygame.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;\r\n mygame.stage.scale.pageAlignHorizontally = true;\r\n mygame.stage.scale.pageAlignVeritcally = true;\r\n\t mygame.state.start(\"Loading\");\t\r\n\t}\r\n};\r\n\/\/ ---------------loading---------------------\r\nLoading = {\r\n init: function () {\r\n },\r\n preload: function () {\r\n\t\tmygame.stage.backgroundColor = '#52bad2';\r\n var loadingBar = mygame.add.sprite(this.world.centerX, this.world.centerY, \"loading\");\r\n loadingBar.anchor.setTo(0.5);\r\n mygame.load.setPreloadSprite(loadingBar);\r\n },\r\n create: function () {\r\n mygame.state.start(\"MainMenu\");\r\n }\r\n};\r\n\r\nvar MainMenu = {\r\n init: function () {\r\n },\r\n preload: function () {\r\n },\r\n create: function () {\r\n\t\tmygame.stage.backgroundColor = '#52bad2';\r\n\t\tvar text = mygame.add.text(mygame.world.centerX, mygame.world.centerY, 'Game Area', { font: '24px Arial', fill: '#fff' });\r\n\t\ttext.anchor.setTo(0.5);\r\n }\r\n};\r\n\r\nwindow.onload = function () {\r\n mygame = new Phaser.Game(500, 500, Phaser.AUTO, \"mygame\");\r\n mygame.state.add(\"Boot\", Boot);\r\n mygame.state.add(\"Loading\", Loading);\r\n mygame.state.add(\"MainMenu\", MainMenu);\r\n mygame.state.start(\"Boot\");\r\n}\r\n<\/pre>\n <\/p>\n","protected":false},"excerpt":{"rendered":"
Create a css file\u00a0as 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\u00a0HTML\u00a0as 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\u00a0as soon as HTML is loaded. The ad is positioned on top of HTML5 game area. We will initialized a timer which[…]<\/p>\n","protected":false},"author":5,"featured_media":1539,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,24,22],"tags":[],"class_list":["post-1018","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html5","category-javascript","category-quick-tip"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/posts\/1018","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/comments?post=1018"}],"version-history":[{"count":4,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/posts\/1018\/revisions"}],"predecessor-version":[{"id":1027,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/posts\/1018\/revisions\/1027"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/media\/1539"}],"wp:attachment":[{"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/media?parent=1018"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/categories?post=1018"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/tags?post=1018"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}