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.
Related
I would like to know the best web technology/js library to achieve this functionality. I need to change the colors of specific objects inside an image. I need to develop a tool where they can choose a color and the objects inside the image will turn into that color.
This is a very close example of what I need. I've been reading about canvas but I haven't been able to find anything close.
www.msistone.com/virtual-kitchen-designer
Thanks in advance!
There are no magic or elaborated algorithm on it. They simply are using some PNG images and then they put the style tiles images before, so it looks like a texture changed or like if they uses a filter. You can realize of how it works watching the source code
The simplest way to target specific objects ( wall tiles, tables, floors, etc. ) within an image is in post production with an image editing application such as Photoshop, Artweaver, Paint.net, Inkscape, etc. and switch out images upon user selection using CSS or JavaScript. You replace the entire image this way and the minor changes show through when the image is switched.
If you don't want to do this manually there is no easy programmatic approach. For more information on coding applications to recognize objects look into machine learning and shape recognition algorithms but I suspect that is beyond the scope of a simple web app.
I found a lot of resources about my question, but I'd just like opinions based off of a high level overview of what I'm trying to do.
Basically, I'm using a combination of Javascript, and HTML to build a customizer for a friends' website. I should start by saying that I have some HTML experience but this is the first time I'm using Javascript (I am experienced with Java). The ultimate goal will be something like a customizer to allow users to select the parts of a bicycle and change their colors to place custom orders.
I've got the various parts of the bike as images files, and I'm using this jscolor color picker found at: http://jscolor.com/examples/#example-showing-hiding to allow the user to select a color from the color map. My plan is to layer a given part (photo) on top of a copy of the same photo, and fill only one of them, like layering in Photoshop. This way, the part fills in the correct shape, instead of filling as an entire square of the image file. As the cursor moves, the color should change in realtime. Once done, they can save the part and the color record will be kept on the back-end.
As I'm new to Javascript and not that experienced with HTML, I'm finding it a bit challenging to get this on the right track. So I'm hoping for some advice from some people who are experienced with HTML/Javascript/CSS to point me in the right direction to get this going along a better track than it is currently. I wasn't sure how to "phrase" what I'm trying to do.
The three main parts I'm addressing:
Using HTML buttons to load a different bike part (essentially load a separate image file).
Adding the color from the jscolor picker to the image of the selected part.
Saving the state of the part when the user clicks a Save button.
I will continue to search the forums as I already saw a few leads similar to what I want to do, but I mostly want to know if my approach seems feasible for what I'm attempting to do.
Thanks in advance!
Using normal HTML buttons will make things complex for you.
I think leveraging HTML5 Canvas API is a better way to approach this problem. Canvas is the HTML5 element for helping out you do the graphics manipulations using JavaScript. Learn more about canvas here.
You can make use of a library such as Fabric.js to make things easier.
The Google zeitgeist 2013 page displays a regular image grid, and it repeats in both horizontal and vertical mouse drag movement. It looks amazing!
Is there an existing js open project does the same as Google zeitgeist 2013?
I think they are using CSS transforms to achieve this. Have a look at this short .gif animation that I have captured while moving browsing the Zeitgeist page, can you note how the transform property is changing the values dynamically. I am of the opinion that it's CSS based but there is JS playing its part, probably.
I also inspected their 4 JS files and they all seem to be either Angular JS or Prototype libraries, and there's seems to JS involved in there too, if you note the selector js-detail--searches_grid It's a custom solution by Google though, so I am not aware of any similar implementation, but if you put enough time studying its working, i.e. reverse engineering, you can create one too.
I have done some more investigation into this and it turns out it is using CSS transform matrix, which you can look here. It's a complicated thing to understand at first, but very rewarding. The matrix method take six parameters, containing mathematic functions, which allows you to: rotate, scale, move (translate), and skew elements. This is evident from the code used by Google (see the 6 parameters in the image I've supplied).
Essentially, I had this idea in my head for a sort of evolution simulator, not exactly like Conways Game of Life, but the one part where they do match is that they will both be based on a square grid.
Now, personally, I like working in HTML+Javascript+ for simple apps, since it allows fast UI creation, and if you're not doing something computationally heavy, then JS in a browser is a decent platform.
The problem I'm trying to solve right now involves drawing and updating the grid. I might be missing something, but it seems like there is no easy AND computationally light way of doing this for an 80x40 grid. The easy way would be to generate a div with absolute position and a specific background color for any square that is NOT empty. However that can become very slow with anything more than 60-70 colored squares.
I'm definitely willing to switch to a different language if the situation calls for it, but first I just want to know I'm not stupidly missing out on an easy way to do this with HTML+JS.
Answer should include either one of the following:
a) A reasonable way to draw and update a 80x40 grid ( where the squares change color and "move" ) in HTML+JS
b) Another language that can do this reasonably fast. I would prefer to avoid having to spend a few days learning DirectDraw or something of the sort.
Why not build the grid as an HTML Table? After all this is what you want?
Give each cell a computed id and create some javascript functions to update them. Shoudlnt be a problem at all.
You could look at the new canvas tag in HTML 5 but from what you've said I dont think you need it.
<canvas> seems to be the right way to do this. A library like Raphael will help you avoid cross-platform issues. Another options is Processing.js, but it does not work in IE.
For a small grid (< 100x100), use a table and give each cell an ID for fast access.
For bigger grids, you should consider using a canvas object or embedding an Java or Flash applet.
What is the best cross-browser way to get a flat mouse coordinate input data and simple callback for mouse events for my rectangular game area on my web page, even when it has loads of larger and smaller images and text string overlaid haphazard onto it?
And what is the best way to insert or remove a text string or semi-transparent image overlay at an arbitrary location (and Z order, specified relative to existing objects) in a board game rectangle with cross-browser DHTML?
And how can I stop the user selecting part or all of my montage of images (I just want them to interact with it as if it was Flash), and can I stop the right click menus coming up in IE, FF etc?
I want to do this without Flash because I want something that will work both on desktops and on iPhone and potentially other mobile platforms too.
I appreciate there are serious limitations (eg less image scaling capabilities, not vector, no rotation capability) to what I can do if I'm not using Flash but I'm very interested to know what capabilities are available.
Are there perhaps any frameworks available to make it easier than coding from scratch?
Would J/Query be a good match for some of the requirements? What else do I need?
I would recommend Google Web Toolkit. It lets you program in Java, which gives you all the type-safety and nice IDE functionality that Java entails, but compiles to Javascript so that you can just run it in a browser. It also does a ton of optimization and supports tons of features.
jQuery is excellent at doing this. I used jQuery's UI and Ajax functionality to implement the frontend for a game of chess.
I made it a little easier by creating an 8-by-8 table with unique div names for each tile, so Javascript can access them by getting the elements by id. If you can't create something like that, you do have the option of placing elements anywhere on the page (either absolute or relative to a given element). You can also easily change the z-index, including when the use is dragging a piece or when they have dropped it.
As far as disable right click and item selection goes, that's something that I didn't figure out how to do. You might want to take a look at some other Ajax games like Grand Strategy, which are much more polished than my experiment and may have figured out how to do this.
There are two main APIs for working with arbitrary drawing and positioning on the web, Canvas and SVG.
Take a look at Chrome Canvas Experiments and the Raphael Javascript toolkit to see some examples and Javascript abstractions.
The key is element.style.position = 'absolute'. To illustrate just what's possible here's how far I've managed to push javascript (and from scratch at that!):
http://slebetman.110mb.com/tank3.html - RTS in DOM! Click on units/squads then click somewhere else to tell them where to go. You can control both sides.