2024-06-27 09:15:43 +02:00
|
|
|
let playerAnim = [];
|
|
|
|
let tomAnim = [];
|
2024-06-27 09:21:55 +02:00
|
|
|
let enemyAnim = [];
|
2024-06-27 10:31:37 +02:00
|
|
|
let playerAnimState = 0;
|
2024-07-04 10:32:27 +02:00
|
|
|
let runDirection = 0;
|
2024-08-26 15:13:13 +02:00
|
|
|
let runSpeed = 25;
|
|
|
|
let animationSpeed = 50;
|
2024-06-27 11:00:09 +02:00
|
|
|
let currentPosition = 0;
|
2024-06-27 10:31:37 +02:00
|
|
|
let player = document.querySelector("#fuchs img");
|
2024-07-04 10:22:40 +02:00
|
|
|
let dIsPressed = false;
|
|
|
|
let aIsPressed = false;
|
|
|
|
let runAnimation;
|
2024-06-27 09:15:43 +02:00
|
|
|
|
2024-06-27 09:36:34 +02:00
|
|
|
fillArrays();
|
2024-08-27 10:13:36 +02:00
|
|
|
startAnimation();
|
2024-06-27 11:00:09 +02:00
|
|
|
//currentPosition = window.getComputedStyle(player).left;
|
2024-06-27 09:36:34 +02:00
|
|
|
|
2024-07-04 10:32:27 +02:00
|
|
|
// Pictures
|
2024-06-27 09:15:43 +02:00
|
|
|
function fillArrays()
|
|
|
|
{
|
|
|
|
fillArray("fuchs_", 8, playerAnim);
|
|
|
|
fillArray("tom_", 3, tomAnim);
|
2024-06-27 09:21:55 +02:00
|
|
|
fillArray("enemy_",3, enemyAnim);
|
2024-06-27 09:15:43 +02:00
|
|
|
}
|
2024-06-27 09:36:34 +02:00
|
|
|
|
2024-07-04 10:32:27 +02:00
|
|
|
// startGame
|
2024-06-27 10:31:37 +02:00
|
|
|
let start = setInterval(gameLoop, 100);
|
|
|
|
|
2024-07-04 10:32:27 +02:00
|
|
|
function gameLoop()
|
2024-07-04 10:22:40 +02:00
|
|
|
{
|
2024-07-04 10:32:27 +02:00
|
|
|
move();
|
2024-07-04 10:22:40 +02:00
|
|
|
}
|
|
|
|
|
2024-07-04 10:32:27 +02:00
|
|
|
//-------------------------------------------------------------- Animation -----------------------------------------------------------------------
|
|
|
|
function startAnimation()
|
2024-06-27 10:31:37 +02:00
|
|
|
{
|
2024-08-26 15:13:13 +02:00
|
|
|
runAnimation = setInterval(playerRunAnim, animationSpeed);
|
2024-06-27 10:31:37 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
function playerRunAnim()
|
|
|
|
{
|
|
|
|
if(playerAnimState == 8)
|
|
|
|
{
|
|
|
|
playerAnimState = 0;
|
|
|
|
}
|
|
|
|
player.src = playerAnim[playerAnimState];
|
|
|
|
playerAnimState++;
|
|
|
|
}
|
|
|
|
|
2024-07-04 10:32:27 +02:00
|
|
|
//------------------------------------------------------------- checkInput ------------------------------------------------------------------
|
2024-06-27 10:31:37 +02:00
|
|
|
document.addEventListener('keydown', function(event) {
|
|
|
|
if(event.key == "d")
|
|
|
|
{
|
2024-07-04 10:22:40 +02:00
|
|
|
if(runDirection != 1)
|
2024-06-27 11:00:09 +02:00
|
|
|
{
|
|
|
|
player.style.transform = 'scaleX(1)';
|
|
|
|
}
|
|
|
|
runDirection = 1;
|
2024-07-04 10:22:40 +02:00
|
|
|
dIsPressed = true;
|
2024-06-27 10:31:37 +02:00
|
|
|
}
|
|
|
|
else if(event.key == "a")
|
|
|
|
{
|
2024-07-04 10:22:40 +02:00
|
|
|
if(runDirection != -1)
|
2024-06-27 11:00:09 +02:00
|
|
|
{
|
|
|
|
player.style.transform = 'scaleX(-1)';
|
|
|
|
}
|
|
|
|
runDirection = -1;
|
2024-07-04 10:22:40 +02:00
|
|
|
aIsPressed = true;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
document.addEventListener('keyup', function(event)
|
|
|
|
{
|
|
|
|
if(event.key == "d")
|
|
|
|
{
|
|
|
|
dIsPressed = false;
|
|
|
|
}
|
|
|
|
else if(event.key == "a")
|
|
|
|
{
|
|
|
|
aIsPressed = false;
|
|
|
|
}
|
|
|
|
|
|
|
|
if(!aIsPressed && !dIsPressed)
|
|
|
|
{
|
|
|
|
runDirection = 0;
|
2024-06-27 10:31:37 +02:00
|
|
|
}
|
2024-06-27 11:00:09 +02:00
|
|
|
});
|
|
|
|
|
2024-07-04 10:32:27 +02:00
|
|
|
//---------------------------------------------------------- Move Player ------------------------------------------------------------
|
2024-06-27 11:00:09 +02:00
|
|
|
function move()
|
|
|
|
{
|
|
|
|
currentPosition = currentPosition + runDirection * runSpeed;
|
|
|
|
player.style.left = currentPosition + "px";
|
|
|
|
}
|
|
|
|
|