update .style attributes with setInterval

div 요소의 위치를 설정된 간격으로 이동하려고 시도하지만 setInterval 메서드가 한 번 실행 된 다음 중지됩니다. setInterval()은 의도 한대로 200 밀리 초마다 .style.transform을 반복적으로 업데이트하지 않습니다.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>

자바 스크립트 : 이상적으로는 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를 훨씬 쉽게 수행 할 수 있습니다 알고 있지만 나는 이것이 바닐라 자바 스크립트에서 수행 할 수있는 방법을 것입니다. 미리 감사드립니다.

출처

2016-12-17 kshatriiya

당신은 문제가 당신의 기능. 'snakehead.style.left = snatchhead.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

update .style attributes with setInterval

답변

관련 문제