A.Cihan Yamaneren
Oyun Yapımı

Oyun Yapımı

3 ay önce Okunma: 764 Örnek Çalışmalar

Bu demoyu oyun yapmayı merak edipte nereden başlayacağını bilemeyen arkadaşları teşvik etmek maksatlı hazırladım. Asıl yapmayı planladığım 2 şer bölümden oluşan 3 adet oyun var. Bunlardan ilki Captain Tsubasa olacak. Grafiker arkadaş çizimlerine başladı. Tahmini 1 yada 1 buçuk ay sonra videolu bir şekilde javascript ile sıfırdan Captain Tsubasa oyununu yapacağım. Ardından RPG oyunlara örnek olması açısından Pokemon oyununu yapacağım. Ve bunları ücretsiz indirilip incelenebilir şekilde sunacağım.
Bu demoyuda videolu ders olarak hazırlıyorum. En yakın zamanda videoları ekleyeceğim. Şimdilik sadece kodları paylaşıyorum. İndirme linki ile indirip inceleyebilir, üzerinde çalışabilirsiniz.
Merak ettiğiniz veya anlamadığınız hususları yorum kısmına yazarak sorabilirsiniz.

#1 ANİMASYON MOTORU

var Ani = {
    baseRate: 30,
    time: 0
};

Ani.animations = [];
Ani.imagesToPreload = [];
Ani.spriteFragment = $("<div class='ani_sprite'></div>");

Ani.animation = function ($options) {

    var _defaultOptions = {
        url: false,
        width: 32,
        numberOfFrames: 1,
        currentFrame: 0,
        rate: 1,
        offsetx: 0,
        offsety: 0
    };

    $.extend(this, _defaultOptions, $options);

    if ($options.rate) {
        this.rate = Math.round(this.rate / Ani.baseRate);
    }

    if (this.url) {
        Ani.addImage(this.url);
    }

};

Ani.setFrame = function ($div, $animation) {
    $div.css("backgroundPosition", (-$animation.currentFrame * $animation.width - $animation.offsetx) + "px " + (-$animation.offsety) + "px");
};

Ani.setAnimation = function ($div, $animation, $loop, $callback) {

    var _animate = {
        animation: $.extend({}, $animation),
        div: $div,
        loop: $loop,
        callback: $callback,
        counter: 0
    };

    if ($animation.url) {
        $div.css("backgroundImage", "url('" + $animation.url + "')");
    }

    var divFound = false;

    for (var i = 0; i < Ani.animations.length; i++) {
        if (Ani.animations[i].div.is($div)) {
            divFound = true;
            Ani.animations[i] = _animate;
        }
    }

    if (!divFound) {
        Ani.animations.push(_animate);
    }

    Ani.setFrame($div, $animation);

};

Ani.addSprite = function ($parent, $divId, $options) {

    var _options = $.extend({
        x: 0,
        y: 0,
        width: 32,
        height: 32,
        flipH: false,
        flipV: false,
        rotate: 0,
        scale: 1,
        zIndex: 1
    }, $options),

    _sprite = Ani.spriteFragment.clone().css({
        left: _options.x,
        top: _options.y,
        width: _options.width,
        height: _options.height,
        zIndex: _options.zIndex
    }).attr("id", $divId).data("Map", _options);

    $parent.append(_sprite);

    return _sprite;

};

Ani.addImage = function($url) {
    if ($.inArray($url, Map.imagesToPreload) < 0) {
        Ani.imagesToPreload.push();
    }
    Ani.imagesToPreload.push($url);
};

#2 SES MOTORU

var Sound = function($url) {
    var audio = document.createElement("audio"),
    type = {
            mp3: "audio/mpeg",
            ogg: "audio/ogg"
    };
    if (audio.canPlayType) {
        var source = document.createElement("source");
        source.setAttribute("src", $url);
	if ($url.match(/\.(\w+)$/i)) {
	    source.setAttribute("type", type[RegExp.$1]);
	}
	audio.appendChild(source); 
	audio.load(); 
	audio.playClip = function($loop) {
            audio.pause(); 
	    audio.preload = "auto"; 
	    audio.muted = FantastikMacera.muted; 
	    audio.currentTime = 0; 
	    audio.volume = this.volume;
	    audio.loop = $loop; 
	    audio.play();
        }; 
	audio.stopClip = function() {
            audio.pause();
	    audio.currentTime = 0; 
	    audio.loop = false;
        };
	return audio;
    }
};

