트위터 타임 라인에서 움직이는 브라우저 게임을 JS에서 만들었습니다.

TL; DR


  • JavaScript로 브라우저 게임을 만들었습니다.
  • UFO를 조작하여 동물을 납치하는 게임입니다.
  • 트위터 OGP를 설정하면 트윗에 퍼갈 수 있습니다.



  • 『Alien Abduction』



    여기에서 재생할 수 있습니다.
    htps : // 아엔.ぁ 이네 s. 코m/

    화면을 탭하면 미니 게임 녀석입니다.



    트윗에 포함



    무려 트윗에 묻을 수 있었습니다!

    UFO를 조작하여 동물을 납치하는 게임을 만들었습니다! PC라면 타임라인에서 직접 플레이할 수 있습니다. ↓ Alien Abduction htps // t. 코 / 7 쿠 tPXT · Gj #phina_js


    (↑꼭 리트윗해주세요!)



    Twitter의 OGP의 카드 타입에, player라고 하는 것이 있어, 오리지날의 음성·동영상 플레이어를 임베드할 수 있습니다.

    이것을 사용하여 트윗하면 트윗에 iframe으로 마운트되기 때문에 캔버스의 콘텐츠도 그대로 움직이는 것 같습니다.



    플레이어 카드는 다른 카드 유형과 약간 다른 절차를 갖습니다.



    • OGP 설정
    • HTTPS 대응
    • 트위터에 심사를 내고 승인을 받는다


    신청이나 표시 확인은 2018년 4월 25일 으로부터 실시합니다.



    심사는 도메인별로 이루어졌으며, 자신의 경우 3일 만에 승인되었습니다.



    <meta name="twitter:card" content="player">
    <meta name="twitter:player" content="https://alien.laineus.com/fullscreen/">
    〜略〜
    


    공유 원본 페이지는 무엇이든 될 수 있으며 twitter:player에 지정된 페이지는 트윗에 포함됩니다.

    심사 대상의 도메인도 twitter:player 로 지정하는 편입니다.



    콘텐츠 자체에 대해서도 크기가 창에 맞아야 하는 등 몇 가지 규칙이 있는 것 같습니다.



    자세한 것은 아래의 기사를 참고로.




    Twitter가 말한다! ? 플레이어 카드를 만드는 방법 - Voicy Tech Blog

    CardValidator




    심사 자체는 감각적으로 상당히 느슨하게 느껴졌다.



    그러나 트위터 카드의 정책적으로 괜찮은지 의심스럽기 때문에 삭제될 수도 있습니다.

    시도 할 때는 자기 책임으로 부탁드립니다.






    2020/07/10 덧붙여: 아마 현재는 심사가 필요하지 않은 것 같습니다. → 『ㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜ 하테나 bぉg. 코m/엔트리/2017/05/14/133539



    게임 개발용 JS 라이브러리 「Phina.js」



    게임 개발에 사용한 라이브러리를 소개합니다.




    공식 사이트

    비밀로 유지하고 싶었지만 사실 Twitter에 웹 페이지를 삽입 할 수 있습니다.




    JavaScript로 Canvas 게임을 만들기 위한 일본 라이브러리입니다.



    게임 진행이나 묘화 주위의 관리와 같은 기반이 되는 부분이나, 당 판정 등 다양한 게임에 범용적으로 사용할 수 있는 기능 등이 제공됩니다.



    소스 코드



    GitHub

    ht tp // p 병아리 js. 코m/



    BGM



    BGM은, 이쪽의 브라우저로 동작하는 작곡 소프트로 빨리 만들었습니다.





    정말은 Cubase라고 하는 Windows용의 제대로 된 작곡 소프트를 가지고 있습니다만, 최근 리눅스 이외의 OS를 사용하고 싶지 않아서 ↑를 사용했습니다.


    좋은 웹페이지 즐겨찾기