如何使这个对象移动得更快

问题描述

在我的代码中，每次按下箭头键时，都会使对象（男人精灵）移动1个像素。当你按下箭头键时，该男子非常缓慢。每次按下按键时都会尝试增加数量，但这并不够流畅。有人可以告诉我如何让他每次移动一个像素，但每100毫秒移动一个像素？

  function moveLeft（）{
 var newLeft = left  -  1; 
 left = newLeft; 
 myElement.style.left = newLeft +'px'; 
 
 
 function moveUp（）{
 var newTop = topStyle  -  1; 
 topStyle = newTop; 
 myElement.style.top = newTop +'px'; 
 
 $ b函数moveRight（）{
 var newLeft2 = left + 1; 
 left = newLeft2; 
 myElement.style.left = newLeft2 +'px'; 
 
 
 function moveDown（）{
 var newTop2 = topStyle + 1; 
 topStyle = newTop2 
 myElement.style.top = newTop2 +'px'; 
 
  

解决方案

试试吧，为你编写整个代码。现在我每隔100毫秒使用一个时间间隔

var myElement = document.getElementById （character）; var move_left = false; var move_up = false; var move_right = false; var move_down = false; setInterval（function（）{if（move_left）myElement.style.left =（getIntfromStyle（myElement.style.left ） - 1）+'px'; if（move_up）myElement.style.top =（getIntfromStyle（myElement.style.top） - 1）+'px'; if（move_right）myElement.style.left =（getIntfromStyle（myElement如果（move_down）myElement.style.top =（getIntfromStyle（myElement.style.top）+ 1）+'px';}，100）; //使用这个函数，你不需要topStyle&左变量存储以前的位置//你可以得到当前位置easilysilyfunction getIntfromStyle（in_style）{return parseInt（in_style.replace（'px'，''））;} //我使用键盘告诉代码何时应该移动字符，当必须stopdocument.onkeydown = function（e）{e = e || window.event;开关（e.which || e.keyCode）{case 37：// left move_left = true;打破;情况38：// up move_up = true;打破;案例39：// right move_right = true;打破;情况40：//下移move_down = true;打破;默认值：return; //为其他键退出此处理程序} e.preventDefault（）; //防止默认动作（滚动/移动插入符号）} document.onkeyup = function（e）{e = e || window.event;开关（e.which || e.keyCode）{case 37：// left move_left = false;打破;情况38：// up move_up = false;打破;案例39：// right move_right = false;打破;情况40：//下移move_down = false;打破; }} < div id =characterstyle = 背景：红色;宽度：20像素;高度：20像素;位置是：固定;显示：块;左边：0;顶部：0 >< / DIV>

In my code I make an object (A man sprite) move 1 pixel every time an arrow key is pressed. When you hold down the arrow key, the man is very very slow. I tried increasing the amount each time the key is pressed but that is not smooth enough. Can somebody tell me how I can make him move one pixel each time but move one pixel every 100 milliseconds? Thanks I appreciate the help.

    function moveLeft() {
    var newLeft = left - 1;
    left = newLeft;
    myElement.style.left = newLeft + 'px';

}
function moveUp() {
    var newTop = topStyle - 1;
    topStyle = newTop;
    myElement.style.top = newTop + 'px';

}
function moveRight() {
    var newLeft2 = left + 1;
    left = newLeft2;
    myElement.style.left = newLeft2 + 'px';

}
function moveDown() {
    var newTop2 = topStyle + 1;
    topStyle = newTop2
    myElement.style.top = newTop2 + 'px';
}

解决方案

try it, i just re-write the whole code for you. now i use an interval for each 100 milliseconds

var myElement = document.getElementById("character");

var move_left = false;
var move_up = false;
var move_right = false;
var move_down = false;

setInterval(function (){
	if (move_left) myElement.style.left = (getIntfromStyle(myElement.style.left) - 1) + 'px';
	if (move_up) myElement.style.top = (getIntfromStyle(myElement.style.top) - 1) + 'px';
	if (move_right) myElement.style.left = (getIntfromStyle(myElement.style.left) + 1) + 'px';
	if (move_down) myElement.style.top = (getIntfromStyle(myElement.style.top) + 1) + 'px';
}, 100);

// with this function, you dont need topStyle & left variables to store previous positions
// you can get current positioin easilysily
function getIntfromStyle(in_style) {
	return parseInt(in_style.replace('px', ''));
}

// i use keyboard to tell code when character should be moved and when must stop
document.onkeydown = function(e) {
    e = e || window.event;
    switch(e.which || e.keyCode) {
		case 37: // left
			move_left = true;
			break;
        case 38: // up
			move_up = true;
			break;
        case 39: // right
			move_right = true;
			break;
        case 40: // down
			move_down = true;
			break;
        default: return; // exit this handler for other keys
	}
	e.preventDefault(); // prevent the default action (scroll / move caret)
}

document.onkeyup = function(e) {
    e = e || window.event;
    switch(e.which || e.keyCode) {
		case 37: // left
			move_left = false;
			break;
        case 38: // up
			move_up = false;
			break;
        case 39: // right
			move_right = false;
			break;
        case 40: // down
			move_down = false;
			break;
	}
}

<div id="character"  style="background:red;width:20px;height:20px;position:fixed;display:block;left:0;top:0"></div>

这篇关于如何使这个对象移动得更快的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！