@@ -22,8 +22,6 @@ a:hover { } #information { - position:absolute; - right:10px; background-color: rgba(255,255,255,0.50); padding:10px; display:none; @@ -32,9 +30,6 @@ a:hover { } #license { - clear:both; - position:absolute; - bottom:0px; font-size: 80%; line-height:85%; padding:0.5em; @@ -93,21 +88,29 @@ li a.selected { background-color: #191A1B; } -#shadow { +#board { position:absolute; - top: 10px; + top: 0px; left: 250px; overflow:visible; } -#board { +#shadow { position:absolute; - top: 10px; + top: 21px; left: 250px; overflow:visible; } -.layer_0 { +#shadow div { + width:16px; + height:17px; + position:absolute; + display:block; + background:url('demos/images/cube_orange.png') no-repeat bottom left; +} + +#shadow .layer_0, #shadow .layer_2, #shadow .layer_4, #shadow .layer_6, #shadow .layer_8 { width:16px; height:17px; position:absolute; @@ -115,6 +118,14 @@ li a.selected { background:url('demos/images/cube_blue.png') no-repeat bottom left; } +#shadow .layer_2 { + width:16px; + height:17px; + position:absolute; + display:block; + background: none; +} + #shadow .dirt { width:16px; height:17px; @@ -128,7 +139,7 @@ li a.selected { height:17px; position:absolute; display:block; - background:url('demos/images/cube_red.png') no-repeat bottom left; + background:url('demos/images/cube_red.png') no-repeat top left; } #content { axonome.css @@ -3,7 +3,7 @@ $('#board').iso({unwalkables: ["2_2_0","2_3_0","3_2_0","4_2_0","4_3_0", "4_4_0"] $('#board').children().mouseenter(function(e) { var tile = $(e.target); - var start_x = $.fn.iso.avatar.position[0]; + var start_x = $('#board').iso.avatar.position[0]; var start_y = $.fn.iso.avatar.position[1]; var start_z = $.fn.iso.avatar.position[2]; var end_x = tile.data("xyz")[0]; demos/isometric1.html @@ -15,28 +15,88 @@ <script type="text/javascript" charset="utf-8"> $(document).ready(function(){ - var word = new Letters("axono.me",1,2,1); + var word = new Letters("axono.me",1,2,0); + var shadow = new Letters("axono.me",1,2,2); - $('#board').iso({ - unwalkables: word, + $('#shadow').iso({ + unwalkables: shadow, tile_width:16, tile_height:8, + iso_tile_height:9, max_x: 43, max_y: 9, - layers: 2} + layers:3} ); - $('#board').mouseover(function() { - $('#board .dirt').each(function() { - var move_by = parseInt(Math.random() * 5); - $(this).animate({top: '-=' + move_by}, 75).animate({top: '+=' + move_by}, 100); - }); + $('#board').iso({ + unwalkables: word, + tile_width:16, + tile_height:8, + iso_tile_height:9, + max_x: 43, + render_all: false, + max_y: 9} + ); + + var original_top = $('#board').css('top'); + var original_left = $('#board').css('left'); + var quit_it = 0; + + var tile_queue = new Array(); + $('#board .dirt').each(function() { + tile_queue.push(this); }); - $('#board').mouseout(function() { - index_count = 0; - $('#board .dirt').stop(); + function serial_bounce() { + var move_by = parseInt(Math.random() * 10)+5; + if (tile_queue.length > 0) { + $(tile_queue.shift()).animate({top: '-=' + move_by}, 50).animate({top: '+=' + move_by}, 50, function() { + serial_bounce(); + }); + } else { + return; + } + }; + + function r() { + //return parseInt(Math.random() * 100); + return 32; + } + + function explode() { + //$('#board .dirt').each(function() { + $.each(tile_queue, function() { + var id_parts = this.id.split("_"); + var tile = $(this); + //var tile = $(tile_queue.shift()); + var shadow = $('#shadow_tile_' + id_parts[2] + '_' + id_parts[3] + '_' + 2); + var trajectories = ["north", "south", "east", "west"]; + + + switch(trajectories[parseInt(Math.random() * 4)]) { + case "north": + tile.animate({top: '-=' + 16}).animate({top: '+=' + 16}); + break; + case "west": + tile.animate({top: '-=' + 32, left: '-=' + 32}).animate({top: '+=' + 32, left: '+=' + 32}); + shadow.animate({top: '-=' + 16, left: '-=' + 48}).animate({top: '+=' + 16, left: '+=' + 48}); + break; + case "east": + tile.animate({top: '-=' + 32, left: '+=' + 32}).animate({top: '+=' + 32, left: '-=' + 32}); + shadow.animate({top: '-=' + 8, left: '+=' + 16}).animate({top: '+=' + 8, left: '-=' + 16}); + break; + case "south": + tile.animate({top: '-=' + 0, left: '-=' + 16}).animate({top: '+=' + 0, left: '+=' + 16}); + shadow.animate({top: '-=' + 4, left: '+=' + 4}).animate({top: '+=' + 4, left: '-=' + 4}); + break; + } + }); + }; + + $('#board').mouseenter(function() { + explode(); }); + //serial_bounce(); }); </script> index.html @@ -1,28 +1,188 @@ +var node_trap = new Array(); (function($) { $.fn.iso = function(options) { - $.extend($.fn.iso.defaults, options); - var defaults = $.fn.iso.defaults; - $.fn.iso.grid = new Grid(defaults.max_x,defaults.max_y,defaults); - - for (var i=0; i < defaults.unwalkables.length; i++) { - $.fn.iso.grid.nodes[defaults.unwalkables[i]].walkable = false; - }; - - $.fn.iso.nodes = $.fn.iso.grid.nodes; - - $.fn.iso.avatars = new Array(); - for (var i=0; i < defaults.avatar_count; i++) { - $.fn.iso.avatars.push(new Avatar($.fn.iso.grid)); - }; - - $.fn.iso.avatar = $.fn.iso.avatars[0]; + var defaults = $.extend({}, $.fn.iso.defaults, options); return this.each(function() { - render_tiles(this); - render_avatars(this); + $this = $(this); + $this.grid = new Grid(defaults.max_x,defaults.max_y,defaults); + + for (var i=0; i < defaults.unwalkables.length; i++) { + $this.grid.nodes[defaults.unwalkables[i]].walkable = false; + }; + + $this.nodes = $this.grid.nodes; + node_trap.push($this.grid); + + $this.avatars = new Array(); + for (var i=0; i < defaults.avatar_count; i++) { + $this.avatars.push(new Avatar($this.grid)); + }; + + $this.avatar = $this.avatars[0]; + + function render_tiles() { + var nodes = $this.nodes; + var html = ''; + + for (var key in nodes) { + var node = nodes[key]; + var parent_id = $this.attr('id'); + var id = parent_id + '_tile_' + key; + var label = (defaults.labels) ? id : ''; + + if (defaults.render_all == false) { + if (node.walkable != true) { + $this.append('<div class="layer_' + node.z + '" id="' + id + '"></div>'); + $('#' + id).css({ + zIndex: node.zindex, + left: (node.left+defaults.tile_offset[0]) + 'px', + top: (node.top - (node.z * defaults.iso_tile_height)) + 'px' + }).data("xyz", [node.x,node.y,node.z]); + $('#' + id).addClass('dirt'); + } + } else { + $this.append('<div class="layer_' + node.z + '" id="' + id + '"></div>'); + + $('#' + id).css({ + zIndex: node.zindex, + left: (node.left+defaults.tile_offset[0]) + 'px', + top: (node.top - (node.z * defaults.iso_tile_height)) + 'px' + }).data("xyz", [node.x,node.y,node.z]); + + if (node.walkable != true) { + $('#' + id).addClass('dirt'); + } + } + }; + + }; + + function render_avatars() { + for (var i=0; i < $this.avatars.length; i++) { + $this.append('<span class="avatar" id="avatar_' + i + '" />'); + $this.append('<span class="shadow" id="shadow_' + i + '" />'); + + var avatar_element = $('#avatar_' + i); + var shadow_element = $('#shadow_' + i); + + avatar_element.css({ + 'z-index': 999999, + 'left': defaults.avatar_offset[0] + defaults.tile_offset[0], + 'top': defaults.avatar_offset[1] + }); + + shadow_element.css({ + 'z-index': 888888, + 'left': defaults.avatar_offset[0] + defaults.tile_offset[0], + 'top': defaults.avatar_offset[1] + }); + + place_avatar(i); + }; + }; + + function attach_handlers(avatar_index) { + $(this.id).children().click(function(e) { + var tile = $(e.target); + //tile.css("background", "url('images/highlight.png') no-repeat top left"); + var start_x = $this.avatar.position[0]; + var start_y = $this.avatar.position[1]; + var start_z = $this.avatar.position[2]; + var end_x = tile.data("xyz")[0]; + var end_y = tile.data("xyz")[1]; + var z = tile.data("xyz")[2]; + $this.avatar.determine_path(start_x, start_y, end_x, end_y,z); + if ($this.avatar.movement_queue.length > 0) { + follow_path(avatar_index); + }; + }); + } + + function place_avatar(avatar_index) { + var avatar_element = $('#avatar_' + avatar_index); + var shadow_element = $('#shadow_' + avatar_index); + var node = $this.avatars[avatar_index].node(); + + if (defaults.animate == true) { + avatar_element.animate({ + left: node.left + defaults.avatar_offset[0] + defaults.tile_offset[0], + top: node.top + defaults.avatar_offset[1] + }, defaults.speed); + + shadow_element.animate({ + left: node.left + defaults.avatar_offset[0] + defaults.tile_offset[0], + top: node.top + defaults.avatar_offset[1] + }, defaults.speed); + } else { + avatar_element.css({ + left: node.left + defaults.avatar_offset[0] + defaults.tile_offset[0], + top: node.top + defaults.avatar_offset[1] + }); + + shadow_element.css({ + left: node.left + defaults.avatar_offset[0] + defaults.tile_offset[0], + top: node.top + defaults.avatar_offset[1] + }); + } + }; + + function change_avatar(num,axis,avatar_index) { + if (avatar_index == undefined) { + var avatar_index = 0; + } + + var i; + var avatar = $this.avatars[avatar_index]; + + if (axis == 'x') i = 0; + if (axis == 'y') i = 1; + + avatar.position[i] += num; + + if (avatar.position[i] < 0) avatar.position[i] = 0; + if (avatar.position[i] >= max_xy[i]) avatar.position[i] = max_xy[i]-1; + + place_avatar(avatar_index); + }; + + function follow_path(avatar_index) { + var avatar = $this.avatars[avatar_index]; + var avatar_element = $('#avatar_' + avatar_index); + var node = avatar.node(); + + if (defaults.animate == true) { + avatar_element.animate({ + left: node.left + defaults.avatar_offset[0] + defaults.tile_offset[0], + top: node.top + defaults.avatar_offset[1] + }, defaults.speed, function() { + if (avatar.movement_queue && avatar.movement_queue.length > 0) { + avatar.step(); + follow_path(avatar_index); + } else { + return true; + } + }); + } else { + avatar_element.css({ + left: node.left + defaults.avatar_offset[0] + defaults.tile_offset[0], + top: node.top + defaults.avatar_offset[1] + }); + if (avatar.movement_queue && avatar.movement_queue.length > 0) { + avatar.step(); + follow_path(avatar_index); + } else { + return true; + } + } + }; + + render_tiles($this); + render_avatars($this); for (var i=0; i < defaults.avatar_count; i++) { - attach_handlers(this,i); + attach_handlers($this,i); }; + }); }; @@ -43,165 +203,4 @@ render_all: true }; - var defaults = $.fn.iso.defaults; - - function render_tiles(container) { - var nodes = $.fn.iso.nodes; - var html = ''; - - for (var key in nodes) { - var node = nodes[key]; - var id = 'tile_' + key; - var label = (defaults.labels) ? id : ''; - - if (defaults.render_all == false) { - if (node.walkable != true) { - $(container).append('<div class="layer_' + node.z + '" id="' + id + '"></div>'); - $('#' + id).css({ - zIndex: node.zindex, - left: (node.left+defaults.tile_offset[0]) + 'px', - top: (node.top - (node.z * defaults.iso_tile_height)) + 'px' - }).data("xyz", [node.x,node.y,node.z]); - $('#' + id).addClass('dirt'); - } - } else { - $(container).append('<div class="layer_' + node.z + '" id="' + id + '"></div>'); - - $('#' + id).css({ - zIndex: node.zindex, - left: (node.left+defaults.tile_offset[0]) + 'px', - top: (node.top - (node.z * defaults.iso_tile_height)) + 'px' - }).data("xyz", [node.x,node.y,node.z]); - - if (node.walkable != true) { - $('#' + id).addClass('dirt'); - } - } - }; - - }; - - function render_avatars(container) { - for (var i=0; i < $.fn.iso.avatars.length; i++) { - $(container).append('<span class="avatar" id="avatar_' + i + '" />'); - $(container).append('<span class="shadow" id="shadow_' + i + '" />'); - - var avatar_element = $('#avatar_' + i); - var shadow_element = $('#shadow_' + i); - - avatar_element.css({ - 'z-index': 999999, - 'left': defaults.avatar_offset[0] + defaults.tile_offset[0], - 'top': defaults.avatar_offset[1] - }); - - shadow_element.css({ - 'z-index': 888888, - 'left': defaults.avatar_offset[0] + defaults.tile_offset[0], - 'top': defaults.avatar_offset[1] - }); - - place_avatar(i); - }; - }; - - function attach_handlers(container, avatar_index) { - $('#' + container.id).children().click(function(e) { - var tile = $(e.target); - //tile.css("background", "url('images/highlight.png') no-repeat top left"); - var start_x = $.fn.iso.avatar.position[0]; - var start_y = $.fn.iso.avatar.position[1]; - var start_z = $.fn.iso.avatar.position[2]; - var end_x = tile.data("xyz")[0]; - var end_y = tile.data("xyz")[1]; - var z = tile.data("xyz")[2]; - $.fn.iso.avatar.determine_path(start_x, start_y, end_x, end_y,z); - if ($.fn.iso.avatar.movement_queue.length > 0) { - follow_path(avatar_index); - }; - }); - } - - function place_avatar(avatar_index) { - var avatar_element = $('#avatar_' + avatar_index); - var shadow_element = $('#shadow_' + avatar_index); - var node = $.fn.iso.avatars[avatar_index].node(); - - if (defaults.animate == true) { - avatar_element.animate({ - left: node.left + defaults.avatar_offset[0] + defaults.tile_offset[0], - top: node.top + defaults.avatar_offset[1] - }, defaults.speed); - - shadow_element.animate({ - left: node.left + defaults.avatar_offset[0] + defaults.tile_offset[0], - top: node.top + defaults.avatar_offset[1] - }, defaults.speed); - } else { - avatar_element.css({ - left: node.left + defaults.avatar_offset[0] + defaults.tile_offset[0], - top: node.top + defaults.avatar_offset[1] - }); - - shadow_element.css({ - left: node.left + defaults.avatar_offset[0] + defaults.tile_offset[0], - top: node.top + defaults.avatar_offset[1] - }); - } - }; - $.fn.iso.place_avatar = place_avatar; - - function change_avatar(num,axis,avatar_index) { - if (avatar_index == undefined) { - var avatar_index = 0; - } - - var i; - var avatar = $.fn.iso.avatars[avatar_index]; - - if (axis == 'x') i = 0; - if (axis == 'y') i = 1; - - avatar.position[i] += num; - - if (avatar.position[i] < 0) avatar.position[i] = 0; - if (avatar.position[i] >= max_xy[i]) avatar.position[i] = max_xy[i]-1; - - place_avatar(avatar_index); - }; - - $.fn.iso.change_avatar = change_avatar; - - function follow_path(avatar_index) { - var avatar = $.fn.iso.avatars[avatar_index]; - var avatar_element = $('#avatar_' + avatar_index); - var node = avatar.node(); - - if (defaults.animate == true) { - avatar_element.animate({ - left: node.left + defaults.avatar_offset[0] + defaults.tile_offset[0], - top: node.top + defaults.avatar_offset[1] - }, defaults.speed, function() { - if (avatar.movement_queue && avatar.movement_queue.length > 0) { - avatar.step(); - follow_path(avatar_index); - } else { - return true; - } - }); - } else { - avatar_element.css({ - left: node.left + defaults.avatar_offset[0] + defaults.tile_offset[0], - top: node.top + defaults.avatar_offset[1] - }); - if (avatar.movement_queue && avatar.movement_queue.length > 0) { - avatar.step(); - follow_path(avatar_index); - } else { - return true; - } - } - - }; - $.fn.iso.follow_path = follow_path; })(jQuery); \ No newline at end of file lib/jquery.iso.js bf94958243d2f4e17538e6f928f50d1bf4d28ba6 Michael Buffington michael.buffington@gmail.com http://github.com/elbowdonkey/axonome/commit/c5130287e3b517cd67fa985645edf3efe266613a c5130287e3b517cd67fa985645edf3efe266613a 2009-10-08T09:42:45-07:00 2009-10-08T09:42:45-07:00 fixed a bug in jQuery plugin that made it impossible to render two seperate grids - grid.iso.avatars is now broken but will be changed soon anyhow. also, exploding logo. ecc233114ab25277f926cced5806aed1e8958e45 Michael Buffington michael.buffington@gmail.com