#3 MAP MOTORU

var Map = {
    width: 640,
    height: 480,
    baseDiv: $()
};

Map.groupFragment = $("<div class='map_group'></div>");
Map.tilemapFragment = $("<div class='map_tilemap'></div>");
Map.callbacks = [];

Map.init = function ($options) {

    $.extend(Map, $options);

};



Map.addGroup = function ($parent, $divId, $options) {

    var _options = $.extend({
        x: 0,
        y: 0,
        flipH: false,
        flipV: false,
        rotate: 0,
        scale: 1
    }, $options),

    _group = Map.groupFragment.clone().css({
        left: _options.x,
        top: _options.y
    }).attr("id", $divId).data("Map", _options);

    $parent.append(_group);

    return _group;

};

Map.intersect = function ($a1, $a2, $b1, $b2) {
    var _i1 = Math.min(Math.max($a1, $b1), $a2);
    var _i2 = Math.max(Math.min($a2, $b2), $a1);
    return [_i1, _i2];
};

Map.tilemapBox = function ($tilemapOptions, $boxOptions) {

    var _tmX  = $tilemapOptions.x;
    var _tmXW = $tilemapOptions.x + $tilemapOptions.width * $tilemapOptions.tileWidth;
    var _tmY  = $tilemapOptions.y;
    var _tmYH = $tilemapOptions.y + $tilemapOptions.height * $tilemapOptions.tileHeight;

    var _bX  = $boxOptions.x;
    var _bXW = $boxOptions.x + $boxOptions.width;
    var _bY  = $boxOptions.y;
    var _bYH = $boxOptions.y + $boxOptions.height;

    var _x = Map.intersect(_tmX, _tmXW, _bX, _bXW);
    var _y = Map.intersect(_tmY, _tmYH, _bY, _bYH);

    return {
        x1: Math.floor((_x[0] - $tilemapOptions.x) / $tilemapOptions.tileWidth),
        y1: Math.floor((_y[0] - $tilemapOptions.y) / $tilemapOptions.tileHeight),
        x2: Math.ceil((_x[1] - $tilemapOptions.x) / $tilemapOptions.tileWidth),
        y2: Math.ceil((_y[1] - $tilemapOptions.y) / $tilemapOptions.tileHeight)
    };

};

Map.offset = function ($div) {

    var _options = $div.data("Map");
    var _x = _options.x;
    var _y = _options.y;
    var _parent = $($div.parent());

    _options = _parent.data("Map");

    while(!_parent.is(Map.baseDiv) && _options !== undefined) {
        _x += _options.x;
        _y += _options.y;
        _parent = $(_parent.parent());
        _options = _parent.data("Map");
    }

    return {x: _x, y: _y};

};

Map.addTilemap = function ($parent, $divId, $options) {

    var _options = $.extend({
        x: 0,
        y: 0,
        tileWidth: 32,
        tileHeight: 32,
        width: 0,
        height: 0,
        map: [],
        animations: [],
        logic: false
    }, $options);

    var _tilemap = Map.tilemapFragment.clone().css({
            zIndex: _options.zIndex
    }).attr("id", $divId).data("Map", _options);

    if (!_options.logic) {
        var _offset = Map.offset($parent);
        var _visible = Map.tilemapBox(_options, {
            x: -_options.x - _offset.x,
            y: -_options.x - _offset.y,
            width: Map.baseDiv.width(),
            height: Map.baseDiv.height()
        });

        _options.visible = _visible;

        for (var i = _visible.y1; i < _visible.y2; i++) {
            for (var j = _visible.x1; j < _visible.x2; j++) {
                var _animationIndex = _options.map[i][j];

                if (_animationIndex > 0) {

                    var _tileOptions = {
                        x: _options.x + j * _options.tileWidth,
                        y: _options.y + i * _options.tileHeight,
                        width: _options.tileWidth,
                        height: _options.tileHeight
                    };

                    var _tile = Ani.spriteFragment.clone().css({
                        left: _tileOptions.x,
                        top: _tileOptions.y,
                        width: _tileOptions.width,
                        height: _tileOptions.height
                    }).addClass("map_line_" + i).addClass("map_column_" + j).data("Map", _tileOptions);

                    Ani.setAnimation(_tile, _options.animations[_animationIndex-1]);

                    _tilemap.append(_tile);

                }

            }
        }

    }

    $parent.append(_tilemap);

    return _tilemap;

};

