HTA VBS Game Experiment

<html>
<head>
<title>HTA Collision Test</title>

<script language="VBScript">
  window.resizeTo 845, 700 ' Set width to 800px, height to 600px
</script>

<hta:application
    id="app"
    applicationname="HTA Collision Test"
    maximizebutton="no"
    border="thin"
    caption="yes"
    showintaskbar="yes"
    singleinstance="yes"
    windowstate="normal"
    scroll="no"
/>

<style>
html, body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background: #202020;
    font-family: Arial;
    color: white;
}

#board {
    position: relative;
    width: 800px;
    height: 600px;
    background: #404040;
    border: 2px solid white;
    margin: 20px;
    overflow: hidden;
}

#player {
    position: absolute;
    left: 100px;
    top: 100px;
    width: 64px;
    height: 64px;
}

#goal {
    position: absolute;
    left: 500px;
    top: 300px;
    width: 64px;
    height: 64px;
}

#status {
    margin-left: 20px;
    font-size: 20px;
}
</style>

<script language="VBScript">
Option Explicit

Dim posX, posY
Dim stepSize
Dim playerW, playerH
Dim boardW, boardH

Dim goalX, goalY
Dim goalW, goalH
Dim goalHit

Dim keyLeft, keyRight, keyUp, keyDown
Dim gameTimer

Sub Window_OnLoad
    posX = 100
    posY = 100
    stepSize = 6

    playerW = 64
    playerH = 64
    boardW = 800
    boardH = 600

    goalX = 500
    goalY = 300
    goalW = 64
    goalH = 64
    goalHit = False

    keyLeft = False
    keyRight = False
    keyUp = False
    keyDown = False
    gameTimer = 0

    UpdatePlayer
    UpdateGoal

    msg.InnerText = "Go grab the key. Move with the arrowkeys."

    gameTimer = Window.SetInterval("GameLoop()", 20)
    Document.Body.Focus
End Sub

Sub Window_OnUnload
    If gameTimer <> 0 Then
        Window.ClearInterval gameTimer
    End If
End Sub

Sub Window_OnBlur
    keyLeft = False
    keyRight = False
    keyUp = False
    keyDown = False
End Sub

Sub Document_OnKeyDown
    Dim keyCode
    keyCode = Window.Event.KeyCode

    Select Case keyCode
        Case 37
            keyLeft = True
            FaceLeft
        Case 38
            keyUp = True
        Case 39
            keyRight = True
            FaceRight
        Case 40
            keyDown = True
    End Select
End Sub

Sub Document_OnKeyUp
    Dim keyCode
    keyCode = Window.Event.KeyCode

    Select Case keyCode
        Case 37
            keyLeft = False
        Case 38
            keyUp = False
        Case 39
            keyRight = False
        Case 40
            keyDown = False
    End Select
End Sub

Sub GameLoop()
    If keyLeft Then posX = posX - stepSize
    If keyRight Then posX = posX + stepSize
    If keyUp Then posY = posY - stepSize
    If keyDown Then posY = posY + stepSize

    If posX < 0 Then posX = 0
    If posY < 0 Then posY = 0
    If posX > boardW - playerW Then posX = boardW - playerW
    If posY > boardH - playerH Then posY = boardH - playerH

    UpdatePlayer

    If Not goalHit Then
        If CheckCollision(posX, posY, playerW, playerH, goalX, goalY, goalW, goalH) Then
            goalHit = True
            goal.Style.Display = "none"
            msg.InnerText = "Collision detected! You got it."
        End If
    End If
End Sub

Sub UpdatePlayer
    player.Style.Left = posX & "px"
    player.Style.Top = posY & "px"
End Sub

Sub UpdateGoal
    goal.Style.Left = goalX & "px"
    goal.Style.Top = goalY & "px"
End Sub

Function CheckCollision(x1, y1, w1, h1, x2, y2, w2, h2)
    If x1 + w1 <= x2 Then
        CheckCollision = False
        Exit Function
    End If

    If x1 >= x2 + w2 Then
        CheckCollision = False
        Exit Function
    End If

    If y1 + h1 <= y2 Then
        CheckCollision = False
        Exit Function
    End If

    If y1 >= y2 + h2 Then
        CheckCollision = False
        Exit Function
    End If

    CheckCollision = True
End Function

Sub FaceLeft
    player.Style.Filter = ""
End Sub

Sub FaceRight
    player.Style.Filter = "fliph"
End Sub
</script>
</head>

<body tabindex="0">
    <div id="board">
        <img id="player" src="player.png">
        <img id="goal" src="goal.png">
    </div>

    <div id="msg">Ready.</div>
</body>
</html>