JAVASCRIPT#77 - 탑다운 1부

관리 메뉴

도드넷

JAVASCRIPT#77 - 탑다운 1부 본문

창고/JS KING 포니 [중단]

JAVASCRIPT#77 - 탑다운 1부

도드! 2016. 8. 2. 10:24

Big things have small beginnings...

JAVASCRIPT#77 - 탑다운 1부

1. 게임의 시작

$("#startButton").click(function() {
gf.startGame(initialize);
});

스타트 버튼이라는 요소를 클릭하면 gf.startGame 함수가 initialize라는 파라미터와 함께 시작된다.

2. gf.startGame 과 initialize 함수

gf.startGame = function(endCallback, progressCallback) {
    // 1. 이미지 배열과 프리로드
    var images = [];
    var total = gf.imagesToPreload.length;
    for (var i = 0; i < total; i++) {
        var image = new Image();
        images.push(image);
        image.src = gf.imagesToPreload[i];
    }
    var preloadingPoller = setInterval(function() {
        var counter = 0;
        var total = gf.imagesToPreload.length;
        for (var i = 0; i < total; i++) {
            if (images[i].complete) {
                counter++;
            }
        }
        if (counter == total) {
            // 2. 프리로드가 완료됬을시, 콜백(initialize)과 주 반복문(refreshGame) 실행 시작.
            clearInterval(preloadingPoller);
            endCallback();
            setInterval(gf.refreshGame, gf.baseRate);
            gf.time = (new Date()).getTime();
        } else {
            if (progressCallback) {
                count++;
                progressCallback((count / total) * 100);
            }
        }
    }, 100);
};

ㄴinitialize 에서 사용된 함수들

1. gf.addGroup

// 1. 그룹 프래그맨트 정의
gf.groupFragment = $("<div class='gf_group' style='position: absolute; overflow: visible;'></div>");

// 2. 그룹 생성 함수
gf.addGroup = function(parent, divId, options)
{
    // 2-1. 옵션 합치기
    var options = $.extend({
        x: 0,
        y: 0,
        flipH: false,
        flipV: false,
        rotate: 0,
        scale: 1
    }, options);

    // 2-2. 그룹 DOM 객체 생성.
    var group = gf.groupFragment.clone().css({
            left:   options.x,
            top:    options.y}).attr("id",divId).data("gf",options);

    // 2-3. 해당 그룹 DOM 화면에 더하기
    parent.append(group);

    return group;
}

2. gf.ImportTiled

PASS.. 2부에서 다뤄봄!

gf.importTiled = function(url, parent, divIdPrefix){
    var animations = [];
    var tilemaps = [];

    $.ajax({
        url: url,
        async: false,
        dataType: 'json',
        success: function(json){
            var height = json.height;
            var width = json.width;
            var tileHeight = json.tileheight;
            var tileWidth = json.tilewidth;

            var layers = json.layers;
            var usedTiles = [];
            var animationCounter = 0;
            var tilemapArrays = [];

            // detection which animations we need to generate
            // and converting the tiles array indexes to the new ones
            for (var i=0; i < layers.length; i++){
                if(layers[i].type === "tilelayer"){
                    var tilemapArray = new Array(height);
                    for (var j=0; j<height; j++){
                        tilemapArray[j] = new Array(width);
                    }
                    for (var j=0; j < layers[i].data.length; j++){
                        var tile = layers[i].data[j];
                        if(tile === 0){
                            tilemapArray[Math.floor(j / width)][j % width] = 0;
                        } else {
                            if(!usedTiles[tile]){
                                animationCounter++;
                                usedTiles[tile] = animationCounter;
                                animations.push(new gf.animation({
                                    url: json.tilesets[0].image,
                                    offsetx: ((tile-1) % Math.floor(json.tilesets[0].imagewidth / tileWidth)) * tileWidth,
                                    offsety: Math.floor((tile-1) / Math.floor(json.tilesets[0].imagewidth / tileWidth)) * tileHeight
                                }));
                            }
                            tilemapArray[Math.floor(j / width)][j % width] = usedTiles[tile];
                        }
                    }
                    tilemapArrays.push(tilemapArray);
                }
            }
            // adding the tilemaps
            for (var i=0; i<tilemapArrays.length; i++){
                tilemaps.push(gf.addTilemap(parent, divIdPrefix+i, {
                    x:          0,
                    y:          0,
                    tileWidth: tileWidth,
                    tileHeight: tileHeight,
                    width:      width,
                    height:     height,
                    map:        tilemapArrays[i],
                    animations: animations
                }));
            }
        }
    });

    return {
        animations: animations,
        tilemaps: tilemaps
    }
}

3. gf.addSprite

// 1. 스프라이트 프래그맨트 정의.
gf.spriteFragment = $("<div class='gf_sprite' style='position: absolute; overflow: hidden;'></div>");

// 2. 스프라이트 생성 함수.
gf.addSprite = function(parent, divId, options)
{
    // 2-1. 옵션 합치기.
    var options = $.extend({
        x: 0,
        y: 0,
        width: 64,
        height: 64,
        flipH: false,
        flipV: false,
        rotate: 0,
        scale: 1
    }, options);

    // 2-2. 스프라이트 DOM 객체 생성.
    var sprite = gf.spriteFragment.clone().css({
            left:   options.x,
            top:    options.y,
            width: options.width,
            height: options.height}).attr("id",divId).data("gf",options);

    // 2-3. 해당 스프라이트 화면에 더하기.
    parent.append(sprite);

    // 2-4. 해당 스프라이트 반환.
    return sprite;
}

