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

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 :huh:

y un poco de codigo vbs:

Sprites:

Código

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

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

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!
:silbar:

[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

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

IExporer 11:

Código

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