Map.importTilemap = function ($url, $parent, $divIdPrefix) {

    var _animations = [];
    var _tilemaps = [];

    $.getJSON($url, function (json) {

        var _tilesetGID = [];
        for (var i = 0; i < json.tilesets.length; i++) {
            _tilesetGID[i] = json.tilesets[i].firstgid;
        }

        var _getTilesetIndex = function ($index) {

            var _i = 0;

            while ($index >= _tilesetGID[_i] && _i < _tilesetGID.length) {
                _i++;
            }

            return _i-1;

        };

        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 = [];

        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 (_layers[i].name === "logic") {
                        _tilemapArray[Math.floor(j / _width)][j % _width] = _tile - _tilesetGID[_getTilesetIndex(_tile)] + 1;
                    } else {
                        if (!_usedTiles[_tile]) {

                            _animationCounter++;
                            _usedTiles[_tile] = _animationCounter;
                            _animations.push(new Ani.animation({
                                url: json.tilesets[_getTilesetIndex(_tile)].image,
                                offsetx: ((_tile - 1) % Math.floor(json.tilesets[_getTilesetIndex(_tile)].imagewidth / _tileWidth)) * _tileWidth,
                                offsety: Math.floor((_tile - 1) / Math.floor(json.tilesets[_getTilesetIndex(_tile)].imagewidth / _tileWidth)) * _tileHeight
                            }));
                        }
                        _tilemapArray[Math.floor(j / _width)][j % _width] = _usedTiles[_tile];
                    }

                }

                _tilemapArrays.push(_tilemapArray);

            }
        }

        for (var i = 0; i < _tilemapArrays.length; i++) {
            _tilemaps.push(Map.addTilemap($parent, $divIdPrefix + i, {
                x: 0,
                y: 0,
                tileWidth: _tileWidth,
                tileHeight: _tileHeight,
                width: _width,
                height: _height,
                map: _tilemapArrays[i],
                animations: _animations,
                zIndex: _layers[i].layer ? _layers[i].layer : 3,
                logic: (_layers[i].name === "logic")
            }));
        }
    });

    return {
        animations: _animations,
        tilemaps: _tilemaps
    };

};

Map.createTile = function ($div, $i, $j, $options) {

    var _animationIndex = $options.map[$i][$j];

    if (_animationIndex > 0 && $div.find(".map_line_" + $i + ".map_column_" + $j).length === 0) {

        var _tileOptions = {
            x: $options.x + $j * $options.tileWidth,
            y: $options.y + $i * $options.tileHeight,
            width: $options.tileWidth,
            height: $options.tileHeight
        };

        var _tile = Ani.spriteFragment.clone().css({
            left: _tileOptions.x,
            top: _tileOptions.y,
            width: _tileOptions.width,
            height: _tileOptions.height
        }).addClass("map_line_" + $i).addClass("map_column_" + $j).data("Map", _tileOptions);

        Ani.setAnimation(_tile, $options.animations[_animationIndex-1]);

        $div.append(_tile);

    }

};

