update .style attributes with setInterval

div要素の位置を設定した間隔で移動しようとしていますが、setIntervalメソッドは一度実行されてから停止します。 setInterval（）は.style.transformを200ミリ秒ごとに繰り返し更新しません。update .style attributes with setInterval

<!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); 
}

私は、これはの.cssとjQueryの中ではるかに容易に行うことができますが、私は、これはバニラJavaScriptで行うことができますどのように知っていただきたいです。前もって感謝します。

出典

2016-12-17 kshatriiya

あなたはあなたの中に問題を抱えています関数。 'snakehead.style.left ==" 5px ";'実際には 'snakedhead.style.left ==" 5px "'の結果に 'left'の値を設定しています（これは真/偽です、値ではありません）。何をしようとしていますか？ – 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

update .style attributes with setInterval

答えて

関連する問題