4. gf.setAnimation

// 0. div 프레임 설정 함수
gf.setFrame = function(div, animation) {
    div.css("backgroundPosition", "" + (-animation.currentFrame * animation.width - animation.offsetx) + "px "+(-animation.offsety)+"px");
}

// 1. 애니메이션 배열 선언
gf.animations = [];

// 2. 애니메이션 설정 함수
gf.setAnimation = function(div, animation, loop, callback){

    // 2-1. 입력받은 파라미터 바탕으로 animate 객체 생성.
    var animate = {
        animation: $.extend({}, animation),
        div: div,
        loop: loop,
        callback: callback,
        counter: 0
    }

    // 2-2 . 해당 div url 프로퍼티 설정.
    if(animation.url){
        div.css("backgroundImage","url('"+animation.url+"')");
    }

    // 2-3. 해당div의 존재여부 기본값으로 거짓 설정
    var divFound = false;

    // 2-4. 애니메이션 배열 검사해서 해당 div가 존재하는지 검사
    for (var i = 0; i < gf.animations.length; i++) {

        // 2-4-1. 만약 존재할경우 애니메이션 변경
        if(gf.animations[i].div.is(div)){
            divFound = true;
            gf.animations[i] = animate;
        }
    }

    // 2-5. 존재하지 않을경우 애니메이션 추가
    if(!divFound) {
        gf.animations.push(animate);
    }

    // 2-6. 해당 div프레임을 애니메이션으로 설정
    gf.setFrame(div, animation);
}

5. NPC 생성 함수

    // 1. NPC 생성함수 [파라미터 : 이름 텍스트 콘솔]
    var NPC = function(name, text, console)
    {
        // 1-1. 현재 텍스트의 인덱스를 정의 하는변수 current 설정.
        var current = 0;

        // 1-2. getText 함수 정의
        this.getText = function()
        {
            // 1-2-1. text 배열의 길이가 카운터와 같을경우 끝냄
            if(current === text.length){
                current = 0;
                return "[end]";
            }

            // 1-2-2. 이름과 현재 텍스트 반환, current 값 증가
            return name + ": " + text[current++];
        };

        // 1-3.dialog 함수 정의
        this.dialog = function(){
            // 1-3-1. console 이라는 DOM객체의 내용을 getText로 가져온 내용으로 설정.
            console.html(this.getText());
        }
    }

6. Enemy 생성 함수

    // 1. Enemy 생성함수 [파라미터 : 디펜드 모디파이어, 라이프]
    var Enemy = function(defendModifier, life) {

        // 1-1. defend 함수 정의
        this.defend = function(){

            // 1-1-1. 랜덤 소수를 반환해서 6을 곱한뒤 반올림한뒤 디펜드 모디파이어와 더해서 반환
            return Math.round(Math.random() * 6) + defendModifier;
        }

        // 1-2. kill 함수 정의
        this.kill = function(value){

            //1-2-1. 라이프에서 밸류값을 뺌 (데미지를 입힘)
            life -= value;

            //1-2-2. 만약 라이프값이 0이랑 같거나 낮아질경우 상태를 dead로 만들고 참을 반환
            if (life <= 0){
                state = "dead";
                return true;
            }

            // 평소에는 거짓을 반환
            return false;
        }
    }

미스테리1.

npcs[npcs.length-1].object.div = npcs[npcs.length-1].div;

var A_GROUP = [];
var WTF = function()
{
console.log("nigga whaaaat?");
}

A_GROUP.push({A: $("#mygame"), B: new WTF});

A_GROUP[A_GROUP.length - 1].B.nigggggaaaaa = 23;

console.log(A_GROUP[0].B.nigggggaaaaa);

결과::

결론::

1) push 할때 불러도 함수 호출이 발생하는 구나.

2) push된 객체의 B값에 저장된 WTF 객체에 사실 niggggggggga 라는 변수가 없으나 위와같이 지정할경우

자동으로 생성되면서 값할당까지 함.

저작자표시 비영리 변경금지

'창고 > JS KING 포니 [중단]' 카테고리의 다른 글

JAVASCRIPT#78 - offset 오프셋에 관하여 (0)	2016.08.06
JAVASCRIPT#76 - 횡스크롤 101 (0)	2016.08.01
JAVASCRIPT#75 - data 메소드 data("gf")의 존재에 대하여 (0)	2016.07.29
JAVASCRIPT#74 - 자바스크립트 중력 연출하기 (0)	2016.07.26
JAVASCRIPT#73 - 자바스크립트 타일내 충돌 검출! (0)	2016.07.25

'창고/JS KING 포니 [중단]' 와 관련된 다른 글

Comments

도드넷

JAVASCRIPT#77 - 탑다운 1부 본문

JAVASCRIPT#77 - 탑다운 1부

'창고 > JS KING 포니 [중단]' 카테고리의 다른 글

티스토리툴바