Course | Style-Calc | Animation | API-Music | Data-Users |
<table>
<tr>
<td><img src="/teacher//images/logo.png" height="60" title="Frontend" alt=""></td>
<td><a href="/teacher/index">Course</a></td>
<td><a href="/teacher/techtalk/home_style">Style-Calc</a></td>
<td><a href="/teacher/frontend/home_motion">Animation</a></td>
<td><a href="/teacher/frontend/home_table">API-Music</a></td>
<td><a href="/teacher/devops/cloud_database">Data-Users</a></td>
</tr>
</table>
<!--- Liquid concatentation --->
<!--- Liquid list variable created from file containing mario metatdata for sprite --->
<!--- Liquid integer assignment --->
<!--- HTML for page contains <p> tag named "mario" and class properties for a "sprite" -->
<p id="mario" class="sprite"></p>
<!--- Embedded Cascading Style Sheet (CSS) rules, defines how HTML elements look --->
<style>
/*CSS style rules for the elements id and class above...
*/
.sprite {
height: 256px;
width: 256px;
background-image: url('/teacher/images/mario_animation.png');
background-repeat: no-repeat;
}
/*background position of sprite element
*/
#mario {
background-position: calc( * 256 * -1px) calc( * 256* -1px);
}
</style>
<!--- Embedded executable code--->
<script>
////////// convert yml hash to javascript key value objects /////////
var mario_metadata = {}; //key, value object
var key = "Rest" //key
var values = {} //values object
values["row"] = 0
values["col"] = 0
values["frames"] = 15
mario_metadata[key] = values; //key with values added
var key = "RestL" //key
var values = {} //values object
values["row"] = 1
values["col"] = 0
values["frames"] = 15
mario_metadata[key] = values; //key with values added
var key = "Walk" //key
var values = {} //values object
values["row"] = 2
values["col"] = 0
values["frames"] = 8
mario_metadata[key] = values; //key with values added
var key = "Tada" //key
var values = {} //values object
values["row"] = 2
values["col"] = 11
values["frames"] = 3
mario_metadata[key] = values; //key with values added
var key = "WalkL" //key
var values = {} //values object
values["row"] = 3
values["col"] = 0
values["frames"] = 8
mario_metadata[key] = values; //key with values added
var key = "TadaL" //key
var values = {} //values object
values["row"] = 3
values["col"] = 11
values["frames"] = 3
mario_metadata[key] = values; //key with values added
var key = "Run1" //key
var values = {} //values object
values["row"] = 4
values["col"] = 0
values["frames"] = 15
mario_metadata[key] = values; //key with values added
var key = "Run1L" //key
var values = {} //values object
values["row"] = 5
values["col"] = 0
values["frames"] = 15
mario_metadata[key] = values; //key with values added
var key = "Run2" //key
var values = {} //values object
values["row"] = 6
values["col"] = 0
values["frames"] = 15
mario_metadata[key] = values; //key with values added
var key = "Run2L" //key
var values = {} //values object
values["row"] = 7
values["col"] = 0
values["frames"] = 15
mario_metadata[key] = values; //key with values added
var key = "Puff" //key
var values = {} //values object
values["row"] = 8
values["col"] = 0
values["frames"] = 15
mario_metadata[key] = values; //key with values added
var key = "PuffL" //key
var values = {} //values object
values["row"] = 9
values["col"] = 0
values["frames"] = 15
mario_metadata[key] = values; //key with values added
var key = "Cheer" //key
var values = {} //values object
values["row"] = 10
values["col"] = 0
values["frames"] = 15
mario_metadata[key] = values; //key with values added
var key = "CheerL" //key
var values = {} //values object
values["row"] = 11
values["col"] = 0
values["frames"] = 15
mario_metadata[key] = values; //key with values added
var key = "Flip" //key
var values = {} //values object
values["row"] = 12
values["col"] = 0
values["frames"] = 15
mario_metadata[key] = values; //key with values added
var key = "FlipL" //key
var values = {} //values object
values["row"] = 13
values["col"] = 0
values["frames"] = 15
mario_metadata[key] = values; //key with values added
////////// animation control object /////////
class Mario {
constructor(meta_data) {
this.tID = null; //capture setInterval() task ID
this.positionX = 0; // current position of sprite in X direction
this.currentSpeed = 0;
this.marioElement = document.getElementById("mario"); //HTML element of sprite
this.pixels = 256; //pixel offset of images in the sprite, set by liquid constant
this.interval = 100; //animation time interval
this.obj = meta_data;
this.marioElement.style.position = "absolute";
}
animate(obj, speed) {
let frame = 0;
const row = obj.row * this.pixels;
this.currentSpeed = speed;
this.tID = setInterval(() => {
const col = (frame + obj.col) * this.pixels;
this.marioElement.style.backgroundPosition = `-${col}px -${row}px`;
this.marioElement.style.left = `${this.positionX}px`;
this.positionX += speed;
frame = (frame + 1) % obj.frames;
const viewportWidth = window.innerWidth;
if (this.positionX > viewportWidth - this.pixels) {
document.documentElement.scrollLeft = this.positionX - viewportWidth + this.pixels;
}
}, this.interval);
}
startWalking() {
this.stopAnimate();
this.animate(this.obj["Walk"], 3);
}
startRunning() {
this.stopAnimate();
this.animate(this.obj["Run1"], 6);
}
startPuffing() {
this.stopAnimate();
this.animate(this.obj["Puff"], 0);
}
startCheering() {
this.stopAnimate();
this.animate(this.obj["Cheer"], 0);
}
startFlipping() {
this.stopAnimate();
this.animate(this.obj["Flip"], 0);
}
startResting() {
this.stopAnimate();
this.animate(this.obj["Rest"], 0);
}
stopAnimate() {
clearInterval(this.tID);
}
}
const mario = new Mario(mario_metadata);
////////// event control /////////
window.addEventListener("keydown", (event) => {
if (event.key === "ArrowRight") {
event.preventDefault();
if (event.repeat) {
mario.startCheering();
} else {
if (mario.currentSpeed === 0) {
mario.startWalking();
} else if (mario.currentSpeed === 3) {
mario.startRunning();
}
}
} else if (event.key === "ArrowLeft") {
event.preventDefault();
if (event.repeat) {
mario.stopAnimate();
} else {
mario.startPuffing();
}
}
});
//touch events that enable animations
window.addEventListener("touchstart", (event) => {
event.preventDefault(); // prevent default browser action
if (event.touches[0].clientX > window.innerWidth / 2) {
// move right
if (currentSpeed === 0) { // if at rest, go to walking
mario.startWalking();
} else if (currentSpeed === 3) { // if walking, go to running
mario.startRunning();
}
} else {
// move left
mario.startPuffing();
}
});
//stop animation on window blur
window.addEventListener("blur", () => {
mario.stopAnimate();
});
//start animation on window focus
window.addEventListener("focus", () => {
mario.startFlipping();
});
//start animation on page load or page refresh
document.addEventListener("DOMContentLoaded", () => {
// adjust sprite size for high pixel density devices
const scale = window.devicePixelRatio;
const sprite = document.querySelector(".sprite");
sprite.style.transform = `scale(${0.2 * scale})`;
mario.startResting();
});
</script>