Animation Using Sprites

by Susan Delgado

HTML

<script src="lab5_3.js" defer></script>

        <h1>Lab 5 Question 3</h1>

        <div id="demo">
            <p id="image"></p>
        </div>

JavaScript

var tID;
var running = false;

function animateScript() {
    var position = 0;
    var interval = 100;
    var diff = 256;

    if (running == true) {
        return;
    }

    running = true;

    tID = setInterval(function () {
        document.getElementById("image").style.backgroundPosition =
            "-" + position + "px 0px";

        if (position < 1280) {
            position = position + diff;
        }
        else {
            position = 0;
        }
    }, interval);
}

function doKey(event) {
    if (event.key === "ArrowRight") {
        animateScript();
    }
}

window.addEventListener("keydown", doKey);