2D Grid Based Simulation Game [closed] - html

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I'm not sure where to begin, but my goal is to to create a 2D simulation game that allows the user to create formations using points, or dots, on the grid. I wanted the game to allow the user to direct the points on the grid to their next location, or set of locations, in a continuous simulation from the first formation to the last in chronological order.
Like I mentioned earlier, I am brand new to coding and wanted to know what specifically should I be looking to learn to create this? Also if you have suggestions on what I should use to create this such as Flash, Html5, or something else please let me know.

Are you trying to make Conway's Game of Life?
As far as good beginner game engines go my first couple of games were in GameMaker. I understand the reputation it gets about it not having "real programming" but if you are learning to write code I actually think this works great. No it doesn't have syntax like code does, but it does require you to learn programming logic and that is what is important. Syntax isn't that tricky and you can look it up. Logic and structure, that's hard.
I don't know much about FLash other than that it is kind of a sinking ship and losing support. If it's between javascript and that, go Javascript. When you say
HTML5 or Java, you do not make games in HTML5. If you have an HTML5 game engine like Impact, it's actually javascript code you are writting. HTML5 is just putting the game window in a web page.
I haven't messed with PyGame much, but Python is a fantastic beginner language and I have heard this works for small things like what you want to do.
Love2D gets used for projects like yours a lot. Don't have experience with it myself but you could take a look at it.
I have used Unity a lot for my projects big and small. It's a big learning curve but if you want to learn how you could make "big" games, this is how you should do it. Tons of great beginner learning materials and support, just expect to go through several tutorials(which you should do anyways with whatever you pick) before you can get started.

