백괴슬라이드: 두 판 사이의 차이

리버티게임, 모두가 만들어가는 자유로운 게임
잔글편집 요약 없음
(틀:플러그인 -> 틀:플러그인X로 마이그레이션)
태그: 되돌려진 기여
1번째 줄: 1번째 줄:
   
   
{{공사중}}
{{공사중}}
{{플러그인|/플러그인|틀}}
{{플러그인X|문서=백괴슬라이드/플러그인}}
{{플러그인|사용자:BANIP/플러그인/슬라이드|틀}}
{{플러그인X|문서=사용자:BANIP/플러그인/슬라이드}}
{{플러그인|사용자:BANIP/플러그인/랭킹시스템|틀}}  
{{플러그인X|문서=사용자:BANIP/플러그인/랭킹시스템}}  
{{#css:
{{#css:
     .slideable{
     .slideable{

2023년 7월 22일 (토) 15:09 판

Crystal Clear app package games.png
이 게임은 현재 공사 중입니다!
2024년 12월 20일 16시 07분 38초까지 완성되기로 한 게임입니다.
"백괴슬라이드" 개발에 대한 문의 사항은 이곳에서 받고 있습니다. 게임 개발자에게: '<!--기획'으로 시작하는 게임 기획을 작성하시면 지정한 날짜 혹은 마지막 편집으로부터 7일 이후 개발이 중단되었을 때 게임이 일방적으로 삭제되는 것을 막을 수 있습니다.
이미 게임 기획을 작성했다면 틀 뒤에 '기획=1'을 적어 이 안내문을 지울 수 있습니다.
<div style="display:none">
 요령 => 아래 변수들의 첫번째 인자들을 내용에 맞게 자르고 붙여넣어주세요
!!!!!!!!!!!!!!!! 플러그인 정보 입력 구간 윗부분은 만지지 마시오 절대로!!!!!!!!!!!!!!!!!


{{#vardefine:name|uncyslide}}
{{#vardefine:creat|BANIP}}
{{#vardefine:version|1.1.02}}
{{#vardefine:descript|백괴슬라이드 실행}}
{{#vardefine:local|true}}
{{#vardefine:executable|true}}

{{#vardefine:code|
 // 이부부분에 코드 입력 //
<nowiki>var slideable = plugin_Slideable();
var create = slideable.create;
var execute = slideable.execute;
var dispose = slideable.dispose;

var rankingSystem = plugin_RankingSystem()("백괴슬라이드/랭킹", function(prev,next){ return Number(prev.time) - Number(next.time)});
var outputKeys = {time:"소요시간"};
var startMap = localStorage.getItem("uncySlide/startmap") || 0;
var game = {
    0: {
        center: "아래로 밀어주세요.",
        bottom: 1
    },
    1: {
        center: "오른쪽으로 밀어보세요.",
        right: 2
    },
    2: {
        center: "어디로 밀어보실래요?",
        top: 3,
        bottom: 3,
    },
    3: {
        center: "반갑습니다. <br>백괴슬라이드입니다.",
        bottom: 4,
    },
    4: {
        center: "어디로 당기고 미느냐에 따라, 게임의 결과가 달라집니다.",
        bottom: 5,
    },
    5: {
        center: "는 개뿔 이겜 시스템만든다고 그런 장황한거 만들 정신머리는 없었습니다",
        bottom: 5.1,
    },
    5.1: {
        center: "진심 힘들었습니다.",
        bottom: 5.2,
    },
    5.2: {
        center: "잘했죠?",
        bottom: 5.3,
    },
    5.3: {
        center: "위로 밀어서 칭찬하거나 아래로 밀어서 욕해주세요.",
        top: 5.4,
        bottom: 5.5,
    },
    5.4: {
        center: "감사합니다. 헤헤",
        bottom: 6,
    },
    5.5: {
        center: "흑흑.. 힘들었는데..",
        bottom: 6,
    },
    6: {
        center: "그래도 미디어위키의 틀에서 벗어난 겜인만큼 최대한 나은 경험을 선사하고자 노력했습니다. 잘부탁드립니다.",
        bottom: function(){
            localStorage.setItem("uncySlide/startmap","main");
            execute("main");
        },
    },
    main: {
        center: "<ul><li>아래: 게임시작</li><li>토론: 위</li><li>설명: 오른쪽</li></ul>",
        bottom: function(){ execute("start",{count:100,time:Date.now()}) },
        top: "debate",
        right: "i0",
    },
    i0: {
        center:"가장자리에 화살표 보이죠?",
        bottom:"i1"
    },
    i1: {
        center:"화면을 넘겨서 드래그해서 진행하는 게임이에요.",
        bottom:"i2"
    },
    i2: {
        center:"원래라면 좀 큰 스케일의 게임으로 만들고 싶었는데..",
        bottom:"i3"
    },
    i3: {
        center:"제 역량이 겜 크기에서 다 드러나네요...",
        bottom:"i4"
    },
    i4: {
        center:"아무쪼록 힘들게 만들었으니 재밌게 즐겨주세요.",
        right:"main"
    },
    debate: function(){
        location.href = "https://libertyga.me/wiki/%ED%86%A0%EB%A1%A0:%EB%B0%B1%EA%B4%B4%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C";
    },
    start: function(arg){
        function getRandomDirection(){
            switch( Math.ceil(Math.random() * 4) ){
                case 1: return "top"; break;
                case 2: return "bottom"; break;
                case 3: return "left"; break;
                case 4: return "right"; break;
            }
        }
        function getColorCode(count,maxcount){
            var code = "hsl(" + count / maxcount * 360 +",100%,70%)";
            return code
        }
        
        var count = arg.count;
        var maxcount = arg.maxcount || count;
        var time = arg.time;
        var $this = $(this);
        var timerInterval;
        var slideableItem = {
            center: function(){
                var $this = $(this);
                $this.css({
                    "background": getColorCode(count,maxcount)
                });
                
                timerInterval = setInterval(function(){
                    var overtime = (Date.now() - time) * 0.001;
                    var printableTime = overtime.toFixed(2);
                    $this.find(".counter").html(printableTime + "초");
                },5)
                
                return "<div class='counter' style='font-size:5vw;'></div><div style='font-size:20vw;'>" + count + "</div>";
            }
        };

        slideableItem[getRandomDirection()] = function(){
            clearInterval(timerInterval);
            if(count === 1) return execute("result",{count:count - 1,time:time,maxcount:maxcount});
            execute("start",{count:count - 1,time:time,maxcount:maxcount}) 
        };

        create(slideableItem);
    },
    result: function(arg){
        var maxcount = arg.maxcount || count;
        var time = ( (Date.now() - arg.time) / 1000 ).toFixed(2);
        var updateParam = {
        	time: time,
        	name: mw.config.get("wgUserName")
        };
        rankingSystem.update(updateParam,function(rankingScore,thisScore){ return rankingScore.time > thisScore.time},outputKeys);

        create({
            center: "갯수: " + maxcount + " <br/>시간: " + time + "<ul><li>왼쪽: 메인으로</li><li>오른쪽: 토론으로</li></ul>",
            left:"main",
            right:"debate",
        });
    }
}
dispose(game, startMap, {});</nowiki>
}}

!!!!!!!!!!!!!!!! 플러그인 정보 입력 구간 끝 아래는 만지지 마시오!!!!!!!!!!!!!!!!!
</div>{{#switch: {{{1|화면}}}
	|dump = 
	|화면 = {{플러그인/preset/각주}}
		<p<includeonly></includeonly>re class="script" data-name="{{#var:name}}" 
		     data-create="{{#var:creat}}" 
		     data-version="{{#var:version}}" 
		     data-descript="{{#var:descript}}" 
		     data-local="{{#var:local}}"
		     data-executable="{{#var:executable}}"
		     data-state="백괴슬라이드/플러그인">
		 {{#var:code}}
		</pre>
	|#default = 
                {{#ifeq:{{{2|틀}}}|틀|{{플러그인/알림|{{#var:name}}}}|}}
		<span class="use-script" data-name="{{#var:name}}" data-creat="{{#var:creat}}" data-version="{{#var:version}}" data-executable="{{#var:executable}}"
		 data-descript="{{#var:descript}}" data-local="{{#var:local}}" data-state="백괴슬라이드/플러그인" data-link="{{fullurl: {{#rel2abs: {{{1}}} }} }}"></span>
}}
<div style="display:none">
 요령 => 아래 변수들의 첫번째 인자들을 내용에 맞게 자르고 붙여넣어주세요
!!!!!!!!!!!!!!!! 플러그인 정보 입력 구간 윗부분은 만지지 마시오 절대로!!!!!!!!!!!!!!!!!


{{#vardefine:name|Slideable}}
{{#vardefine:creat|BANIP}}
{{#vardefine:version|1.0.21}}
{{#vardefine:descript|슬라이드 플러그인 라이브러리}}
{{#vardefine:local|true}}
{{#vardefine:executable|false}}

{{#vardefine:code|
 // 이부부분에 코드 입력 //
    //모든 키 순회
    function forEach(object, callback) {
        for (var key in object) {
            var variable = object[key];
            callback(variable, key);
        }
    }

function create(directionData) {
    function initClassName($target, data) {
        forEach(data, function(value, direction) {
            $target.find("." + direction).addClass("on");
        })
    }

    function initDOM($target, data) {
        $target[0].data = data;
        $target.find(".center").html(data.center);
        $target.find(".top.on").css("background","url('https://upload.wikimedia.org/wikipedia/commons/8/85/Arrow_top_svg.svg') no-repeat center");
        $target.find(".bottom.on").css("background","url('https://upload.wikimedia.org/wikipedia/commons/f/f2/Arrow_bottom_svg.svg') no-repeat center");
        $target.find(".left.on").css("background","url('https://upload.wikimedia.org/wikipedia/commons/4/40/Arrowleft_svg.svg') no-repeat center");
        $target.find(".right.on").css("background","url('https://upload.wikimedia.org/wikipedia/commons/e/ec/Arrow2right.svg') no-repeat center");
    }

    var slideUtil = {
        moveObject: function($this, axis) {
            var x = axis[0], y = axis[1];

            var data = $this[0].data;
            if (!data.right && x > 0) x = 0;
            if (!data.left && x < 0) x = 0;
            if (!data.top && y < 0) y = 0;
            if (!data.bottom && y > 0) y = 0;
            $this.css("transform", "translate(" + x + "px," + y + "px)");
        },
        isHideable: function($this, axis, limit) {
            var x = axis[0], y = axis[1];
            var data = $this[0].data;
            if (data.right && x > limit) return "right";
            if (data.left && x < limit * -1) return "left";
            if (data.bottom && y > limit) return "bottom";
            if (data.top && y < limit * -1) return "top";
        },
        hide: function(direction, $this) {
            function getCss(direction) {
                var css = {
                    opacity: 0.01
                };
                var interval = 50;
                switch (direction) {
                    case "left":
                        css.left = -1 * interval + "vw";
                        break;
                    case "right":
                        css.left = interval + "vw";
                        break;
                    case "bottom":
                        css.top = interval + "vh";
                        break;
                    case "top":
                        css.top = -1 * interval + "vh";
                        break;
                }

                return css;
            }

            var self = $this[0];
            var data = self.data;
            if (self.isHide === true) {
                return;
            }
            self.isHide = true;
            $this.animate(getCss(direction), {
                duration: 300,
                easing: "swing",
                start: data[direction],
                complete: function() {
                    $this.remove();
                }
            });
        }
    }

    function setEvent($target, data) {
        var util = slideUtil;
        var moveLimit = 50;

        $(".slideable").mousedown(function(e) {
            this.isMouseDown = true;
            this.startAxis = [e.clientX, e.clientY];
        })

        $(".slideable").mousemove(function(e) {
            if (this.isMouseDown) {
                event.preventDefault()
                var axis = [e.clientX, e.clientY];
                var startAxis = this.startAxis;
                var moveInterval = [axis[0] - startAxis[0], axis[1] - startAxis[1]]
                util.moveObject($(this), moveInterval);
                var hideDirection = util.isHideable($(this), moveInterval, moveLimit);
                if (hideDirection) util.hide(hideDirection, $(this));
            }
        })

        $(".slideable").mouseup(function(e) {
            this.isMouseDown = false;
        })

        function getTouchEvent(e) {
            return e.originalEvent.touches[0]
        }

        $(".slideable").on("touchstart", function(e) {
            var touch = getTouchEvent(e);

            this.isMouseDown = true;
            this.startAxis = [touch.clientX, touch.clientY];
        })

        $(".slideable").on("touchmove", function(e) {
            event.preventDefault()
            if (this.isMouseDown) {
                event.preventDefault()
                var touch = getTouchEvent(e);
                var axis = [touch.clientX, touch.clientY];
                var startAxis = this.startAxis;
                var moveInterval = [axis[0] - startAxis[0], axis[1] - startAxis[1]]
                util.moveObject($(this), moveInterval);
                var hideDirection = util.isHideable($(this), moveInterval, moveLimit);
                if (hideDirection) util.hide(hideDirection, $(this));
            }
        })

        $(".slideable").on("touchend", function(e) {
            this.isMouseDown = false;
        })

    }

    //슬라이드아이템의 방향키로 숫자 혹은 문자로 지정된 경우
    //함수로 변환
    function setExecutable(target, item){
        forEach(item,function(value,direction){
            new Promise(function(resolve, reject){
                 if(direction === "center"){
                    switch( typeof value ){
                    case "function":
                        resolve( value.bind(target)() );
                    break;
                  }
              } else {
                switch( typeof value ){
                    case "string": case "number":
                        resolve(function(){ execute(value); }.bind(target));
                    break;
                }
              }
            }).then(function(result){
                 item[direction] = result;
            })

        })
    }
    
    var $target = $(".slideable.cloneable").clone().removeClass("cloneable");
    $("body").prepend($target);
    setExecutable($target[0], directionData);
    initClassName($target, directionData);
    initDOM($target, directionData);
    setEvent($target, directionData);
}

// create는 다른 함수들에 의존하지 않음 //
var game;

function execute(number, argument) {
    dispose(game, number, argument);
}

function dispose(slideableArray, start, argument) {
    game = slideableArray;
    
    var slideableItem = slideableArray[start];
    switch (typeof slideableItem) {
        case "function":
            slideableItem(argument);
            break;
        case "object":
            create(slideableItem);
            break;
    }
}

//모바일 전체화면으로 수정
var setFullScreen = (function(){
    //window.scrollTo(0,1);
})();

return {
    create: create,
    execute: execute,
    dispose: dispose
}
}}

!!!!!!!!!!!!!!!! 플러그인 정보 입력 구간 끝 아래는 만지지 마시오!!!!!!!!!!!!!!!!!
</div>{{#switch: {{{1|화면}}}
	|dump = 
	|화면 = {{플러그인/preset/각주}}
		<p<includeonly></includeonly>re class="script" data-name="{{#var:name}}" 
		     data-create="{{#var:creat}}" 
		     data-version="{{#var:version}}" 
		     data-descript="{{#var:descript}}" 
		     data-local="{{#var:local}}"
		     data-executable="{{#var:executable}}"
		     data-state="사용자:BANIP/플러그인/슬라이드">
		 {{#var:code}}
		</pre>
	|#default = 
                {{#ifeq:{{{2|틀}}}|틀|{{플러그인/알림|{{#var:name}}}}|}}
		<span class="use-script" data-name="{{#var:name}}" data-creat="{{#var:creat}}" data-version="{{#var:version}}" data-executable="{{#var:executable}}"
		 data-descript="{{#var:descript}}" data-local="{{#var:local}}" data-state="사용자:BANIP/플러그인/슬라이드" data-link="{{fullurl: {{#rel2abs: {{{1}}} }} }}"></span>
}}
<div style="display:none">
 요령 => 아래 변수들의 첫번째 인자들을 내용에 맞게 자르고 붙여넣어주세요
!!!!!!!!!!!!!!!! 플러그인 정보 입력 구간 윗부분은 만지지 마시오 절대로!!!!!!!!!!!!!!!!!


{{#vardefine:name|RankingSystem}}
{{#vardefine:creat|BANIP}}
{{#vardefine:version|1.1.0}}
{{#vardefine:descript|랭킹시스템 라이브러리}}
{{#vardefine:local|true}}
{{#vardefine:excutable|false}}

{{#vardefine:code|
 // 이부부분에 코드 입력 //
<nowiki>
/**
  * @param 
  		{string} documentTitle 랭킹정보가 있는 문서의 제목.
  		{function} sortCallback 랭킹을 정렬할때 기준으로 사용하는 함수
  		    {any} prev 랭킹 정렬 기준으로 사용할 왼쪽의 값
  		   	{any} next 랭킹 정렬 기준으로 사용할 오른쪽의 값
  		{object} api MediaWikiapi의 인스턴스, 없어도 됨.

  	@return {Object}
  		{function} get 랭킹정보를 object형태로 획득
  		{function} update 랭킹정보 업데이트
  			{object} updateInfo 업데이트할 사용자 정보
  			{function} updateCriteria 사용자정보의 업데이트 기준
  			@param {any} rankingScore 랭킹에서 사용중인 스코어
  				   {any} thisScore 사용자 스코어
  			@return{bool} true가 반환되면 업데이트
  			{object} alternateKeys 랭킹에서 보여지는 대체 키
*/

return function(documentTitle, sortCallback, api) {
    function forEach(object, callback) {
        for (var key in object) {
            var variable = object[key];
            callback(variable, key);
        }
    }

    function getRankingJSON(rankingDoc) {
        if (!rankingDoc) return {};
        var includeOnlyString = "includeonly"
        var regexp = new RegExp("\<" + includeOnlyString + "\>(.*)\<\/" + includeOnlyString + "\>");
        var stringRanking = regexp.exec(rankingDoc)[1];
        return JSON.parse(stringRanking);
    }

    function updateDoc(rankingJSON, api, alternateKeys) {
        //alternateKeys가 반영된 개개인의 랭킹정보 획득
        function getOutputJSON(json) {
            var result = {};
            forEach(json, function(value, key) {
                key = alternateKeys[key] || key;
                result[key] = value;
            })
            return result;
        }

        //보여지는 형태의 랭킹정보 획득
        function getOutputString(json) {
            var name = json.name;
            var result = "* '''" + name + "''' : ";
            forEach(json, function(value, key) {
                if (key === "name") return;
                key = alternateKeys[key] || key;
                result += key + ": " + value + ", ";
            })
            result += "\n"
            return result
        }

        var stringRanking = JSON.stringify(rankingJSON);
        var result = "<includ" + "eonly>" + stringRanking + "</inclu" + "deonly>\n";
        result += "<onlyin" + "clude>\n";

        var rankingList = Object.entries(rankingJSON).sort(function(prev,next){
          return sortCallback(prev[1],next[1])
        }).map(function(value){
          return value[0]
        });

        rankingList.forEach(function(key) {
            var json = rankingJSON[key];
            var outputJSON = getOutputJSON(json);
            result += getOutputString(outputJSON)
        });

        result += "</only" + "include>";
        var reply = documentTitle.replace(new RegExp("\/.*"),"") + " 점수 갱신";
        api.changeDocument(documentTitle, reply, result, true);
        return result;
    }

    function updateUserScore(rankingJSON, thisScore, updateCriteria) {
        updateCriteria = updateCriteria || function(rankingScore, thisScore) {
            return rankingScore.score < thisScore.score;
        }

        var userName = thisScore.name;
        var rankingScore = rankingJSON[userName];

        if (!rankingScore || updateCriteria(rankingScore, thisScore)) {
            rankingJSON[userName] = thisScore;
        }
    }

    api = api || MediaWikiAPI();
    var userName = mw.config.get("wgUserName");
    var rankingDoc = api.getDocument(documentTitle);
    var rankingJSON = getRankingJSON(rankingDoc);

    var actions = {
        get: function() {
            return rankingJSON;
        },
        update: function(updateInfo, updateCriteria, alternateKeys) {
            rankingJSON = actions.get();
            updateUserScore(rankingJSON, updateInfo, updateCriteria);
            updateDoc(rankingJSON, api, alternateKeys);
        }
    }
    return actions;
}
</nowiki>
}}

!!!!!!!!!!!!!!!! 플러그인 정보 입력 구간 끝 아래는 만지지 마시오!!!!!!!!!!!!!!!!!
</div>{{#switch: {{{1|화면}}}
	|dump = 
	|화면 = {{플러그인/preset/각주}}
		<p<includeonly></includeonly>re class="script" data-name="{{#var:name}}" 
		     data-create="{{#var:creat}}" 
		     data-version="{{#var:version}}" 
		     data-descript="{{#var:descript}}" 
		     data-local="{{#var:local}}"
		     data-excutable="{{#var:excutable}}"
		     data-state="사용자:BANIP/플러그인/랭킹시스템">
		 {{#var:code}}
		</pre>
	|#default = 
                {{#ifeq:{{{2|틀}}}|틀|{{플러그인/알림|{{#var:name}}}}|}}
		<span class="use-script" data-name="{{#var:name}}" data-creat="{{#var:creat}}" data-version="{{#var:version}}" data-excutable="{{#var:excutable}}"
		 data-descript="{{#var:descript}}" data-local="{{#var:local}}" data-state="사용자:BANIP/플러그인/랭킹시스템" data-link="{{fullurl: {{#rel2abs: {{{1}}} }} }}"></span>
}}


로딩중...

Crystal Clear app package games.png
이 게임은 현재 공사 중입니다!
2023년 08월 06일 00시 00분 00초까지 완성되기로 한 게임입니다.
"백괴슬라이드" 개발에 대한 문의 사항은 이곳에서 받고 있습니다.
Hexahedron.svg
원개발자가 허락한 부분에 한해 누구나 편집할 수 있는 게임
이 게임은 원개발자가 허락한 부분에 한해 편집할 수 있습니다.
게임 개발에 관한 토론을 하고 싶으시다면 토론:백괴슬라이드으로 가주시길 바랍니다.
GRAC All Square.svg
이 게임은 자체 등급 심의를 바탕으로 모든 사용자가 이용할 것을 권장합니다.
등급 지정일: 2023년 7월 22일
원본 주소 "https://libertyga.me/index.php?title=백괴슬라이드&oldid=219626"