带箭头键的javascript移动：按下键长时间后，Gif停止

时间：2017-04-22 20:42:48

标签： javascript-events animated-gif onkeydown

我对javascript很新，并且有两个onkeydown问题：

  1. 我有一个走路的人（gif）我想用箭头键移动。当它与另一个div容器碰撞时，不可见的层应该变得可见。现在我可以看到gif对按键有反应但它不会向两侧移动。你知道我的错误在哪里吗？

  2. 正如我所说，gif正在展示一个行走的人。当没有按下任何键时，该人静止不动（png）;当按下左箭头时，它向左走（gif），向右走。问题是当我按下箭头键一段时间后，GIF会在很短的时间后停止继续。如何让javascript理解永久按键作为一个继续的信号？

    3. 很抱歉我的错误代码添加技能：＆＃39; D从不与其他人共享代码，也不知道与您理解我的问题可能相关的内容。我真的希望你能帮助我。谢谢:)）

    ＆＃13;
    ＆＃13; 
    var x=0  ; var y=440  ;   //  = Karl Koordinaten
var xHA2=795; var yHA2=430;   //  = Haus2 Koordinaten
var xHA3=433; var yHA3=565;   //  = Haus3 Koordinaten
var xHO1=250; var yHO1=90;   //  = Hotel1 Koordinaten
var TastenC; var C; var T;  // TastenCode, Code, Taste
var aktiv;                  // speichert setInterval

function Richtung(C,Velocity) {
                 // Velocity = speed oder static; dateiname wird zusammengesetzt
    if      (C==37) { T="L"; window.document.images[0].src="Bilder/karl"+Velocity+"_L.gif"; }
    else if (C==39) { T="R"; window.document.images[0].src="Bilder/karl"+Velocity+"_R.gif"; }
    else            { T="X"; } ;
    //return T;
}

function Kollision() {
// Kollisionserkennung Karl mit Haus2
    if ((Math.abs(y-yHA2)) <= 40) {
        if ((Math.abs(x-xHA2)) <= 40) {
        document.getElementById("Layer_haus2").style.visibility = 'visible'; // haus2 getroffen
        document.getElementById("Layer_haus3").style.visibility = 'hidden';  // Andere Ebenen ausblenden
        document.getElementById("Layer_hotel1").style.visibility = 'hidden';
        } 
    } 
// Kollisionserkennung Karl mit Haus3
    if ((Math.abs(y-yHA3)) <= 68) {
        if ((Math.abs(x-xHA3)) <= 68) {
        document.getElementById("Layer_haus3").style.visibility = 'visible'; // haus3 getroffen
        document.getElementById("Layer_hotel1").style.visibility = 'hidden';  // Andere Ebenen ausblenden
        document.getElementById("Layer_haus2").style.visibility = 'hidden';
        } 
    } 
// Kollisionserkennung Karl mit Hotel1
    if ((Math.abs(y-yHO1)) <= 68) {
        if ((Math.abs(x-xHO1)) <= 68) {
        document.getElementById("Layer_hotel1").style.visibility = 'visible'; // ("hotel1 getroffen!");
        document.getElementById("Layer_haus2").style.visibility = 'hidden';  // Andere Ebenen ausblenden
        document.getElementById("Layer_haus3").style.visibility = 'hidden';
        } 
    } 
}

function AUS() {
        document.getElementById("Layer_haus2").style.visibility = 'hidden'; // Alle Ebenen ausblenden
        document.getElementById("Layer_haus3").style.visibility = 'hidden'; 
        document.getElementById("Layer_hotel1").style.visibility = 'hidden';
} 

function Objektbewegung(Taste) {
    if (Taste=="L") {x-=2; xHA2=(xHA2-haus2mitbew); xHA3=(xHA3-haus3mitbew); xHO1=(xHO1-hotel1mitbew); } ; 
    if (Taste=="R") {x+=2; xHA2=(xHA2+haus2mitbew); xHA3=(xHA3+haus3mitbew); xHO1=(xHO1+hotel1mitbew); } ;
    if (Taste=="X") {      yHA2=(yHA2+haus2mitbew); yHA3=(yHA3-haus3mitbew); yHO1=(yHO1-hotel1mitbew); } ;
    Kollision();    
    document.getElementById("karl_laufen").style.left = x; 
    document.getElementById("karl_laufen").style.top  = y; 
    document.getElementById("haus2").style.left = xHA2;
    document.getElementById("haus2").style.top  = yHA2;
    document.getElementById("haus3").style.left = xHA3;
    document.getElementById("haus3").style.top  = yHA3;
    document.getElementById("hotel1").style.left = xHO1;
    document.getElementById("hotel1").style.top  = yHO1;
}

function TasteGedrueckt(Ereignis) {
    if (!Ereignis) { Ereignis = window.event; }
    if (Ereignis.which) { TastenC = (Ereignis.which); } 
    else if (Ereignis.keyC) { TastenC = (Ereignis.keyC); }

    Richtung(TastenC,"speed");
    window.clearInterval(aktiv);                        // Ruecksetzen des Intervalls bei jedem Tastendruck
    aktiv = window.setInterval("Objektbewegung(T)", 5); // Intervall alle x Millisekunden ausfŸhren
    //Objektbewegung(T);                                // einzeln weitergehen
}

