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 will enable closeAd button after a predefined interval (normally 5 or 10 secs)
var counter = 0;
var counterId = setInterval(adCounter, 1000);
var canClose = false;
function closeAd(){
if(canClose){
document.getElementById("topContainer").removeChild(document.getElementById("adContainer"));
}
}
function adCounter() {
if (counter > 9) {
clearInterval(counterId);
document.getElementById("closeBtn").innerHTML = "Close and play game";
canClose = true;
return;
}
counter++;
document.getElementById("closeBtn").innerHTML = "You can close ad in " + (10 - counter).toString() + " seconds";
}
Below is the skeleton game code.
// ---------------boot---------------------
Boot = {
init: function () {
},
preload: function () {
mygame.stage.backgroundColor = '#52bad2';
mygame.load.spritesheet("background", "background.png", 250, 250);
mygame.load.image("loading", "loading.png");
},
create: function () {
mygame.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
mygame.stage.scale.pageAlignHorizontally = true;
mygame.stage.scale.pageAlignVeritcally = true;
mygame.state.start("Loading");
}
};
// ---------------loading---------------------
Loading = {
init: function () {
},
preload: function () {
mygame.stage.backgroundColor = '#52bad2';
var loadingBar = mygame.add.sprite(this.world.centerX, this.world.centerY, "loading");
loadingBar.anchor.setTo(0.5);
mygame.load.setPreloadSprite(loadingBar);
},
create: function () {
mygame.state.start("MainMenu");
}
};
var MainMenu = {
init: function () {
},
preload: function () {
},
create: function () {
mygame.stage.backgroundColor = '#52bad2';
var text = mygame.add.text(mygame.world.centerX, mygame.world.centerY, 'Game Area', { font: '24px Arial', fill: '#fff' });
text.anchor.setTo(0.5);
}
};
window.onload = function () {
mygame = new Phaser.Game(500, 500, Phaser.AUTO, "mygame");
mygame.state.add("Boot", Boot);
mygame.state.add("Loading", Loading);
mygame.state.add("MainMenu", MainMenu);
mygame.state.start("Boot");
}