자바스크립트 캔버스 질문
본문
제가 원래 허들이라는 이미지를 오른쪽에서 왼쪽으로 랜덤으로 나오게하려는데
1. 허들이미지가 왼쪽으로 사라지면 (x값이0이되면 다시 오른쪽 끝에서 왼쪽으로 랜덤으로 생기게하기
2. 허들랜덤값을 높이가 500이라 치면 0~250 정도에서 랜덤값을 산출하고싶습니다.
저는 지금 허들이 위쪽에서 왼쪽으로가서 다시 재생이 않되고있습니다. 코린이좀 도와주세요 ㅠㅠ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="700" height="500"
style="background:url('images/track.png'); background-size: cover"></canvas>
<script>
var ctx = myCanvas.getContext("2d");
var man_x = 0;
var man_y = 0;
var manImg = new Image();
manImg.src = "images/runner.PNG";
var huddle_x = 0;
var huddle_y = 0;
var huddleImg = new Image();
huddleImg.src = "images/huddle.PNG";
function Do_a_Frame(){
man_y = myCanvas.height - manImg.height
ctx.clearRect(0,0, myCanvas.width, myCanvas.height);
ctx.drawImage(manImg, man_x, man_y);
// huddle_x = huddle_x - 3;
//if (huddle_x> myCanvas.witdh){
// huddle_x = 700;
// huddle_y = Math.random()*(myCanvas.height-huddleImg.height);
}
ctx.drawImage(huddleImg, huddle_x, huddle_y);
}
function MyKeyDownHandler(MyEvent){
if (MyEvent.keyCode == 37 && man_x > 0) { man_x = man_x - 10; }
if (MyEvent.keyCode == 39 && man_x + manImg.width < myCanvas.width) { man_x = man_x + 10; }
MyEvent.preventDefault();
}
setInterval(Do_a_Frame, 25);
addEventListener("keydown", MyKeyDownHandler);
</script>
</body>
</html>
답변을 작성하시기 전에 로그인 해주세요.