function TasteLosgelassen(Ereignis) {
    if (!Ereignis) { Ereignis = window.event; }
    if (Ereignis.which) { TastenC = (Ereignis.which); } 
    else if (Ereignis.keyC) { TastenC = (Ereignis.keyC); }  

    Richtung(TastenC,"static");
    window.clearInterval(aktiv);
    haus2mitbew=0;
    haus3mitbew=0;
    hotel1mitbew=0;
}

document.onkeydown = TasteGedrueckt;
document.onkeyup = TasteLosgelassen;
    ＆＃13; 
    #airbnb_cityscape {
	background-image: url("../Bilder/cityscape_hintergrund.png");
	height: 768px;
	width: 1280px; 
}

#karl_laufen {
	width: 200px;
	height: 300px;
	visibility: visible;
	position: absolute; 
	z-index: 2; 
	top: 440px;  
	left: 0px;
	border: 0;
}

#haus1 {
	visibility: visible; 
	position: absolute; 
	z-index: 2; 
	top: 436px; 
	left: 1045px; 
	width: 232px; 
	height: 201px; 
	border: 0;
}

#haus2 {
	visibility: visible; 
	position: absolute; 
	z-index: 5; 
	top: 430px; 
	left: 795px; 
	width: 255px; 
	height: 207px;
	border: 0;
}

#haus3 {
	visibility: visible; 
	position: absolute; 
	z-index: 4; 
	top: 433px; 
	left: 565px; 
	width: 198px; 
	height: 208px;
	border: 0; 
}

#haus4 {
	visibility: visible; 
	position: absolute; 
	z-index: 1; 
	top: 427px; 
	left: 0px; 
	width: 244px; 
	height: 210px;
	border: 0; 
}

#hotel1 {
	visibility: visible; 
	position: absolute; 
	z-index: 3; 
	top: 90px; 
	left: 250px; 
	width: 304px; 
	height: 549px;
	border: 0;
}


#Layer_haus2 { 
	visibility: hidden; 
	position: absolute; 
	z-index: 5; 
	margin-top: 366px;
	margin-left: 1000px;
	border: 0px;
}

#Layer_haus3 { 
	visibility: hidden; 
	position: absolute; 
	z-index: 6; 
	top: 320px; 
	right: 120px; 
	width: 400px; 
	height: 200px; 
	background-color: #8F8; 
}


#Layer_hotel1 { 
	visibility: visible; 
	position: absolute; 
	z-index: 7; 
	border: 0px;
	height: 768px;
	width: 1280px;
	background-color: rgba(255, 255, 255,0.5);
}

#hotelier {
	margin-top: 333px;
	margin-left: 950px;
	position: absolute;

}

.sprechblase {
	background-image: url("../Bilder/Sprechblase.png");
	position: absolute;
	margin-top: 270px;
	margin-left: 470px;
	height: 314px;
	width: 525px;
}

#hoteliertext {
	height: 300px;
	width: 420px;
	margin-left: 20px;
	margin-top: 20px;
	margin-right: 20px;
	font-family: "Source Sans Pro";
	font-size: 2em;
	font-weight: 300;
}

#hotelier_karl {
	margin-top: 333px;
	position: absolute;
}
    ＆＃13; 
    <!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

	<title>Wo soll Karl wohnen?</title>

	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300' rel='stylesheet' type='text/css'>

	<script src="js/script2.js"></script> 

	<link rel="stylesheet" href="css/style.css">

</head>

<body>
	<div id="airbnb_cityscape">
		<div id="karl_laufen">  
			<img src="Bilder/Karlstatic_R.png"> 
		</div>
		<div id="haus1">  
			<img src="Bilder/haus1.png"> 
		</div>
		<div id="haus2">  
			<img src="Bilder/haus2.png"> 
		</div>
		<div id="haus3">  
			<img src="Bilder/haus3.png"> 
		</div>
		<div id="haus4">  
			<img src="Bilder/haus4.png"> 
		</div>
		<div id="hotel1">  
			<img src="Bilder/hotel1.png"> 
		</div>

		<div id="Layer_haus2" onclick="AUS();"> </div>
		<div id="Layer_haus3" onclick="AUS();"> </div>
		<div id="Layer_hotel1" onclick="AUS();">
			<div id="hotelier_karl"><img src="Bilder/hotelier_karl.png"></div>
			<div id="hotelier"><img src="Bilder/hotelier.gif"></div>
			<div class="sprechblase"><div id="hoteliertext">Schön, dass du dich für unser Hotel interessierst! In unserem 5-Sterne-Superior-Hotel kostet eine Nacht 120€</div></div>
		</div>


	</div>
</body>
</html>
    ＆＃13;
    ＆＃13;
    ＆＃13;

0 个答案:

没有答案
相关问题
最新问题