Aplicacion HTML IExplorer, Canvas, CSS3 y VBScript (Uso de Sprites/Tilemapping)

[John1Connor]

Bueno crero que a partir de IExplorer 10 se puede jugar con vbscript canvas c33s y html5  , aca les dejo un ejemplo de uso de sprites en vbscripts css3 y html5 (HTA). sin kinetic, jquerry ni ninguna de esas cosas 100% yo:


La imagen de los sprites:

y aca un video de como va la cosa  
[youtube=640,360]https://www.youtube.com/watch?v=OByO-KHpqX4[/youtube]


y un poco de codigo vbs:

Sprites:

Código (vb) [Seleccionar] Expandir


Dim Left_P, Top_P, SpriteF, DirectY
Dim Caminata
Caminata = "False"
Left_P = cint(0) : Top_P = cint(0)
SpriteF = 0
DirectY = 27
Player_State = "Stand"
with sprite.style
.position = "absolute"
.left = cint(screen.width) / 2
.top = 510
.height = 150
.width = 94
.backgroundposition = Left_P & " " & Top_P
end with



Sub window_OnLoad()
FrameSprite = SetInterval("FrameS()",40)
Llamar = SetTimeOut("CargarMapa()",100)
end sub



Sub FrameS()
Select Case Player_State
case "Stand" Call Parado()
case "Walk"  Call Caminar()
case "Run"  Call Correr()
case "Jump" Call Saltar()
end select
End Sub


Public Sub Parado()
Top_P = cint(0)
if cint(SpriteF) > cint(21) Then SpriteF = cint(0) end if
if SpriteF = cint(21) Then
Left_P = cint(0) : Top_P = cint(0)
Sprite.Style.BackgroundPosition = Left_P & " " & Top_P
SpriteF = cint(0)
else
Left_P = cint(Left_P) - cint(100) : Top_P = cint(0)
Sprite.Style.BackgroundPosition = Left_P & " " & Top_P
SpriteF = cint(SpriteF) + cint(1)
end if
End Sub

Public Sub Caminar()
Sprite.style.top = 510
Top_P = cint(-150)
if cint(SpriteF) > cint(21) Then SpriteF = cint(0) end if
if cint(SpriteF) = cint(21) Then
Left_P = cint(0) : Top_P = cint(-150)
Sprite.Style.BackgroundPosition = Left_P & " " & Top_P
SpriteF = cint(0)
else
Left_P = cint(Left_P) - cint(100) : Top_P = cint(-150)
Sprite.Style.BackgroundPosition = Left_P & " " & Top_P
SpriteF = cint(SpriteF) + cint(1)
end if
Call Mover_Sprite()
End Sub




Public Sub Mover_Sprite()
if cint(Limpiar(Sprite.Style.Left)) =< cint(200) or cint(Limpiar(Sprite.Style.Left)) >= cint(Screen.Width) - cint(200) then
Call Mover()
else
Sprite.Style.Left = Limpiar(Sprite.Style.Left) + cint(DirectY) : DirectMap_X = 0
end if
End Sub

Public Sub Acomodar()
if cint(Limpiar(Sprite.Style.Left)) < cint(200) then Sprite.Style.Left = 200 end if
if cint(Limpiar(Sprite.Style.Left)) > cint(Screen.Width) - cint(200) then Sprite.Style.Left = cint(Screen.Width) - cint(200) end if
end sub
Public Sub CambiarRumbo()
if cint(Limpiar(Sprite.Style.Left)) >= cint(Screen.Width) - cint(200) then
Sprite.Style.Left = Limpiar(Sprite.Style.Left) - 15
elseif cint(Limpiar(Sprite.Style.Left)) =< cint(200) then
Sprite.Style.Left = Limpiar(Sprite.Style.Left) + 15
end if
end sub


Public sub Gravedad()
#html
end sub



Public Sub Saltar()
Top_P = cint(-300)
if cint(SpriteF) >= cint(21) Then
if Caminata = "True" Then
Player_State = "Walk"
else
Sprite.style.top = 510
Player_State = "Stand"
end if
Left_P = cint(0) : Top_P = cint(0)
SpriteF = cint(0)
else
Left_P = cint(Left_P) - cint(100) : Top_P = cint(-300)
Sprite.Style.BackgroundPosition = Left_P & " " & Top_P
SpriteF = cint(SpriteF) + cint(1)
if cint(SpriteF) < cint(11) then
Sprite.Style.Top = Limpiar(Sprite.Style.Top) - cint(15)
if cint(Limpiar(Sprite.Style.Left)) < cint(200) or cint(Limpiar(Sprite.Style.Left)) > cint(Screen.Width) - cint(200) then
Call Mover()
else
Sprite.Style.Left = Limpiar(Sprite.Style.Left) + cint(DirectY)
end if
else
Sprite.Style.Top = Limpiar(Sprite.Style.Top) + cint(15)
if cint(Limpiar(Sprite.Style.Left)) < cint(200) or cint(Limpiar(Sprite.Style.Left)) > cint(Screen.Width) - cint(200) then
Call Mover()
else
Sprite.Style.Left = Limpiar(Sprite.Style.Left) + cint(DirectY)
end if
end if
end if
End Sub


Public Sub Correr()
if SpriteF = 15 Then
Left_P = 0 : Top_P = -282
Sprite.Style.BackgroundPosition = Left_P & " " & Top_P
SpriteF = 0
else
Left_P = cint(Left_P) - cint(150) : Top_P = -282
Sprite.Style.BackgroundPosition = Left_P & " " & Top_P
SpriteF = SpriteF + 1
Sprite.Style.Left = Limpiar(Sprite.Style.Left) + cint(DirectY)
end if
End Sub




