I'm building an isometric map like the one done by Christian Weber.
I've got nearly identical code to his, but the JS function building the map is never getting called. It should be, since I have $('div#map').gameMap({map:[[{"tile":"grass_0","object":""},... in the $(document).ready(function()
{} like he does in his demo's source code.
Here's a JSFiddle showing my attempt: http://jsfiddle.net/briz/RWgge/6/
I only need 1 map, and it doesn't need to be as big as the one given in the code, but for the purpose of trying to make the map work, I've kept it the same large map as he gives.
Can someone understand why my gameMap func is not being called?
Your code is in the wrong order -- you need to load the plugin before you create a class using it, and you need to create an instance of the class after you've created the class.
Is this what you wanted?
http://jsfiddle.net/mblase75/RWgge/8/
Related
i want to program a 2D-sqare Gamefield. The gamefield shall consits of 9 subfields. The Gamefield shall be an Image, like an Spacefield or so. Here you can see the concept, and how it shall later look like (just a mockup :P)
Within this field i want to move a Object from one field to the other (vertical /horizontal) . But i don't know how i can realize that. I had think of an multidimensional array, but i don't know if this is the right way to do this. I need to know, at which pixel in the image the new field begins. But i think its no good idea to code that hard. I want to do this with Jquery, CSS and HTML. It shall become a very simple online game.
Qapla'
In game development these fields are usually called tiles.
It's perfectly fine to create a multidimensional array of Tiles.
Whether they hold their own position or if it's up to a separate renderer is up to your design.
Some links you might be interested in:
Tiles and tilemaps overview (though this uses a Canvas-element)
Using CSS transitions for smoothly moving from one Tile to the next (not as useful when using a Canvas)
jQuery animate if you don't like CSS transitions, you can make use of jQuery as well.
I'd recommend reading up on Tiles in game development first, there are tons of example implementations.
I have been trying to create complex JavaScript shapes (to the end effect of functioning gauges). However, this is a very slow process when creating each individual part programmatically.
I was hoping to find some way to do this more effectively than this. Adobe Animate looked hopeful, but it is very overkill for what I need. I was hoping that there was some software or method to creative JavaScript shapes more effectively than writing each piece of code.
Thank you for any advice you may have.
I guess you mean Canvas since you said JavaScript shapes. I've used htmlcanvas studio for another project and it seemed ok. Have a look here http://www.htmlcanvasstudio.com/
Once your shape is created. Include it into a function so this way you can new the same shape over and over again. It may also be an object of course. Then you can create instances of it with Object.create(square) for example.
function someShape () {
// paste generated code
console.log('your shape has been created');
}
const shape = new someShape();
// or
new someShape();
I'm working on creating a function that can help me dynamically create something like this: Emotion Wheel
That is a manual mock up of what I'm trying to create dynamically. I want to pass into the function the number of axis and the number of "nodes" per half-axis. My biggest issue is figuring out placement and how to work that out. I'm still working on some rough draft stuff, but I was curious if there was something I was missing/hint on making it easier, or if I'd essentially just need to break down and dig up my Trig knowledge and come up with something from there.
I am trying to put a map from Openlayers 3 into a stack container which is being supplied by Dojo. But apparently there is no map being displayed until one resizes the main (browser) window.
There are no obvious errors on the Javascript console.
I made a jsfiddle: http://jsfiddle.net/q989r/
If I create the map in the same way but without all the Dojo stuff it works. I have also tried to put a distinct DIV#map for the map within DIV#center2D.
I found this similar issue: Dojo stackContainer is not displaying children until window resize but in these answers their suggestions are based on the fact that the ContentPane is created programatically which is not the case here. Anyway a
dijit.byId('view2d').startup()
nor a
dijit.byId('view2d').resize()
did not help.
So what am I probably missing? This is intended to work, right?
It appears that there is some strange logic (maybe bug) with Dojo containers that are not visible (this hint came from the Dojo IRC #neekfenwick):
Changing the order of the Applicationstack.forward() and createMap() calls did the trick. You can find an updated and working fiddle here: http://jsfiddle.net/q989r/1/
I've been doing driving directions in my map app using the directionsRenderer, so it renders both the path (on the map) and the html list of directions. My app works basically like this example: http://code.google.com/apis/maps/documentation/javascript/examples/directions-draggable.html
However, now I've been asked to make it a little more like the directions on Google Maps proper, for instance here
My client would like the little popups when you hover over the html items, as well as the little icons showing right turn, bear left, merge, etc.
I've managed to render my own html from the DirectionsService response, and hook up events for hovering and associate them with points on the map, but where I could use help is:
Getting the turn by turn icons. I imagine this isn't easy because I get each step as html text ("Take exit 433 on the left to merge onto I-80 E toward Bay Bridge/Oakland"), and I imagine that could be challenging to parse reasonably to determine which icon to show
Making the little mini-popups over the map. Although I can make the popups themselves, it's probably challenging or impossible to do it the exact same way because I don't have a short version of the instructions.
In any case, I thought I'd check if anyone knows a way to do this sort of thing -- not necessarily exactly, but just closer to it -- or if I'm just out of luck because google hasn't made any of that sort of functionality available via their api.
You are correct that you will have to examine strings to get turn icons. You can parse the DirectionsResult object yourself (it is "JSON-like" according to Google's documentation) rather than using the DirectionsRenderer if you wish, but I don't think it will get you anything much. Here's how it would go:
The DirectionsResult.route property will be an array of DirectionsRoute objects. If you didn't set provideRouteAlternatives to true, then there will only be one DirectionsRoute object in the array.
The DirectionsRoute object, in turn, has a property called legs. That property is an array of DirectionsLeg objects. If you have specified no waypoints (i.e., an intermediary destination), just a start and end point, then this array will also only have one object in it.
The DirectionsLeg object, in turn, has a property called steps. It will be an array where each element will be a DirectionsStep object.
The DirectionsStep object has a property called instructions. That is a string and is what you will have to examine using a regexp or whatever to figure out what turn icon to use. (It's possible that this may be easier to work with than the HTML you mention that I imagine is coming from the DirectionsRenderer. Or it may be possible that it isn't any easier whatsoever. I'm not sure. I've never actually done it.)