JQuery遊戲 - 讓玩家以％值平滑移動

我們有這個非常煩人的項目，我們需要在JQuery中製作遊戲。我遇到了一些問題，讓我的角色以我想要的方式移動。我設法讓角色移動，但他沒有移動到％。他將自己的寬度添加到他的「左邊」，然後將其移動到該位置。這不好，因爲當你調整窗口大小時，它們不會「隨着它縮放」。基本上，任何人都可以幫助我讓球員以％值順利移動！這是我的代碼！（變量和意見是在瑞典...）JQuery遊戲 - 讓玩家以％值平滑移動

的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; 
}

開始。 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; 
});

如果你能幫助！謝謝！ :) JSfiddle：https://jsfiddle.net/Leqca77h/1/

來源

2017-03-26 robeng

@OusmaneMahyDiaw 是的！這是我的JSdiffle！ https://jsfiddle.net/Leqca77h/1/ – robeng

@OusmaneMahyDiaw編號玩家沒有移動％值。如果你調整窗口的大小，他們將有一個固定的左值：值。我希望價值在％。所以如果你按下左鍵，它會離開1％，等等 – robeng

解決方案被發現！更改：
「左」 - =「 + $（本）.WIDTH（）」
到：
「左」 - =「 + 100 + 」％「」
爲我工作！

來源

2017-03-26 13:56:33 robeng

JQuery遊戲 - 讓玩家以％值平滑移動

回答

相關問題