자바스크립트 캔버스 질문

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

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

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

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

Copy

<!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>

자바스크립트 캔버스 질문

답변 1개

공유하기