Before Start
키오스크를 학습하는 게임을 제작하자는 주제를 선정한 이후에 어떤 플랫폼에서 돌아가는 게임으로 제작을 해야할지 고민이 많았다. 실제로 누군가 내 게임을 통해 키오스크를 학습한다고 가정한다면 별도의 설치가 필요한 pc나 모바일 게임보다는 웹에서 구동이 되는 게임이 더 접근성에서 용의할 것 같다고 생각했다. 그래서 html5, javascript, css 를 이용해 웹에서 동작하는 게임을 만들어보자고 결정을 하게 되었다.
day 1 (2021.11.12)
- html canvas 익히기
-> 구글의 공룔게임을 간단하게 만들어보면서 canvas의 기본 사용법을 익혀보았다.
// 캔버스 태그 이용을 위한 최소한의 코드
var canvas = document.getElementById('canvas');
var ctx = canvas.ge
tContext('2d');
canvas.width = window.innerWidth -100;
canvas.height = window.innerHeight - 100;
//
var dino = {
x: 50,
y :100,
width : 50,
height : 50,
draw() {
ctx.fillStyle = 'green'; //초록색 네모를 그려주세요
ctx.fillRect(this.x, this.y, this.width, this.height);
//왼쪽 위로부터 x,y 위치레 width*height크기의 사각형을 그려라.
}
}
//1초에 60번 x++해주면 애니메이션 생성 가능
// dino.draw()
class Cactus {
constructor() {
this.x = 500;
this.y = 100;
this.width = 50;
this.height = 50;
}
draw() {
ctx.fillStyle = 'red';
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
var timer = 0;
var cactus여러개 = [];
//1초에 60번 함수 안에 있는 코드들이 실행 됨 - 애니메이션 제작 (실행횟수는 모니터 FPS에 따라 다름)
function 프레임마다실행할거() {
requestAnimationFrame(프레임마다실행할거);
timer++;
ctx.clearRect(0, 0, canvas.width, canvas.height); // 캔버스를 지워줌
if(timer %60 ===0) { //60프레임마다 장애물 한 개씩 생성 + attay에 집어 넣음
var cactus = new Cactus();
cactus여러개.push(cactus);
}
cactus여러개.forEach((a) => { // array에 있던거 다 draw()
a.x--;
a.draw();
})
//dino.x++;
dino.draw()
}
프레임마다실행할거(); 해당 코드를 실행하면 다음과 같이 빨간색 장애물이 계속해서 생성되고 왼쪽으로 이동하는 애니메이션을 보여준다.
day2 (2021.11.12)
-> day1에 이어 공룡 게임을 제작했다
-> 공룡에 점프 기능을 추가하였고 충돌을 감지해 충돌이 일어나면 애니메이션을 정지되도록 프로그래밍을 했다.
-> 공룡과 선인장에 이미지를 넣어보았는데 뭔가 부조화스러워서 더 이상해진 것 같다ㅋㅋㅋ 이미지는 수정을 해보아야 할 것 같다.
// 캔버스 태그 이용을 위한 최소한의 코드
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
canvas.width = window.innerWidth - 100;
canvas.height = window.innerHeight - 100;
//
var dino = {
x: 50,
y: 150,
width: 50,
height: 50,
draw() {
ctx.fillStyle = 'green'; //초록색 네모를 그려주세요
//ctx.fillRect(this.x, this.y, this.width, this.height);
ctx.drawImage(img2, this.x, this.y, 70, 70 )
//왼쪽 위로부터 x,y 위치레 width*height크기의 사각형을 그려라.
}
}
var img1 = new Image();
img1.src = 'cactus.png';
var img2 = new Image();
img2.src = 'dino.png';
//1초에 60번 x++해주면 애니메이션 생성 가능
// dino.draw()
class Cactus {
constructor() {
this.x = 500;
this.y = 150;
this.width = 20;
this.height = 20;
}
draw() {
ctx.fillStyle = 'red';
//ctx.fillRect(this.x, this.y, this.width, this.height);
ctx.drawImage(img1, this.x, this.y, 70, 70)
}
}
var timer = 0;
var cactus여러개 = [];
var 점프timer = 0;
var anmation;
//1초에 60번 함수 안에 있는 코드들이 실행 됨 - 애니메이션 제작 (실행횟수는 모니터 FPS에 따라 다름)
function 프레임마다실행할거() {
animation = requestAnimationFrame(프레임마다실행할거);
timer++;
ctx.clearRect(0, 0, canvas.width, canvas.height); // 캔버스를 지워줌
if (timer % 200 === 0) { //60프레임마다 장애물 한 개씩 생성 + attay에 집어 넣음
var cactus = new Cactus();
cactus여러개.push(cactus);
}
cactus여러개.forEach((a, i, o) => { // array에 있던거 다 draw()
//x좌표가 0미만이면 제거
if (a.x < 0) {
o.splice(i, 1)
}
a.x-=2 ;
충돌하나(dino, a);
a.draw();
})
//점프기능
if (점프중 == true) {
dino.y-=2 ; // 점스 속도 조절 가능
점프timer++; //프레임마다 1씩 증가
}
if (점프중 == false) {
if (dino.y < 200) {
dino.y++;
}
}
if (점프timer > 100) {
점프중 = false; //
점프timer = 0;
}
dino.draw()
}
프레임마다실행할거();
//충돌 확인
function 충돌하나(dino, cactus) {
var x축차이 = cactus.x - (dino.x + dino.width);
var y축차이 = cactus.y - (dino.y + dino.height);
if(x축차이<0 && y축차이<0) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
cancelAnimationFrame(animation) // 애니메이션 중단
}
}
//space바를 누르면 안에 있는 코드가 동작
var 점프중 = false;
document.addEventListener('keydown', function (e) {
if (e.code === 'Space') {
점프중 = true;
}
})
day3 ~ day4 (11.13~11.14)
-> html, css 문법 다시 공부하기
-> 처음으로 들어갈 메인 페이지 제작하기
1학기 때 웹페이지를 제작했었지만 몇개월 동안 사용하지 않아 기억나는 문법이 거의 없었다. 다시 유튜브와 책 등을 보며 기본 문법을 익혔다.
이번 웹페이지 제작의 주요 포인트는 웹 페이지를 반응형으로 만드는 것이었다. 모바일과 pc에서 모두 잘 구현이 되도록 만들고 싶어 css의 flex와 media query를 중심으로 공부를 했다. (글 하단에 도움이 되었던 영상의 링크를 걸어두었다.)
제작하는 중간에 모바일과 pc를 번갈아 가면서 확인을 진행했다. f12 개발자 도구에서 Ctrl+shift+M을 눌러 Toqqle Device Toolbar을 키면 편하게 확인을 할 수 있었다.
다양한 모바일 기기들의 화면 사이즈를 적용해 볼 수 있어서 좋았다.
주말 동안 메인 홈페이지에 들어갈 부분들을 설정을 완료했다. 처음에는 실전 연습, 배우기, 도움말 버튼들을 css에서 정사각형으로 설정하고 배경 색을 주고 글씨를 썼다. 너무 투박한 모양이라 모서리를 둥글게 만들고 싶어지만 어떻게 하는지 찾아보아도 잘 모르겠어서 div에 속성으로 사이즈를 정해주고 각 버튼에 해당하는 곳에 버튼 이미지를 첨부해서 해결했다.
포토샵을 잘 다루지 못해서 간단한 작업은 파워포인트에서 진행했다. 도형을 만들고 글씨와 색을 정하고 png로 내보내서 사용했다
main 페이지는 다음과 같다. 이제 다음주에 세부사항들 제작하고 기본 폰트는 너무 투박해서 폰트 적용을 해야할 것 같다.
< html 기본 문법 복기 강의>
<CSS flexbox, Media Queries>
📌완성도 20%