Talking about Game development, HTML5 and Javascript.
Well, this is one of the longest titles for a post, but the concept I am going to explain is very simple: showing ads in your HTML5 games. There are a lot of advertising company willing to serve ads to your HTML5 games but most of them have poor options or are very obtrusive. I am currently trying Leadbolt which has a clean dashboard, some interesting ad formats and it’s really easy to configure: in most cases you only have to add one line in your html page calling its remote JavaScript. This is the “to-do” to make a preloader work:
Although this may sound great, there are two problems I had to face:
1 – Ads are only served on mobile devices, so I needed to display my own ads when games are run on desktop computers
2 – Ads do not come with a “close” button. I mean it, look at this screenshot:
They will show a full screen overlay with no “close” button. Never mind, we are going to create the close button as well as an alternative ad to show when players aren’t opening the game from mobile.
I was lucky enough Leadbolt ads always open in an iframe whose id is ap_iframe so I could create my button to close the element with such id.
To keep loading times low, I did not include jQuery or other JavaScript frameworks, so here is how my index.html looks:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{
background: #000000;
padding:0px;
margin:0px;
}
#closebutton {
background: #000000;
font:bold 24px arial;
padding: 2% 4% 2% 4%;
color:white;
text-decoration: none;
position:fixed;
z-index:1000;
top:0px;
right:0px;
text-transform:uppercase;
border:6px solid white;
cursor:pointer;
}
#bookad{
background: url("assets/banners/book.jpg") no-repeat center center fixed;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
background-color:white;
position:fixed;
width:100%;
height:100%;
z-index:100;
cursor:pointer;
display:none;
}
</style>
<script src="phaser.min.js"></script>
<script src = "game.js"></script>
<script type="text/javascript" src="http://ad.leadbolt.net/show_app_ad.js?section_id=652903248"></script>
</head>
<body>
<div id = "bookad" onclick = "window.location.href='http://emanueleferonato.com/2015/12/24/new-minibook-released-create-html5-vertical-endless-runner-cross-platform-games/'"></div>
<script>
if (document.getElementById("ap_iframe")){
document.body.innerHTML += "<div id = 'closebutton' onclick = 'removeLeadBolt()'>X</div>";
}
else{
showBookAd();
}
function removeLeadBolt(){
document.body.removeChild(document.getElementById("ap_iframe"));
document.body.removeChild(document.getElementById("closebutton"));
}
function showBookAd(){
document.getElementById("bookad").style.display = "block";
document.body.innerHTML += "<div id = 'closebutton' onclick = 'removeBookAd()'>X</div>";
}
function removeBookAd(){
document.body.removeChild(document.getElementById("bookad"));
document.body.removeChild(document.getElementById("closebutton"));
}
</script>
</body>
</html>
Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.