- Joined
- Jan 2, 2020
- Messages
- 1,414
Here's a simple example how to use Mojo2 and raw HTML to do something in HTML5 target.
Cerberus:
Import mojo2
#MOJO_AUTO_SUSPEND_ENABLED=False
#HTML5_CANVAS_WIDTH=1440 ' Set your wanted window-size here
#HTML5_CANVAS_HEIGHT=900
#If TARGET="html5"
Extern
Function ReloadApp:Void() = "location.reload" ' How to insert HTML code directly inline without external files and get it ignored by other platforms
Public
#Else
Function ReloadApp:Void()
End
#End
Function Main()
New MyApp
End
Class MyApp Extends App
Field x:Float
Field y:Float
Field i:Image
Field canvas:Canvas
Method OnCreate()
canvas = New Canvas
' Vertical blanking
SetSwapInterval 1 ; SetUpdateRate 0
Seed = Millisecs()
y = Rnd(100)
x = -540
Print "Starting"
End
Method OnUpdate()
If TouchHit()
If MouseX() > 200 And MouseX() < 294 And MouseY() > 200 And MouseY() < 243
ReloadApp()
Endif
Endif
End
Method OnRender()
canvas.Clear 0,0,0
canvas.SetColor 0,1,Rnd(1)
canvas.DrawLine 1440/2,0,x+400,y+10
canvas.DrawLine 1440/2,0+Rnd(10),x+400,y+50+210+Rnd(4)
canvas.DrawLine 1440/2,0+Rnd(2),x+402,y+40+50+Rnd(20)
canvas.DrawLine 1440/2,0+Rnd(2),x+402,y+40+150+Rnd(10)
canvas.SetColor 1,1,1
canvas.DrawOval x+350++Sin(x)*10,y+(12*5)+Cos(x)*10,10,10
canvas.DrawOval x+200+Cos(x)*10,y+(12*6)+Sin(x)*10,10,10
x = x + 1
y = 100 + Sin(x*2) * 100 ' Use Sin if you want to use degrees, use Sinr if you want to use radians wo converting anything
canvas.SetColor 1,1,0
canvas.DrawText " oooo$$$$$$$$$$$$oooo",x,y
canvas.DrawText" oo$$$$$$$$$$$$$$$$$$$$$$$$o",x,y+(12*1)
canvas.DrawText" oo$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$o o$ $$ o$",x,y+(12*2)
canvas.DrawText" o $ oo o$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$o $$ $$ $$o$",x,y+(12*3)
canvas.DrawText"oo $ $ '$ o$$$$$$$$$ $$$$$$$$$$$$$ $$$$$$$$$o $$$o$$o$",x,y+(12*4)
canvas.DrawText"$$$$$$o$ o$$$$$$$$$ $$$$$$$$$$$ $$$$$$$$$$o $$$$$$$$",x,y+(12*5)
canvas.DrawText" $$$$$$$ $$$$$$$$$$$ $$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$",x,y+(12*6)
canvas.DrawText" $$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$ $$$$$$$$$$$$$$ '$$$$$$",x,y+(12*7)
canvas.DrawText" '$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ ''$$$",x,y+(12*8)
canvas.DrawText" $$$ o$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ ''$$$o",x,y+(12*9)
canvas.DrawText" o$$'' $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ $$$o",x,y+(12*10)
canvas.DrawText" $$$ $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$'' ''$$$$$$ooooo$$$$o",x,y+(12*11)
canvas.DrawText" o$$$oooo$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ o$$$$$$$$$$$$$$$$$",x,y+(12*12)
canvas.DrawText" $$$$$$$$''$$$$ $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ $$$$",x,y+(12*13)
canvas.DrawText"' '''''' $$$$ '''$$$$$$$$$$$$$$$$$$$$$$$$$$$$''''' o$$",x,y+(12*14)
canvas.DrawText" ''$$$o ''''$$$$$$$$$$$$$$$$$$$$$'' $$$",x,y+(12*15)
canvas.DrawText" $$$o $$$''''''$$$$$$''''''' o$$$",x,y+(12*16)
canvas.DrawText" $$$$o oo o$$$''",x,y+(12*17)
canvas.DrawText" '''$$$o o$$$$$''''$$$$o o$$$$",x,y+(12*18)
canvas.DrawText" '''''$$$$$oo ''''$$$o$$$$$o o$$$$",x,y+(12*19)
canvas.DrawText" '''''$$$$$oooo '''$$$o$$$$$$$$$",x,y+(12*20)
canvas.DrawText" '''$$$$$$oo $$$$$$$$$$",x,y+(12*21)
canvas.DrawText" ''''''''$$$$$$$$$$$",x,y+(12*22)
canvas.DrawText" $$$$$$$$$$$$",x,y+(12*23)
canvas.DrawText" $$$$$$$$$$",x,y+(12*24)
canvas.DrawText" '''$$$$$$$",x,y+(12*25)
canvas.SetColor 1,0,0
canvas.DrawText" oo ",x,y+(12*17)
canvas.DrawText" '$$$$o ",x,y+(12*18)
canvas.DrawText" $$$o$$$$$o ",x,y+(12*19)
canvas.DrawText" '''$$$o$$$$ ",x,y+(12*20)
canvas.DrawText" $$$$$$$$$$",x,y+(12*21)
canvas.DrawText" ''$$$$$$$$$$$",x,y+(12*22)
canvas.DrawText" $$$$$$$$$$$$",x,y+(12*23)
canvas.DrawText" $$$$$$$$$$",x,y+(12*24)
canvas.DrawText" '''$$$$$$$",x,y+(12*25)
canvas.SetColor 0.8,0,0
canvas.DrawRect 200,200,94,43
canvas.SetColor 0.8,0.8,0.8
canvas.DrawText "Reload",220,215
canvas.Flush
End
Method OnSuspend()
Print "OnSuspend"
End
Method OnResume()
Print "OnResume"
End
End
Attachments
Last edited: