우선 canvas를 이용하자.
<body>
<canvas id="canvas"></canvas>
<script src="main.js"></script>
</body>let canvas = document.getElementById('canvas')
let ctx = canvas.getContext('2d')
canvas.width = window.innerWidth - 100
canvas.height = window.innerHeight - 100
ctx.fillStyle = 'green'
ctx.fillRect(10,10, 100,100)이렇게 하면 이런 green의 박스가 생성된다.
이것을 게임에서 이용할 수 있도록 수정해주자.
등장 캐릭터의 속성부터 object 자료에 정리해두면 편리
let canvas = document.getElementById('canvas')
let ctx = canvas.getContext('2d')
canvas.width = window.innerWidth - 100
canvas.height = window.innerHeight - 100
let dino = {
x : 10,
y : 200,
width : 50,
height : 50,
draw(){
ctx.fillStyle = 'green'
ctx.fillRect(10,10, 100, 100)
}
}
dino.draw()여기서 dino를 더 수정하자.
let canvas = document.getElementById('canvas')
let ctx = canvas.getContext('2d')
canvas.width = window.innerWidth - 100
canvas.height = window.innerHeight - 100
let dino = {
x : 10,
y : 200,
width : 50,
height : 50,
draw(){
ctx.fillStyle = 'green'
ctx.fillRect(this.x, this.y, this.width, this.height)
}
}
dino.draw()장애물도 그려보자.
class를 이용하자.
class Cactus {
constructor(){
this.x = 500
this.y = 200
this.width = 50
this.height = 50
}
draw(){
ctx.fillStyle = 'red'
ctx.fillRect(this.x, this.y, this.width, this.height)
}
}
let cactus = new Cactus()
cactus.draw()
오 그려졌다.
근데 애니메이션을 만들어야지...
애니메이션을 만드려면 1초에 60번 정도 x++해줘야지.
아래에 이것을 추가해보자.
function 프레임마다실행할거(){
requestAnimationFrame(프레임마다실행할거)
ctx.clearRect(0,0, canvas.width, canvas.height)
dino.x++
dino.draw()
}
프레임마다실행할거()오 잘 이동한다.
굳
그런데 내가 움직이는게 아니라 장애물이 오면 됨.
(참고) 실행횟수는 모니터 FPS에 따라 다름
장애물 여러개 관리하고 싶으면 장애물 만들 때마다 array에 담아서 보관.
요로코롬 하면 120프레임마다 {장애물}을 생성하고 array에 집어넣음.
그리고 array에 있던 거 for문으로 다 draw()함.
let timer = 0
let cactus여러개 = []
function 프레임마다실행할거(){
requestAnimationFrame(프레임마다실행할거)
timer++
ctx.clearRect(0,0, canvas.width, canvas.height)
// 2~ 3초에 한 번 이거 실행하며 됨. XX프레임 마다 실행시키면 됨
if(timer % 120 == 0){
let cactus = new Cactus()
cactus여러개.push(cactus)
cactus.draw()
}
cactus여러개.forEach((a) => {
a.draw()
})
dino.draw()
}
프레임마다실행할거()일단 여기까지 js전체코드는 아래와 같다.
let canvas = document.getElementById('canvas')
let ctx = canvas.getContext('2d')
canvas.width = window.innerWidth - 100
canvas.height = window.innerHeight - 100
let dino = {
x : 10,
y : 200,
width : 50,
height : 50,
draw(){
ctx.fillStyle = 'green'
ctx.fillRect(this.x, this.y, this.width, this.height)
}
}
dino.draw()
class Cactus {
constructor(){
this.x = 500
this.y = 200
this.width = 50
this.height = 50
}
draw(){
ctx.fillStyle = 'red'
ctx.fillRect(this.x, this.y, this.width, this.height)
}
}
let timer = 0
let cactus여러개 = []
function 프레임마다실행할거(){
requestAnimationFrame(프레임마다실행할거)
timer++
ctx.clearRect(0,0, canvas.width, canvas.height)
// 2~ 3초에 한 번 이거 실행하며 됨. XX프레임 마다 실행시키면 됨
if(timer % 120 == 0){
let cactus = new Cactus()
cactus여러개.push(cactus)
cactus.draw()
}
cactus여러개.forEach((a) => {
a.x--
a.draw()
})
dino.draw()
}
프레임마다실행할거()
반드시 결승점을 통과하는 개발자