유튜브 알고리즘이 새벽 2시에 날 여기로 이끌었다.
https://www.youtube.com/watch?v=qkTtmgCjHhM
재미있을 것 같아서 1편 2편 따라해보았다.
덕분에 쉽고 재미있게 JavaScript를 맛볼 수 있었던 기회였다.
기존 게임
https://fivesjs.skipser.com/trex-game/
Chrome's hidden T-Rex dinosaur game HACKED.
Chrome has a hidden T-Rex dinosaur game only in offline mode. But now, you can enjoy it any time in any browser even when you are online!
www.trex-game.skipser.com
최종 결과물
이를 바탕으로 선인장을 랜덤하게 받아오거나
공룡의 2단 점프 제한하기 등
여러가지 옵션을 주면 될 것 같다.
혹시나 코드가 궁금하다면 위 유튜브 링크에 들어가서 천천히 따라해보거나 아래 코드를 참고하면 될 것 같다.
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Document</title>
</head>
<body>
<canvas id = "canvas">
<script src = "main.js"></script>
</canvas>
</body>
</html>var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
canvas.width = window.innerWidth - 100;
canvas.height = window.innerHeight - 100;
var img2 = new Image();
img2.src = 'dino.png';
var dino = {
x : 10,
y : 200,
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);
}
}
var img1 = new Image();
img1.src = 'cactus.png';
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);
ctx.drawImage(img1, this.x, this.y);
}
}
//var cactus = new Cactus();
//cactus.draw();
var timer = 0;
var cactus여러개 = [];
var 점프timer = 0;
var animation;
function 프레임마다실행할거(){
animation = requestAnimationFrame(프레임마다실행할거)
timer++;
ctx.clearRect(0,0, canvas.width, canvas.height);
if(timer % 200 === 0)
{
var cactus = new Cactus();
cactus여러개.push(cactus);
}
cactus여러개.forEach((a, i, o)=>{
//x좌표가 0미만이면 제거
if(a.x < 0) {
o.splice(i,1)
}
a.x--;
충돌하냐(dino, a);
a.draw();
})
if(점프중 == true) {
dino.y -= 1.5;
점프timer++;
}
if(점프중 == false) {
if(dino.y < 200) {
dino.y += 1.5;
}
}
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);
}
}
var 점프중 = false;
document.addEventListener('keydown', function(e){
if(e.code === 'Space')
{
점프중 = true;
}
})'HTML' 카테고리의 다른 글
| [HTML] 텍스트 관련 태그 (0) | 2021.11.02 |
|---|---|
| [HTML] 기본 문법 (0) | 2021.10.28 |
| [HTML] HTML의 기초 (0) | 2021.10.28 |