Forked from: comtec's pigg diff(1565)

kisekae / forked from: pigg

gct256

2011-05-11 20:47:26

License: MIT License

Fork: 0

Fav: 22

View: 3295

Play
Stop
Reload

Fullscreen

Smart Phone

Readme
JavaScript 785 lines
HTML 48 lines
CSS 762 lines

kisekae / forked from: pigg
SPEC vol.2用の画像

(function() {

/* ======================================================================== */
  /* 変数
     初期化はwindow.loadあたりで */
  var WIN = window;
  var DOC = document;
  var DOLL1, CV1, CX1; // #current用
  var DOLL2, CV2, CX2; // #preview用
  var DOLL3, CV3, CX3; // #silhouette用
  var DOLL4; // #current保存用
  var DW, PH; // プレビューの幅
  var FLOOR, ITEMS, ITEMS_MENU; // #floor / #itesm / #items-menu 用

/* ======================================================================== */
  /* 定数として使うもの */
  var TO_RADIAN = Math.PI / 180; // 角度からラジアンを得る用
  var MARGIN = 5; // スケッチエフェクトの余白
  var LS_DATA = 'gct256-pigg-data'; // localStorage用のキー
  var LS_SEX = 'gct256-pigg-sex'; // localStorage用のキー

/* ======================================================================== */
  /* Sexes / 性別 */
  var Sexes = {
    /* 性別の正規化＋取得 */
    get: function(sex) {
      for (var x in Sexes) if (Sexes[x] === sex) return sex;
      return Sexes.Male;
    },

Male: 'M', // 男
    Female: 'F', // 女
    Both: 'B' // 共通
  };

/* ======================================================================== */
  /* Parts / 部位 */
  var Parts = {
    /* 部位の正規化＋取得 */
    get: function(part) {
      for (var x in Parts) if (Parts[x] === part) return part;
      return Parts.Gadget;
    },

/* 部位についてhandlerを実行
       順番は適当だけどforDressがtrueなら着る順 */
    each: function(handler, forDress) {
      if (handler instanceof Function) {
        if (forDress) {
          handler(Parts.Foot);
          handler(Parts.Bottom);
          handler(Parts.Top);
          handler(Parts.Total);
          handler(Parts.Accessory);
          handler(Parts.Gadget);
        } else {
          handler(Parts.Total);
          handler(Parts.Top);
          handler(Parts.Bottom);
          handler(Parts.Foot);
          handler(Parts.Accessory);
          handler(Parts.Gadget);
        }
      }
    },

/* 部位の名前 */
    getName: function(part) {
      switch (part) {
      case Parts.Total: return 'トータル';
      case Parts.Top: return 'トップス';
      case Parts.Bottom: return 'ボトムス';
      case Parts.Foot: return 'くつ';
      case Parts.Accessory: return 'アクセサリー';
      case Parts.Gadget: return '小物';
      }
      return 'その他';
    },

Total: 'total', // トップス＆ボトムス
    Top: 'top', // トップス
    Bottom: 'bottom', // ボトムス
    Foot: 'foot', // くつ
    Accessory: 'accessory', // アクセサリー
    Gadget: 'gadget' // 小物
  };

/* ======================================================================== */
  /* シーン管理
     body要素のクラスを使って管理する */
  var Scenes = {
    /* シーン切り替え */
    change: function(scene) {
      var x, b, c;
      for (x in Scenes)
        if (Scenes[x] === scene) {
          b = DOC.body.className;
          DOC.body.className = scene;
          if ((c = Scenes.callbacks[x]) instanceof Function)
            c(b);
        }
    },

/* コールバック設定 */
    setCallback: function(scene, callback) {
      if (callback instanceof Function)
        for (var x in Scenes)
          if (Scenes[x] === scene)
            Scenes.callbacks[x] = callback;
    },
    callbacks: {},

Default: 'default', // 通常時
    Preview: 'preview', // プレビュー中
    Waiting: 'waiting', // 試着完了待ち
    Standby: 'standby', // 披露待ち
    Changed: 'changed' // 着替え完了
  };

/* ======================================================================== */
  /* Cell / 画像とオフセット値を持つオブジェクト */

/* ------------------------------------------------------------------------ */
  /* 生成
     img: 画像またはcanvas
     ox, oy: オフセット値 */
  function Cell(img, ox, oy) {
    this.img = img;
    this.ox = ox;
    this.oy = oy;
  }

/* ------------------------------------------------------------------------ */
  /* 描画
     cx: CanvasRenderingContext2D
     x, y: 描画位置 */
  Cell.prototype.draw = function(cx, x, y) {
    cx.drawImage(this.img, this.ox + x, this.oy + y);
  };

/* ======================================================================== */
  /* Item / 着用アイテムオブジェクト */

/* ------------------------------------------------------------------------ */
  /* 生成
     id: 識別ID
     name: 名前
     sex: 性別 (Sexes.*)
     part: 部位 (Parts.*)
     baseImage: マスクなしイメージ
     bx, by: マスクなしイメージの表示位置
     maskImage: マスクありイメージ
     mx, my: マスクありイメージの表示位置
     buttonImage: ボタンイメージ */
  function Item(id, name, sex, part,
                baseImage, bx, by,
                maskImage, mx, my,
                buttonImage) {
    if (!baseImage || !maskImage || !buttonImage) throw 'image not found.';
    if (Item.find(id)) throw 'duplicate id';
    if (!/^[A-Z0-9_-]+$/i.test(id)) throw 'illegal id';
    this.id = id;
    this.name = name;
    this.sex = Sexes.get(sex);
    this.part = Parts.get(part);
    this.base = new Cell(baseImage, bx, by);
    this.mask = new Cell(maskImage, mx, my);
    this.preview = new Cell(sketch(maskImage, MARGIN),
                            mx - MARGIN, my - MARGIN);
    this.button = buttonImage;
    Item.items.push(this);
  }

/* ------------------------------------------------------------------------ */
  /* 全アイテムを格納する */
  Item.items = [];

/* ------------------------------------------------------------------------ */
  /* idからアイテムを取得する
     id: 対象id */
  Item.find = function(id) {
    for (var v = Item.items, l = v.length, i = 0; i < l; ++i)
      if (v[i].id === id) return v[i];
    return null;
  };

/* ------------------------------------------------------------------------ */
  /* 性別と部位から複数のアイテムを得る
     sex: 性別
     part: 部位 */
  Item.findBySexAndPart = function(sex, part) {
    for (var r = [], v = Item.items, l = v.length, i = 0; i < l; ++i)
      if (v[i].sex === sex && v[i].part === part) r.push(v[i]);
    return r;
  }

/* ------------------------------------------------------------------------ */
  /* マスクなしイメージの描画
     cx: CanvasRenderingContext2D
     x, y: 描画位置 */
  Item.prototype.draw = function(cx, x, y) {
    this.base.draw(cx, x, y);
  };

/* ------------------------------------------------------------------------ */
  /* マスクありイメージの描画
     cx: CanvasRenderingContext2D
     x, y: 描画位置 */
  Item.prototype.drawMask = function(cx, x, y) {
    this.mask.draw(cx, x, y);
  };

/* ------------------------------------------------------------------------ */
  /* プレビューイメージの描画
     cx: CanvasRenderingContext2D
     x, y: 描画位置 */
  Item.prototype.drawPreview = function(cx, x, y) {
    this.preview.draw(cx, x, y);
  };

/* ======================================================================== */
  /* Doll / 着用状態オブジェクト */

/* ------------------------------------------------------------------------ */
  /* 生成
     sex: 性別 */
  function Doll(sex) {
    this.sex = Sexes.get(sex);
    this.undressAll();
  }

/* ------------------------------------------------------------------------ */
  /* サイズ（とりあえず固定） */
  Doll.width = 133;
  Doll.height = 192;

/* ------------------------------------------------------------------------ */
  /* ベースとなる画像（初期状態では未設定） */
  Doll.Image = {};

/* ------------------------------------------------------------------------ */
  /* ベースとなる画像の設定
     sex: 性別
     character: キャラクタ画像
     cx, cy: キャラクタ画像の描画位置
     underware: 下着画像
     ux, uy: 下着像画の描画位置 */
  Doll.setImage = function(sex, character, cx, cy, underware, ux, uy) {
    if (character && underware) {
      var preview = createContext2D(Doll.width, Doll.height);
      preview.drawImage(character, cx, cy);
      preview.drawImage(underware, ux, uy);
      Doll.Image[Sexes.get(sex)] = {
        character: new Cell(character, cx, cy),
        underware: new Cell(underware, ux, uy),
        preview: new Cell(sketch(preview.canvas, MARGIN), -MARGIN, -MARGIN)
      };
    }
  };

/* ------------------------------------------------------------------------ */
  /* 文字列化 */
  Doll.prototype.serialize = function() {
    var v = [this.sex], part, eq = this.equipment;
    for (part in eq)
      if (eq[part] !== null) v.push(eq[part].id);
    return v.join(',');
  };

/* ------------------------------------------------------------------------ */
  /* 文字列化からの復元 */
  Doll.prototype.unserialize = function(str) {
    if (typeof str === 'string') {
      this.undressAll();
      for (var v = str.split(/,/), w, l = v.length, i = 1; i < l; ++i)
        this.dress(Item.find(v[i]));
      this.sex = v[0];
    }
  };

/* ------------------------------------------------------------------------ */
  /* serializeとunserializeを使ったコピー */
  Doll.prototype.copy = function(src) {
    if (src instanceof Doll)
      this.unserialize(src.serialize());
  };

/* ------------------------------------------------------------------------ */
  /* 着てるかどうか
     item: 調べるアイテム */
  Doll.prototype.has = function(item) {
    var x, eq = this.equipment;
    for (x in eq)
      if (eq[x] === item) return true;
    return false;
  };

/* ------------------------------------------------------------------------ */
  /* 何も着てないかどうか */
  Doll.prototype.isNaked = function() {
    var x, eq = this.equipment;
    for (x in eq)
      if (eq[x] !== null) return false;
    return true;
  };

/* ------------------------------------------------------------------------ */
  /* 着る（性別は見ない・部位はItemから判別）
     item: 着るアイテム (Item) */
  Doll.prototype.dress = function(item) {
    var eq = this.equipment;
    if (item instanceof Item) {
      eq[item.part] = item;
      switch (item.part) {
      case Parts.Total:
        eq[Parts.Top] = eq[Parts.Bottom] = null;
        break;
      case Parts.Top:
        eq[Parts.Total] = null;
        break;
      case Parts.Bottom:
        eq[Parts.Total] = null;
        break;
      }
    }
  };

/* ------------------------------------------------------------------------ */
  /* 脱ぐ
     part: 脱ぐ部位 */
  Doll.prototype.undress = function(part) {
    var tmp = Parts.get(part);
    if (tmp === part) this.equipment[part] = null;
  };

/* ------------------------------------------------------------------------ */
  /* 全部脱ぐ */
  Doll.prototype.undressAll = function() {
    var eq = this.equipment = {};
    for (var part in Parts) eq[part] = null;
  };

/* ------------------------------------------------------------------------ */
  /* 丸影の描画 */
  Doll.prototype.drawShadow = function(cx, x, y) {
    cx.save();
    cx.translate(Doll.width * 0.5, Doll.height - 6);
    cx.scale(1, 0.25);
    var g = cx.createRadialGradient(0, 0, 0, 0, 0, 60);
    g.addColorStop(0.0, 'rgba(0,0,0,0.5)');
    g.addColorStop(0.9, 'rgba(0,0,0,0.0)');
    cx.fillStyle = g;
    cx.beginPath();
    cx.arc(0, 0, 60, 0, Math.PI * 2, true);
    cx.fill();
    cx.restore();
  };

/* ------------------------------------------------------------------------ */
  /* イメージの描画
     cx: CanvasRenderingContext2D
     x, y: 描画位置 */
  Doll.prototype.draw = function(cx, x, y, withAnimation) {
    var part, eq = this.equipment, top, img = Doll.Image[this.sex];
    cx.clearRect(x, y, PW, PH);
    this.drawShadow(cx, x, y);
    if (img && img.character && img.underware) {
      img.character.draw(cx, x, y);
      img.underware.draw(cx, x, y);
    }
    Parts.each(function(part) {
      if (eq[part] instanceof Item) eq[part].drawMask(cx, x, y);
    }, true);
    cx.canvas.className = 'doll';

if (withAnimation && this.isNaked()) {
      if (this.sex === Sexes.Male) this.pale(cx, x, y);
      else if (this.sex === Sexes.Female) this.blush(cx, x, y);
    }
  };

/* ------------------------------------------------------------------------ */
  /* プレビューイメージの描画
     cx: CanvasRenderingContext2D
     x, y: 描画位置 */
  Doll.prototype.preview = function(cx, x, y, withAnimation) {
    var part, eq = this.equipment, top, img = Doll.Image[this.sex];
    cx.clearRect(x, y, PW, PH);
    this.drawShadow(cx, x, y);
    if (img && img.preview) {
      img.preview.draw(cx, x, y);
    }
    Parts.each(function(part) {
      if (eq[part] instanceof Item)
        eq[part].drawPreview(cx, x, y);
    }, true);
    cx.canvas.className = 'doll';

if (withAnimation && this.isNaked()) {
      if (this.sex === Sexes.Male) this.pale(cx, x, y);
      else if (this.sex === Sexes.Female) this.blush(cx, x, y);
    }
  };

/* ------------------------------------------------------------------------ */
  /* シルエットイメージの描画
     cx: CanvasRenderingContext2D
     x, y: 描画位置 */
  Doll.prototype.silhouette = function(cx, x, y) {
    this.draw(cx, x, y);
    cx.save();
    cx.globalCompositeOperation = 'source-in';
    cx.fillStyle = '#000';
    cx.fillRect(x, y, Doll.width, Doll.height);
    cx.restore();
  };

/* ------------------------------------------------------------------------ */
  /* 感情１ */
  Doll.prototype.pale = function(cx, x, y) {
    cx.save();
    var g = cx.createRadialGradient(0, 0, 0, 0, 0, 40);
    g.addColorStop(0.0, 'rgba(0,128,255,0.2)');
    g.addColorStop(1.0, 'rgba(0,128,255,0.0)');
    cx.fillStyle = g;
    cx.translate(55, 95);
    cx.scale(1, 0.6);
    cx.beginPath();
    cx.arc(0, 0, 40, 0, Math.PI * 2, true);
    cx.fill();
    cx.restore();
    cx.canvas.className = 'doll shiver';
  };

/* ------------------------------------------------------------------------ */
  /* 感情２ */
  Doll.prototype.blush = function(cx, x, y) {
    cx.save();
    var g = cx.createRadialGradient(0, 0, 0, 0, 0, 40);
    g.addColorStop(0.0, 'rgba(255,0,0,0.2)');
    g.addColorStop(1.0, 'rgba(255,0,0,0.0)');
    cx.fillStyle = g;
    cx.translate(55, 95);
    cx.scale(1, 0.6);
    cx.beginPath();
    cx.arc(0, 0, 40, 0, Math.PI * 2, true);
    cx.fill();
    cx.restore();
    cx.canvas.className = 'doll hesitate';
  };

/* ======================================================================== */
  /* ユーティリティ関数 */

/* ------------------------------------------------------------------------ */
  /* localStorageのラッパー */
  function load(key, defaultValue) {
    try {
      if (key in WIN.localStorage)
        return WIN.localStorage[key];
    } catch (er) {
    }
    return defaultValue;
  }

function save(key, value) {
    try {
      WIN.localStorage[key] = value;
    } catch (er) {
    }
  }

/* ------------------------------------------------------------------------ */
  /* idから要素 */
  function element(v) {
    return typeof v === 'string' ? DOC.getElementById(v) : v;
  }

/* ------------------------------------------------------------------------ */
  /* 指定サイズのcanvasを作ってCanvasRenderingContext2Dを返す
     w, h: サイズ */
  function createContext2D(w, h) {
    var cv = DOC.createElement('canvas');
    cv.width = w;
    cv.height = h;
    return cv.getContext('2d');
  }

/* ------------------------------------------------------------------------ */
  /* idからcanvasを探してサイズを設定しCanvasRenderingContext2Dを返す
     w, h: サイズ */
  function getContext2D(id, w, h) {
    var cv = element(id);
    if (cv) {
      cv.width = w;
      cv.height = h;
      return cv.getContext('2d');
    }
    return null;
  }

/* ------------------------------------------------------------------------ */
  /* min以上max以下の乱数（浮動小数）
     min: 下限
     max: 上限 */
  function rndf(min, max) {
    var d = 0xffffffff;
    return min + Math.floor(Math.random() * (max - min) * d + 1) / d;
  }

/* ------------------------------------------------------------------------ */
  /* 画像をスケッチ風にする
     img: 元画像
     margin: 余白 */
  function sketch(img, margin) {
    var w = img.width, w2 = w + margin * 2;
    var h = img.height, h2 = h + margin * 2;

// 画像を余白分ずらす
    var cx0 = createContext2D(w2, h2);
    cx0.drawImage(img, margin, margin);

// ↑をパターンにして筆っぽく描画
    var cx1 = createContext2D(w2, h2), cv1 = cx1.canvas;
    cx1.drawImage(cx0.canvas, 0, 0);
    cx1.globalCompositeOperation = 'source-in';
    cx1.fillStyle = '#fff';
    cx1.fillRect(0, 0, w2, h2);
    cx1.globalCompositeOperation = 'source-over';
    cx1.strokeStyle = cx1.createPattern(cx0.canvas, 'no-repeat');
    cx1.lineWidth = 1.2;
    var dh = h2 / 10, a, ax, ay;
    for (var y = 0; y < h2; y += 3) {
      for (var x = 0; x < w2; x += 3) {
        a = (- y - x) / 2 * TO_RADIAN;
        cx1.translate(ax = rndf(-1, 1), ay = rndf(-1, 1));
        cx1.beginPath();
        cx1.moveTo(x, y);
        cx1.lineTo(x + Math.cos(a) * 10, y + Math.sin(a) * 10);
        cx1.stroke();
        cx1.translate(-ax, -ay);
      }
    }

// ↑に影をつける
    var cx = createContext2D(w2 + 4, h2 + 4);
    cx.save();
    cx.shadowOffsetX = cx.shadowOffsetY = 1;
    cx.shadowBlur = 2;
    cx.shadowColor = 'rgba(0,0,0,0.4)';
    cx.drawImage(cx1.canvas, 0, 0);
    cx.restore();
    return cx.canvas;
  }

/* ------------------------------------------------------------------------ */
  /* Piggitemにある画像を使ってItemを生成するラッパー
     sex: 性別 (Sexes.*) 
     part: 部位 (Parts.*)
     postfix: 画像名の末尾
     name: 名前
     bx, by: マスクなしイメージの表示位置
     mx, my: マスクありイメージの表示位置 */
  function createItem(sex, part, postfix, name, bx, by, mx, my) {
    var id1 = (sex = Sexes.get(sex)) + '_item_' + postfix;
    var id2 = (sex = Sexes.get(sex)) + '_btn_' + postfix;
    var base = Piggitem[id1];
    var mask = Piggitem[id1 + '_mask'] || base;
    var button = Piggitem[id2];
    new Item(id1, name, sex, Parts.get(part),
             base, bx, by,
             mask, mx, my,
             button);
  }

/* ------------------------------------------------------------------------ */
  /* アイテムの陳列sectionを作成する */
  function putItem(sex, part) {
    var ul, li, p;
    var items = Item.findBySexAndPart(sex, part), l = items.length, i;

if (l === 0) {
      p = DOC.createElement('p');
      p.className = Sexes.get(sex) + ' ' + part + ' sold-out';
      return p;
    } else {
      ul = DOC.createElement('ul');
      ul.className = Sexes.get(sex) + ' list ' + part;
      for (i = 0; i < l; ++i) (function(item) {
        li = DOC.createElement('li');
        li.appendChild(item.button);
        p = DOC.createElement('p');
        p.textContent = item.name;
        li.appendChild(p);
        li.addEventListener('click', function() {
          if (DOLL2.has(item)) DOLL2.undress(item.part);
          else DOLL2.dress(item);
          DOLL2.preview(CX2, 0, 0, true);
        }, false);
        ul.appendChild(li);
      })(items[i]);
      return ul;
    }
  }

/* ======================================================================== */
  /* ボタンアクション
     基本的にシーン切り替えのみ
     何かしたければシーンのコールバックを使う */
  function buttonAction(id, scene) {
    var button = element(id);
    if (button)
      button.addEventListener('click', function() {
        Scenes.change(scene);
      }, false);
  }
  buttonAction('default-to-preview', Scenes.Preview);
  buttonAction('preview-to-waiting', Scenes.Waiting);
  buttonAction('preview-to-default', Scenes.Default);
  buttonAction('changed-to-default', Scenes.Default);
  buttonAction('cahnged-to-preview', Scenes.Preview);

/* ======================================================================== */
  /* シーンのコールバック設定 */

Scenes.setCallback(Scenes.Default, function(before) {
    // Changedからの場合はDOLL1の状態を保存
    if (before === Scenes.Changed)
      if (DOLL1) save(LS_DATA, DOLL1.serialize());
    DOLL1.draw(CX1, 0, 0);
  });

Scenes.setCallback(Scenes.Preview, function(before) {
    // Changedからの場合はDOLL1を元に戻す
    if (before === Scenes.Changed) {
      DOLL1.copy(DOLL4);
      DOLL1.draw(CX1, 0, 0);
    } else {
      // それ以外はDOLL1を保存
      DOLL4.copy(DOLL1);
    }

// currentをpreviewにコピーする
    DOLL2.copy(DOLL1);
    // previewを描画
    DOLL2.preview(CX2, 0, 0, true);
  });

Scenes.setCallback(Scenes.Waiting, function() {
    // 2秒後にStandbyに移行する
    setTimeout(function() {
      Scenes.change(Scenes.Standby);
    }, 2000);
  });

Scenes.setCallback(Scenes.Standby, function() {
    // currentとsilhouetteにpreviewをコピー
    DOLL1.copy(DOLL2);
    DOLL3.copy(DOLL2);
    // それぞれ描画
    DOLL1.draw(CX1, 0, 0);
    DOLL3.silhouette(CX3, 0, 0);

// 2秒後にChangedに移行する
    setTimeout(function() {
      Scenes.change(Scenes.Changed);
    }, 2000);
  });

/* ======================================================================== */
  /* 性別の切り替え */
  function changeSex(sex) {
    if (DOLL1.sex === sex) return;
    DOLL1 = new Doll(sex);
    DOLL2 = new Doll(sex);
    DOLL3 = new Doll(sex);
    DOLL4 = new Doll(sex);
    DOLL1.draw(CX1, 0, 0);
    DOLL2.preview(CX2, 0, 0, true);
    DOLL3.silhouette(CX3, 0, 0);
    FLOOR.className = sex;
    save(LS_SEX, sex);
  }

element('as-male').addEventListener('click', function() {
    changeSex(Sexes.Male);
  }, false);
  element('as-female').addEventListener('click', function() {
    changeSex(Sexes.Female);
  }, false);

/* ======================================================================== */
  /* 開始 */

WIN.addEventListener('load', function() {
    // Doll用の画像を設定
    Doll.setImage(Sexes.Male,
                  Piggitem.M_character, 15, 21,
                  Piggitem.M_item_sitagi, 52, 143);
    Doll.setImage(Sexes.Female,
                  Piggitem.character, 13, 26,
                  Piggitem.F_item_sitagi, 51, 116);

// 全アイテムの生成
    var s = Sexes, p = Parts;
    createItem(s.Male, p.Total, 'total_1', 'トータルＢ', 39, 109, 41, 113);
    createItem(s.Male, p.Top, 'top_1', 'トップスＡ', 40, 111, 40, 113);
    createItem(s.Male, p.Top, 'top_2', 'トップスＣ', 51, 112, 51,112);
    createItem(s.Male, p.Bottom, 'bottom_1', 'ボトムスＢ', 51, 133, 51, 137);
    createItem(s.Male, p.Bottom, 'bottom_2', 'ボトムスＤ', 50, 133, 50, 137);
    createItem(s.Male, p.Foot, 'foot_1', 'くつＡ', 42, 167, 42, 167);
    createItem(s.Male, p.Foot, 'foot_2', 'くつＣ', 42, 164, 42, 164);
    createItem(s.Male, p.Accessory, 'cap_1', '帽子Ａ', 1, 9, 0, 10);
    createItem(s.Male, p.Accessory, 'cap_2', '帽子Ｂ', 15, 0, 15, 0);

createItem(s.Female, p.Total, 'total_2', 'トータルＡ', 44, 115, 44, 115);
    createItem(s.Female, p.Top, 'top_1', 'トップスＢ', 36, 114, 36, 115);
    createItem(s.Female, p.Top, 'top_2', 'トップスＤ', 40, 113, 40, 114);
    createItem(s.Female, p.Bottom, 'bottom_1', 'ボトムスＡ', 45, 136, 45, 139);
    createItem(s.Female, p.Bottom, 'bottom_2', 'ボトムスＣ', 46, 140, 47, 142);
    createItem(s.Female, p.Foot, 'foot_1', 'くつＢ', 46, 164, 46, 166);
    createItem(s.Female, p.Foot, 'foot_2', 'くつＤ', 46, 171, 45, 173);
    createItem(s.Female, p.Accessory, 'ect_1', '花Ａ', 92, 38, 92, 38);
    createItem(s.Female, p.Accessory, 'ect_2', 'メガネＡ', 22, 64, 22, 71);

// #floor / #items / #items-menuの内容作成
    // アイテムを#itemsに展開
    FLOOR = element('floor');
    ITEMS = element('items');
    ITEMS_MENU = element('items-menu');
    Parts.each(function(part) {
      var li = DOC.createElement('li');
      li.textContent = Parts.getName(part);
      ITEMS_MENU.appendChild(li);
      li.addEventListener('click', function() {
        ITEMS.className = part;
      }, false);
      ITEMS.appendChild(putItem(Sexes.Male, part));
      ITEMS.appendChild(putItem(Sexes.Female, part));
    });

// 初期性別でdollの準備
    var sex = Sexes.Male;
    try {
      sex = WIN.localStorage[LS_SEX];
      if (sex == null) sex = Sexes.Male;
    } catch (er) {
    }
    DOLL1 = new Doll(sex);
    DOLL2 = new Doll(sex);
    DOLL3 = new Doll(sex);
    DOLL4 = new Doll(sex);
    FLOOR.className = sex;

// canvasの準備
    PW = Doll.width + MARGIN * 2;
    PH = Doll.height + MARGIN * 2;
    CX1 = getContext2D('current', PW, PH); CV1 = CX1.canvas;
    CX2 = getContext2D('preview', PW, PH); CV2 = CX2.canvas;
    CX3 = getContext2D('silhouette', PW, PH); CV3 = CX3.canvas;
    
    // デフォルト状態
    var tmp = new Doll(Sexes.Male);
    tmp.dress(Item.find('M_item_total_1'));
    tmp.dress(Item.find('M_item_foot_2'));

// 初期状態をlocalStorageから持ってくる
    DOLL1.unserialize(load(LS_DATA, tmp.serialize()));

// currentを描画
    DOLL1.draw(CX1, 0, 0);

// 開始
    Scenes.change(Scenes.Default);
  }, false);
})();

<div class="buttons" id="default-buttons">
  <button id="default-to-preview">きがえる</button>
</div>
<div class="buttons" id="preview-buttons">
  <button id="preview-to-waiting" class="ok">きがえてみる</button>
  <button id="preview-to-default" class="cancel">やっぱりやめる</button>
</div>
<div class="buttons" id="changed-buttons">
  <button id="changed-to-default" class="ok">これにきめる</button>
  <button id="cahnged-to-preview" class="cancel">えらびなおす</button>
</div>
<div class="buttons" id="sex-buttons">
  <button id="as-male">男の子</button>
  <button id="as-female">女の子</button>
</div>

kisekae / forked from: pigg

/* ========================================================================== */
/* リセット */
html,body,section,nav,article,aside,h1,h2,h3,h4,h5,h6,header,footer,address,p,pre,blockquote,ol,ul,li,dl,dt,dd,figure,figcaption,div,span,ins,del,img,embed,object,video,audio,source,track,canvas,table,caption,colgroup,col,tbody,thead,tfoot,tr,td,th,form,fieldset,legend,label {
  font-size:inherit;
  margin:0;
  padding:0;
}

/* ========================================================================== */
/* 基本設定 */
body {
  background:#4dac27;
  color:#000;
  font-size:12px;
  font-family:"Hiragino Maru Gothic Pro","Meiryo","MS Gothic",fantasy;
  overflow:hidden;
}

/* ========================================================================== */
/* ボタン */
button {
  border:0;
  font-size:16px;
  font-family:"Hiragino Maru Gothic Pro","Meiryo","MS Gothic",fantasy;
  margin:0 0.2em;
  padding:0.2em 1em;
  line-height:1;
  cursor:pointer;

-moz-border-radius:0.5em;
  -webkit-border-radius:0.5em;
  border-radius:0.5em;

-moz-box-shadow:
    0 0 1px rgba(0,0,0,0.5),
    inset 0  2px 2px rgba(255,255,255,0.5),
    inset 0 -2px 2px rgba(0,0,0,0.5);
  -webkit-box-shadow:
    0 0 1px rgba(0,0,0,0.5),
    inset 0  2px 2px rgba(255,255,255,0.5),
    inset 0 -2px 2px rgba(0,0,0,0.5);
  box-shadow:
    0 0 1px rgba(0,0,0,0.5),
    inset 0  2px 2px rgba(255,255,255,0.5),
    inset 0 -2px 2px rgba(0,0,0,0.5);
}

button:active {
  -moz-box-shadow:
    0 0 1px rgba(0,0,0,0.5),
    inset 0 -2px 2px rgba(128,128,128,0.5),
    inset 0  2px 2px rgba(0,0,0,0.5);
  -webkit-box-shadow:
    0 0 1px rgba(0,0,0,0.5),
    inset 0 -2px 2px rgba(128,128,128,0.5),
    inset 0  2px 2px rgba(0,0,0,0.5);
  box-shadow:
    0 0 1px rgba(0,0,0,0.5),
    inset 0 -2px 2px rgba(128,128,128,0.5),
    inset 0  2px 2px rgba(0,0,0,0.5);
}

button::-moz-focus-inner {
  padding:0 !important;
  border:0 !important;
}

button {
  background:#cfc;
}

button:hover {
  background:#9f9;
}

button:active {
  background:#9c9;
}

button.ok {
  background:#fcc;
}

button.ok:hover {
  background:#f99;
}

button.ok:active {
  background:#c99;
}

button.cancel {
  background:#ccf;
}

button.cancel:hover {
  background:#99f;
}

button.cancel:active {
  background:#99c;
}

/* ========================================================================== */
/* pigg表示部分 */

.doll {
  width:133px;
  height:192px;
}

/* -------------------------------------------------------------------------- */
/* アニメーション１ */

@-webkit-keyframes shiver {
    0% { -webkit-transform:translate( 0px, 0px); }
   25% { -webkit-transform:translate(-1px, 0px); }
   50% { -webkit-transform:translate( 0px, 1px); }
   75% { -webkit-transform:translate( 1px, 0px); }
  100% { -webkit-transform:translate( 0px, 0px); }
}

.shiver {
  -webkit-transform-origin:center center;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 0.1s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-name: shiver;
}

/* -------------------------------------------------------------------------- */
/* アニメーション２ */

@-webkit-keyframes hesitate {
    0% { -webkit-transform:skew(0, 0deg) scale(   1,1); }
   25% { -webkit-transform:skew(0, 3deg) scale(0.95,1); }
   50% { -webkit-transform:skew(0, 0deg) scale(   1,1); }
   75% { -webkit-transform:skew(0,-3deg) scale(0.95,1); }
  100% { -webkit-transform:skew(0, 0deg) scale(   1,1); }
}

.hesitate {
  -webkit-transform-origin:center bottom;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 2s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-name: hesitate;
}

/* ========================================================================== */
/* 基本的なレイアウト */

#floor {
  z-index:10;
  position:fixed;
  left:4em;
  right:4em;
  top:4em;
  bottom:4em;
}

#current {
  z-index:200;
  position:fixed;
  right:50%;
  bottom:50%;
  margin:0 -66px -96px 0;

opacity:0;
  visibility:hidden;
}

#items {
  z-index:12;
  position:absolute;
  padding-right:0;
  right:35%;
  bottom:50%;
  width:60%;
  height:45%;
}

#cloud {
  z-index:200;
  position:fixed;
  right:0px;
  bottom:0px;
  width:300px;
  height:380px;

opacity:0;
  visibility:hidden;
}

#preview {
  z-index:210;
  position:fixed;
  right:135px;
  bottom:195px;
  background:#fff;

width:93px;
  height:134px;
}

#silhouette {
  z-index:200;
  position:fixed;
  right:50%;
  bottom:50%;
  margin:0 -66px -96px 0;

opacity:0;
  visibility:hidden;
}

.buttons {
  z-index:300;
  position:fixed;
  left:0;
  width:100%;
  bottom:0;
  text-align:center;
  padding:1em 0;

opacity:0;
  visibility:hidden;
}

#sex-buttons {
  left:auto;
  right:1em;
  top:0;
  width:auto;
  text-align:left;
}

#overlay {
  z-index:1000;
  position:fixed;
  left:0;
  right:0;
  top:0;
  bottom:0;
/*  background:#4dac27;*/
  background:#000;
}

/* ========================================================================== */
/* 背景 */
#room {
  box-shadow:inset 4px 4px 8px rgba(0,0,0,0.5);

-moz-border-radius:1em;
  -webkit-border-radius:1em;
  border-radius:1em;
}

#floor {
  overflow:hidden;
  background:#631;

-moz-border-radius:1em;
  -webkit-border-radius:1em;
  border-radius:1em;
}

#left-wall {
  z-index:11;
  position:absolute;
  left:0;
  bottom:60%;
  width:60%;
  height:50%;
  background:#edc;

-moz-transform-origin:right bottom;
  -webkit-transform-origin:right bottom;
  transform-origin:right bottom;

-moz-transform:skew(0deg,-15deg);
  -webkit-transform:skew(0deg,-15deg);
  transform:skew(0deg,-15deg);
}

#right-wall {
  z-index:11;
  position:absolute;
  left:60%;
  bottom:60%;
  width:42%;
  height:50%;
  background:#fed;

-moz-transform-origin:left bottom;
  -webkit-transform-origin:left bottom;
  transform-origin:left bottom;

-moz-transform:skew(0deg,25deg);
  -webkit-transform:skew(0deg,25deg);
  transform:skew(0deg,25deg);
}

#backyard {
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:40%;
  background:#987;

-moz-border-radius:1em;
  -webkit-border-radius:1em;
  border-radius:1em;
}

/* ========================================================================== */
/* 現在状態くん */
#current {
  -moz-transform-origin:right bottom;
  -webkit-transform-origin:right bottom;
  transform-origin:right bottom;
}

/* ========================================================================== */
/* アイテムの陳列 */

#items {
  padding-right:70%;

-moz-transform-origin:right bottom;
  -webkit-transform-origin:right bottom;
  transform-origin:right bottom;

-moz-transform:skew(0deg,-15deg);
  -webkit-transform:skew(0deg,-15deg);
  transform:skew(0deg,-15deg);
}

#items-menu > li {
  list-style:none;
  display:inline-block;
  background:#ccc;
  height:1.4em;
  line-height:1.4;
  padding:0 1em;
  margin:0 1em 1em 0;
  cursor:pointer;

-moz-border-radius:0.7em;
  -webkit-border-radius:0.7em;
  border-radius:0.7em;

-moz-box-shadow:-3px -3px 0 rgba(0,0,0,0.2);
  -webkit-box-shadow:-3px -3px 0 rgba(0,0,0,0.2);
  box-shadow:-3px -3px 0 rgba(0,0,0,0.2);
}

#items > ul.list {
  position:absolute;
  left:0;
  top:3em;

display:none;
}

#items > ul.list > li {
  list-style:none;
  display:block;
  margin:0.2em;
  float:left;

-moz-border-radius:6px;
  -webkit-border-radius:6px;
  border-radius:6px;
}

#items > ul.list > li > img,
#items > ul.list > li > p {
  display:block;
  margin:0 auto;

-moz-transform-origin:left bottom;
  -webkit-transform-origin:left bottom;
  transform-origin:left bottom;

-moz-transition:all 1s ease;
  -webkit-transition:all 1s ease;
  transition:all 1s ease;
}

#items > ul.list > li:hover > img,
#items > ul.list > li:hover > p {
  -moz-transform:skew(0,15deg);
  -webkit-transform:skew(0,15deg);
  transform:skew(0,15deg);

-moz-transition:all 0.2s ease;
  -webkit-transition:all 0.2s ease;
  transition:all 0.2s ease;
}

#items.total > ul.total,
#items.top > ul.top,
#items.bottom > ul.bottom,
#items.foot > ul.foot,
#items.accessory > ul.accessory,
#items.gadget > ul.gadget {
  display:block;
}

#floor.M ul.F {
  display:none;
}

#floor.F ul.M {
  display:none;
}

/* ========================================================================== */
/* 吹出し */
@-webkit-keyframes cloud-cotton {
    0% { -webkit-transform:scale(1.0, 1.0); }
   25% { -webkit-transform:scale(0.9, 0.9); }
   75% { -webkit-transform:scale(1.1, 1.1); }
  100% { -webkit-transform:scale(1.0, 1.0); }
}

#cloud {
}

#cloud > div.cotton {
  position:absolute;
  background:#fff;
  width:70px;
  height:70px;

-moz-border-radius:35px;
  -webkit-border-radius:35px;
  border-radius:35px;

-moz-box-shadow:0 0 4px 4px #fff;
  -webkit-box-shadow:0 0 4px 4px #fff;
  box-shadow:0 0 4px 4px #fff;

-moz-transform-origin:center center;
  -webkit-transform-origin:center center;
  transform-origin:center center;

-webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-name: cloud-cotton;
}

#cloud > div.cotton:nth-child(1) { right:130px; bottom:170px; }
#cloud > div.cotton:nth-child(2) { right:100px; bottom:180px; }
#cloud > div.cotton:nth-child(3) { right: 90px; bottom:240px; }
#cloud > div.cotton:nth-child(4) { right:110px; bottom:280px; }
#cloud > div.cotton:nth-child(5) { right:160px; bottom:290px; }
#cloud > div.cotton:nth-child(6) { right:200px; bottom:270px; }
#cloud > div.cotton:nth-child(7) { right:210px; bottom:220px; }
#cloud > div.cotton:nth-child(8) { right:180px; bottom:170px; }

#cloud > div.cotton:nth-child(9) {
  width:20px;
  height:20px;
  right:145px;
  bottom:135px;

-moz-border-radius:10px;
  -webkit-border-radius:10px;
  border-radius:10px;
}

#cloud > div.cotton:nth-child(10) {
  width:15px;
  height:15px;
  right:135px;
  bottom:110px;

-moz-border-radius:7px;
  -webkit-border-radius:7px;
  border-radius:7px;
}

#cloud > div.cotton:nth-child(11) {
  width:10px;
  height:10px;
  right:120px;
  bottom:90px;

-moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius:5px;
}

#cloud > div.cotton:nth-child( 1) { -webkit-animation-duration:7.8s; }
#cloud > div.cotton:nth-child( 2) { -webkit-animation-duration:7.2s; }
#cloud > div.cotton:nth-child( 3) { -webkit-animation-duration:6.0s; }
#cloud > div.cotton:nth-child( 4) { -webkit-animation-duration:6.9s; }
#cloud > div.cotton:nth-child( 5) { -webkit-animation-duration:5.7s; }
#cloud > div.cotton:nth-child( 6) { -webkit-animation-duration:5.4s; }
#cloud > div.cotton:nth-child( 7) { -webkit-animation-duration:8.4s; }
#cloud > div.cotton:nth-child( 8) { -webkit-animation-duration:6.3s; }
#cloud > div.cotton:nth-child( 9) { -webkit-animation-duration:5.1s; }
#cloud > div.cotton:nth-child(10) { -webkit-animation-duration:6.6s; }
#cloud > div.cotton:nth-child(11) { -webkit-animation-duration:7.5s; }

/* ========================================================================== */
/* 性別変更ボタン */
#as-male {
  color:#fff;
  background:#00f;
}

#as-male:hover {
  background:#66f;
}

#as-female {
  color:#fff;
  background:#e02;
}

#as-female:hover {
  background:#e62;
}

/* ========================================================================== */
/* シーンごとの設定 */

/* -------------------------------------------------------------------------- */
/* Default */

body.default #current,
body.default #default-buttons,
body.default #sex-buttons {
  opacity:1;
  visibility:visible;

-moz-transition:all 1s ease;
  -webkit-transition:all 1s ease;
  transition:all 1s ease;
}

body.default #items {
  -moz-transition:all 1s ease-out;
  -webkit-transition:all 1s ease-out;
  transition:all 1s ease-out;
}

body.default #cloud {
  opacity:0;
  visibility:hidden;

-moz-transition:all 0.5s ease;
  -webkit-transition:all 0.5s ease;
  transition:all 0.5s ease;
}

body.default #preview-buttons,
body.default #changed-buttons {
  opacity:0;
  visibility:hidden;
}

body.default #overlay {
  opacity:0;
  visibility:hidden;

-moz-transition:all 1s linear;
  -webkit-transition:all 1s linear;
  transition:all 1s linear;
}

/* -------------------------------------------------------------------------- */
/* Preview */

body.preview #current {
  opacity:1;
  visibility:visible;
  right:0;
  bottom:0;
  margin:0 -10px -50px 0;

-moz-transition:all 1s ease;
  -webkit-transition:all 1s ease;
  transition:all 1s ease;
}

body.preview #items {
  padding-right:0;

-moz-transition:all 1s ease-out 0.5s;
  -webkit-transition:all 1s ease-out 0.5s;
  transition:all 1s ease-out 0.5s;
}

body.preview #cloud,
body.preview #preview-buttons {
  opacity:1;
  visibility:visible;

-moz-transition:all 1s ease 1s;
  -webkit-transition:all 1s ease 1s;
  transition:all 1s ease 1s;
}

body.preview #default-buttons,
body.preview #changed-buttons,
body.preview #sex-buttons {
  opacity:0;
  visibility:hidden;

-moz-transition:all 1s ease;
  -webkit-transition:all 1s ease;
  transition:all 1s ease;
}

body.preview #overlay {
  opacity:0;
  visibility:hidden;

-moz-transition:all 1s linear;
  -webkit-transition:all 1s linear;
  transition:all 1s linear;
}

/* -------------------------------------------------------------------------- */
/* Waiting */

body.waiting #current {
  opacity:1;
  visibility:visible;

-moz-transition:all 1s ease;
  -webkit-transition:all 1s ease;
  transition:all 1s ease;
}

body.waiting #items {
  opacity:1;
  visibility:visible;
}

body.waiting #cloud {
  opacity:0;
  visibility:hidden;

-moz-transition:all 0.5s ease;
  -webkit-transition:all 0.5s ease;
  transition:all 0.5s ease;
}

body.waiting #overlay {
  opacity:1;
  visibility:visible;

-moz-transition:all 1s linear;
  -webkit-transition:all 1s linear;
  transition:all 1s linear;
}

/* -------------------------------------------------------------------------- */
/* Standby */

body.standby #current {
  visible:hidden;

-moz-transform-origin:center center;
  -webkit-transform-origin:center center;
  transform-origin:center center;

-moz-transform:scale(0,1);
  -webkit-transform:scale(0,1);
  transform:scale(0,1);
}

body.standby #silhouette {
  opacity:1;
  visibility:visible;

-moz-transform-origin:center center;
  -webkit-transform-origin:center center;
  transform-origin:center center;

-moz-transition:all 0.5s ease;
  -webkit-transition:all 0.5s ease;
  transition:all 0.5s ease;
}

body.standby #items {
  opacity:1;
  visibility:visible;
}

body.standby #overlay {
  opacity:0.6;
  visibility:visible;

-moz-transition:all 1s linear;
  -webkit-transition:all 1s linear;
  transition:all 1s linear;
}

/* -------------------------------------------------------------------------- */
/* Changed */

body.changed #current {
  opacity:1;
  visibility:visible;

-moz-transform-origin:center center;
  -webkit-transform-origin:center center;
  transform-origin:center center;

-moz-transition:all 0.2s ease-out 0.2s;
  -webkit-transition:all 0.2s ease-out 0.2s;
  transition:all 0.2s ease-out 0.2s;
}

body.changed #silhouette {
  opacity:1;
  visibility:visible;

-moz-transform-origin:center center;
  -webkit-transform-origin:center center;
  transform-origin:center center;

-moz-transform:scale(0,1);
  -webkit-transform:scale(0,1);
  transform:scale(0,1);

-moz-transition:all 0.2s ease-in;
  -webkit-transition:all 0.2s ease-in;
  transition:all 0.2s ease-in;
}

body.changed #items {
  opacity:1;
  visibility:visible;
}

body.changed #changed-buttons {
  opacity:1;
  visibility:visible;

-moz-transition:all 0.5s ease 0.4s;
  -webkit-transition:all 0.5s ease 0.4s;
  transition:all 0.5s ease 0.4s;
}

body.changed #overlay {
  opacity:0;
  visibility:hidden;

-moz-transition:all 0.1s linear;
  -webkit-transition:all 0.1s linear;
  transition:all 0.1s linear;
}