Function Limpiar(dato)
Limpiar = Replace(dato,"px","")
Limpiar = Replace(Limpiar,".","")
Limpiar = Replace(Limpiar,":","")
Limpiar = Replace(Limpiar,",","")
Limpiar = Replace(Limpiar,"am","")
Limpiar = Replace(Limpiar,"pm","")
Limpiar = Replace(Limpiar,"em","")
Limpiar = Replace(Limpiar,"hs","")
end function

'filter: FlipH; PARA GIRAR




Function Coliciones(PosXUno, AnchoUno, PosYUno, LargoUno,PosXDos, AnchoDos, PosYDos, LargoDos)
If  (Cdbl(PosXUno) + Cdbl(AnchoUno)) > (Cdbl(PosXDos))_
And (cdbl(PosXUno)) < (Cdbl(PosXDos) + Cdbl(AnchoDos))_
 And (cdbl(PosYUno) + cdbl(LargoUno)) > (cdbl(PosYDos))_
  And (cdbl(PosYUno)) < (cdbl(PosYDos) + Cdbl(AnchoDos)) Then
Coliciones = "True"
Else
Coliciones = "False"
End If
End Function


Mapping (VBS):
   

Código (vb) [Seleccionar] Expandir


Dim Map_X, DirectMap_X
Map_X = cint(0)
DirectMap_X = cint(0)



Public Sub CargarMapa()
Dim TileSet(199)
Set objFSO = CreateObject("Scripting.FileSystemObject")
Set objFile = objFSO.OpenTextFile("mapas/mapa0.map", 1)
   mapa = objFile.ReadAll
   splitmapa = Split(mapa,",")
CuentaMapa  = ubound(splitmapa)
for m=0 to CuentaMapa
Tileset(m) = splitmapa(m)
next
ii = cint(0)
TileTop = cint(0)
TileLeft = cint(0)
for i = 0 to 199
Document.Title = Porcentaje(i,199)
if cint(ii) > cint(24) then TileTop = cint(TileTop) + cint(128) : TileLeft = cint(0) : ii = 0 end if
if cint(i) > cInt(199) Then Sleep(100) end if
bodydiv.InnerHTML = bodydiv.InnerHTML + "<img id=""tile"&i&""" style="""">"
ExecuteGlobal("tile" & i & ".src = ""imagenes/tile/" & TileSet(i) & ".png""")
ExecuteGlobal("tile"&i&".style.position = ""Absolute""")
ExecuteGlobal("tile"&i&".style.top = " & TileTop)
ExecuteGlobal("tile"&i&".style.left = " & TileLeft)
TileLeft = cint(TileLeft) + cint(128)
ii = cint(ii) + cint(1)
next
for a=0 to 199
ExecuteGlobal("tile"&a&".style.top = limpiar(tile"&a&".style.top) - 128")
next
End Sub



Public Sub Mover()
if DirectY = -15 then
DirectMap_X = 27
Map_X = cint(Map_X) + cint(DirectMap_X)
end if

if DirectY = 15 then
DirectMap_X = -27
Map_X = cint(Map_X) + cint(DirectMap_X)
end if

if DirectY = 0 then
DirectMap_X = 0
end if

for a=0 to 199
ExecuteGlobal("tile"&a&".style.left = Limpiar(tile"&a&".style.left) +"& DirectMap_X)
next

'Tiempo = SetTimeOut("Mover()",40)
end Sub




Function Porcentaje(a,b)
Porcentaje = round(a / b * 100)
end function

Sub Sleep(MSecs)
Set fso = CreateObject("Scripting.FileSystemObject")
 If Fso.FileExists("sleeper.vbs")=False Then
 Set objOutputFile = fso.CreateTextFile("sleeper.vbs", True)
 objOutputFile.Write "wscript.sleep WScript.Arguments(0)"
 objOutputFile.Close
 End If
CreateObject("WScript.Shell").Run "sleeper.vbs " & MSecs,1 , True
End Sub


Function Limpiar(dato)
Limpiar = Replace(dato,"px","")
Limpiar = Replace(Limpiar,".","")
Limpiar = Replace(Limpiar,":","")
Limpiar = Replace(Limpiar,",","")
Limpiar = Replace(Limpiar,"am","")
Limpiar = Replace(Limpiar,"pm","")
Limpiar = Replace(Limpiar,"em","")
Limpiar = Replace(Limpiar,"hs","")

end function



Ejemplo de un mapa (mapa0.map):

Código (vb) [Seleccionar] Expandir


0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,14,15,15,16,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2,2,2,2,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,4,5,5,5,5,6,0,0,0,0,1,2,3,0,0,0,0,0,0,0,0,0,2,2,2,8,5,5,5,5,10,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5



y bueno eso es todo.. Saludos!






[MODIFICO]

Perdon algo importante sobre el uso de canvas y vbscript en un HTA es la compatibilidad, iexplorer 9, 10 y 11  son diferentes y para cada uno tenes una linea de codigo diferente...

IExplorer 9 y 10: (en el html)

Código (html) [Seleccionar] Expandir


<meta http-equiv="X-UA-Compatible" content="IE=edge">


IExporer 11:

Código (html) [Seleccionar] Expandir


<meta http-equiv="X-UA-Compatible" content="IE=10">