[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/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 |
{ | |||||
"trailingComma": "es5", | |||||
"tabWidth": 4, | |||||
"semi": true, | |||||
"singleQuote": true | |||||
} |
[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 |
<!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> |
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; | |||||
} | |||||
} |
.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; | |||||
} | |||||
} |