JQuery Spiel - Machen Spieler glatt bewegen in% Werte

Wir haben dieses wirklich nervige Projekt, wo wir ein Spiel in JQuery machen müssen. Ich habe einige Probleme damit, dass sich mein Charakter so bewegt, wie ich es möchte. Ich schaffe es, den Charakter zu bewegen, aber er bewegt sich nicht in%. Er fügt seine eigene Breite dem "links" von ihm hinzu und animiert dann zu dieser Position. Das ist nicht gut, denn wenn Sie die Größe des Fensters ändern, "skalieren" Sie nicht mit ihm. Grundsätzlich kann mir jemand helfen, den Spieler in% -Werten flüssig zu bewegen! Hier ist mein Code! (Variablen und Kommentare sind auf Schwedisch ...)JQuery Spiel - Machen Spieler glatt bewegen in% Werte

JSfiddle: https://jsfiddle.net/Leqca77h/1/

index.html:

<!doctype html> 
<html> 
    <head> 
    <title>JQuery spel</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link rel="stylesheet" type="text/css" href="css/stil.css"> 
    <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

    <script type="text/javascript" src="script/start.js"></script> 
    <script type="text/javascript" src="script/spelareRörelse.js"></script> 

</head> 
<body onresize="sättSpelareHöjd()"> 

    <header><h1>Jquery spel</h1></header> 
    <br> 

    <div id="bana"></div> 

</body>

stil.css:

* { 
box-sizing: border-box; 
margin: 0; 
padding: 0; 
font-family: 'Ubuntu', sans-serif; 
} 

#bana { 
position: relative; 
border: 1px solid black; 
margin: auto; 
width: 99%; 
height: 70vh; 
} 

#spelare1 { 
background-color: green; 
width: 2.7%; 
height: 0; 
display: block; 
position: absolute; 
}

Start. js:

$(document).ready(function(){ 

//var tid = parseInt(prompt("Hur långt ska du spela? (Ange i sekunder)")); 

$("#bana").append("<div id='spelare1'></div>"); 
$("#bana").append("<div id='spelare2'></div>"); 

sättSpelareHöjd(); 
}); 

var knappTryckt1 = true; 

function sättSpelareHöjd() { 
var spelareHöjd = $("#spelare1").width(); 
$("#spelare1").css("height", spelareHöjd); 
}

spelareRörelse.js (playerMovment.js):

//Spelare 1 rörelse 
$(document).keydown(function(e){ 
    if(knappTryckt1) { 
    if(e.keyCode == 37) { 
     $("#spelare1").stop().animate({left: "-=" + $(this).width()},5000); 
     //Pil vänster 
    } 

    else if (e.keyCode == 38) { 
     $("#spelare1").stop().animate({top: "-=" + $(this).height()},5000); 
     //Pil upp 
    } 

    else if (e.keyCode == 39) { 
     $("#spelare1").stop().animate({left: "+=" + $(this).width()},5000); 
     //Pil höger 
    } 

    else if (e.keyCode == 40) { 
     $("#spelare1").stop().animate({top: "+=" + $(this).height()},5000); 
     //Pil ner 
    } 

    knappTryckt1 = false; 
    } 
}); 
$(document).keyup(function(){ 
    $("#spelare1").stop(); 
    knappTryckt1 = true; 
});

Wenn Sie helfen können! Vielen Dank! :) JSfiddle: https://jsfiddle.net/Leqca77h/1/

Quelle

2017-03-26 robeng

@OusmaneMahyDiaw Ja! Hier ist mein JSdiffle! https://jsfiddle.net/Leqca77h/1/ – robeng

@OusmaneMahyDiaw Nein. Die Spieler bewegen sich nicht in Prozentwerten. Wenn Sie die Größe des Fensters ändern würden, hätten sie einen festen Wert für left:. Ich möchte den Wert in% angeben. Wenn Sie also die linke Taste drücken, wird 1% nach links gehen und so weiter – robeng

Eine Lösung wurde gefunden! Ändern:
"links "- =" + $ (this) .width()"
zu:
"links "- =" + 100 + "%""
für mich gearbeitet !

Quelle

2017-03-26 13:56:33 robeng

JQuery Spiel - Machen Spieler glatt bewegen in% Werte

Antwort

Verwandte Themen