Вызов функции js при выполнении ключевого кадра css - PullRequest
Новая
       179

Вызов функции js при выполнении ключевого кадра css

0 голосов
/ 09 мая 2020

Итак, я делаю игру и использую ключевые кадры для оживления врага. Враг движется по ключевому кадру. Я меняю имя анимации каждые 2 секунды с помощью setInterval. Мне нужно проверить, касаются ли противник и игрок: 

if(($("#enemy").position().top + $("#enemy").height() == $("#player").position().top)

Проблема в том, что я не знаю, где и как вызвать функцию проверки 

function myTimer() {
 toggleAnimation();
 //here i change the src of the enemy
$("#enemy").attr("src", imagesArray[(Math.floor(Math.random() * imagesArray.length))]);
}


var myVar = setInterval(myTimer, 2000);
//change the animation name
function toggleAnimation() {
switch(Math.floor(Math.random() * 4)) {
    case 1:
     $("#enemy").css("animation-name", "animate1");
    break;
    case 2:
     $("#enemy").css("animation-name", "animate2");
    break;
    case 3:
     $("#enemy").css("animation-name", "animate3");
    break;
   }
 }

html: 

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
 <meta charset="utf-8">
 <link rel="stylesheet" type="text/css" href="myStyle.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 <script src="myScript.js"></script>
 <title></title>
</head>
<body>
 <div id="container">
  <img id="player" src="images/rx7.png"></img>
  <img id="enemy" src="images/supra.png"></img>
 </div>
 <audio id="music" muted>
  <source src="tokyoDrift.m3" type="audio/mpeg">
 </audio>
 </body>
</html>

css: 

 body {
 margin: 0px;
}

div#container {
 top: 100;
 position: relative;
 margin: 0px auto;
 width: 900px;
 height: 700px;
 box-shadow: 10px 20px 8px #888888;;
 /* overflow: hidden; */
 background: url(images/road.png) repeat-y;
 background-size: 900px auto;
 animation-name: animateBackground;
 animation-timing-function: linear;
 animation-duration: 2s;
 animation-iteration-count: infinite;
}

#player {
 width: 300px;
 height: auto;
 position: absolute;
 left: 300px;
}

#enemy {
width: 250px;
height: auto;
position: absolute;
left: 300px;

animation-name: animate1;
animation-timing-function: linear;
animation-duration: 2s;
animation-iteration-count: infinite;
}


@keyframes animate1 {
  from{
    top: -165.6px;
  }
  to {
    top: 534.4px;
  }
 }

@keyframes animate2 {
from{
    top: -165.6px;
    left: 0px;
}
to {
    top: 534.4px;
    left: 0px;
}
}

@keyframes animate3 {
 from{
    top: -165.6px;
    left: 600px
 }
 to {
    top: 534.4px;
    left: 600px;
  }
 }

@keyframes animateBackground {
 from {
    background-position: 0px 0px;
 }
 to {
    background-position: 0px 850px;
  }
 }

js: 

$(document).ready(function() {
//posiziona macchina in fondo al container
$('#player').css("top", ($("#container").height() - $("#player").height() + "px"));
//console.log($("#player").width());

//alert($("#enemy").height());

var verticalSteps = "159.475";
var horizontalSteps = "300";

//necessario perchè omettendolo da errore: nessuna interazione dell'utente con la pagina
$('#music').prop("muted", false);
$('#music').prop("loop", true);
$(document).keydown(function() {
$("#music")[0].play();
})

$(document).keydown(function(e) {
switch (e.which) {
  //move to left -> A
  case 65:
  console.log($('#player').position().left)
    if(parseInt($('#player').position().left) > 0 ){
      $('#player').stop(true, false).animate({
          left: '-=' + horizontalSteps
      });
    } else {
      $("#player").css("left", "0px");
    }

    break;
//move to top -> W
case 87:
      if(parseInt($('#player').position().top) > 0) {
        $('#player').stop().animate({
            top: '-=' + verticalSteps
        });
      } else {
          $('#player').css("top", "0px");
      }
    break;
  //move to right -> D
  case 68:
      if(parseInt($('#player').position().left) < $("#container").width() - $("#player").width()){
      $('#player').stop().animate({
          left: '+=' + horizontalSteps
      });
    } else {
      $("#player").css("left", ($("#container").width() - $("#player").width() + "px"));
    }
    break;

//move to bottom -> S
case 83:
    if(parseInt($('#player').position().top) < $("#container").height() - $("#player").height()){
      $('#player').stop().animate({
          top: '+=' + verticalSteps
      });

    } else {
      $("#player").css("top", ($('#container').height() - $("#player").height() + "px"));
    }
    break;

//move at bottom center -> R
case 82:
    $("#player").css("top", ($("#container").height() - $("#player").height() + "px"));
    $("#player").css("left", (($("#container").width() / 2 ) - ($("#player").width() / 2)));
    break;
 }
})



var imagesArray = ["images/240z.png", "images/civicSi.png", "images/porsche.png", "images/r32.png", 
"images/s2000.png"];

function myTimer() {
toggleAnimation();
if(($("#enemy").position().top + $("#enemy").height() == $("#player").position().top) ) 
console.log("sasso");
$("#enemy").attr("src", imagesArray[(Math.floor(Math.random() * imagesArray.length))]);

//console.log($("#player").position().top)
}


 var myVar = setInterval(myTimer, 2000);

 function toggleAnimation() {
 switch(Math.floor(Math.random() * 4)) {
  case 1:
    $("#enemy").css("animation-name", "animate1");
    break;
  case 2:
    $("#enemy").css("animation-name", "animate2");
    break;
  case 3:
    $("#enemy").css("animation-name", "animate3");
    break;
  }
 }



})
...