Map.updateVisibility = function ($div) {

    var _options = $div.data("Map");

    if (!_options.logic) {

        var _oldVisibility = _options.visible;
        var _parent = $div.parent();
        var _offset = Map.offset($div);
        var _newVisibility = Map.tilemapBox(_options, {
            x: -_offset.x,
            y: -_offset.y,
            width: Map.baseDiv.width(),
            height: Map.baseDiv.height()
        });   

        if (_oldVisibility.x1 !== _newVisibility.x1 ||
            _oldVisibility.x2 !== _newVisibility.x2 ||
            _oldVisibility.y1 !== _newVisibility.y1 ||
            _oldVisibility.y2 !== _newVisibility.y2) {

            $div.detach();

            // Eski tileler siliniyor

            for(var i = _oldVisibility.y1; i < _newVisibility.y1; i++) {
                for (var j = _oldVisibility.x1; j < _oldVisibility.x2; j++) {
                    $div.find(".map_line_" + i + ".map_column_" + j).remove();
                }
            }

            for (var i = _newVisibility.y2; i < _oldVisibility.y2; i++) {
                for (var j = _oldVisibility.y1; j < _oldVisibility.x2; j++) {
                    $div.find(".map_line_" + i + ".map_column_" + j).remove();
                }
            }

            for (var j = _oldVisibility.x2; j < _newVisibility.x2; j++) {
                for (var i = _oldVisibility.y1; i < _oldVisibility.y2; i++) {
                    $div.find(".map_line_" + i + ".map_column_" + j).remove();
                }
            }

            for (var j = _newVisibility.x2; j < _oldVisibility.x2; j++) {
                for (var i = _oldVisibility.y1; i < _oldVisibility.y2; i++) {
                    $div.find(".map_line_" + i + ".map_column_" + j).remove();
                }
            }

            // Yeni tileler kuruluyor

            for (var i = _oldVisibility.y2; i < _newVisibility.y2; i++) {
                for (var j = _oldVisibility.x1; j < _oldVisibility.x2; j++) {
                    Map.createTile($div, i, j, _options);
                }
            }

            for (var i = _newVisibility.y1; i < _oldVisibility.y1; i++) {
                for (var j = _oldVisibility.x1; j < _oldVisibility.x2; j++) {
                    Map.createTile($div, i, j, _options);
                }
            }

            for (var j = _oldVisibility.x2; j < _newVisibility.x2; j++) {
                for (var i = _oldVisibility.y1; i < _oldVisibility.y2; i++) {
                    Map.createTile($div, i, j, _options);
                }
            }

            for (var j = _newVisibility.x1; j < _oldVisibility.x1; j++) {
                for (var i = _oldVisibility.y1; i < _oldVisibility.y2; i++) {
                    Map.createTile($div, i, j, _options);
                }
            }

            $div.appendTo(_parent);

        }

        _options.visible = _newVisibility;

    }

};

Map.tilemapCollide = function ($tilemap, $box) {

    var _options = $tilemap.data("Map");
    var _collisionBox = Map.tilemapBox(_options, $box);
    var _divs = [];

    for (var i = _collisionBox.y1; i < _collisionBox.y2; i++) {
        for (var j = _collisionBox.x1; j < _collisionBox.x2; j++) {
            var _index = _options.map[i][j];
            if (_index > 0) {
                if (_options.logic) {
                    _divs.push({
                        type: _index,
                        x: j * _options.tileWidth,
                        y: i * _options.tileHeight,
                        width: _options.tileWidth,
                        height: _options.tileHeight
                    });
                } else {
                    _divs.push($tilemap.find(".map_line_" + i + ".map_column_" + j));
                }
            }
        }
    }

    return _divs;

};

Map.spriteCollide = function ($sprite1, $sprite2) {

    var _option1 = $sprite1.data("Map");
    var _option2 = $sprite2.data("Map");

    var _offset1 = Map.offset($sprite1);
    var _offset2 = Map.offset($sprite2);

    var _x = Map.intersect(
         _offset1.x,
         _offset1.x + _option1.width,
         _offset2.x,
         _offset2.x + _option2.width 
    );

    var _y = Map.intersect(
         _offset1.y,
         _offset1.y + _option1.height,
         _offset2.y,
         _offset2.y + _option2.height 
    );

    if (_x[0] === _x[1] || _y[0] === _y[1]) {
        return false;
    } else {
        return true;
    }

};

Map.x = function ($div, $position) {

    if ($position !== undefined) {

        $div.css("left", $position);
        $div.data("Map").x = $position;

        if ($div.find(".map_tilemap").length > 0) {
            $div.find(".map_tilemap").each(function () {
                Map.updateVisibility($(this));
            });
        }
        if ($div.hasClass("map_tilemap")) {

            Map.updateVisibility($($div));
        }

    } else {
        return $div.data("Map").x;
    }

};

Map.y = function ($div, $position) {

    if ($position !== undefined) {

        $div.css("top", $position);
        $div.data("Map").y = $position;

        if ($div.find(".map_tilemap").length > 0) {
            $div.find(".map_tilemap").each(function () {
                Map.updateVisibility($(this));
            });
        }

        if ($div.hasClass("map_tilemap")) {
            Map.updateVisibility($($div));
        }

    } else {
        return $div.data("Map").y;
    }

};

