html5 잘못된 개체 이동

아래 코드는 HTML5 문서의 코드입니다. 키보드를 제어해야하는 볼과 정사각형을 중심으로 움직여야하며 벽에 부딪히면 방향을 바꿔야하는 사각형이 있습니다. 그러나 나는 내 이동 기능이 작은 분홍빛 광장이 아닌 구멍 광장을 움직이고 있다고 생각한다. 어떤 아이디어?html5 잘못된 개체 이동

enter image description here

<!doctype html> 
<html> 
<head> 
<meta charset="UTF-8" /> 
<title>Canvas Test</title> 
</head> 
<body> 
<section> 

<div> 
<canvas id="canvas" width="300" height="200"> 
This text is displayed if your browser does not support HTML5 Canvas. 
</canvas> 
</div> 

<script type="text/javascript"> 
var canvas; 
var ctx; 
var dx = 5; 
var dy = 5; 
var x = 150; 
var y = 100; 
var WIDTH = 300; 
var HEIGHT = 200; 
var x1 = 0, 
    y1 = 0; 
var dx1 = 4, 
    dy1 = 5; 

function circle(x, y, r) { 
    ctx.beginPath(); 
    ctx.arc(x, y, r, 0, Math.PI * 2, true); 
    ctx.fill(); 
} 


function clear() { 
    ctx.clearRect(0, 0, WIDTH, HEIGHT); 
} 

function rect(x, y, w, h) { 
    ctx.beginPath(); 
    ctx.rect(x, y, w, h); 
    ctx.closePath(); 
    ctx.fill(); 
    ctx.stroke(); 
} 

function moveball() {  
    x1 += dx1; 
    y1 += dy1; 
    if (x1 <= 0) dx1 = 4; 
    else if (x1 >= 550) dx1 = -4; 
    if (y1 <= 0) dy1 = 5; 
    else if (y1 >= 550) dy1 = -5; 
    ctx.translate(x1, y1);  
} 

function init() { 
    canvas = document.getElementById("canvas"); 
    ctx = canvas.getContext("2d"); 
    return setInterval(draw, 10); 
} 

function doKeyDown(evt) { 
    switch (evt.keyCode) { 
     case 38: 
      /* Up arrow was pressed */ 
      if (y - dy > 0) { 
       y -= dy; 
      } 
      break; 
     case 40: 
      /* Down arrow was pressed */ 
      if (y + dy < HEIGHT) { 
       y += dy; 
      } 
      break; 
     case 37: 
      /* Left arrow was pressed */ 
      if (x - dx > 0) { 
       x -= dx; 
      } 
      break; 
     case 39: 
      /* Right arrow was pressed */ 
      if (x + dx < WIDTH) { 
       x += dx; 
      } 
      break; 
    } 
} 

function draw() { 
    clear(); 
    ctx.fillStyle = "white"; 
    ctx.strokeStyle = "black"; 
    rect(0, 0, WIDTH, HEIGHT); 
    ctx.fillStyle = "purple"; 
    circle(x, y, 10); 

    ctx.fillStyle = "#CC00FF"; 
    ctx.fillRect(0, 0, 50, 50); 
    moveball();  
} 

init(); 
window.addEventListener('keydown', doKeyDown, true); 
</script> 
</section> 
</body> 
</html>

데모 : http://jsfiddle.net/8nsQB/2/

작업 : 내가 제대로 가지고있는 moveball 기능에서이 기능 사각형을 추가라는 내 moveball 기능이 movesquare라고되어 있어야합니다

명명 된 movesquare

function square(x1, y1){ 

ctx.fillStyle="#CC00FF"; 
ctx.fillRect(x1,y1,50,50); 

}

작업 코드 :

http://jsfiddle.net/VeEGW/

출처

2013-10-11 Bawn

가까운 방법 : JSFiddle;

이상한 일이 발생하는 버그가 많이있었습니다. 여기에 나열 됨 :

1) setInterval에 의해 반복적으로 호출 된 moveball()의 ctx 변수를 통해 전체 캔버스의 위치를 변경했습니다. 당신이하고자 한 것은 단순히 공을 호출하는 대신 전체 캔버스를 움직이는 것입니다.

function moveball() {  
    x1 += dx1; 
    y1 += dy1; 
    if (x1 <= 0) dx1 = 4; 
    else if (x1 >= 550) dx1 = -4; 
    if (y1 <= 0) dy1 = 5; 
    else if (y1 >= 550) dy1 = -5; 
    ctx.translate(x1, y1);  
}

나는 다음으로 코드를 업데이트 : 공의 움직임에 대한

function moveball() { 
    x1 += dx1; 
    y1 += dy1; 

    if (x1 <= 0) dx1 = 4; 
    else if (x1 >= 300) dx1 = -4; 
    if (y1 <= 0) dy1 = 5; 
    else if (y1 >= 200) dy1 = -5; 

    ctx.fillStyle = "purple"; 
    circle(x1, y1, 10); 
}

2) 귀하의 높이와 너비의 경계가 꺼져 있었다. 나는 그들을 도와 300x200로 조정했다.

3) 아직 키드 타운으로 이동하지는 못했지만, 이봐 요, 우리가 발전하고 있다고 생각합니다. 몇 가지 사항을 더 조정하고이 답변을 업데이트하도록 노력하겠습니다.

출처

2013-10-11 23:03:59

대단히 감사합니다. 당시에는 문제를 볼 수 없었습니다 !! 평화 xx – Bawn

물론! 도와 줄 수있어서 기뻐. –

html5 잘못된 개체 이동

답변

관련 문제