Do you like my tutorials?

Then consider supporting me on Ko-fi

Talking about Game development, Html, HTML5, Javascript and Monetize.

I really like PuzzleScript engine because it allowed me to create an 80 levels Sokoban game in a few minutes, then I was able to add mobile controls to play it on mobile devices.

Now, what about trying to monetize your PuzzleScript games? I am showing you a quick way to insert interlevel ads.

In my example I am using Google Adsense, but you are free to place the ad you prefer, or even choose which ad network to display according to level number or other variables.

This is the result:

You can play the game at http://emanueleferonato.com/stuff/bwban_mobile/.

Let’s see how it’s done:

First, in your HTML, add these lines somewhere between <body> and </body>:

<div id = "adcontainer">
	<div id = "ad">
          <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- BWBan 2 -->
		<ins class="adsbygoogle"
		     style="display:inline-block;width:250px;height:250px"
		     data-ad-client="ca-pub-2062493463858889"
		     data-ad-slot="9859864235"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
          <div id = "closead">Close</div>
	</div>
</div>

Now it’s time to add a bit of style to adcontainer, ad and closead divs:

#adcontainer{
     position:absolute;
     left:0px;
     top:0px;
     width:100%;
     height:100%;
     background:rgba(0,0,0,0.9);
     display:none;
}
#ad{
	position:absolute;
	top:20%; 
	height:80%; 
	width:100%;
	text-align:center;
}
#closead{
	font:normal 12px arial;
	cursor:pointer;
	padding:10px;
	background-color:#999999;
	width:80px;
	margin:30px auto;
}

What’s next? We have to place into PuzzleScript generated code a function to call whenever we want to display an ad. Search for loadLevelFromState function declaration and at the very beginning of the function add:

function loadLevelFromState(a,b){showAd(b),forceRegenImages=!0,}

Now every time a new level (or a new message) is about to be displayed, we’ll call showAd function with the level (or message) number passed as argument.

This is showAd function:

function showAd(n){
	if(n>0 && n%2==0){
		$("#adcontainer").fadeTo(1000,1);
	}    
}

I am simply showing the ad when the level is greater than zero and can be divided by two. That’s because I have a message before each level, and I want the ad to be displayed when the game shows the message, so at level 2, 4, 6, and so on.

To close the ad, use:

$("#closead").on("touchend click",function(){
	$("#adcontainer").fadeTo(500,0).hide();	
})

And that’s it, now you can have some kind of interlevel ads.

Download the full project

Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.