HTML+Java script (기초) canvas를 이용한 움직이는 웹게임?(움직이기만 함)

<최종 화면>

최종 화면과 같이 canvas위에 키보드를 누를 시, 움직이는 캐릭터를 만들어보자.

우선 canvas를 만들자.

배경과 캐릭터 이미지는 임의로 사용하였다.

캐릭터를 움직이기 전에 배경과 좌표 등을 설정하자.

아직 움직이지 않지만, 일단 화면에 이미지가 보인다.

이동방향을 제어하기 위한 변수 dx,dy를 선언하고, 움직이는 기능의 함수에 연산을 한다.

keyCode를 이용해서 방향키를 구분할 것이기 때문에 변수 선언을 한다.

혹시 몰라 키 코드값을 화면에 찍어보겠다.

방향키에 따라 dx,dy값을 주어서 그 값이 캐릭터 위치에 영향을 주자.

<복붙용 코드>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92

<!DOCTYPE html>
<html>
<head>
    <title></title>
 
    <script>
 
        var canvas; //도화지 객체
        var context; //화가 객체
 
        // 플레이어 이동 방향과 속도
        var dx=0;
        var dy=0;
 
        // 키 이벤트로 인해 인식된 keycode변수
        var keycode;
 
        // 전역변수로서 이미지 객체 생성
        var imgChar= new Image();
        imgChar.src="./ms19.png";
        var imgBg= new Image();
        imgBg.src="./bg.png";
 
        // 플레이어 캐릭터의 중심좌표
        var x=200, y=250; //정 가운데로 위치
        var w=40, h=40; //플레이어 이미지의 절반 사이즈
 
        function loaded(){
            canvas= document.getElementById('c1');
            context= canvas.getContext('2d');
 
            runGame(); //게임을 진행하는 함수
            //10ms 마다 runGame()를 다시 호출
            setInterval(runGame,10); //1초에 100번 호출
        }
 
        function runGame(){
            moveAll(); //캐릭터 움직이기
            drawAll(); // 이미지들 그리기
        }
 
        function moveAll(){
            //플레이어의 좌표 변경
            x+=dx;
            y+=dy;
 
        }
        function drawAll(){
            //배경 그리기
            context.drawImage(imgBg,0,0,400,500);
            //플레이어 그리기
            context.drawImage(imgChar,x-w,y-h,w*2,h*2);
 
            // 키 코드값 글씨 그리기
            context.fillStyle="white";
            context.font="30px sans-serif";
            context.fillText(keycode, 10, 40);
        }
 
        function keydown(){
            //눌러진 key의 코드값
            keycode=event.keyCode;
            switch(keycode){
                case 37: dx=-1; break; //left
                case 38: dy=-1; break; //up
                case 39: dx=1; break; //right
                case 40: dy=1; break; //down
            }
        }
        function keyup(){
            //떨어진 key의 코드값
            keycode=event.keyCode;
            switch(keycode){
                case 37: 
                case 39: dx=0; break;
                case 38:
                case 40: dy=0; break;
            }
        }
 
        // 사운드 작업 : 크롬은 자동 재생을 막은 듯 함. Edge는 될 것임
        var sd= new Audio('./dragon_flight.mp3');
        sd.volume= 1.0; //0.0 ~ 1.0
        sd.loof= true; //반복재생여부
        sd.play();
 
    </script>
</head>
<body onload="loaded()" onkeydown="keydown()" onkeyup="keyup()">
    <canvas width="400" height="500" style="border: 2px solid black;" id="c1"></canvas>
</body>
</html>
 
 

저작자표시

'안드로이드 웹앱 콘테츠 개발자 양성(국비지원) > HTML+Java script' 카테고리의 다른 글

HTML+Java script (기초) geolocation (위도, 경도 ) (0)	2019.12.19
HTML+Java script (기초) drag에 대한 이벤트 (0)	2019.12.19
HTML+Java script (기초) canvas (문자, 도형,선, 이미지 그려보기) (0)	2019.12.17
HTML+Java script (기초) Key Event (키보드 이벤트) (0)	2019.12.17
HTML+Java script (기초) 이벤트 처리, 정규표현식 (0)	2019.12.17