[시보쥬 데이즈 2021] 킨톤 게임 라보의 뒷면~ 다튼 편~

개시하다
kintone Advent Calendar 2021 25일째 보도다.
올해 킨톤 advent 달력에도 기사가 많이 나왔어요!감사합니다!
그리고 저는 여느 때와 마찬가지로 방금 w를 공개했습니다.
그리고 올해는 같은 날 두 편의 기사를 쓴 폭거!나는 완전히 내가 머리를 쥐어짜서 실패했다고 생각한다.
올해 사이보주데이즈 2021 게임 부스와 관련해서는 노트 측이 기술 부분을 Qita에 써야 한다고 설명한 만큼 기술 부분 위주로 잘 쓰려고 한다.
한 분은 이쪽.
안녕: 킨톤 GAME Labo가 뭐예요?
올해 2021년 11월 1일, 2일 막장전시관에서 열린 CYBOZU 행사Cybozu Days 2021의 부스다.킨톤을 이용한 게임을 체험할 수 있는 부스로 많이 만들었다.

이른바 DARTONE
킨톤 GAME Labo에 공개되었습니다kintoneでダーツ（の演出と得点管理）ができるゲーム!

왜 킨톤으로 다트 하고 싶으세요?
나는 BB를 좋아해서 학생들이 다트에 빠졌고, 심지어는 자신의 다트까지 준비했다.
다트는 기본적으로 4명인데 친구들과 갈 때'내 다트는 교활하다'는 말을 듣지 않기 위해 4명의 개인 다트를 준비하는 것을 좋아한다.
다트를 좋아해서 그랬을 뿐인데 왜 킨톤과 연결시키고 싶었을까, 개인적으로 DARTS 라이브(다트 디스크)를 사고 싶다고 투덜거리다가 이 블로그를 만났기 때문이다.
이 블로그에 이런 기록이 있어요!!
· PC와 짝을 지어 200s에 던진 데이터를 잘 분석하면 스스로 게임 앱을 만들 수 있겠지?
결론부터 말하자면.다 됐습니다.200s가 약간 높은 블루투스 키보드라니!
조사 결과 외투, 이너웨어, 더블 단추, 삼합일, 이너웨어, 이너웨어에 각각 열쇠 코드가 배분된 것으로 나타났다.
이 블로그를 만났을 때 큰 충격을 받았어요!!
BB) 이거, 이거... 컴퓨터랑 연결해서 다트도 할 수 있고 킨톤과도 연결할 수 있어요!!
모든 것이 여기서부터 시작되었다.
이유를 명확히 설명하다.
물론 하고 싶은 이유는 위에서 말한 바와 같이 갑자기 씨보주(일본 브리지 사무실 27층 회의실, 휴게실, 주방?, 이른바 멋쟁이 공간)에서 뭘 할 때
BAR이면 다트 같은 것도 있을 수 있죠.kintoone으로 득점을 관리하면 손님이 방문할 때의 화제가 될 수도 있고, 망년회에서 실력을 발휘할 수도 있다
나도 이런 이유가 생각났어 (뭐, 아직 가져오지는 않았지만w)
그래서 회사 경비로 조금씩.
구조
블로그에 적힌 것처럼 PC와 연결한 뒤 블루투스 키보드로 인식돼 ダーツを投げる→対応するキーが入力される 동작으로 바뀌었다.그래서 다음에 자바스크립트keydown로 활동하면 어떤 키를 누르면 몇 점을 비추면 돼요!

주안점
이번 DARTONE의 특색은 한마디로 파헤칠 수 있는 목소리!
GIF가 소리를 전달하지 못하는 것은 아쉽지만 첫 페이지에서 BGM은'봄(모노크)','짹짹(더블음)','던(BULL음)'등의 효과음을 낸다.
그래서 유튜브에서 소리가 났는데 궁금하신 분들은 한번 봐주세요.
절차.
이번에는 데이즈로 가산점 2회제로 해봤어요.앱을 분리하거나 일람으로 나누고 싶다면 가산점 외에 01등 게임도 만들 수 있다.kintoone의 화면 맞춤 제작은 매번 익숙한 Vue입니다.js로 했어!
소리를 내는 장치
보통 오디오 대상으로 재생됩니다.음악 파일 자체가 킨톤의 라인에 첨부되어 있으며 비법의 직접 링크 URL을 통해 데이터를 읽습니다.

