gunmachan-land v1.1.1

ぐんまちゃんランド

ぐんまちゃんの遊園地を創造できます。

Get start

npm install gunmachan-land

Attractions

• ferrisWheel : 観覧車
• merryGoRound : メリーゴーランド
• coffeeCup : コーヒーカップ
• skyDiving : スカイダイビング
• Accompany : おともぐんまちゃん

DEMO

ferrisWheel : 観覧車

Description

画面の際をひたすらぐるぐる回ります。

Settings

Methods

Example

import { ferrisWheel } from 'gunmachan-land';

const ferrisWheelObj = ferrisWheel({
  duration: 10,
  displaySize: '10%',
  marginRatio: 0.5,
});

// 一時停止
ferrisWheelObj.pause();

// 再生
ferrisWheelObj.restart();

// 破棄
ferrisWheelObj.destroy();

// リサイズ
ferrisWheelObj.resize();

Others

Example

import { ferrisWheel } from 'gunmachan-land';

const ferrisWheelObj = ferrisWheel({
  duration: 10,
  displaySize: '10%',
  marginRatio: 0.5,
});
const { imagesClassName, animationDelay } = ferrisWheelObj;

// ゴンドラの形を変更する
const images = Array.from(document.querySelectorAll(`.${imagesClassName}`)
images.forEach((img) => {
  img.style.borderRadius = 'none';
})

// 10秒後に先頭から順番にゴンドラを破棄
setTimeout(() => {
  ferrisWheelObj.destroy(animationDelay);
}, 10)

merryGoRound : メリーゴーランド

Description

画面下部をずーっと行ったり来たりします。

Settings

Methods

Example

import { merryGoRound } from 'gunmachan-land';

const merryGoRoundObj = merryGoRound({
  duration: 10,
  displaySize: '5%',
  marginRatio: 0.5,
});

// 一時停止
merryGoRoundObj.pause();

// 再生
merryGoRoundObj.restart();

// 破棄
merryGoRoundObj.destroy();

// リサイズ
merryGoRoundObj.resize();

Others

Example

import { merryGoRound } from 'gunmachan-land';

const merryGoRoundObj = merryGoRound({
  duration: 10,
  displaySize: '5%',
  marginRatio: 0.5,
});
const { imagesClassName, animationDelay } = merryGoRoundObj;

// ゴンドラの形を変更する
const images = Array.from(document.querySelectorAll(`.${imagesClassName}`)
images.forEach((img) => {
  img.style.borderRadius = 'none';
})

// 10秒後に先頭から順番にゴンドラを破棄
setTimeout(() => {
  merryGoRoundObj.destroy(animationDelay);
}, 10)

coffeeCup : コーヒーカップ

Description

画面内にいるぐんまちゃんをボバーすると回転が速くなる

Settings

Methods

Example

import { coffeeCup } from 'gunmachan-land';

const coffeeCupObj = coffeeCup({
  displayCount: 5,
  displaySize: '50px',
  defaultSpeed: 1,
  fastRatio: 2,
});

// 追加
coffeeCupObj.add();

// 破棄
coffeeCupObj.destroy();

Others

Example

import { coffeeCup } from 'gunmachan-land';

const coffeeCupObj = coffeeCup({
  displayCount: 5,
  displaySize: '50px',
  defaultSpeed: 1,
  fastRatio: 2,
});
const { imagesClassName, animationDelay } = coffeeCupObj;

// コーヒーカップの形を変更する
const images = Array.from(document.querySelectorAll(`.${imagesClassName}`)
images.forEach((img) => {
  img.style.borderRadius = 'none';
})

skyDiving : スカイダイビング

Description

上からぐんまちゃんが降ってきます

Settings

Methods

Example

import { skyDiving } from 'gunmachan-land';

const skyDivingObj = skyDiving({
  displaySize: '5%',
  speed: 0.5,
});

// ぐんまちゃんを降らす
skyDivingObj.add();

Others

Example

import { skyDiving } from 'gunmachan-land';

const skyDivingObj = skyDiving(10, '10%', 0.5);
const { imagesClassName } = skyDivingObj;

// ぐんまちゃんの形を変更する
const images = Array.from(document.querySelectorAll(`.${imagesClassName}`)
images.forEach((img) => {
  img.style.clipPath = 'xxx';
})

Accompany : おともぐんまちゃん

Description

ぐんまちゃんがマウスに追従します。

Settings

const gchan = new GchanLand(root);
gchan.accompany(duration, displaySize, marginRatio);

Methods

Example

const accompanyObj = gchan.accompany(10, '10%', 0.5);

// リサイズ
accompanyObj.resize();

// お連れ様解散
accompanyObj.destroy();

Others

Example

const accompanyObj = gchan.accompany(10, '10%', 0.5);
const { imagesClassName, animationDelay } = accompanyObj;

// ぐんまちゃんの形を変更する
const images = Array.from(document.querySelectorAll(`.${imagesClassName}`)
images.forEach((img) => {
  img.style.borderRadius = 'none';
})

工事中

• ジェットコースター
  • ぐんまちゃんが縦横無尽に画面内をうろうろする
• お化け屋敷
  • 突然画面内にぐんまちゃんが現れる。そのうち消える