크롬을 사용중 인터넷이 연결되지 않았을 때,
이런 공룡 한마리가 튀어나와 공룡 게임을 즐길 수 있습니다 :)
오늘은 크롬 공룡게임을 가지고 재밌게 놀아볼게요!! 👾😆
공룡 게임 실행하기
보통은 공룡 게임을 플레이하기 위해 와이파이를 끄거나 데이터를 끄는 등 기기를 오프라인 상태로 만들지만,
오프라인 상태가 아니어도 이 공룡게임을 플레이할 수 있는 방법이 있습니다!
크롬 주소창에
chrome://dino
라고 쳐보세요!
그럼 공룡이 우릴 반갑게 맞이해줍니다 :)
이제 실행도 했겠다, 이제 공룡 게임을 커스텀해봅시다
공룡의 스피드 설정하기
우선 개발자 도구를 열어줍니다
맥: option-command-I
윈도우: F12
위의 단축키로 개발자 도구를 열어주시면,
이렇게, 무슨 소린지 모르겠는 외계어가 여러분을 반겨주실겁니다. (html 공부하신 분들은 예외 😉)
이 외계어들은 제쳐두고, 상단의 Console 탭을 눌러줍니다.
Console 탭으로 들어가서,
Runner.instance_.setSpeed(원하는 속도);
위와 같이 입력해줍니다. 이 코드는 공룡의 속도를 조절하는 코드입니다.
속도 부분에는 99.9, 0.01과 같이 정수뿐만 아니라 소수까지도 입력이 가능합니다.
위 영상에서도 보시다시피 명령어를 완전히 외울 필요는 없고 구글에 관련해서 쳐보거나, 아니면 저처럼 runner.instance.setspeed와 같이 간단히 외워놓으면 개발자 도구에서 알아서 추천을 해줍니다. 그 때, 엔터를 눌러주시면 자동완성이 됩니다 :)
공룡세계 중력 설정하기
자, 이제 속도를 바꾸는 법을 알았으니 공룡 세계의 중력을 바꿔봅시다! 😊
중력은 다음과 같은 코드로 바꿀 수 있습니다.
Runner.instance_.tRex.config.GRAVITY = 원하는 값;
영상에서 보시는 바와 같이 중력값을 조절함에 따라
공룡이 뛴! 뛴!
거리다가
슈우우우우우웅
하고 날아갑니다 👍
그럼, 이제 비슷하지만 또 다른, 공룡의 점프 능력을 향상시켜볼게요!
공룡이의 점프 능력을 멋지게 만들거나 안 좋게 만들기
자, 이제 글을 쓰다 보니 내적 친밀감이 생긴 우리 공룡이의 점프 능력을 멋지게 해봅시다!
점프는 다음과 같이 조절할 수 있습니다.
Runner.instance_.tRex.setJumpVelocity(원하는 값);
처음엔 공룡이의 점프 실력을 0으로 만들었는데
이상하게.. 약간씩 뛰는거 같습니다... 왜 그런진 잘 모르겠습니다 ㅋㅋ
그리고 점점 실력을 높여줬습니다.
이게 처음엔 비슷할 줄 알았는데 그게 아니였어요 ㅋㅋㅋ
약간 느낌이
중력을 조절했을 때는 우주에 있는 느낌이고
점프는 히어로가 착지하는 느낌입니다 ㅋㅋ
죽지않는 공룡이 🦖 🔥🔥
이제, 공룡이를 슈퍼공룡으로 만들어보겠습니다 😲
공룡게임에서 gameOver 함수는 공룡이가 죽게 되는 원인입니다 🥺
그래서 이 gameOver 함수를 빈 함수로 바꿔준다면 공룡이가 죽지 않는것입니다!
이 코드를 쓰면 gameOver 함수가 빈 함수로 대체되어 공룡이가 슈퍼공룡으로 변합니다 :)
게임오버 함수를 되돌리려면 새로고침을 하시면 되지만
새로고침이 싫으시다면 처음에 변수에 gameOver 함수를 저장해두고, 되돌릴때
Runner.prototype.gameOver = 변수이름
위처럼 작성해주시면 됩니다!!
점수를 조작해봅시다 😎
아니, 이게 어떻게 가능하냐구요? 🧐
가능합니다 😎
Runner.instance_.distanceRan = 원하는 점수 / Runner.instance_.distanceMeter.config.COEFFICIENT
이렇게 쳐주시면
점수가 바뀌는 것을 볼 수가 있습니다 :D
참고로 공룡게임은 점수가 999999가 최대이므로, 원하는 점수로 999999를 하시면 시작하자마자 0에서부터 시작하는것처럼 보이실 겁니다 😱 (이 점 참고해주세요! 😬)
자, 이렇게 점수를 바꿔보는 것까지 했습니다!
생각보다 다양한 방법들로 공룡게임을 커스텀할 수 있었습니다 :)
아직 두 가지의 재밌는 방법들이 남았지만 추후 추가 글로 남기겠습니다 😋
다음에 봐요 👋
'배운 것들 > html,css,js' 카테고리의 다른 글
[JS] tilt.js 사용하기 (0) | 2021.02.22 |
---|---|
[CSS] -prefix-free 사용하기 (0) | 2021.02.14 |
[CSS] Vendor Prefix란? (0) | 2021.02.14 |
[html] link의 종류 (0) | 2021.02.07 |
h 태그란? (<h1>, <h2>, <h3>.....) (0) | 2021.02.01 |