Revision 0.5, Breaking out the functions.
The Image
The HTML file:
<head>
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"> </script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>
<link rel="stylesheet" href="http://mirkwood.cs.edinboro.edu/~bennett/style/hw.css">
</head>
<body>
<h1> Revision 0.5, Breaking out the functions.</h1>
<canvas></canvas>
<script src="step05.js"></script>
<script>
DoIt();
</script>
<h3>The Image</h3>
<a href="img/player.png"><img src="img/player.png"></a>
</body>
step05.js
"use strict"
let cycle = 0;
let cx, img;
let spriteW = 24, spriteH = 30;
function DoIt() {
cx = document.querySelector("canvas").getContext("2d");
img = document.createElement("img");
img.src = "img/player.png";
img.addEventListener("load",SetTimer);
}
function SetTimer() {
setInterval( DrawFunc , 120);
}
function DrawFunc() {
cx.clearRect(0, 0, spriteW, spriteH);
cx.drawImage(img,
// source rectangle
cycle * spriteW, 0, spriteW, spriteH,
// destination rectangle
0, 0, spriteW, spriteH);
cycle = (cycle + 1) % 8;
}