자바스크립트 캔버스 질문

코린입니당 4년 전 조회 1,958

제가 원래 허들이라는 이미지를 오른쪽에서 왼쪽으로 랜덤으로 나오게하려는데

1. 허들이미지가 왼쪽으로 사라지면 (x값이0이되면 다시 오른쪽 끝에서 왼쪽으로 랜덤으로 생기게하기

2. 허들랜덤값을 높이가 500이라 치면 0~250 정도에서 랜덤값을 산출하고싶습니다.

저는 지금 허들이 위쪽에서 왼쪽으로가서 다시 재생이 않되고있습니다. 코린이좀 도와주세요 ㅠㅠ

</p>

<p><!DOCTYPE html></p>

<p><html lang="en"></p>

<p><head></p>

<p>    <meta charset="UTF-8"></p>

<p>    <meta name="viewport" content="width=device-width, initial-scale=1.0"></p>

<p>    <title>Document</title></p>

<p></head></p>

<p><body></p>

<p>    <canvas id="myCanvas" width="700" height="500"</p>

<p>    style="background:url('images/track.png'); background-size: cover"></canvas></p>

<p>

 </p>

<p>    <script></p>

<p>    var ctx = myCanvas.getContext("2d");</p>

<p> </p>

<p>    var man_x = 0;</p>

<p>    var man_y = 0;</p>

<p>    var manImg = new Image();</p>

<p>    manImg.src = "images/runner.PNG";</p>

<p> </p>

<p>    var huddle_x = 0;</p>

<p>    var huddle_y = 0;</p>

<p>    var huddleImg = new Image();</p>

<p>    huddleImg.src = "images/huddle.PNG";</p>

<p> </p>

<p>    function Do_a_Frame(){</p>

<p>        man_y = myCanvas.height - manImg.height</p>

<p>        ctx.clearRect(0,0, myCanvas.width, myCanvas.height);</p>

<p>        ctx.drawImage(manImg, man_x, man_y);</p>

<p>       </p>

<p>       // huddle_x = huddle_x - 3;</p>

<p>        //if (huddle_x> myCanvas.witdh){</p>

<p>          //  huddle_x = 700;</p>

<p>          //  huddle_y = Math.random()*(myCanvas.height-huddleImg.height);</p>

<p>        }</p>

<p>        ctx.drawImage(huddleImg, huddle_x, huddle_y);</p>

<p>    }</p>

<p>    function MyKeyDownHandler(MyEvent){</p>

<p>        if (MyEvent.keyCode == 37 && man_x > 0) { man_x = man_x - 10; }</p>

<p>            if (MyEvent.keyCode == 39 && man_x + manImg.width < myCanvas.width) { man_x = man_x + 10; }</p>

<p>            </p>

<p>        MyEvent.preventDefault();</p>

<p>    }</p>

<p> </p>

<p>    setInterval(Do_a_Frame, 25);</p>

<p>    addEventListener("keydown", MyKeyDownHandler);</p>

<p></script></p>

<p></body></p>

<p></html></p>

<p>

자바스크립트 캔버스 질문

답변 1개

공유하기