HTML5

UFOs back in Defense II

Markus

It seems, that someone had deleted the UFO graphics file from my online game Defense II. Now the UFOs are back. Instead of UFOs, there were only filled circles flying in the playing area.

My firewall plugin has recently blocked some IPs. I guess some people “have too much time”, that is: they have the time to do bad things to others.

Perhaps you should go to see this game and defend the neighborhood from UFOs. 🙂

Unlimited Objects Source Code

Markus

In my old blog post I gave some idea how to implement “unlimited objects” program. In the original video I used 16 canvases with 16 images + the actual visible canvas. Two canvases only is sufficient.

In the source (Cerberus X) below, no external graphics files are needed:

Import mojo2

Function Main()
	New MyApp
End

Class MyApp Extends App
	
	Field gfxCopy:Image[16]
	Field ccanvas:Canvas
	Field counter:Int
	Field angle:Float	
	Field canvas:Canvas
	
	Field scaleX:Float, scaleY:Float
		
	Field x:Float, y:Float
	Field r:Float
	
	Method OnCreate()
			
		canvas = New Canvas()
		counter = 0
		
		For Local i:Int = 0 To 15
			gfxCopy[i] = New Image(640,480,.0,.0)
		Next
		
		ccanvas = New Canvas(gfxCopy[0])
		
		scaleX = DeviceWidth / 640
		scaleY = DeviceHeight / 480
		
		r = 100
		SetUpdateRate(60)
	End
	
	Method OnUpdate()

	End
	
	Method OnRender()
		
		angle = angle + 2

		x = Cos(angle) * r + 640 / 2
		y = Sin(angle) * r + 480 / 2
		
		r = r + 0.1

		counter = counter + 1
		If counter = 16 Then counter = 0
				
		ccanvas.SetRenderTarget(gfxCopy[counter])
		ccanvas.SetColor(1,1,0)
		ccanvas.DrawCircle(x,y,32)
		ccanvas.SetColor(1,0,1)
		ccanvas.DrawCircle(x,y,30)
		
		ccanvas.Flush()
		
		canvas.PushMatrix()
		canvas.Scale(scaleX,scaleY)
		
		canvas.Clear	

		canvas.DrawImage(gfxCopy[counter],0,0)

		canvas.Flush()
		canvas.PopMatrix()
						
	End
	
End Class

The program gives different output, if the calculations are in OnUpdate() on HTML5 target.

Below is the old video I’ve made previously:

Source code license: MIT.

Order the Chaos as Online Game

Markus

I published yesterday Order the Chaos as online game. The online version is some kind of lite version of the original BlitzMax game.

Link to game.

The game has a bit simpler ending because of the limitations of HTML5.

The resolution of the game is 648 x 720 pixels.

Order the Chaos II — more polished version and with large (the playing area is scrolled) Mandelbrot mountains is of course available on itch.io.

The online version of Order the Chaos works with mobile devices, too.

Embedding HTML5 output of Cerberus X to WordPress pages

Markus

The first thing you need is Code Embed plugin.

If your HTML5 output code loads files, something must be changed in the JavaScript-code. Find the following piece of code:

BBHtml5Game.prototype.PathToUrl=function( path ){
	if( path.indexOf( "cerberus:" )!=0 ){
		return path;
	}else if( path.indexOf( "cerberus://data/" )==0 ) {
		return "data/"+path.slice( 16 );
	}
	return "";
}

The URL of the data drawer must be changed. If you have the data drawer at the root of your www (public_html) drawer, change the “path.slice” line like this:

return "/data/"+path.slice( 16 );

If you’re working offline with some server program and have a testsite to experiment with, the path can be found as follows:

return "http://localhost/testsite/data/"+path.slice( 16 );

The y-coordinate of the mouse need also some adjustment, if the page has scrollbar: The y-start depends on the position of the scrollbar.

Find the following function:

	function mouseY( e ){
		var y=e.clientY+document.body.scrollTop;
		var c=canvas;
		while( c ){
			y-=c.offsetTop;
			c=c.offsetParent;
		}
		return y*yscale;
	}

The y-coordinate is correct with following change:

function mouseY( e ){
		var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
		var y=e.clientY+document.body.scrollTop + scrollTop;
		var c=canvas;
		while( c ){
			y-=c.offsetTop;
			c=c.offsetParent;
		}
		return y*yscale;
	}

With the touch screen no additional changes need to be done.

While working with WordPress, the “tool/status” bar of WordPress changes the y-coordinate too, but the visitor on your page doesn’t have that page with the “tool/status” bar of WordPress. 🙂

You’ll probably want to remove the console from the page, too. Just remove all the references to splitter and console from the CerberusGame.html.

I almost forgot, in CerberusGame.html use absolute path to find the JavaScript-file. For example src=”https://yoursite.com/drawer/program.js”. Perhaps at first is good practice to try with all the contents of the default CerberusGame.html, so that you see that everything is working.

This should help.

As an example in practice, you might want check my online games corner.

Good luck!

3D Stars With Controlled Center Point

Markus

Just little changes to old post on 3D stars with Mojo2… Now on the projection from 3D space to 2D space (screen), the center point can be controlled, just touch the screen or keep the left mouse button pushed down to control the stars… The code should compile as such to any target on Monkey X Pro.

Import mojo2
 
Function Main:Int()
	New MyApp
	Return 0
