Question

我是Html / Javascript的新手并尝试使用箭头键移动图像。它工作，但是当图像的style.top低于一定数量（看起来像是100px）时，它会跳到style.top = 425px，这应该只发生在style.top＆gt; = 450.这是我的代码：

var keys = [];


	window.addEventListener("keydown", function(e){
		keys[e.keyCode] = true;
	}, false);
	window.addEventListener("keyup", function(e){
		delete keys[e.keyCode]
	}, false);



function init(){

var link = document.getElementById("link");
	setTimeout(function(){
		loop();
	}, 1)
}


function update(){
	if(keys[38]){
		link.style.top = parseInt(link.style.top) - 3 + 'px'
		if(link.style.top <= 000 + 'px'){
			link.style.top = 000;
		}
			console.log(link.style.top)
	}
	if(keys[40]) {
		link.style.top = parseInt(link.style.top) + 3 + 'px'
		if(link.style.top >= 425 + 'px') {
			link.style.top = 425;
		}
			console.log(link.style.top)

	}
	if(keys[37]) {
		link.style.left = parseInt(link.style.left) - 3 + 'px'

	}
	if(keys[39]) {
		link.style.left = parseInt(link.style.left) + 3 + 'px'

	}
}




function loop(){
	setInterval(function(){
		update();
	}, 1000/60)
}

<html>
<head>
	<title>Game</title>
	<link rel="stylesheet" type="text/css" href="styles.css">
	<script type="text/javascript" src = "script.js"></script>
</head>
<body onload = "init()">

<!-- Images for the page -->

<img id = "link" src = "http://i.imgur.com/clcuHKG.jpg" style = "position: absolute; top:250; left:500;" height = "200" width = "200">

</body>
</html>

Answer 1

您正在使用字符串进行计算。尽量避免这种情况！字符串的行为不像数字。

例如，您比较最高值，例如， '99px'到值'425px'。字符串比较例程认为99px更大，因为第一个字符9的ASCII值大于ASCII值4。

所以你需要做的是使用数字值。例如parseInt(link.style.top)。然后你要比较数字99和425，一切都会很好。

我的图像按下箭头键时以奇怪的方式跳跃（HTML + JS）

1 个答案: