21-animations

21-animations/debug.log

@@ -43,3 +43,42 @@
 [0217/121057.649:ERROR:crash_report_database_win.cc(469)] failed to stat report
 [0217/121057.649:ERROR:crash_report_database_win.cc(469)] failed to stat report
 [0217/121057.649:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0217/122557.650:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0217/122557.650:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0217/122557.650:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0217/124057.652:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0217/124057.652:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0217/124057.652:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0217/125557.658:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0217/125557.658:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0217/125557.658:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0217/131057.659:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0217/131057.659:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0217/131057.659:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0217/132557.660:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0217/132557.660:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0217/132557.660:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0217/134057.662:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0217/134057.662:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0217/134057.662:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0217/135557.663:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0217/135557.663:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0217/135557.663:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0217/141057.665:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0217/141057.665:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0217/141057.665:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0217/142557.667:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0217/142557.667:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0217/142557.667:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0217/144057.668:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0217/144057.668:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0217/144057.668:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0217/145557.670:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0217/145557.670:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0217/145557.670:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0217/151057.672:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0217/151057.672:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0217/151057.672:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0217/152557.673:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0217/152557.673:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0217/152557.673:ERROR:crash_report_database_win.cc(469)] failed to stat report

21-animations/ex/.prettierrc

@@ -0,0 +1,6 @@
+{
+    "trailingComma": "es5",
+    "tabWidth": 4,
+    "semi": true,
+    "singleQuote": true
+}

21-animations/ex/debug.log

@@ -0,0 +1,12 @@
+[0217/125623.600:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0217/125623.600:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0217/125623.600:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0217/125806.711:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0217/125806.711:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0217/125806.711:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0302/085234.818:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0302/085234.818:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0302/085234.818:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0302/091931.208:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0302/091931.210:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0302/091931.210:ERROR:crash_report_database_win.cc(469)] failed to stat report

21-animations/ex/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+        <link rel="stylesheet" href="styles/main.css" />
+        <title>21-Animations</title>
+    </head>
+    <body>
+        <div class="game">
+            <div id="character" class="idle"></div>
+        </div>
+        <script src="scripts/main.js"></script>
+    </body>
+</html>

21-animations/ex/scripts/main.js

@@ -0,0 +1,72 @@
+const character = document.getElementById('character');
+const game = document.querySelectorAll('.game');
+
+const gameState = {
+    xPos: 100,
+    yPos: 505,
+    stuck: false,
+};
+
+document.onkeydown = keydown;
+
+document.onkeyup = keyup;
+
+function keydown(e) {
+    // console.log(e);
+    if (e.key === 'ArrowLeft') {
+        character.classList.add('reverse');
+        character.classList.replace('idle', 'moving');
+        move(-1);
+    } else if (e.key === 'ArrowRight') {
+        character.classList.remove('reverse');
+        character.classList.replace('idle', 'moving');
+        move(1);
+    }
+    if (e.key === 'ArrowUp') {
+        character.classList.add('jumping');
+        gameState.stuck = false;
+        setTimeout(function() {
+            removeJump();
+        }, 1000);
+    }
+}
+
+function keyup(e) {
+    if (e.key === 'ArrowLeft') {
+        character.classList.replace('moving', 'idle');
+    }
+    if (e.key === 'ArrowRight') {
+        character.classList.replace('moving', 'idle');
+    }
+}
+
+function removeJump() {
+    character.classList.remove('jumping');
+    character.classList.replace('moving', 'idle');
+}
+
+function move(direction) {
+    // console.log(direction);
+
+    let temp = parseInt(gameState.xPos) + 20 * direction;
+    gameState.xPos = temp;
+    character.style.left = `${temp}px`;
+
+    if (gameState.xPos > 260 && gameState.xPos < 360) {
+        if (!character.classList.contains('jumping')) {
+            character.style.top = '460px';
+            gameState.stuck = true;
+        }
+    } else {
+        character.style.top = '420px';
+    }
+    if (parseInt(character.style.left.replace('px', '')) > 1200) {
+        character.style.left = 0;
+        gameState.xPos = 0;
+    }
+
+    if (parseInt(character.style.left.replace('px', '')) < 0) {
+        character.style.left = 1200 - 60;
+        gameState.xPos = 1200 - 60;
+    }
+}

21-animations/ex/styles/main.css

@@ -0,0 +1,119 @@
+.game {
+    background-image: url('../background.png');
+    background-size: cover;
+    width: 1200px;
+    height: 800px;
+    margin: auto;
+    overflow: hidden;
+    position: relative;
+}
+
+#character {
+    width: 100px;
+    height: 128px;
+    position: absolute;
+    left: 100px;
+    top: 420px;
+    background-image: url('../character.png');
+}
+
+.idle {
+    animation: idle 1s steps(10) infinite;
+}
+
+.moving {
+    animation: moving 1s steps(10) infinite;
+}
+
+.sliding {
+    animation: sliding 1s steps(10) infinite !important;
+}
+
+.reverse.jumping {
+    animation: jumpingleft 1s steps(10) infinite !important;
+}
+
+.jumping {
+    animation: jumping 1s steps(10) infinite !important;
+}
+
+.attacking {
+    animation: attacking 1s steps(10) infinite !important;
+}
+
+.reverse {
+    transform-origin: 40px;
+    transform: scale(-1, 1);
+}
+
+@keyframes idle {
+    0% {
+        background-position: 0 0;
+    }
+
+    100% {
+        background-position: -1280px 0;
+    }
+}
+
+@keyframes moving {
+    0% {
+        background-position: 0 -128px;
+    }
+
+    100% {
+        background-position: -1280px -128px;
+    }
+}
+
+@keyframes sliding {
+    0% {
+        background-position: 0 -256px;
+    }
+
+    100% {
+        background-position: -1280px -256px;
+    }
+}
+
+@keyframes jumpingleft {
+    0% {
+        background-position: 0 -384px;
+        transform: translate(0, 0px) scale(-1, 1);
+    }
+
+    50% {
+        transform: translate(0, -50px) scale(-1, 1);
+    }
+
+    100% {
+        transform: translate(0, 0px) scale(-1, 1);
+        background-position: -1280px -384px;
+    }
+}
+
+@keyframes jumping {
+    0% {
+        background-position: 0 -384px;
+        transform: translate(0, 0px);
+    }
+
+    50% {
+        transform: translate(0, -50px);
+    }
+
+    100% {
+        transform: translate(0, 0px);
+        background-position: -1280px -384px;
+    }
+}
+
+@keyframes attacking {
+    0% {
+        background-position: 0 512px;
+    }
+
+    100% {
+        background-position: -1280px -512px;
+    }
+}