带有箭头键移动对象的HTML和Java脚本？

Question

好的，所以我制作了一个页面，可以使用箭头键移动图像，但是只有向下和向右功能可以使用。 我是从Hide show脚本制作函数的，因为我对javascript很陌生。

这是代码。

剩下

function left(id) { 
    var y = '5';
    var z =document.getElementById(id).style.left;
    var x = parseInt(y)+parseInt(z);
    var state = document.getElementById(id).style.left;
        if (state == '1') {
            document.getElementById(id).style.left = x;
        } else {
            document.getElementById(id).style.left = x;
        }
    }

对

function right(id) { 
    var y = '5';
    var z =document.getElementById(id).style.right;
    var x = parseInt(y)+parseInt(z);
    var state = document.getElementById(id).style.right;
        if (state == '1') {
            document.getElementById(id).style.right = x;
        } else {
            document.getElementById(id).style.right = x;
        }
    }

向上

function up(id) { 
    var y = '5';
    var z =document.getElementById(id).style.bottom;
    var x = parseInt(y)+parseInt(z);
    var state = document.getElementById(id).style.bottom;
        if (state == '1') {
            document.getElementById(id).style.bottom = x;
        } else {
            document.getElementById(id).style.bottom = x;
        }
    }

下

function down(id) { 
    var y = '5';
    var z =document.getElementById(id).style.top;
    var x = parseInt(y)+parseInt(z);
    var state = document.getElementById(id).style.top;
        if (state == '1') {
            document.getElementById(id).style.top = x;
        } else {
            document.getElementById(id).style.top = x;
        }
    }

然后是箭头键脚本

document.onkeyup = KeyCheck;       
function KeyCheck() {

 var KeyID = event.keyCode;

  switch(KeyID)
  {

  case 37:

  right('img');

  break;

  case 38:

  up('img')

  break

  case 39:

  left('img');

  break;

  case 40:

  down('img');

  break;
  }
  }

然后是html

<img id="img" src="http://trevorrudolph.com/logo.png" style="position:absolute; left:1; bottom:1; right:1; top:1;">

您可以在arrow.zip下载html

实际页面在这里

Answer 1

您应该只将其定位为top和left ，因为如果您尝试按照自己的方式进行操作，则最终将得到非常混乱的属性，例如， top为5但bottom为bottom 100。

另外，对于top和left属性，应使用单位，最好为像素。

因此，您真正需要做的就是将功能更改为：

function left(id) {
    document.getElementById(id).style.left.match(/^([0-9]+)/);
    var current = RegExp.$1; // get just the number and not the units
    document.getElementById(id).style.left = current - 1 + 'px'; // taking advantage of JavaScript's strange but sometimes useful type conversion. The subtraction converts it to an int and the addition converts it back to a string. 
}

function right(id) {
    document.getElementById(id).style.left.match(/^([0-9]+)/);
    var current = RegExp.$1;
    document.getElementById(id).style.left = parseInt(current) + 1 + 'px'; // here we can't use that trick
}

function up(id) {
    document.getElementById(id).style.top.match(/^([0-9]+)/);
    var current = RegExp.$1;
    document.getElementById(id).style.top = current - 1 + 'px';
}

function down(id) {
    document.getElementById(id).style.top.match(/^([0-9]+)/);
    var current = RegExp.$1;
    document.getElementById(id).style.top = parseInt(current) + 1 + 'px';
}

另外，您应该使用<script type="text/javascript">而不是<script language="JavaScript"> 。 不建议使用后一种形式。

Answer 2

function move ( id, direction ) {
    var element = document.getElementById(id);
    switch ( direction )
    {
    case "left":  element.style.left += 5; break;
    case "right": element.style.left -= 5; break;
    case "up":    element.style.top += 5;  break;
    case "down":  element.style.top -= 5;  break;
   }
}

考虑您的代码，看起来像这样。 更少的代码，更少的getelementbyid，易于更改。 您只需要左样式和上样式。

编辑：我的错误-字符串值必须在“”内。 数值-不需要。

Answer 3

相反设置的.right财产，从减去的量.left属性。 这对我有用。 此外，尝试优化您的代码-你if从句中做的完全一样的东西if部分，并在else部分...