So you have a start pattern, and a target pattern, and the user must move the points by, say, sliding them along the grid lines, until the target pattern is attained... I think the easiest would be Corona (https://coronalabs.com/, free and excellent docs). It has a very simple game engine which is based on Lua programming language, a very simple language that is also very powerful and versatile such that it will allow you to jump in and support complexifying your game as you learn. Corona is built so you don't have to worry about all the intricacies of getting the code onto the device etc, it has a device emulator so you can test on your desktop. You just focus on creating your callbacks and logic and imagery, they will get used at the appropriate time.
The concepts you will need to develop your game:
- setting up the initial grid and pattern
- drawing lines (for the grid) and circles (for the "points) (presumably, different colors)
- handling a swipe
- updating the state of the grid so you know where the points are
- determining if the target pattern has been met
- keeping score (time used, number of moves required)
- start-over (prematurely with confirmation by user, or when target reached)
Install Corona, look at its intro to Lua, start playing around with it, starting with really simple stuff, actually best is to take existing examples that come with Corona and try to modify them to do something different and gradually diverge from original. The Corona docs and examples are excellent, there is a very active community, tons of youtube videos by avid game developers on tricks and techniques, and corona questions on stackoverflow get quick answers.
Have fun!

Related

How to create an animated website like Ba Ba Dum [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
My wife's birthday is coming up and I would like to create a website similar to
Ba Ba Dum: https://babadum.com/
I have learned HTML5 in school but never learned about its ability to create animated websites.
How do I go about making a website like that? Do I have to use Flash or is it fully rendered with HTML5? Looking at the source code revealed something about google api and ajax and jquery, are they essential to making an animated website like this?
Thanks!
Although your question is way, way too broad, I'll try to help.
The site you linked -as far as I can tell- is made HTML, CSS and JavaScript. There are less and less sites that use Flash, and you shouldn't use that either - it's starting to die out, at last.
Be prepared to research a lot - you'll have to learn about CSS3 (style, position and animations), JavaScript ("JS", it's very useful for sites filled with interactive elements - sounds, videos, etc) and jQuery (special JS library, it contains several dozens of pre-written functions that can make web development easier and faster). If I were you, I'd visit Codecademy, it's a website that teaches these languages, and for free. Completing those courses shouldn't take more than 20-30 hours, and it would give you a solid base to start from.
Of course, the required skill level depends on the type of site you want to build. A simple, animated website can be built with only HTML and CSS3. For more complex sites you most likely have to use JS and jQuery.
Here is what should you do:
Start out with a fix idea: you want to know what you want to create, especially because (probably) this will be your first serious project. Doodle on paper, write down your ideas about what should happen if you press a button, for example.
Divide the site into smaller pieces: you won't finish it one day, so you should focus on building the site step by step. Create a button, use CSS to make it fancy then give it some animation. If you are satisfied, you can move on to the next part.
Research: most likely you won't be the first person to do the things you want to do the way you want to do. Use google and you'll find hundreds of different tutorials, starting from simple things (building a layout) to more complex one (pure CSS animations, canvas, etc). If you stuck, Stackoverflow will help, but you'll have to be more specific with your questions. This current question is bad, and I'm only writing this response because I too know about needing help and realizing no one will help me just because my question is too broad. And I don't have anything better to do at 23:40 :) Try to find out if someone already asked your question - it's possible, and that way you may find the answer(s) instantly.
Study source codes: if you are using Chrome, you click on any element on a site to view it's code - you just have to select "Inspect element" from the context menu (there are other ways to do it with other browsers). It will show you the HTML, the CSS properties and even the relevant JS code. You can modify these values (especially useful with CSS) if you want to experiment a little - these changes are only visible for you and deleted when you refresh the page. This method is useful if you found the perfect button animation you want to include on your page but don't know how to do it.
Backup your work! Create a backup copy of your site every day, so if you mess something up badly (happens to everyone, especially if you're in a hurry like often I am) you don't have to start from scratch. It happened to me before, and if you are using other people's code (from tutorials, I'm not talking about stealing) it might happen to you too.
Also, good luck!
Here are a few places I'd recommend going to, all of these have helped me and are a good place to start.
Codecademy - http://www.codecademy.com/learn
For basic HTML, CSS, JavaScript and jQuery lessons. Best site on the web, I say. Also, recently released AngularJS lessons, which are quite good.
Code school - https://www.codeschool.com/
Provides good AngularJS lessons, which you should do once you've finished the Codecademy ones.
Egghead - https://egghead.io/
Good for AngularJS lessons and HTML5 canvas lessons. The HTML5 canvas lessons are brilliant, the presenter is a genius.
What all these things are.
HTML5 canvas - A method of drawing graphics to the screen. Great for video games and animations. I've actually made the loading effect of that site you listed with canvas.
jQuery - A JavaScript library, which is a bunch of predefined functions for ease in coding. It is good for special effects and event listeners.
AngularJS - An awesome library which makes displaying data so much easier. Great for fast single page apps.

How to study the source code of my favorite program? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I've downloaded the source code of my favourite program.
At school they taught us that the entry point is the main.c(pp) and then follow the headers, but I realise that is not always the case. In some cases there isn't a main or It deep buried somewhere where I can find it.
And the documentation in most cases describes only how to compile, what deps you need and etc.
Bottom line, you've downloaded the code, untar'ed it.. now what?
I don't have any particular example to ask (help) for, so if you have any example to help me it's welcome
Reading code is often more cumbersome than writing code. This inquiry does not have a single answer and you should explore multiple opinions and see which works best for you. One practice you shouldn't engage in is reading the code start to finish. This will lead to eye bleeding and mind-numbing frustration. So don't approach it like a book, since reading it like one, cover to cover, is very inefficient. Reading is not learning. Applying what you read is learning. One key point to remember is don't get discouraged. You will be hard pressed to find a programmer that can quickly pick up on a foreign, large base of code quickly.
The best 'book speed readers' skim through something they are about to read a form an outline in their head. They take mental notes of logical sections and paint a thin picture about what to expect. When your brain has seen something before, it is more likely to be engaged with the material. I would skim the header files as a way to form this outline. If there are no header files, then try to skim quickly though class interfaces and take note of which are connected and what is their general purpose.
Make a second pass through the sections of code that interested you. Try to identify a subsystem of the code and make a second, more detailed pass through it. I personally would look for connected components for identifying the subsystems (look at imports). Jot down some of the data structures used and associated algorithms and design patterns. Make associations between them and try to understand why they were used.
Lastly, don't be content with just reading the code. Since you are looking at open source, challenge yourself to add a feature. Take one of the subsystems you were intrigued with and add on to it. If this still intimidates you, take the last bullet a step further. Make a quick flow chart detailing the flow of the code. Bust out your favorite IDE and leverage breakpoints around areas you don't understand the flow. Try to put yourself in the mind of the designer and think why he made certain decisions as your stepping through the breakpoints. Bottom line: It is easy read something and think you understand it. But, doing is where the real learning takes place. You will find yourself asking more questions and researching more into the code when adding a new feature. Having this direction is all it takes sometimes.
If the source code leverages an OOP solution, I would strongly recommend studying a Design Patterns book. I was going to include Design Patterns as a bullet, but I didn't know if the source code you are viewing uses an OOP approach.
Hope this helps! This was the approach I undertook when learning to code a couple years ago.

2D Unity (for graphics & ease of use): Flash? Haxe? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 2 years ago.
Improve this question
I'm planning on making a little game. And I'm looking for an engine. Basically what I want is Unity, but then 2D. It's a very interface heavy game, stylized, so what I need is an engine (or similar) in which it's easy to draw lines, primitives and text (and bitmaps, though that's less important.) The game will have a game world, though you'll never directly see it. All you'll get is a bunch of information about it (text, lines, graphs, ...)
I know you could use Unity to make 2D games, though for what I have in mind it's not optimal and the way objects work in Unity isn't really how I want to structure my game. (I've worked a lot in Unity and absolutely love it, though I don't think it's the right tool for this game.)
What I love about Unity is that you can just build for any platform, with a single click, and it just works. It also already has it's own way of building your gameobjects, and since I'm making something very different, I don't want this. I need more control over the objects and actually only want the engine to draw stuff.
I was thinking about using Flash, ActionScript3. It should be very good at drawing lines and text. And hopefully just as easy to build.
I also checked out HTML5 and javascript, using KineticJS, which can draw lines and primites very easily (pretty much exactly like I want it), though I hate javascript and want more structured code. Maybe it's just me that I can't get javascript to be clean enough for my taste, but well, that's something we'll have to live with then :P
My question now is, since I never used flash. What are your thoughts on this. Is it perfect for this kind of stylized text-based games? Is it easy to build (I'm using FlashDevelop since that's a free way to make flash stuff)? On top of that, can I use a single code base for Windows and Mac (maybe even iOS, Android or other, though that's less important)?
Or maybe you have another suggestion I could check out? (I already checked out a bunch of other question here, though none were really helpful. So yea it's another 'I'm looking for an engine' question, so don't kill me for that. I already did quite a bit of looking around, though would love some more input from others.)
Edit1: I've been looking around some more and found Haxe (http://haxe.org/) seems promising, can anyone recommend this or?
I think Flash/AC3 would fit perfectly, especially if you're using FlashDevelop.
To comment on Daniel MesSer:
This means that a programmer "never" has to worry about positioning objects and the visual appearance of the game. The programmer only have to provide the functionality for what should happen when stuff happens (buttons are clicked, animations are complete etc).
This just is not true. If you're work at a company that solely uses Flash CS this might be the case. But with FlashDevelop you've got a fully functional IDE. If you look up some third party libraries like Flixel, Citrus Engine or FlashPunk, you'd find something that could fit perfectly to your needs.
I think that for what you want to do, flash would not be an optimal tool. The beauty of flash and what it was designed to do is to separate and combine what a graphical artist does and what a programmer does.
You see, you have Flash as the tool where you align, position and import/draw graphics and do complex animations. And then you export those as assets and work with the graphical resources from ActionScript. This means that a programmer "never" has to worry about positioning objects and the visual appearance of the game. The programmer only have to provide the functionality for what should happen when stuff happens (buttons are clicked, animations are complete etc).
It sounds as if your game are more in the "techy" family, where you will be working alone, and you want to draw primitives yourself and there will be a lot of text on the screen.
Flash was never intended to be a tool to work with loads of text and doing stuff the techy way, it was created to make it easy to work with loads of graphical resources in a structured way where the programmer doesn't have to worry that much about the graphical content.
If my assumptions of what you want to do is correct, you would be better off working with JS. It would be better suited since you are working with few complex graphical assets, are interested in cross platform support and basically wants to work with loads of text.
I also checked out HTML5 and javascript, using KineticJS, which can draw lines and primites very easily (pretty much exactly like I want it), though I hate javascript and want more structured code.
Write objectoriented javascript :-) I'm a oop-maniac, but I'm starting to find the beauty of js too. It IS possible to write beautiful code even there! ;-)
Regarding flash and AS3, It would be possible, and probably pretty "easy" to use. I started programming using AS2 (well some other stuff before that as well). But personally I dont think flash is the right way to go. Flash have reached it's expiery-date a long time ago.
There are several games coded in HTML5 and KineticJS. You can find some examples on www.kineticjs.com. With HTML5 and kinetic, you'll also be able to make it work for multiple platforms at once.
Hope this helps :-)

How much faster is dreamweaver? [closed]

Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 11 years ago.
Improve this question
Hey everyone I just bought the master cs5 suite mostly for design purposes, and now I have a lot of peoPle telling me I should start using DW instead of hand coding my HTML/CSS because it will speed up my production and it's what all design shops use and is an industry standard . I was curious if this is accurate and how much would it really speed things up?
I (personally) disagree. I use DW in CS5 for code editing view only (it has the best markup/code highlighting I've found); the generated markup is not great, so I don't use it, nor am I highly trained in the workflow it entails. A lot of designers will not understand hand coding markup, but that's usually because they don't understand how to or don't care to do so because it's not what they get paid to do.
However, if you're working on (a) lower level, you have a better understanding of your markup/styles/code. It may take slightly/significantly more effort (depending on your abilities hand coding), but I personally think it's worth the effort in many cases. However, I am not a piece worker nor am I paid on deadlines.
There are other reasons I use DW (WebDAV support, searching capabilities), but I will likely never use it to author my markup. Also note I don't pay for it.
Used unwisely it won't speed it up at all. You'll spend more time pulling out DW's extraneous code. Use parts of DW that will make you faster like snippets (for storing snippets of code you use frequently) and find and replace (using f&r with regex is a very useful skill). I use it to cram in table markup quickly (for data tables). Dragging files over for internal links is quite nice and the keyboard shortcuts help (you can create custom ones).
That said, I like the product at work. Check in and check out has been very helpful there with multiple coders/designers.
So, there are plenty of parts in DW that will speed up your hand coding. Root them out.
Dreamweaver CS5.5 made a lot of improvements over previous versions. As a designer you may appreciate Live Preview and the design integration's. As a coding IDE, it's still considered sub-standard and many developers choose to go another route. I use PHPdesinger 7 for ~$70, its got in-line xdebug integration and pretty good intellisense for PHP, CI, and jQuery. I use DW5.5 and PHPdesigner and I find it's far less bloated then Dreamweaver for what I use it for, coding with PHP/Jquery and web API's. I also feel that it's closer to how I worked before using advanced IDE's like this, coding on my Macbook with Coda. But if your designing web pages you may like Dreamweaver better.

How/When to design an interface? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 4 years ago.
Improve this question
I'm trying to get in the habit of designing the interfaces to my websites at the very beginning before I do any actual coding. I've read "Getting Real" by 37 signals and they recommend doing the interface first, before any actual code is produced.
What exactly is meant by that? Does that mean use pure HTML and CSS to design the site and add php, js logic to page afterwards, or is it okay to sprinkle in the php, js from the beginning?
What if your using a framework, should I set up empty controllers that simply call the views, or should the early stages be solely html, css?
Also, what do you guys think about design first vs later?
EDIT I'm talking about AFTER I have sketched everything with pen and paper.. I'm taslking solely about the html mockups. And I'm not too sure about using extra tools that I would need to learn to do this
I think that the majority of the benefit of designing the interface first has been achieved after you are done your paper sketches. Basically, you are just ensuring that you have a design in your head and that your coding process is somewhat end-user driven. You are also trying not to waste time on needless documentation.
Getting the HTML in place (or the skeletons of the Views in an MVC app) makes some sense and this is the main thrust of what 37signals says. I would certainly not do anything beyond this that is just going to be thrown away.
I think if you have a proper design, it is immaterial if you next move on to writing the back-end code after the HTML or if you do the CSS and JavaScript. The CSS and the code should not even need to be aware of each other.
Do whatever gets you excited and motivated. Do whatever gets you thinking more deeply about how the app will actually work so you can catch any flaws in your original thinking. I like to code before CSS but that is just me. You might find it important to get the CSS further along before the app takes shape in your head.
Joel Spolsky likes Balsamiq as a mocking tool. I think that 37signals uses Draft (an iPhone app). I use a Sharpie. The key is not getting too detailed though.
Opinions vary, but I believe that JavaScript should come last. I believe most sites should be designed so that they work 100% without JavaScript and then have JavaScript added for polish.
Learn more about Unobtrusive JavaScript
So (for me):
Quick and dirty sketches of views
Get some HTML in place
Maybe some basic CSS for layout (or more if I need to impress somebody early)
Write the core logic
Add support for web services and AJAx calls
Pretty it all up with snazzy CSS
Write some JavaScript to add the sizzle
Let me ask you this. Do you paint a car before or after you have made the working parts? Maybe you have chosen which paint but ultimately it cannot go on until the car is finished. Maybe you don't agree with this analogy but I think coding will bring out issues that cannot be understood before a site is designed. Code first, design second.
Get a pad of paper. Each page represents one page of your site.
Sketch the interface. What controls go on each page? What controls are the same on each page? What forms are there and on which pages? What happens when user clicks on item x? Item y?
This will help you solidify your plan of both the content and behaviour of your site.
If you just start blindly coding you will end up with burnt spaghetti.
The user interface is what the users of the website will see. Before coding you probably start with some very basic sketches of the site that are not code, to identify page navigation, general placement of content and interaction with the site.
But the earlier you can show and discuss a working UI, the easier it is for the users/client to get an idea of the final product. So quickly move to the HTML, CSS, JavaScript and things like images, to identify:
The data presented on the page (HTML)
The representation of the data (CSS)
The interaction with the data (JavaScript)
Doing so helps to gradually develop an actual working UI that you can discuss with the client. This keeps them involved from early in the project. It forces them to think about the site, and make decisions about content, look and interaction.
Getting such feedback early in the project reduces the risk of building a product that needs to be changed later on. And making changes early in the project is easier/cheaper, then later in the project.
While the UI is being developed you can already start looking into data structures, software components and integrations with other systems to drive the site. But that's not what users/clients are interested in, they want to see and use the product.