Foro de elhacker.net

Programación => Scripting => Mensaje iniciado por: John1Connor en 21 Julio 2015, 09:42 am


Título: Aplicacion HTML IExplorer, Canvas, CSS3 y VBScript (Uso de Sprites/Tilemapping)
Publicado por: John1Connor en 21 Julio 2015, 09:42 am
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: (https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-xpt1/v/t1.0-9/11703336_10206570764603256_2993940351633545393_n.jpg?oh=4a1f726439e1bdee2c52884b2ebd17d8&oe=564B3AD5&__gda__=1447796956_b7d896b3b30ed497dfec2601ad4144c8)

y aca un video de como va la cosa   :huh:
OByO-KHpqX4


y un poco de codigo vbs:

Sprites:
Código
  1. Dim Left_P, Top_P, SpriteF, DirectY
  2. Dim Caminata
  3. Caminata = "False"
  4. Left_P = cint(0) : Top_P = cint(0)
  5. SpriteF = 0
  6. DirectY = 27
  7. Player_State = "Stand"
  8. with sprite.style
  9. .position = "absolute"
  10. .left = cint(screen.width) / 2
  11. .top = 510
  12. .height = 150
  13. .width = 94
  14. .backgroundposition = Left_P & " " & Top_P
  15. end with
  16.  
  17.  
  18.  
  19. Sub window_OnLoad()
  20. FrameSprite = SetInterval("FrameS()",40)
  21. Llamar = SetTimeOut("CargarMapa()",100)
  22. end sub
  23.  
  24.  
  25.  
  26. Sub FrameS()
  27. Select Case Player_State
  28. case "Stand" Call Parado()
  29. case "Walk"  Call Caminar()
  30. case "Run"  Call Correr()
  31. case "Jump" Call Saltar()
  32. end select
  33. End Sub
  34.  
  35.  
  36. Public Sub Parado()
  37. Top_P = cint(0)
  38. if cint(SpriteF) > cint(21) Then SpriteF = cint(0) end if
  39. if SpriteF = cint(21) Then
  40. Left_P = cint(0) : Top_P = cint(0)
  41. Sprite.Style.BackgroundPosition = Left_P & " " & Top_P
  42. SpriteF = cint(0)
  43. else
  44. Left_P = cint(Left_P) - cint(100) : Top_P = cint(0)
  45. Sprite.Style.BackgroundPosition = Left_P & " " & Top_P
  46. SpriteF = cint(SpriteF) + cint(1)
  47. end if
  48. End Sub
  49.  
  50. Public Sub Caminar()
  51. Sprite.style.top = 510
  52. Top_P = cint(-150)
  53. if cint(SpriteF) > cint(21) Then SpriteF = cint(0) end if
  54. if cint(SpriteF) = cint(21) Then
  55. Left_P = cint(0) : Top_P = cint(-150)
  56. Sprite.Style.BackgroundPosition = Left_P & " " & Top_P
  57. SpriteF = cint(0)
  58. else
  59. Left_P = cint(Left_P) - cint(100) : Top_P = cint(-150)
  60. Sprite.Style.BackgroundPosition = Left_P & " " & Top_P
  61. SpriteF = cint(SpriteF) + cint(1)
  62. end if
  63. Call Mover_Sprite()
  64. End Sub
  65.  
  66.  
  67.  
  68.  
  69. Public Sub Mover_Sprite()
  70. if cint(Limpiar(Sprite.Style.Left)) =< cint(200) or cint(Limpiar(Sprite.Style.Left)) >= cint(Screen.Width) - cint(200) then
  71.  Call Mover()
  72. else
  73. Sprite.Style.Left = Limpiar(Sprite.Style.Left) + cint(DirectY) : DirectMap_X = 0
  74. end if
  75. End Sub
  76.  
  77. Public Sub Acomodar()
  78. if cint(Limpiar(Sprite.Style.Left)) < cint(200) then Sprite.Style.Left = 200 end if
  79. if cint(Limpiar(Sprite.Style.Left)) > cint(Screen.Width) - cint(200) then Sprite.Style.Left = cint(Screen.Width) - cint(200) end if
  80. end sub
  81. Public Sub CambiarRumbo()
  82. if cint(Limpiar(Sprite.Style.Left)) >= cint(Screen.Width) - cint(200) then
  83. Sprite.Style.Left = Limpiar(Sprite.Style.Left) - 15
  84. elseif cint(Limpiar(Sprite.Style.Left)) =< cint(200) then
  85. Sprite.Style.Left = Limpiar(Sprite.Style.Left) + 15
  86. end if
  87. end sub
  88.  
  89.  
  90. Public sub Gravedad()
  91. #html	
  92. end sub
  93.  
  94.  
  95.  
  96. Public Sub Saltar()
  97. Top_P = cint(-300)
  98. if cint(SpriteF) >= cint(21) Then
  99. if Caminata = "True" Then
  100. Player_State = "Walk"
  101. else
  102. Sprite.style.top = 510
  103. Player_State = "Stand"
  104. end if
  105. Left_P = cint(0) : Top_P = cint(0)
  106. SpriteF = cint(0)
  107. else
  108. Left_P = cint(Left_P) - cint(100) : Top_P = cint(-300)
  109. Sprite.Style.BackgroundPosition = Left_P & " " & Top_P
  110. SpriteF = cint(SpriteF) + cint(1)
  111. if cint(SpriteF) < cint(11) then 
  112. Sprite.Style.Top = Limpiar(Sprite.Style.Top) - cint(15)
  113. if cint(Limpiar(Sprite.Style.Left)) < cint(200) or cint(Limpiar(Sprite.Style.Left)) > cint(Screen.Width) - cint(200) then
  114. Call Mover()
  115. else
  116. Sprite.Style.Left = Limpiar(Sprite.Style.Left) + cint(DirectY)
  117. end if
  118. else
  119. Sprite.Style.Top = Limpiar(Sprite.Style.Top) + cint(15)
  120. if cint(Limpiar(Sprite.Style.Left)) < cint(200) or cint(Limpiar(Sprite.Style.Left)) > cint(Screen.Width) - cint(200) then
  121. Call Mover()
  122. else
  123. Sprite.Style.Left = Limpiar(Sprite.Style.Left) + cint(DirectY)
  124. end if
  125. end if
  126. end if
  127. End Sub
  128.  
  129.  
  130. Public Sub Correr()
  131. if SpriteF = 15 Then
  132. Left_P = 0 : Top_P = -282
  133. Sprite.Style.BackgroundPosition = Left_P & " " & Top_P
  134. SpriteF = 0
  135. else
  136. Left_P = cint(Left_P) - cint(150) : Top_P = -282
  137. Sprite.Style.BackgroundPosition = Left_P & " " & Top_P
  138. SpriteF = SpriteF + 1
  139. Sprite.Style.Left = Limpiar(Sprite.Style.Left) + cint(DirectY)
  140. end if
  141. End Sub
  142.  
  143.  
  144.  
  145.  
  146. Function Limpiar(dato)
  147. Limpiar = Replace(dato,"px","")
  148. Limpiar = Replace(Limpiar,".","")
  149. Limpiar = Replace(Limpiar,":","")
  150. Limpiar = Replace(Limpiar,",","")
  151. Limpiar = Replace(Limpiar,"am","")
  152. Limpiar = Replace(Limpiar,"pm","")
  153. Limpiar = Replace(Limpiar,"em","")
  154. Limpiar = Replace(Limpiar,"hs","")
  155. end function
  156.  
  157. 'filter: FlipH; PARA GIRAR
  158.  
  159.  
  160.  
  161.  
  162. Function Coliciones(PosXUno, AnchoUno, PosYUno, LargoUno,PosXDos, AnchoDos, PosYDos, LargoDos)
  163. If  (Cdbl(PosXUno) + Cdbl(AnchoUno)) > (Cdbl(PosXDos))_
  164.  And (cdbl(PosXUno)) < (Cdbl(PosXDos) + Cdbl(AnchoDos))_
  165.   And (cdbl(PosYUno) + cdbl(LargoUno)) > (cdbl(PosYDos))_
  166.    And (cdbl(PosYUno)) < (cdbl(PosYDos) + Cdbl(AnchoDos)) Then
  167. Coliciones = "True"
  168. Else
  169. Coliciones = "False"
  170. End If
  171. End Function
  172.  