End
 
Class MyApp Extends App
 
	Const BG_WIDTH:Int = 640
	Const BG_HEIGHT:Int = 480
	Const STARS:Int = 280
	
	Global devWidth:Float, devHeight:Float, scaleX:Float, scaleY:Float
	
	Global x:Float[STARS],y:Float[STARS],z:Float[STARS]
 
	Field canvas:Canvas
	Field tx:Float, ty:Float
	
	Method OnCreate()
 
		devWidth = DeviceWidth()
		devHeight = DeviceHeight()
		
		scaleX = devWidth / BG_WIDTH
		scaleY = devHeight / BG_HEIGHT
 
		For Local i:Int = 0 To STARS - 1
			x[i] = Rnd(-50,50)
			y[i] = Rnd(-50,50)
			z[i] = Rnd(50,200)
		Next
		
		canvas = New Canvas()
 
		tx = BG_WIDTH / 2
		ty = BG_HEIGHT / 2
		
		SetUpdateRate(60)
	End
 
	Method OnUpdate()
		
		If TouchDown(0) > 0 Then
			tx = TouchX() / scaleX
			ty = TouchY() / scaleY
		Endif
			
	End
	
 
	Method OnRender()
		
		Local shade:Float
		
		' Scale the graphics
		canvas.PushMatrix()
		canvas.Scale (scaleX,scaleY)
 
		canvas.Clear()
				
		For Local i:Int = 0 To STARS - 1
			z[i] = z[i] - 1
			If z[i] < 10 Then z[i] = Rnd(50,200)
			
			' shade is 0..1
			shade = 1 - z[i] / 200
			canvas.SetColor shade,shade,shade
			canvas.DrawOval x[i] / z[i] * 200 + tx, y[i] / z[i] * 200 + ty,3,3
		Next
	
		canvas.Flush()
		
		canvas.PopMatrix()
		
	End
 
End Class

Source code license: Public Domain.

3D Stars with Mojo2

Markus

As an example of using Mojo2 module in Monkey X, I wrote the 3D stars using Mojo2 module in Monkey X.

In earlier post the stars were made with the old Mojo. Mojo2 has lots of nice features to experiment with.

Below is the source code in full:

Import mojo2

Function Main:Int()
	New MyApp
	Return 0
End
 
Class MyApp Extends App
 
	Const BG_WIDTH:Int = 640
	Const BG_HEIGHT:Int = 480
	Const STARS:Int = 180
	
	Field scaleX:Float, scaleY:Float
	
	Field x:Float[STARS],y:Float[STARS],z:Float[STARS]
 
	Field canvas:Canvas
	
	Method OnCreate()
 
		scaleX = DeviceWidth() / BG_WIDTH
		scaleY = DeviceHeight() / BG_HEIGHT
 
		For Local i:Int = 0 To STARS - 1
			x[i] = Rnd(-50,50)
			y[i] = Rnd(-50,50)
			z[i] = Rnd(50,200)
		Next
		
		canvas = New Canvas()
		
		SetUpdateRate(60)
	End
 
	Method OnUpdate()
			
	End
	
 
	Method OnRender()
		
		Local shade:Float
		
		' Scale the graphics
		canvas.PushMatrix()
		canvas.Scale (scaleX,scaleY)
  
		canvas.Clear()
		
		For Local i:Int = 0 To STARS - 1
			z[i] = z[i] - 1
			If z[i] < 10 Then z[i] = Rnd(50,200)
					
			' shade is 0..1
			shade = 1 - z[i] / 200
			canvas.SetColor shade,shade,shade
			canvas.DrawOval 320 + x[i] / z[i] * 200, 240 + y[i] / z[i] * 200,3,3
		Next
	
		canvas.Flush()
		
		canvas.PopMatrix()
		
	End
 
End Class

Feel free to use this code.

HTML5 3D Stars

Markus

The 3D stars are again embedded in this blog post and source code with old mojo is simplified.

The code is written in Monkey X Pro, which is nowadays available on itch.io.

Here’s the code:

Import mojo

Function Main:Int()
	New MyApp
	Return 0
End

Class MyApp Extends App

	Const STARS:Int = 200
	
	Field devWidth:Float, devHeight:Float, scaleX:Float, scaleY:Float
	Field x:Float[STARS],y:Float[STARS],z:Float[STARS]

	Method OnCreate()

		scaleX = DeviceWidth() / 640
		scaleY = DeviceHeight() / 480
		
		For Local i:Int = 0 To STARS - 1
			x[i] = Rnd(-50,50)
			y[i] = Rnd(-50,50)
			z[i] = Rnd(50,200)
		Next
		
		
		SetUpdateRate(60)
	End

	Method OnUpdate()
	
	End
	

	Method OnRender()
		
		Local shade:Float
		
		PushMatrix()
		Scale(scaleX,scaleY)
		Cls

		For Local i:Int = 0 To STARS - 1
			
			z[i] = z[i] - 1
			If z[i] < 10 Then z[i] = Rnd(50,200)
		
			shade = 255 - (z[i] / 200) * 255
			SetColor shade,shade,shade
		
			' Projection from 3D space to 2D screen	
				
			DrawOval(x[i] / z[i] * 200 + 320,y[i] / z[i] * 200 + 240,2,2)
			
		Next

		
		PopMatrix()
		
	End

End Class

Do use my code as you wish.