[javaScript] javaScript Drawing

[조건]

1. 화면 상에 100*100 박스 출력
2. 박스안에 특정 도형을 출력 - 도형 종류 무관 - 예) 네모, 세모, 원, 보노보노 등
3. 화살표로 특정 도형 이동 구현

<div class="ctn" onload="loaded()" onkeydown="keydown()" onkeyup="keyup()"> 
    <h2> Javascript Drawing </h2>
    <p> 박스 안에 도형 출력-> 화살표로 이동 구현하기</p>
    <p> 키보드로 원을 움직여보세요 &#128155</p>
    <canvas id="canvas" width="500" height="500" > </canvas>
</div>

 

            var canvas = document.getElementById("canvas");
            var ctx = canvas.getContext("2d");			

            var x = canvas.width/2;
            var y = canvas.height/2;
            //x와 y의 변수를 이용해서 캔버스 중앙에서 그려지도록 하겠습니다. 
           

            var ballRadius = 10;  
			// 충돌을 감지하기 위해서는 공이 벽에 닿았는지를 확인하고 
			//그에 따라 움직이는 방향을 수정해야 합니다.
			//의 변수에 원의 반지름 값을 대입하여 계산하는데 사용합니다

           
            //상하좌우 컨트롤 버튼이 눌렸는 지 확인하는 4개의 변수, 
            // 버튼을 누르는 것은 boolean 변수로 정의하고 초기화 합니다, 
            // 컨트롤 버튼이 눌려지지 않은 상태이므로  기본값은 false 
            var rightPressed = false;
            var leftPressed = false;
            var topPressed = false;
            var bottomPressed = false;
            

                function drawBall() {
                    ctx.beginPath();
                    ctx.arc(x, y, ballRadius, 0, Math.PI*2, false); 
                    ctx.fillStyle = "green";
                    ctx.fill();
                    ctx.closePath();      

				//{  ctx.arc(x, y, ballRadius, 0, Math.PI*2, false); 
				//원의 중심을 가리키는 x와 y좌표
				//원의 반지름
				//시작 각도와 끝 각도(원을 그릴 때 시작과 끝이되는 각도이며, 라디안 값입니다.)
				//그리는 방향(false를 넣으면 시계방향으로 그려집니다. 
				//기본 값이나 true를 넣으면 반 시계방향으로 그려집니다.) 
				//이 파라미터는 옵션입니다.}     
                             
                }

                function draw() {
                    ctx.clearRect(0, 0, canvas.width, canvas.height);
					 //캔버스의 내용들을 지워주기 위한 메소드인 clearRect() (en-US)								
                    drawBall();
					//매 10밀리초마다 캔버스는 지워지고, 
					//새로운 x와 y값의 좌표를 가지는 공이 다음 프레임에 그려지게 됩니다.                            
                   
				if(rightPressed  && x < canvas.width-10 ) {
                        x+=2;
                    }else if(leftPressed && x > 10) {
                        x-= 2;
                    }else if(bottomPressed && y < canvas.height-10){
                        y+= 2;
                    }else if(topPressed  && y> 10){
                        y-= 2;
                    }


                }
                
                // 버튼이 눌렸을 때  원의 움직임을 조종할 수 있는 코드가 실행되어야 합니다.
                //키가 눌렸음을 인식하기 위해, 이벤트 리스너를 설정합니다.
                document.addEventListener("keydown", keyDownHandler, false);
                document.addEventListener("keyup", keyUpHandler, false);

                

			// 키보드 중 어떤 키 하나가 눌려서 keydown 이벤트가 발생하면, 
			//keyDownHandler() 함수가 실행됩니다. 
								.
             
                function keyDownHandler(e) {
                    if(e.keyCode == 39) {
                        rightPressed = true;
                    }
				//왼쪽 방향키를 누르면, leftPressed 변수가 true 로 설정되고, 
				//왼쪽 방향키에서 손을 때면 leftPressed 변수가 false로 설정됩니다
                    else if(e.keyCode == 37) {
                        leftPressed = true;
                    }
										
                    else if(e.keyCode == 38 ) {
                        topPressed = true;          
                    }
                    else if(e.keyCode == 40 ) {
                        bottomPressed = true;
                    }
                }
								

			// 두번째 리스너에도 같은 패턴이 적용됩니다: 키에서 손을 때면
			// keyup 이벤트가 keyUpHandler() 함수를 실행합니다 . 	
                function keyUpHandler(e) {
                    if(e.keyCode == 39) {
                        rightPressed = false;
                    }
                    else if(e.keyCode == 37) {
                        leftPressed = false;
                    }else if(e.keyCode == 38 ) {
                        topPressed = false;
                    }else if(e.keyCode == 40 ) {
                        bottomPressed = false;
                    }
                }
			
                //draw()함수는 setInterval를 통해서 10밀리초마다 실행됩니다.
                setInterval(draw, 10);

<참고>
https://developer.mozilla.org/ko/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript

 

[결과화면]

See the Pen by 현정 (@Celine__509) on CodePen.