Mapping (VBS):
    
Código
  1. Dim Map_X, DirectMap_X
  2. Map_X = cint(0)
  3. DirectMap_X = cint(0)
  4.  
  5.  
  6.  
  7. Public Sub CargarMapa()
  8. Dim TileSet(199)
  9. Set objFSO = CreateObject("Scripting.FileSystemObject")
  10. Set objFile = objFSO.OpenTextFile("mapas/mapa0.map", 1)
  11.     mapa = objFile.ReadAll
  12.     splitmapa = Split(mapa,",")
  13. CuentaMapa  = ubound(splitmapa)
  14. for m=0 to CuentaMapa
  15. Tileset(m) = splitmapa(m)
  16. next
  17. ii = cint(0)
  18. TileTop = cint(0)
  19. TileLeft = cint(0)
  20. for i = 0 to 199
  21. Document.Title = Porcentaje(i,199)
  22. if cint(ii) > cint(24) then TileTop = cint(TileTop) + cint(128) : TileLeft = cint(0) : ii = 0 end if
  23. if cint(i) > cInt(199) Then Sleep(100) end if
  24. bodydiv.InnerHTML = bodydiv.InnerHTML + "<img id=""tile"&i&""" style="""">"
  25. ExecuteGlobal("tile" & i & ".src = ""imagenes/tile/" & TileSet(i) & ".png""")
  26. ExecuteGlobal("tile"&i&".style.position = ""Absolute""")
  27. ExecuteGlobal("tile"&i&".style.top = " & TileTop)
  28. ExecuteGlobal("tile"&i&".style.left = " & TileLeft)
  29. TileLeft = cint(TileLeft) + cint(128) 
  30. ii = cint(ii) + cint(1) 
  31. next
  32. for a=0 to 199
  33. ExecuteGlobal("tile"&a&".style.top = limpiar(tile"&a&".style.top) - 128")
  34. next
  35. End Sub
  36.  
  37.  
  38.  
  39. Public Sub Mover()
  40. if DirectY = -15 then
  41. DirectMap_X = 27
  42. Map_X = cint(Map_X) + cint(DirectMap_X)
  43. end if
  44.  
  45. if DirectY = 15 then
  46. DirectMap_X = -27
  47. Map_X = cint(Map_X) + cint(DirectMap_X)
  48. end if
  49.  
  50. if DirectY = 0 then
  51. DirectMap_X = 0
  52. end if
  53.  
  54. for a=0 to 199
  55. ExecuteGlobal("tile"&a&".style.left = Limpiar(tile"&a&".style.left) +"& DirectMap_X)
  56. next
  57.  
  58. 'Tiempo = SetTimeOut("Mover()",40)
  59. end Sub
  60.  
  61.  
  62.  
  63.  
  64. Function Porcentaje(a,b)
  65. Porcentaje = round(a / b * 100)
  66. end function
  67.  
  68. Sub Sleep(MSecs) 
  69.  Set fso = CreateObject("Scripting.FileSystemObject")
  70.   If Fso.FileExists("sleeper.vbs")=False Then
  71.   Set objOutputFile = fso.CreateTextFile("sleeper.vbs", True)
  72.   objOutputFile.Write "wscript.sleep WScript.Arguments(0)"
  73.   objOutputFile.Close
  74.   End If
  75.  CreateObject("WScript.Shell").Run "sleeper.vbs " & MSecs,1 , True
  76.  End Sub
  77.  
  78.  
  79.  Function Limpiar(dato)
  80. Limpiar = Replace(dato,"px","")
  81. Limpiar = Replace(Limpiar,".","")
  82. Limpiar = Replace(Limpiar,":","")
  83. Limpiar = Replace(Limpiar,",","")
  84. Limpiar = Replace(Limpiar,"am","")
  85. Limpiar = Replace(Limpiar,"pm","")
  86. Limpiar = Replace(Limpiar,"em","")
  87. Limpiar = Replace(Limpiar,"hs","")
  88.  
  89. end function
  90.  


Ejemplo de un mapa (mapa0.map):
Código
  1. 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
  2.  


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
  1. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  2.  

IExporer 11:
Código
  1. <meta http-equiv="X-UA-Compatible" content="IE=10">
  2.  


Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines