pigg

comtec

2011-03-25 17:38:18

License: MIT License

Fork: 48

Fav: 1

View: 9087

Play
Stop
Reload

Fullscreen

Smart Phone

Fork tree

Readme
JavaScript 60 lines
HTML 19 lines
CSS 51 lines

pigg
jQuery v1.4.4

//▼画像は下記URLよりダウンロードして下さい
//http://www.cyberagent.co.jp/img/media/kayac/piggitem.zip

//アイテム画像・表示位置のオブジェクト
var itemImg = {
            img:"http://adc.heteml.jp/spec/2011/pigg/item.png",
            top:"228px",
            left:"191px"
};

//アイテムをきせる/脱がす判定フラグ
var selectFlag = true;

//アイテムアイコンclickにaddItem関数をbind
$("#item").click(function(e){
    selectFunc(e.target);
});

//アイテムをきせる関数addItemを定義
function addItem(arg_additem){

//きせかえアイテム画像を追加、位置調整
    $('<img id="' + arg_additem.id + 'img" src="' + itemImg.img + '" />').appendTo($('#piggArea'));
    $('#' + arg_additem.id + 'img').css('top', itemImg.top)
                                   .css('left', itemImg.left);

//下着を非表示
    $("#piggunderwear").css('display','none');
}

//アイテムを脱がす関数cancelItemを定義
function cancelItem(arg_cancelitem){

//きせているアイテムの削除
    $("#"+arg_cancelitem.id+"img").remove();

//下着を表示
    $("#piggunderwear").css('display','block');
}

//アイテムをきせる/脱がすを選択する関数
function selectFunc(arg_select){

if(selectFlag){
      
        //addItem関数の実行
        addItem(arg_select);
      
        //フラグをfalseに変更
        selectFlag = false; 
    }else{
      
        //cancelItem関数の実行
        cancelItem(arg_select);
      
        //フラグをtrueに変更
        selectFlag = true;
    }
}

pigg

//▼画像は下記URLよりダウンロードして下さい //http://www.cyberagent.co.jp/img/media/kayac/piggitem.zip //アイテム画像・表示位置のオブジェクト var itemImg = { img:"http://adc.heteml.jp/spec/2011/pigg/item.png", top:"228px", left:"191px" }; //アイテムをきせる/脱がす判定フラグ var selectFlag = true; //アイテムアイコンclickにaddItem関数をbind $("#item").click(function(e){ selectFunc(e.target); }); //アイテムをきせる関数addItemを定義 function addItem(arg_additem){ //きせかえアイテム画像を追加、位置調整 $('<img id="' + arg_additem.id + 'img" src="' + itemImg.img + '" />').appendTo($('#piggArea')); $('#' + arg_additem.id + 'img').css('top', itemImg.top) .css('left', itemImg.left); //下着を非表示 $("#piggunderwear").css('display','none'); } //アイテムを脱がす関数cancelItemを定義 function cancelItem(arg_cancelitem){ //きせているアイテムの削除 $("#"+arg_cancelitem.id+"img").remove(); //下着を表示 $("#piggunderwear").css('display','block'); } //アイテムをきせる/脱がすを選択する関数 function selectFunc(arg_select){ if(selectFlag){ //addItem関数の実行 addItem(arg_select); //フラグをfalseに変更 selectFlag = false; }else{ //cancelItem関数の実行 cancelItem(arg_select); //フラグをtrueに変更 selectFlag = true; } }<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="content-language" content="ja" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>アメーバピグきせかえ</title> </head> <body> <div id="content"> <div id="piggArea"> <img id="pigg" src="http://adc.heteml.jp/spec/2011/pigg/pigg.png" /> <img id="piggunderwear" src="http://adc.heteml.jp/spec/2011/pigg/pigg_underwear.png" /> </div> <div id="itemArea"> <a href="#" onclick="return false"><img id="item" src="http://adc.heteml.jp/spec/2011/pigg/itemicon.png" alt="イタリアオヤジ風モテロック" /></a> </div> </div> </body> </html>body { background-color:#FFFFFF; } img{ border:0; } div,ul,li,p{ padding:0; margin:0; } div#content{ width:450px; height:450px; background-color:#FFFFFF; } div#piggArea{ width:450px; height:307px; position:relative; } div#piggArea img{ position:absolute; } img#pigg{ z-index:0; top:135px; left:165px; } img#piggunderwear{ z-index:1; top:260px; left:202px; } div#itemArea{ margin-top:15px; position:relative; } img#item{ position:absolute; left:195px; }

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/lAWC/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/comtec/specpigg" title="pigg">pigg - jsdo.it - share JavaScript, HTML5 and CSS</a></p>

QR Code