使用setInterval更新.style属性

我想以设定的时间间隔移动div元素的位置，但setInterval方法只执行一次，然后停止。 setInterval（）不会按照预期每200毫秒重复更新.style.transform。使用setInterval更新.style属性

<!DOCTYPE html> 
<html> 
<head> 
<title>Snake game</title> 
<style type="text/css"> 
    .container { 
    width: 500px; 
    height: 500px; 
    border: 2px solid black; 
    } 

    #snakehead { 
    width: 5px; 
    height: 5px; 
    background: pink; 
    position: relative; 
    left: 0px; 
} 
</style> 
<script type="text/javascript" src="snake.js"></script> 
</head> 
<body> 
    <div class="container"> 
    <div id="snakehead"></div> 
    </div> 
</body> 
</html>

Javascript：理想情况下，我也希望能够用vx和vy在任何方向移动蛇头。无论如何要将这些值放入.style.transform = translateX（）？

function snakepos() { 
    var x = 0; 
    var y = 0; 
    var vx = 1; 
    var vy = 0; 
    return { 
     move: function() { 
       x += vx; 
       y += vy; 
       var snakehead = document.querySelector("#snakehead"); 
       snakedhead.style.left = "5px"; 
     } 
    }; 
} 

window.onload = function() { 
    console.log("hi"); 
    var container = document.querySelector(".container"); 
    var snake = snakepos(); 

    setInterval(function() { 
     snake.move(); 
    }, 200); 
}

我知道这jQuery中做更容易使用的CSS但我要如何能在香草的JavaScript来实现。先谢谢你。

来源

2016-12-17 kshatriiya

你有一个问题，你的功能。 'snakehead.style.left = snakedhead.style.left ==“5px”;'实际上是将'left'的值设置为'snakedhead.style.left =='5px“'的结果（这是true/false ，而不是一个值）。你想在那里做什么？ – Dekel

@Dekel ops对不起，那只是我试验，我最初只是snakehead.style.left =“5px”，它也没有工作。 – kshatriiya

因此，如果每次将该值设置为“5px”，则不会有任何变化。第一次 - 价值将是5px。第二次将是（再次）5px。 – Dekel

snakehead.style.left = (snakedhead.style.left + "5px");

或

snakehead.style.left = (snakedhead.style.left - "5px");

来源

2016-12-17 02:18:45

或'snakedhead.style.left = vx +'px';'因为这似乎是x位移变化计算的地方。 – RobG

我建议的东西在风格有点更熟悉的对我说：

function snakepos() { 
    this.x = 0; 
    this.y = 0; 
    this.vx = 1; 
    this.vy = 1; 
    this.snakehead = document.querySelector("#snakehead"); 
    var me = this; 
    this.move = function() { 
    me.x += me.vx; 
    me.y += me.vy; 
    me.snakehead.style.top = me.y + "px"; 
    me.snakehead.style.left = me.x + "px"; 
    }; 

    return this; 
} 

    console.log("hi"); 
    var container = document.querySelector(".container"); 
    var snake = new snakepos(); 

    setInterval(function() { 
    snake.move(); 
    }, 200);

见琴：https://jsfiddle.net/theredhead/td8opb0b/1/

来源

2016-12-17 02:49:12 Kris

谢谢，我和你的东西非常相似。 – kshatriiya

使用setInterval更新.style属性

回答

相关问题