const bgmUrl = 'https://sample.cybozu.com/k/api/space/blob/download.do/-/MusMus-BGM-016.mp3?hash=6F541&id=5975&.mp3';

const audio = document.createElement("audio");
audio.src = bgmUrl;
audio.play();

멈추고 싶을 때audio.pause() 멈춰라.
첫 페이지의 소리에 맞추어 색깔의 구조를 바꾸다
이것은 도서관의 Rythm입니다.js를 사용하고 있습니다.

const rythm = new Rythm();

rythm.setMusic(bgmUrl);
rythm.start();

// この処理で色の幅を指定しています。あとはライブラリが勝手に音に合わせて色を変更してくれます。
rythm.addRythm("gaia-header-header", "color", 0, 10, {
  from: [0, 255, 255],
  to: [255, 0, 255],
});

패리티를 표현하고 싶을 때는 Rythm.추천
다트 디스크 영역과 버튼의 매핑 메커니즘
여기는 다른 앱이에요.

영역 이름

single-1 또는 더블-15 또는

득점

1, 30 또는

키

a라k라

감각 관리를 하면서 비추고 있습니다.

그래서 이 데이터를 모두 얻은 다음에 키다운 이벤트에 이런 느낌의 처리를 쓰면 OK!

const thisPoint = 0;

// あらかじめマッピングアプリのレコード情報を取得しておく
const keyMapping = [
  {
    key: { value: 'p' },
    point: { value: 1 },
    area: { value: 'inner-single-1' }
  },
  {
    key: { value: '6' },
    point: { value: 1 },
    area: { value: 'outer-single-1' }
  },
  ...
];

document.addEventListener("keydown", async function (e) {
  // キーの値からダーツボードのエリア情報を抽出
  const thisKey = keyMapping.find((v) => v.key.value === e.key);

  // 特定できたオブジェクトのpointを計算に利用する
  thisPoint += Number(thisKey.point.value);

});

기타 코드
어떻게든 다양한 기업이 DARTONE에 도입하고 싶어 포장화하고 싶었다.이번에는 AWS를 사용하지 않고 킨톤과 DARTS LIVE 200S만 있으면 OK.

응용 템플릿 넣기

키 매핑

링크 응용

나는 차이가 많지 않으면 된다고 생각하기 때문에 적극적으로 연구할 것이다.
향후의 전망
네 명이 다트를 하면 크리켓이 제일 즐겁다.
특히 내가 좋아하는 건 기준이 아니라 컷 슬로우볼(표기하면 득점을 주고 마지막에 가장 적게 득점한 사람이 이기는 것)으로 뒤에서 팀전도 할 수 있다.
스탄다는 개인이 싸우는 느낌을 준다. 그는 절격을 잘하는 한 사람을 다른 세 사람과 함께 차서 떨어뜨릴 수 있기 때문에 더욱 뜨거워질 것 같다.
(언젠가) 킨톤에cut-tosrot 크리켓을 설치해 보세요!!
끝말
그래서 올해 데이즈의 게임인 DARTONE은 이렇게 만들어졌다.
아직 킨톤을 맞춤형으로 제작한 적이 없는 사람에게는 이번처럼'취미 내용에 따라 킨톤 맞춤형을 배우는 것'을 추천한다.
왜냐면... 시간을 의식하지 않고 즐겁게 할 수 있으니까!할 수 있는 대로 해라!
한 권 더 봐주세요.
그리고 새해 복 많이 받으세요!≥(+・`∀3900;・´)≤