Map.transform = function ($div, $options) {

    var _map = $div.data("Map");

    if ($options.flipH !== undefined) {
        _map.flipH = $options.flipH;
    }

    if ($options.flipV !== undefined) {
        _map.flipV = $options.flipV;
    }

    if ($options.rotate !== undefined) {
        _map.rotate = $options.rotate + "deg";
    }

    if ($options.scale !== undefined) {
        _map.scale = $options.scale;
    }

    var _factorH = _map.flipH ? -1 : 1;
    var _factorV = _map.flipV ? -1 : 1;

    $div.css("transform", "rotate(" + _map.rotate + ") scale(" + (_map.scale * _factorH) + "," + (_map.scale * _factorV) + ")");

};

Map.w = function ($div, $dimension) {

    if ($dimension) {
        $div.css("width", $dimension);
        $div.data("Map").width = $dimension;
    } else {
        if ($div.hasClass("map_tilemap")) {
            var _data = $div.data("Map");
            return _data.width * _data.tileWidth;
        } else {
            return $div.data("Map").width;
        }
    }

};

Map.h = function ($div, $dimension) {

    if ($dimension) {
        $div.css("height", $dimension);
        $div.data("Map").height = $dimension;
    } else {
        if ($div.hasClass("map_tilemap")) {
            var _data = $div.data("Map");
            return _data.height * _data.tileHeight;
        } else {
            return $div.data("Map").height;
        }
    }

};

Map.addCallback = function ($callback, $rate) {
    Map.callbacks.push({
        callback: $callback,
        rate: Math.round($rate / Ani.baseRate),
        counter: 0
    });
};

Grafik Kaynağı :Kenney Assets
Ses Dosyaları :Secret Maryo Audios
Projenin Github Sayfası :Fantastik Macera Github

Demo İndir (Toplam 100 kere indirildi)
Hazırlayan : Ahmed Cihan Yamaneren
  • Facebook Paylaş
  • Twitter Paylaş
  • Google+ Paylaş
  • Linkedin Paylaş
  • Puan ver :
  • html5
  • css3
  • javascript
  • jquery
  • jquery ile oyun yapımı
  • oyun yapımı
  • javascript ile oyun yapımı
  • mario tarzı oyun yapıyoruz
  • web tabanlı oyun
  • jquery oyun örneği
  • javascript oyun örneği
  • oyun programlama
  • jquery oyun yapımı
Yorumlar (Toplam : 2 yorum mevcut!)
BBCODE BİLGİLERİ []

bbCode Bilgileri

[b](.*?)[/b]
Bold

[u](.*?)[/u]
Underline

[i](.*?)[/i]
Italic

[code=(.*?)](.*?)[/code]
(Örn: [code=javascript] icerik [/code],[code=php] icerik [/code])

[size=(.*?)](.*?)[/size]
Font Size

[color=(.*?)](.*?)[/color]
Font Color

[url=((?:ftp|https?)://.*?)](.*?)[/url]
(Örn: [url=http://goo.gl]Google[/url])

[img](https?://.*?\.(?:jpg|jpeg|gif|png|bmp))[/img]

angel O:) veya O:-)
smile :-) veya :) veya :] veya =)
tongue :-P veya :P veya :-p veya :p veya =P
wink ;-) veya ;)
grin :-D veya :D veya =D
curly lips :3
kiss :-* veya :*
grumpy >:( veya >:-(
glasses 8-) veya 8) veya B-) veya B)
sunglasses 8-| veya 8| veya B-| veya B|
upset >:O veya >:-O veya >:o veya >:-o
confused o.O veya O.o
gasp :-O veya :O veya :-o veya :o
pacman :v
squint -_-
devil 3:}
unsure :^ veya :-^
frown :-( veya :( veya :[ veya =(
cry :'(
heart <3
kiki ^_^
    Güvenlik Kodu
    Kalan karakter sayısı : 1250
    • Ahmed Cihan Yamaneren Ahmed Cihan Yamaneren Geçen ay
      Ajax sorguları bulunduğundan appserver gibi bir yazılım kullanıp chrome ile localhost üzerinden çalıştırabilirsiniz. Veya web siteniz varsa web siteniz üzerinde çalıştırabilirsiniz.
      Puan ver :

    • ramaza kara ramaza kara Geçen ay
      ben bu oyunu indirdim ama bir türlü çaışlrıramadım hangi programla çalıştırmalıyım ve tüm dosyaları varmı oyunun acaba bana ulaşın 05515911545
      Puan ver :
    • Daha Eski Yorumlar