1. 「きがえる」ボタンで着替え開始です。 2. 着替え中は左側にカテゴリのボタンが出るのでそれをクリックすると、カテゴリ内のアイテムが出てきます。アイテムクリックで着替えのプレビューができます。すでに着ているアイテムをクリックすると脱ぎます。 3. 着替え中は「やっぱりやめる」ボタンで元に戻ります。 4. 着替え中に「きがえてみる」ボタンで実際に着替えてみます。 5. 着替え後、「これにきめる」ボタンで保存されます。「えらびなおす」ボタンで着替えに戻ります。 ※ChromeとFirefox 4あたりでだいたい意図したとおりに動きます。 ※フルスクリーンにして1024x768くらいで見ると調度良いです。 ※着替え状態はlocalStorageが動けば保存されます。 ※下着姿にしないでください。(function() { /* ======================================================================== */ /* 変数初期化はwindow.loadあたりで */ var WIN = window; var DOC = document; var DOLL1, CV1, CX1; // #current用 var DOLL2, CV2, CX2; // #preview用 var DOLL3, CV3, CX3; // #silhouette用 var DOLL4; // #current保存用 var DW, PH; // プレビューの幅 var FLOOR, ITEMS, ITEMS_MENU; // #floor / #itesm / #items-menu 用 /* ======================================================================== */ /* 定数として使うもの */ var TO_RADIAN = Math.PI / 180; // 角度からラジアンを得る用 var MARGIN = 5; // スケッチエフェクトの余白 var LS_DATA = 'gct256-pigg-data'; // localStorage用のキー var LS_SEX = 'gct256-pigg-sex'; // localStorage用のキー /* ======================================================================== */ /* Sexes / 性別 */ var Sexes = { /* 性別の正規化＋取得 */ get: function(sex) { for (var x in Sexes) if (Sexes[x] === sex) return sex; return Sexes.Male; }, Male: 'M', // 男 Female: 'F', // 女 Both: 'B' // 共通 }; /* ======================================================================== */ /* Parts / 部位 */ var Parts = { /* 部位の正規化＋取得 */ get: function(part) { for (var x in Parts) if (Parts[x] === part) return part; return Parts.Gadget; }, /* 部位についてhandlerを実行順番は適当だけどforDressがtrueなら着る順 */ each: function(handler, forDress) { if (handler instanceof Function) { if (forDress) { handler(Parts.Foot); handler(Parts.Bottom); handler(Parts.Top); handler(Parts.Total); handler(Parts.Accessory); handler(Parts.Gadget); } else { handler(Parts.Total); handler(Parts.Top); handler(Parts.Bottom); handler(Parts.Foot); handler(Parts.Accessory); handler(Parts.Gadget); } } }, /* 部位の名前 */ getName: function(part) { switch (part) { case Parts.Total: return 'トータル'; case Parts.Top: return 'トップス'; case Parts.Bottom: return 'ボトムス'; case Parts.Foot: return 'くつ'; case Parts.Accessory: return 'アクセサリー'; case Parts.Gadget: return '小物'; } return 'その他'; }, Total: 'total', // トップス＆ボトムス Top: 'top', // トップス Bottom: 'bottom', // ボトムス Foot: 'foot', // くつ Accessory: 'accessory', // アクセサリー Gadget: 'gadget' // 小物 }; /* ======================================================================== */ /* シーン管理 body要素のクラスを使って管理する */ var Scenes = { /* シーン切り替え */ change: function(scene) { var x, b, c; for (x in Scenes) if (Scenes[x] === scene) { b = DOC.body.className; DOC.body.className = scene; if ((c = Scenes.callbacks[x]) instanceof Function) c(b); } }, /* コールバック設定 */ setCallback: function(scene, callback) { if (callback instanceof Function) for (var x in Scenes) if (Scenes[x] === scene) Scenes.callbacks[x] = callback; }, callbacks: {}, Default: 'default', // 通常時 Preview: 'preview', // プレビュー中 Waiting: 'waiting', // 試着完了待ち Standby: 'standby', // 披露待ち Changed: 'changed' // 着替え完了 }; /* ======================================================================== */ /* Cell / 画像とオフセット値を持つオブジェクト */ /* ------------------------------------------------------------------------ */ /* 生成 img: 画像またはcanvas ox, oy: オフセット値 */ function Cell(img, ox, oy) { this.img = img; this.ox = ox; this.oy = oy; } /* ------------------------------------------------------------------------ */ /* 描画 cx: CanvasRenderingContext2D x, y: 描画位置 */ Cell.prototype.draw = function(cx, x, y) { cx.drawImage(this.img, this.ox + x, this.oy + y); }; /* ======================================================================== */ /* Item / 着用アイテムオブジェクト */ /* ------------------------------------------------------------------------ */ /* 生成 id: 識別ID name: 名前 sex: 性別 (Sexes.*) part: 部位 (Parts.*) baseImage: マスクなしイメージ bx, by: マスクなしイメージの表示位置 maskImage: マスクありイメージ mx, my: マスクありイメージの表示位置 buttonImage: ボタンイメージ */ function Item(id, name, sex, part, baseImage, bx, by, maskImage, mx, my, buttonImage) { if (!baseImage || !maskImage || !buttonImage) throw 'image not found.'; if (Item.find(id)) throw 'duplicate id'; if (!/^[A-Z0-9_-]+$/i.test(id)) throw 'illegal id'; this.id = id; this.name = name; this.sex = Sexes.get(sex); this.part = Parts.get(part); this.base = new Cell(baseImage, bx, by); this.mask = new Cell(maskImage, mx, my); this.preview = new Cell(sketch(maskImage, MARGIN), mx - MARGIN, my - MARGIN); this.button = buttonImage; Item.items.push(this); } /* ------------------------------------------------------------------------ */ /* 全アイテムを格納する */ Item.items = []; /* ------------------------------------------------------------------------ */ /* idからアイテムを取得する id: 対象id */ Item.find = function(id) { for (var v = Item.items, l = v.length, i = 0; i < l; ++i) if (v[i].id === id) return v[i]; return null; }; /* ------------------------------------------------------------------------ */ /* 性別と部位から複数のアイテムを得る sex: 性別 part: 部位 */ Item.findBySexAndPart = function(sex, part) { for (var r = [], v = Item.items, l = v.length, i = 0; i < l; ++i) if (v[i].sex === sex && v[i].part === part) r.push(v[i]); return r; } /* ------------------------------------------------------------------------ */ /* マスクなしイメージの描画 cx: CanvasRenderingContext2D x, y: 描画位置 */ Item.prototype.draw = function(cx, x, y) { this.base.draw(cx, x, y); }; /* ------------------------------------------------------------------------ */ /* マスクありイメージの描画 cx: CanvasRenderingContext2D x, y: 描画位置 */ Item.prototype.drawMask = function(cx, x, y) { this.mask.draw(cx, x, y); }; /* ------------------------------------------------------------------------ */ /* プレビューイメージの描画 cx: CanvasRenderingContext2D x, y: 描画位置 */ Item.prototype.drawPreview = function(cx, x, y) { this.preview.draw(cx, x, y); }; /* ======================================================================== */ /* Doll / 着用状態オブジェクト */ /* ------------------------------------------------------------------------ */ /* 生成 sex: 性別 */ function Doll(sex) { this.sex = Sexes.get(sex); this.undressAll(); } /* ------------------------------------------------------------------------ */ /* サイズ（とりあえず固定） */ Doll.width = 133; Doll.height = 192; /* ------------------------------------------------------------------------ */ /* ベースとなる画像（初期状態では未設定） */ Doll.Image = {}; /* ------------------------------------------------------------------------ */ /* ベースとなる画像の設定 sex: 性別 character: キャラクタ画像 cx, cy: キャラクタ画像の描画位置 underware: 下着画像 ux, uy: 下着像画の描画位置 */ Doll.setImage = function(sex, character, cx, cy, underware, ux, uy) { if (character && underware) { var preview = createContext2D(Doll.width, Doll.height); preview.drawImage(character, cx, cy); preview.drawImage(underware, ux, uy); Doll.Image[Sexes.get(sex)] = { character: new Cell(character, cx, cy), underware: new Cell(underware, ux, uy), preview: new Cell(sketch(preview.canvas, MARGIN), -MARGIN, -MARGIN) }; } }; /* ------------------------------------------------------------------------ */ /* 文字列化 */ Doll.prototype.serialize = function() { var v = [this.sex], part, eq = this.equipment; for (part in eq) if (eq[part] !== null) v.push(eq[part].id); return v.join(','); }; /* ------------------------------------------------------------------------ */ /* 文字列化からの復元 */ Doll.prototype.unserialize = function(str) { if (typeof str === 'string') { this.undressAll(); for (var v = str.split(/,/), w, l = v.length, i = 1; i < l; ++i) this.dress(Item.find(v[i])); this.sex = v[0]; } }; /* ------------------------------------------------------------------------ */ /* serializeとunserializeを使ったコピー */ Doll.prototype.copy = function(src) { if (src instanceof Doll) this.unserialize(src.serialize()); }; /* ------------------------------------------------------------------------ */ /* 着てるかどうか item: 調べるアイテム */ Doll.prototype.has = function(item) { var x, eq = this.equipment; for (x in eq) if (eq[x] === item) return true; return false; }; /* ------------------------------------------------------------------------ */ /* 何も着てないかどうか */ Doll.prototype.isNaked = function() { var x, eq = this.equipment; for (x in eq) if (eq[x] !== null) return false; return true; }; /* ------------------------------------------------------------------------ */ /* 着る（性別は見ない・部位はItemから判別） item: 着るアイテム (Item) */ Doll.prototype.dress = function(item) { var eq = this.equipment; if (item instanceof Item) { eq[item.part] = item; switch (item.part) { case Parts.Total: eq[Parts.Top] = eq[Parts.Bottom] = null; break; case Parts.Top: eq[Parts.Total] = null; break; case Parts.Bottom: eq[Parts.Total] = null; break; } } }; /* ------------------------------------------------------------------------ */ /* 脱ぐ part: 脱ぐ部位 */ Doll.prototype.undress = function(part) { var tmp = Parts.get(part); if (tmp === part) this.equipment[part] = null; }; /* ------------------------------------------------------------------------ */ /* 全部脱ぐ */ Doll.prototype.undressAll = function() { var eq = this.equipment = {}; for (var part in Parts) eq[part] = null; }; /* ------------------------------------------------------------------------ */ /* 丸影の描画 */ Doll.prototype.drawShadow = function(cx, x, y) { cx.save(); cx.translate(Doll.width * 0.5, Doll.height - 6); cx.scale(1, 0.25); var g = cx.createRadialGradient(0, 0, 0, 0, 0, 60); g.addColorStop(0.0, 'rgba(0,0,0,0.5)'); g.addColorStop(0.9, 'rgba(0,0,0,0.0)'); cx.fillStyle = g; cx.beginPath(); cx.arc(0, 0, 60, 0, Math.PI * 2, true); cx.fill(); cx.restore(); }; /* ------------------------------------------------------------------------ */ /* イメージの描画 cx: CanvasRenderingContext2D x, y: 描画位置 */ Doll.prototype.draw = function(cx, x, y, withAnimation) { var part, eq = this.equipment, top, img = Doll.Image[this.sex]; cx.clearRect(x, y, PW, PH); this.drawShadow(cx, x, y); if (img && img.character && img.underware) { img.character.draw(cx, x, y); img.underware.draw(cx, x, y); } Parts.each(function(part) { if (eq[part] instanceof Item) eq[part].drawMask(cx, x, y); }, true); cx.canvas.className = 'doll'; if (withAnimation && this.isNaked()) { if (this.sex === Sexes.Male) this.pale(cx, x, y); else if (this.sex === Sexes.Female) this.blush(cx, x, y); } }; /* ------------------------------------------------------------------------ */ /* プレビューイメージの描画 cx: CanvasRenderingContext2D x, y: 描画位置 */ Doll.prototype.preview = function(cx, x, y, withAnimation) { var part, eq = this.equipment, top, img = Doll.Image[this.sex]; cx.clearRect(x, y, PW, PH); this.drawShadow(cx, x, y); if (img && img.preview) { img.preview.draw(cx, x, y); } Parts.each(function(part) { if (eq[part] instanceof Item) eq[part].drawPreview(cx, x, y); }, true); cx.canvas.className = 'doll'; if (withAnimation && this.isNaked()) { if (this.sex === Sexes.Male) this.pale(cx, x, y); else if (this.sex === Sexes.Female) this.blush(cx, x, y); } }; /* ------------------------------------------------------------------------ */ /* シルエットイメージの描画 cx: CanvasRenderingContext2D x, y: 描画位置 */ Doll.prototype.silhouette = function(cx, x, y) { this.draw(cx, x, y); cx.save(); cx.globalCompositeOperation = 'source-in'; cx.fillStyle = '#000'; cx.fillRect(x, y, Doll.width, Doll.height); cx.restore(); }; /* ------------------------------------------------------------------------ */ /* 感情１ */ Doll.prototype.pale = function(cx, x, y) { cx.save(); var g = cx.createRadialGradient(0, 0, 0, 0, 0, 40); g.addColorStop(0.0, 'rgba(0,128,255,0.2)'); g.addColorStop(1.0, 'rgba(0,128,255,0.0)'); cx.fillStyle = g; cx.translate(55, 95); cx.scale(1, 0.6); cx.beginPath(); cx.arc(0, 0, 40, 0, Math.PI * 2, true); cx.fill(); cx.restore(); cx.canvas.className = 'doll shiver'; }; /* ------------------------------------------------------------------------ */ /* 感情２ */ Doll.prototype.blush = function(cx, x, y) { cx.save(); var g = cx.createRadialGradient(0, 0, 0, 0, 0, 40); g.addColorStop(0.0, 'rgba(255,0,0,0.2)'); g.addColorStop(1.0, 'rgba(255,0,0,0.0)'); cx.fillStyle = g; cx.translate(55, 95); cx.scale(1, 0.6); cx.beginPath(); cx.arc(0, 0, 40, 0, Math.PI * 2, true); cx.fill(); cx.restore(); cx.canvas.className = 'doll hesitate'; }; /* ======================================================================== */ /* ユーティリティ関数 */ /* ------------------------------------------------------------------------ */ /* localStorageのラッパー */ function load(key, defaultValue) { try { if (key in WIN.localStorage) return WIN.localStorage[key]; } catch (er) { } return defaultValue; } function save(key, value) { try { WIN.localStorage[key] = value; } catch (er) { } } /* ------------------------------------------------------------------------ */ /* idから要素 */ function element(v) { return typeof v === 'string' ? DOC.getElementById(v) : v; } /* ------------------------------------------------------------------------ */ /* 指定サイズのcanvasを作ってCanvasRenderingContext2Dを返す w, h: サイズ */ function createContext2D(w, h) { var cv = DOC.createElement('canvas'); cv.width = w; cv.height = h; return cv.getContext('2d'); } /* ------------------------------------------------------------------------ */ /* idからcanvasを探してサイズを設定しCanvasRenderingContext2Dを返す w, h: サイズ */ function getContext2D(id, w, h) { var cv = element(id); if (cv) { cv.width = w; cv.height = h; return cv.getContext('2d'); } return null; } /* ------------------------------------------------------------------------ */ /* min以上max以下の乱数（浮動小数） min: 下限 max: 上限 */ function rndf(min, max) { var d = 0xffffffff; return min + Math.floor(Math.random() * (max - min) * d + 1) / d; } /* ------------------------------------------------------------------------ */ /* 画像をスケッチ風にする img: 元画像 margin: 余白 */ function sketch(img, margin) { var w = img.width, w2 = w + margin * 2; var h = img.height, h2 = h + margin * 2; // 画像を余白分ずらす var cx0 = createContext2D(w2, h2); cx0.drawImage(img, margin, margin); // ↑をパターンにして筆っぽく描画 var cx1 = createContext2D(w2, h2), cv1 = cx1.canvas; cx1.drawImage(cx0.canvas, 0, 0); cx1.globalCompositeOperation = 'source-in'; cx1.fillStyle = '#fff'; cx1.fillRect(0, 0, w2, h2); cx1.globalCompositeOperation = 'source-over'; cx1.strokeStyle = cx1.createPattern(cx0.canvas, 'no-repeat'); cx1.lineWidth = 1.2; var dh = h2 / 10, a, ax, ay; for (var y = 0; y < h2; y += 3) { for (var x = 0; x < w2; x += 3) { a = (- y - x) / 2 * TO_RADIAN; cx1.translate(ax = rndf(-1, 1), ay = rndf(-1, 1)); cx1.beginPath(); cx1.moveTo(x, y); cx1.lineTo(x + Math.cos(a) * 10, y + Math.sin(a) * 10); cx1.stroke(); cx1.translate(-ax, -ay); } } // ↑に影をつける var cx = createContext2D(w2 + 4, h2 + 4); cx.save(); cx.shadowOffsetX = cx.shadowOffsetY = 1; cx.shadowBlur = 2; cx.shadowColor = 'rgba(0,0,0,0.4)'; cx.drawImage(cx1.canvas, 0, 0); cx.restore(); return cx.canvas; } /* ------------------------------------------------------------------------ */ /* Piggitemにある画像を使ってItemを生成するラッパー sex: 性別 (Sexes.*) part: 部位 (Parts.*) postfix: 画像名の末尾 name: 名前 bx, by: マスクなしイメージの表示位置 mx, my: マスクありイメージの表示位置 */ function createItem(sex, part, postfix, name, bx, by, mx, my) { var id1 = (sex = Sexes.get(sex)) + '_item_' + postfix; var id2 = (sex = Sexes.get(sex)) + '_btn_' + postfix; var base = Piggitem[id1]; var mask = Piggitem[id1 + '_mask'] || base; var button = Piggitem[id2]; new Item(id1, name, sex, Parts.get(part), base, bx, by, mask, mx, my, button); } /* ------------------------------------------------------------------------ */ /* アイテムの陳列sectionを作成する */ function putItem(sex, part) { var ul, li, p; var items = Item.findBySexAndPart(sex, part), l = items.length, i; if (l === 0) { p = DOC.createElement('p'); p.className = Sexes.get(sex) + ' ' + part + ' sold-out'; return p; } else { ul = DOC.createElement('ul'); ul.className = Sexes.get(sex) + ' list ' + part; for (i = 0; i < l; ++i) (function(item) { li = DOC.createElement('li'); li.appendChild(item.button); p = DOC.createElement('p'); p.textContent = item.name; li.appendChild(p); li.addEventListener('click', function() { if (DOLL2.has(item)) DOLL2.undress(item.part); else DOLL2.dress(item); DOLL2.preview(CX2, 0, 0, true); }, false); ul.appendChild(li); })(items[i]); return ul; } } /* ======================================================================== */ /* ボタンアクション基本的にシーン切り替えのみ何かしたければシーンのコールバックを使う */ function buttonAction(id, scene) { var button = element(id); if (button) button.addEventListener('click', function() { Scenes.change(scene); }, false); } buttonAction('default-to-preview', Scenes.Preview); buttonAction('preview-to-waiting', Scenes.Waiting); buttonAction('preview-to-default', Scenes.Default); buttonAction('changed-to-default', Scenes.Default); buttonAction('cahnged-to-preview', Scenes.Preview); /* ======================================================================== */ /* シーンのコールバック設定 */ Scenes.setCallback(Scenes.Default, function(before) { // Changedからの場合はDOLL1の状態を保存 if (before === Scenes.Changed) if (DOLL1) save(LS_DATA, DOLL1.serialize()); DOLL1.draw(CX1, 0, 0); }); Scenes.setCallback(Scenes.Preview, function(before) { // Changedからの場合はDOLL1を元に戻す if (before === Scenes.Changed) { DOLL1.copy(DOLL4); DOLL1.draw(CX1, 0, 0); } else { // それ以外はDOLL1を保存 DOLL4.copy(DOLL1); } // currentをpreviewにコピーする DOLL2.copy(DOLL1); // previewを描画 DOLL2.preview(CX2, 0, 0, true); }); Scenes.setCallback(Scenes.Waiting, function() { // 2秒後にStandbyに移行する setTimeout(function() { Scenes.change(Scenes.Standby); }, 2000); }); Scenes.setCallback(Scenes.Standby, function() { // currentとsilhouetteにpreviewをコピー DOLL1.copy(DOLL2); DOLL3.copy(DOLL2); // それぞれ描画 DOLL1.draw(CX1, 0, 0); DOLL3.silhouette(CX3, 0, 0); // 2秒後にChangedに移行する setTimeout(function() { Scenes.change(Scenes.Changed); }, 2000); }); /* ======================================================================== */ /* 性別の切り替え */ function changeSex(sex) { if (DOLL1.sex === sex) return; DOLL1 = new Doll(sex); DOLL2 = new Doll(sex); DOLL3 = new Doll(sex); DOLL4 = new Doll(sex); DOLL1.draw(CX1, 0, 0); DOLL2.preview(CX2, 0, 0, true); DOLL3.silhouette(CX3, 0, 0); FLOOR.className = sex; save(LS_SEX, sex); } element('as-male').addEventListener('click', function() { changeSex(Sexes.Male); }, false); element('as-female').addEventListener('click', function() { changeSex(Sexes.Female); }, false); /* ======================================================================== */ /* 開始 */ WIN.addEventListener('load', function() { // Doll用の画像を設定 Doll.setImage(Sexes.Male, Piggitem.M_character, 15, 21, Piggitem.M_item_sitagi, 52, 143); Doll.setImage(Sexes.Female, Piggitem.character, 13, 26, Piggitem.F_item_sitagi, 51, 116); // 全アイテムの生成 var s = Sexes, p = Parts; createItem(s.Male, p.Total, 'total_1', 'トータルＢ', 39, 109, 41, 113); createItem(s.Male, p.Top, 'top_1', 'トップスＡ', 40, 111, 40, 113); createItem(s.Male, p.Top, 'top_2', 'トップスＣ', 51, 112, 51,112); createItem(s.Male, p.Bottom, 'bottom_1', 'ボトムスＢ', 51, 133, 51, 137); createItem(s.Male, p.Bottom, 'bottom_2', 'ボトムスＤ', 50, 133, 50, 137); createItem(s.Male, p.Foot, 'foot_1', 'くつＡ', 42, 167, 42, 167); createItem(s.Male, p.Foot, 'foot_2', 'くつＣ', 42, 164, 42, 164); createItem(s.Male, p.Accessory, 'cap_1', '帽子Ａ', 1, 9, 0, 10); createItem(s.Male, p.Accessory, 'cap_2', '帽子Ｂ', 15, 0, 15, 0); createItem(s.Female, p.Total, 'total_2', 'トータルＡ', 44, 115, 44, 115); createItem(s.Female, p.Top, 'top_1', 'トップスＢ', 36, 114, 36, 115); createItem(s.Female, p.Top, 'top_2', 'トップスＤ', 40, 113, 40, 114); createItem(s.Female, p.Bottom, 'bottom_1', 'ボトムスＡ', 45, 136, 45, 139); createItem(s.Female, p.Bottom, 'bottom_2', 'ボトムスＣ', 46, 140, 47, 142); createItem(s.Female, p.Foot, 'foot_1', 'くつＢ', 46, 164, 46, 166); createItem(s.Female, p.Foot, 'foot_2', 'くつＤ', 46, 171, 45, 173); createItem(s.Female, p.Accessory, 'ect_1', '花Ａ', 92, 38, 92, 38); createItem(s.Female, p.Accessory, 'ect_2', 'メガネＡ', 22, 64, 22, 71); // #floor / #items / #items-menuの内容作成 // アイテムを#itemsに展開 FLOOR = element('floor'); ITEMS = element('items'); ITEMS_MENU = element('items-menu'); Parts.each(function(part) { var li = DOC.createElement('li'); li.textContent = Parts.getName(part); ITEMS_MENU.appendChild(li); li.addEventListener('click', function() { ITEMS.className = part; }, false); ITEMS.appendChild(putItem(Sexes.Male, part)); ITEMS.appendChild(putItem(Sexes.Female, part)); }); // 初期性別でdollの準備 var sex = Sexes.Male; try { sex = WIN.localStorage[LS_SEX]; if (sex == null) sex = Sexes.Male; } catch (er) { } DOLL1 = new Doll(sex); DOLL2 = new Doll(sex); DOLL3 = new Doll(sex); DOLL4 = new Doll(sex); FLOOR.className = sex; // canvasの準備 PW = Doll.width + MARGIN * 2; PH = Doll.height + MARGIN * 2; CX1 = getContext2D('current', PW, PH); CV1 = CX1.canvas; CX2 = getContext2D('preview', PW, PH); CV2 = CX2.canvas; CX3 = getContext2D('silhouette', PW, PH); CV3 = CX3.canvas; // デフォルト状態 var tmp = new Doll(Sexes.Male); tmp.dress(Item.find('M_item_total_1')); tmp.dress(Item.find('M_item_foot_2')); // 初期状態をlocalStorageから持ってくる DOLL1.unserialize(load(LS_DATA, tmp.serialize())); // currentを描画 DOLL1.draw(CX1, 0, 0); // 開始 Scenes.change(Scenes.Default); }, false); })(); <div id="floor" class="M"> <div id="left-wall"></div> <div id="right-wall"></div> <div id="backyard"></div> <div id="items"> <ul id="items-menu"></ul> </div> </div> <canvas id="current" class="doll"></canvas> <div id="cloud"> <div class="cotton"></div> <div class="cotton"></div> <div class="cotton"></div> <div class="cotton"></div> <div class="cotton"></div> <div class="cotton"></div> <div class="cotton"></div> <div class="cotton"></div> <div class="cotton"></div> <div class="cotton"></div> <div class="cotton"></div> <canvas id="preview" class="doll"></canvas> </div> <canvas id="silhouette" class="doll"></canvas> <div class="buttons" id="default-buttons"> <button id="default-to-preview">きがえる</button> </div> <div class="buttons" id="preview-buttons"> <button id="preview-to-waiting" class="ok">きがえてみる</button> <button id="preview-to-default" class="cancel">やっぱりやめる</button> </div> <div class="buttons" id="changed-buttons"> <button id="changed-to-default" class="ok">これにきめる</button> <button id="cahnged-to-preview" class="cancel">えらびなおす</button> </div> <div class="buttons" id="sex-buttons"> <button id="as-male">男の子</button> <button id="as-female">女の子</button> </div> <div id="overlay"></div> /* ========================================================================== */ /* リセット */ html,body,section,nav,article,aside,h1,h2,h3,h4,h5,h6,header,footer,address,p,pre,blockquote,ol,ul,li,dl,dt,dd,figure,figcaption,div,span,ins,del,img,embed,object,video,audio,source,track,canvas,table,caption,colgroup,col,tbody,thead,tfoot,tr,td,th,form,fieldset,legend,label { font-size:inherit; margin:0; padding:0; } /* ========================================================================== */ /* 基本設定 */ body { background:#4dac27; color:#000; font-size:12px; font-family:"Hiragino Maru Gothic Pro","Meiryo","MS Gothic",fantasy; overflow:hidden; } /* ========================================================================== */ /* ボタン */ button { border:0; font-size:16px; font-family:"Hiragino Maru Gothic Pro","Meiryo","MS Gothic",fantasy; margin:0 0.2em; padding:0.2em 1em; line-height:1; cursor:pointer; -moz-border-radius:0.5em; -webkit-border-radius:0.5em; border-radius:0.5em; -moz-box-shadow: 0 0 1px rgba(0,0,0,0.5), inset 0 2px 2px rgba(255,255,255,0.5), inset 0 -2px 2px rgba(0,0,0,0.5); -webkit-box-shadow: 0 0 1px rgba(0,0,0,0.5), inset 0 2px 2px rgba(255,255,255,0.5), inset 0 -2px 2px rgba(0,0,0,0.5); box-shadow: 0 0 1px rgba(0,0,0,0.5), inset 0 2px 2px rgba(255,255,255,0.5), inset 0 -2px 2px rgba(0,0,0,0.5); } button:active { -moz-box-shadow: 0 0 1px rgba(0,0,0,0.5), inset 0 -2px 2px rgba(128,128,128,0.5), inset 0 2px 2px rgba(0,0,0,0.5); -webkit-box-shadow: 0 0 1px rgba(0,0,0,0.5), inset 0 -2px 2px rgba(128,128,128,0.5), inset 0 2px 2px rgba(0,0,0,0.5); box-shadow: 0 0 1px rgba(0,0,0,0.5), inset 0 -2px 2px rgba(128,128,128,0.5), inset 0 2px 2px rgba(0,0,0,0.5); } button::-moz-focus-inner { padding:0 !important; border:0 !important; } button { background:#cfc; } button:hover { background:#9f9; } button:active { background:#9c9; } button.ok { background:#fcc; } button.ok:hover { background:#f99; } button.ok:active { background:#c99; } button.cancel { background:#ccf; } button.cancel:hover { background:#99f; } button.cancel:active { background:#99c; } /* ========================================================================== */ /* pigg表示部分 */ .doll { width:133px; height:192px; } /* -------------------------------------------------------------------------- */ /* アニメーション１ */ @-webkit-keyframes shiver { 0% { -webkit-transform:translate( 0px, 0px); } 25% { -webkit-transform:translate(-1px, 0px); } 50% { -webkit-transform:translate( 0px, 1px); } 75% { -webkit-transform:translate( 1px, 0px); } 100% { -webkit-transform:translate( 0px, 0px); } } .shiver { -webkit-transform-origin:center center; -webkit-animation-iteration-count: infinite; -webkit-animation-duration: 0.1s; -webkit-animation-timing-function: linear; -webkit-animation-name: shiver; } /* -------------------------------------------------------------------------- */ /* アニメーション２ */ @-webkit-keyframes hesitate { 0% { -webkit-transform:skew(0, 0deg) scale( 1,1); } 25% { -webkit-transform:skew(0, 3deg) scale(0.95,1); } 50% { -webkit-transform:skew(0, 0deg) scale( 1,1); } 75% { -webkit-transform:skew(0,-3deg) scale(0.95,1); } 100% { -webkit-transform:skew(0, 0deg) scale( 1,1); } } .hesitate { -webkit-transform-origin:center bottom; -webkit-animation-iteration-count: infinite; -webkit-animation-duration: 2s; -webkit-animation-timing-function: linear; -webkit-animation-name: hesitate; } /* ========================================================================== */ /* 基本的なレイアウト */ #floor { z-index:10; position:fixed; left:4em; right:4em; top:4em; bottom:4em; } #current { z-index:200; position:fixed; right:50%; bottom:50%; margin:0 -66px -96px 0; opacity:0; visibility:hidden; } #items { z-index:12; position:absolute; padding-right:0; right:35%; bottom:50%; width:60%; height:45%; } #cloud { z-index:200; position:fixed; right:0px; bottom:0px; width:300px; height:380px; opacity:0; visibility:hidden; } #preview { z-index:210; position:fixed; right:135px; bottom:195px; background:#fff; width:93px; height:134px; } #silhouette { z-index:200; position:fixed; right:50%; bottom:50%; margin:0 -66px -96px 0; opacity:0; visibility:hidden; } .buttons { z-index:300; position:fixed; left:0; width:100%; bottom:0; text-align:center; padding:1em 0; opacity:0; visibility:hidden; } #sex-buttons { left:auto; right:1em; top:0; width:auto; text-align:left; } #overlay { z-index:1000; position:fixed; left:0; right:0; top:0; bottom:0; /* background:#4dac27;*/ background:#000; } /* ========================================================================== */ /* 背景 */ #room { box-shadow:inset 4px 4px 8px rgba(0,0,0,0.5); -moz-border-radius:1em; -webkit-border-radius:1em; border-radius:1em; } #floor { overflow:hidden; background:#631; -moz-border-radius:1em; -webkit-border-radius:1em; border-radius:1em; } #left-wall { z-index:11; position:absolute; left:0; bottom:60%; width:60%; height:50%; background:#edc; -moz-transform-origin:right bottom; -webkit-transform-origin:right bottom; transform-origin:right bottom; -moz-transform:skew(0deg,-15deg); -webkit-transform:skew(0deg,-15deg); transform:skew(0deg,-15deg); } #right-wall { z-index:11; position:absolute; left:60%; bottom:60%; width:42%; height:50%; background:#fed; -moz-transform-origin:left bottom; -webkit-transform-origin:left bottom; transform-origin:left bottom; -moz-transform:skew(0deg,25deg); -webkit-transform:skew(0deg,25deg); transform:skew(0deg,25deg); } #backyard { position:absolute; left:0; top:0; width:100%; height:40%; background:#987; -moz-border-radius:1em; -webkit-border-radius:1em; border-radius:1em; } /* ========================================================================== */ /* 現在状態くん */ #current { -moz-transform-origin:right bottom; -webkit-transform-origin:right bottom; transform-origin:right bottom; } /* ========================================================================== */ /* アイテムの陳列 */ #items { padding-right:70%; -moz-transform-origin:right bottom; -webkit-transform-origin:right bottom; transform-origin:right bottom; -moz-transform:skew(0deg,-15deg); -webkit-transform:skew(0deg,-15deg); transform:skew(0deg,-15deg); } #items-menu > li { list-style:none; display:inline-block; background:#ccc; height:1.4em; line-height:1.4; padding:0 1em; margin:0 1em 1em 0; cursor:pointer; -moz-border-radius:0.7em; -webkit-border-radius:0.7em; border-radius:0.7em; -moz-box-shadow:-3px -3px 0 rgba(0,0,0,0.2); -webkit-box-shadow:-3px -3px 0 rgba(0,0,0,0.2); box-shadow:-3px -3px 0 rgba(0,0,0,0.2); } #items > ul.list { position:absolute; left:0; top:3em; display:none; } #items > ul.list > li { list-style:none; display:block; margin:0.2em; float:left; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; } #items > ul.list > li > img, #items > ul.list > li > p { display:block; margin:0 auto; -moz-transform-origin:left bottom; -webkit-transform-origin:left bottom; transform-origin:left bottom; -moz-transition:all 1s ease; -webkit-transition:all 1s ease; transition:all 1s ease; } #items > ul.list > li:hover > img, #items > ul.list > li:hover > p { -moz-transform:skew(0,15deg); -webkit-transform:skew(0,15deg); transform:skew(0,15deg); -moz-transition:all 0.2s ease; -webkit-transition:all 0.2s ease; transition:all 0.2s ease; } #items.total > ul.total, #items.top > ul.top, #items.bottom > ul.bottom, #items.foot > ul.foot, #items.accessory > ul.accessory, #items.gadget > ul.gadget { display:block; } #floor.M ul.F { display:none; } #floor.F ul.M { display:none; } /* ========================================================================== */ /* 吹出し */ @-webkit-keyframes cloud-cotton { 0% { -webkit-transform:scale(1.0, 1.0); } 25% { -webkit-transform:scale(0.9, 0.9); } 75% { -webkit-transform:scale(1.1, 1.1); } 100% { -webkit-transform:scale(1.0, 1.0); } } #cloud { } #cloud > div.cotton { position:absolute; background:#fff; width:70px; height:70px; -moz-border-radius:35px; -webkit-border-radius:35px; border-radius:35px; -moz-box-shadow:0 0 4px 4px #fff; -webkit-box-shadow:0 0 4px 4px #fff; box-shadow:0 0 4px 4px #fff; -moz-transform-origin:center center; -webkit-transform-origin:center center; transform-origin:center center; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -webkit-animation-name: cloud-cotton; } #cloud > div.cotton:nth-child(1) { right:130px; bottom:170px; } #cloud > div.cotton:nth-child(2) { right:100px; bottom:180px; } #cloud > div.cotton:nth-child(3) { right: 90px; bottom:240px; } #cloud > div.cotton:nth-child(4) { right:110px; bottom:280px; } #cloud > div.cotton:nth-child(5) { right:160px; bottom:290px; } #cloud > div.cotton:nth-child(6) { right:200px; bottom:270px; } #cloud > div.cotton:nth-child(7) { right:210px; bottom:220px; } #cloud > div.cotton:nth-child(8) { right:180px; bottom:170px; } #cloud > div.cotton:nth-child(9) { width:20px; height:20px; right:145px; bottom:135px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; } #cloud > div.cotton:nth-child(10) { width:15px; height:15px; right:135px; bottom:110px; -moz-border-radius:7px; -webkit-border-radius:7px; border-radius:7px; } #cloud > div.cotton:nth-child(11) { width:10px; height:10px; right:120px; bottom:90px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; } #cloud > div.cotton:nth-child( 1) { -webkit-animation-duration:7.8s; } #cloud > div.cotton:nth-child( 2) { -webkit-animation-duration:7.2s; } #cloud > div.cotton:nth-child( 3) { -webkit-animation-duration:6.0s; } #cloud > div.cotton:nth-child( 4) { -webkit-animation-duration:6.9s; } #cloud > div.cotton:nth-child( 5) { -webkit-animation-duration:5.7s; } #cloud > div.cotton:nth-child( 6) { -webkit-animation-duration:5.4s; } #cloud > div.cotton:nth-child( 7) { -webkit-animation-duration:8.4s; } #cloud > div.cotton:nth-child( 8) { -webkit-animation-duration:6.3s; } #cloud > div.cotton:nth-child( 9) { -webkit-animation-duration:5.1s; } #cloud > div.cotton:nth-child(10) { -webkit-animation-duration:6.6s; } #cloud > div.cotton:nth-child(11) { -webkit-animation-duration:7.5s; } /* ========================================================================== */ /* 性別変更ボタン */ #as-male { color:#fff; background:#00f; } #as-male:hover { background:#66f; } #as-female { color:#fff; background:#e02; } #as-female:hover { background:#e62; } /* ========================================================================== */ /* シーンごとの設定 */ /* -------------------------------------------------------------------------- */ /* Default */ body.default #current, body.default #default-buttons, body.default #sex-buttons { opacity:1; visibility:visible; -moz-transition:all 1s ease; -webkit-transition:all 1s ease; transition:all 1s ease; } body.default #items { -moz-transition:all 1s ease-out; -webkit-transition:all 1s ease-out; transition:all 1s ease-out; } body.default #cloud { opacity:0; visibility:hidden; -moz-transition:all 0.5s ease; -webkit-transition:all 0.5s ease; transition:all 0.5s ease; } body.default #preview-buttons, body.default #changed-buttons { opacity:0; visibility:hidden; } body.default #overlay { opacity:0; visibility:hidden; -moz-transition:all 1s linear; -webkit-transition:all 1s linear; transition:all 1s linear; } /* -------------------------------------------------------------------------- */ /* Preview */ body.preview #current { opacity:1; visibility:visible; right:0; bottom:0; margin:0 -10px -50px 0; -moz-transition:all 1s ease; -webkit-transition:all 1s ease; transition:all 1s ease; } body.preview #items { padding-right:0; -moz-transition:all 1s ease-out 0.5s; -webkit-transition:all 1s ease-out 0.5s; transition:all 1s ease-out 0.5s; } body.preview #cloud, body.preview #preview-buttons { opacity:1; visibility:visible; -moz-transition:all 1s ease 1s; -webkit-transition:all 1s ease 1s; transition:all 1s ease 1s; } body.preview #default-buttons, body.preview #changed-buttons, body.preview #sex-buttons { opacity:0; visibility:hidden; -moz-transition:all 1s ease; -webkit-transition:all 1s ease; transition:all 1s ease; } body.preview #overlay { opacity:0; visibility:hidden; -moz-transition:all 1s linear; -webkit-transition:all 1s linear; transition:all 1s linear; } /* -------------------------------------------------------------------------- */ /* Waiting */ body.waiting #current { opacity:1; visibility:visible; -moz-transition:all 1s ease; -webkit-transition:all 1s ease; transition:all 1s ease; } body.waiting #items { opacity:1; visibility:visible; } body.waiting #cloud { opacity:0; visibility:hidden; -moz-transition:all 0.5s ease; -webkit-transition:all 0.5s ease; transition:all 0.5s ease; } body.waiting #overlay { opacity:1; visibility:visible; -moz-transition:all 1s linear; -webkit-transition:all 1s linear; transition:all 1s linear; } /* -------------------------------------------------------------------------- */ /* Standby */ body.standby #current { visible:hidden; -moz-transform-origin:center center; -webkit-transform-origin:center center; transform-origin:center center; -moz-transform:scale(0,1); -webkit-transform:scale(0,1); transform:scale(0,1); } body.standby #silhouette { opacity:1; visibility:visible; -moz-transform-origin:center center; -webkit-transform-origin:center center; transform-origin:center center; -moz-transition:all 0.5s ease; -webkit-transition:all 0.5s ease; transition:all 0.5s ease; } body.standby #items { opacity:1; visibility:visible; } body.standby #overlay { opacity:0.6; visibility:visible; -moz-transition:all 1s linear; -webkit-transition:all 1s linear; transition:all 1s linear; } /* -------------------------------------------------------------------------- */ /* Changed */ body.changed #current { opacity:1; visibility:visible; -moz-transform-origin:center center; -webkit-transform-origin:center center; transform-origin:center center; -moz-transition:all 0.2s ease-out 0.2s; -webkit-transition:all 0.2s ease-out 0.2s; transition:all 0.2s ease-out 0.2s; } body.changed #silhouette { opacity:1; visibility:visible; -moz-transform-origin:center center; -webkit-transform-origin:center center; transform-origin:center center; -moz-transform:scale(0,1); -webkit-transform:scale(0,1); transform:scale(0,1); -moz-transition:all 0.2s ease-in; -webkit-transition:all 0.2s ease-in; transition:all 0.2s ease-in; } body.changed #items { opacity:1; visibility:visible; } body.changed #changed-buttons { opacity:1; visibility:visible; -moz-transition:all 0.5s ease 0.4s; -webkit-transition:all 0.5s ease 0.4s; transition:all 0.5s ease 0.4s; } body.changed #overlay { opacity:0; visibility:hidden; -moz-transition:all 0.1s linear; -webkit-transition:all 0.1s linear; transition:all 0.1s linear; }

Play on jsdo.it games
Share
Embed
QR
Tag
Download

Complete!

Description どんなゲームですか？

Control Device

	スマートフォンコントローラー jsdo.it WebSocket Controller»
	マウス
	キーボード
	タッチデバイス

Fullscreen

有効
無効

jsdo.it games から削除する Submit

style

Design view
Code view

code

<script type="text/javascript" src="http://jsdo.it/blogparts/gprL/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/gct256/gprL" title="kisekae / forked from: pigg">kisekae / forked from: pigg - jsdo.it - share JavaScript, HTML5 and CSS</a></p>

QR Code