Programming coordinates-based game, like dots or checkers - javascript

I'm looking to learn some fundamentals on cartesian geometry or coordinates based game programming. Platform is irrelevant, although I'm most proficient in JavaScript, C, Objective-C. Ultimately being able to create something such as dots or checkers would be ideal. The idea is for me to learn how sprites work and how pathing works programmatically. My question to you folks is where is the best place to learn the fundamentals? Something that isn't math heavy because to be quite frank, anything further advanced than calculus to me at this point is a grey line and requires refreshing my memory.
If there is a particular book, site, or open source project -- that would probably help me the most.
Thanks for any ideas.

I think there's a few more steps to accomplishing your objective, which is understanding the basics of game programming. You mentioned understanding sprites and pathing, which are imperative to game programming, but I think that initially you should spend a little time understanding the programming and methodology behind general graphical user interaction.
Regardless of what language you will eventually program your game in, I think that learning in a modern language like Java or C# will provide you with a vast amount of libraries and will allow you to accomplish tasks like animation and Event Listeners much more simply.
Here is a list of guides and tutorials that I think will be extremely helpful to you just as they were to me and others:
This is an extremely-detailed tutorial for a Java Game Framework that includes full source code and a full walk through (with source code) of writing the infamous "Snake" game in Java, complete with a control panel, score board, and sound effects!
The book "Beginning Java 5 Game Programming" by Jonathan S. Harbour will introduce you to concepts such as 2D vector graphics and bitmap including sprite animation. Plus you can get it used on Amazon Marketplace for $12!
Here is an unbelievable tutorial on Sprite Animation that has more than 5 parts to it! Plus it's written by Richard Baldwin, a Professor of CompSci and an extremely reliable and knowledgeable source. For more tutorials by him, this is his site.
Between these sources you're going to possess the methodology of the parts that go into a game, which are applicable in any language, as well as the knowledge of how those parts can be actually implemented as well.
G'luck!

O'Reilly has a great tutorial on simple game development using Objective-C and Cocoa on the Mac. Lines of Action.

othello and the book is of course the renowned PAIP by Peter Norvig

A site I frequently visit is GameDev.net. They have a lot of resources for game programming in general. The forums are a great place to get more specific answers on game development.
On the site, visit the Articles and References page, which contains articles written by developers on various game topics.
You don't learn about a car engine by reading the Chilton's manual; you have to pop the hood and get your hands dirty!
Hope this helps.

I'm currently working on a checkers program using pygame. It's simple beyond imagination to get the graphics working, and the math that you need to achieve fluid movement is just simple vectors and vector animation.
Each rectangle or square on the board has a centerx and centery coordinate. The next square diagonal on the left is centerx - 82 and centery + 82 or the next diagonal on the right is centerx + 82 and centery + 82. A jump is just 2 diagonals. Make the functions separate to modularize your code and without much math you've got a simple checkers program. Easy.

Well, for Java, there's an API called GridWorld, (Its used as a case study for the AP Computer Science exam, which is why I'm familiar with it) It uses a coordinate system, so you might learn something from looking at it.

You will probably want to understand minimax and Alpha Beta pruning.

Sprite animation is going differ significantly based on what platform you choose to do your program on, and any generic reference for animating on that platform will get you through that. If you want to shoot for Java, Yoely's references look pretty good.
For the game AI, though, I recommend you check out Artificial Intelligence: A Modern Approach by Russell and Norvig. It looks intimidating, and understanding much of the book will take a working knowledge of high-level math concepts. However, it is engaging and well-written, and you can probably make it through the first dozen chapters or so without hitting any math landmines. The algorithms and concepts in that book will be more than enough to help you program AI for a simple game, and might even help you decide on one.

My suggestion would be to use a language/development environment that makes working with sprites easy.
Take a look at Scratch.
The Scratch web site contains thousands of projects that you can download and edit right in the development environment.
Here are some projects to get you started: http://scratch.mit.edu/tags/view/checkers
Plus, there is a good online forum filled with helpful people if you get stuck!
Once you make a game using Scratch, you can upload/share it right from the development environment or you can post it on your own web site (although that takes some doing).
Hope this helps.

http://www.gamedev.net/
This is probably one of the most well known game/graphics programming site on the net. Its forums are subject to computational geometry, algorithms and all levels of GPU programming concepts.
You would be able to get a lot of help here. There are many articles on the subject of game programming already on this site from which you can see examples and understand the thought processes behind putting together these kinds of systems.
:]

http://www.pygame.org/
Python is great to get started, and nice examples and tutorials available.

Related

Javascript Game Development equivalent of Pygame.org?

I am starting to learn and develop games in Javascript. I was just wondering if there are websites for Javascript game development analogous to http://pygame.org/news.html. Pygame/Python was the first language I learned how to develop games on, and I think part of the reason why I ever finished a game was because most of the developers on that site allowed you to view the source code to their games. That helped me learn more than anything (if they were commented well).
I am probably going to use the Crafty game engine, so anything related to that will help as well. With that being said, I did look over most of the websites listed in this question. Any other general help regarding Javascript is also welcome. Thanks in advance.
GameJS is a JavaScript library inspired by PyGame.
(source: gamejs.org)
Note that the GameJS code on the comparision is a bit outdated and it doesn't work on current release
You can also see a lot of games made using GameJS. You can see that games here: http://gamejs.org/showcase.html
You can go a long ways with no game library, just 2d canvas and vanilla JS in the browser. Here's some great links to get started:
Mary Live Codes a JavaScript Game From Scratch in 30 minutes, and does a great job of explaining what she's doing as she does it.
https://www.youtube.com/watch?v=hbKN-9o5_Z0
Franks Laboratory is all about creative coding and game development with just JS and the browser.
https://www.youtube.com/c/Frankslaboratory
If text tutorials are more your speed, CodeIncomplete has a great series on JavaScript game development, it's older but all the info still applicable/works today in all browsers. This site is largely how I got started in HTML5 game development.
https://codeincomplete.com/games/
JS13K, a yearly game jam where you have a month to create a JS game in 13 kilobytes of zipped JS, has a great resources page, although some of this stuff is specific to making your game tiny, there's lots of micro-frameworks for JavaScript games. I've participated in JS13K in some form since 2016.
https://js13kgames.github.io/resources/
https://js13kgames.com
Happy to help if you have specific questions!

Should I be learning Flash/Flex/ActionScript or HTML/CSS/JS ("HTML5")? [closed]

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 12 years ago.
I'm fairly new to this whole web-development thing (2 weeks maybe, my 1st scraping of code exists here, I quite like it) and I ended up learning to use Adobe's Flash Builder 4, which I have come to quite like (although Action Script annoys me at times).
Recently however I've been reading a lot about "the future" of web development, RIAs, web 2.0 etc, and it appears the whole Flash/Flex/ActionScript frame work's main competition will be the HTML/CSS/JS stack (or "HTML 5").
So obviously I don't want to take the time to learn a language (Flash/Flex/AS3) that will end up dead in a couple of years and end up having to learn another one (HTML/CSS/JS), when I could just move over now.
My main interests are fairly information rich (database orientated) web sites, with high levels of user interactivity for customisation, uploading, etc. I like the whole mobile web aspect, and would like to have the capacity to also develop for that platform, as well as mobile apps etc. I love the whole "live" aspect (like the tour de flex light up map that shows user activity), not particularly bothered by uber complex animation and obviously want things to be responsive and user friendly.
So yea, any input on this would be much appreciated, I'd just like some advice for overall direction for my personal learning and development.
Thanks!!
You're making some basic mistakes in the question. The HTML/CSS/JS combination is different from HTML 5, That combination works just fine with current implementations (ignoring some of the annoyances of IE for the moment.) HTML 5 is a new extended definition of HTML with a number of new features like local storage.
HTML 5 is also not completely settled, nor completely supported.
You should learn HTML and CSS to start with; in general, you still need a web page in which to embed your Flash stuff. You should get some basic knowledge of Javascript for much the same reason.
Conveniently, the Javascript will carry over to Actionscript, which is a variant of the same ECMAscript standard.
Flash isn't going anywhere for a long time, and given the glacial pace that the HTML5 committee is working at, the HTML 5 spec won't be fully standardised for a while yet either.
Plus before all these lovely HTML5 web apps can become commonplace, the world's windows users will need to have a better browser than internet explorer 8. Given that 10-20% of web users are still stuck on IE6, i don't think we'll be seeing html5 becoming dominant for quite a few years. Of course then by that time we'll be seeing HTML6 and the slow painful process of getting the world to upgrade will start again.
Personally i don't do flash, because for what i do i really don't need it, but flash is a really useful tool outside of web development too. Lot's of triple A Games have flash built menu's and user interfaces for instance.
But really, become good at either/both technology, and you'll probably not be short of work
Learning a language like Actionscript can never be a waste of time , the mindset you will develop from it will enable you to understand the concepts of programming and it'll be easier for you to move to other languages if/when you so desire. Learning HTML & CSS is essential if you plan to develop for the web but it will not bring you the same type of knowledge, as it uses a very different logic. If you like the idea of developing web applications, one day you may want to develop desktop applications, HTML won't be of much use then, whilst the programming knowledge acquired with AS3 will not be lost.
Is this just for the fun of learning, or do you have any specific tasks to accomplish? I like to use the correct tool for the job. If you don't have a specific job to accomplish, or any constraints to work under, I would just pick the most marketable skill and go with that. Unfortunately, I'm not exactly sure which is the most marketable skill.
My recommendation would be to check out some JSON type stuff in JavaScript. That seems to be a pretty stable (might I even say fad-resistant) AJAX evolution which is pretty wide spread and likely to stick around for a while. If you focus on the high level theoretical concepts, the specific comings and goings of implementations won't be as important (in my opinion).
I think learning AJAX (using JSON rather than XML) is a good way to go so you learn about implementing asynchronous information rich sites. If you have to redraw the site entire site when you pull information, you're doing something wrong. The AJAX concepts will come in handy regardless of your platform.
Good luck!
-Brian J. Stinar-
Don't bother with flash.
Yes, it's pretty and powerful and fairly ubiquitous. It's also on its way out the door, as you observed in your question.
Let's compare Flash and its newly-arrived competitor, the HTML5 canvas element.
Flash is only supported by Adobe; if you want quality development tools or resources you'll have to buy from them (for the most part).
HTML5 canvas doesn't need proprietary development tools. HTML5 canvas is supported by every major browser vendor -- Mozilla, Apple, Google, Microsoft. All vendors will provide documentation and competition for each other, which should result in a more refined product.
When OpenGL support (direct gfx card access) was in discussion for HTML5 Canvas, guess who was the only holdout? Adobe, of course. Everyone else wanted hardware graphics support for canvas.
In other words it's Adobe against everyone else here, and Adobe's not going to win. They might keep the status quo for a while, but eventually they'll lose their foothold and canvas & co will take over.
tl;dr: No use learning the dying proprietary technology when you can learn the modern open technology that's going to replace it.
HTML5 is still very unstable, so you shouldn't try it.
For me, HTML5 is great, but some business haven't moved off of IE6, given its current state. Flash, while useful, can be very very tedious at times and other times it doesn't even work on some computers or makes some computers truly a pain in the "insert word here".
It's better to start with CSS and HTML4. Get the basics, then start going for more.
By then, you'll know what to want.
Personally I think all the answers here are overcomplicating things. Here's my take:
Use whichever technology excites you, and is best for what you want to build right now.
If the app you want to build right now feels perfect for Flex, use Flex. If something about HTML5 has caught your fancy and won't let go, dive into it. You can always change technologies in a year or three, and You'll be taking everything you've learned about design and architecture and usability with you - learning a new scripting language and some new tools won't be that bad. The only way you can make the "wrong" choice here is if you, for whatever reason, pick a technology that you wind up not enjoying enough to get anything built.
The reason I feel this is the best way is, nobody here can tell you anything useful about what technologies will or won't be around in a few years' time. Adobe could go bankrupt; Steve Jobs could die; Google could get broken up in an antitrust suit. Hell, Flash could be on the iPhone next year for all we know - or HTML6 could adopt a new, strongly-typed JITable programming language. Or a hundred other things could happen to render your (and our) predictions moot.
I mean, personally I expect that both Flash and HTML5/6/7 will be vibrant and flourishing in five or ten years - because they both have successful organizations behind them investing in their futures, and because I've never heard a whit of a meaningful argument why the success of one should require the failure of the other. But that's just a guess, and my guess is no better than yours. Focus on getting good stuff made now, and the technology road map of the future will come when it comes.
In my opinion – everything is worth learning, especially when it comes to HTML/CSS/JS/Flash, which are each completely different systems/skill pools tailored to entry-level developers.
HTML is tagged markup, and very important because it outlines XML usage. CSS is writing visual formatting rules. JavaScript is a scripted language, and a great way to get your feet wet with simple programming logic. And Flash is a great system in which to get into object-oriented programming within a compiled language.
As you keep venturing out, you'll find that a lot of technologies are really just different flavors of the same ice cream. While different languages have their own nuances, there are fundamental similarities between –say– most compiled languages. I came from Flash and got into iPhone development... while Objective-C is a way bigger and uglier system to dive into, I still generally knew my ass from my elbow while building my first app after several years experience with AS3. The same goes for .NET and Java. Also, I would second the notion that Flash is not dead, despite loosing traction in the wake of the iPocalypse. Whether it dies in a few years or not, it doesn't make AS3 any the less valuable to have learned in addition to HTML/CSS/JavaScript.

Getting ready to learn html5

I'm a desktop application developer, and I plan learning html5, but as it's not released, there are (almost) no published books and not too much infomation for beginners on the web... I feel I should start with html4 and the current web development skills.
I think I should start with html4, css, and javascript... but there are so many technologies related that I get lost :D So, what current technologies will be still used when html5 is released? I mean, what about "jquery" and "ajax"? I know they are javascript under the hood, but will they still make sense in the future?
What would you recommend me considering that I have just a little bit of html knowlegde, almost null CSS and completely null in javascript?
Dive Into HTML5 is solid, but it isn't really targeted at total beginners. You might want to check out Designing with Web Standards for getting a grasp on the basics of HTML/CSS. For the JavaScript side of things, I'd recommend JavaScript: The Good Parts. Also keep an eye out for Secrets of the JavaScript Ninja, which is due this summer.
If you're already familiar with HTML4, v5 is not terribly different, mostly it adds new elements and attributes, and removes some.
For essential coverage of web standards, I suggest Jeffrey Zeldman's Designing with Web Standards (v3). It's largely theory and background, with little code. I recommend it. There is a sister book by John Allsop, Developing with Web Standards, which I have not (yet) read, but it is supposedly the implementation half of the topic the two books cover.
There is a book in the making by Jeremy Keith, HTML5 for Web Designers, on the new A Book Apart site (backed by the people of An Event Apart, including Jeffrey Zeldman). Jeffrey writes about the new book on his site, and provides links to other related coverage, including Jeremy Keith's take on it.
Get a good base with html/css then move onto javascript and pick a js framework that you like. Jquery seems to be most popular.
Here's a good read on html 5
If you want to be accomplished you need to approach JavaScript like a programming language and learn it in its own right, not as a simple way to script a few things. HTML4 is really pretty simple, CSS is where the meat lies really when using JS to manipulate pages.
I'd refresh on basic HTML, then start working with JS while trying to get to grips with CSS and jQuery.
Another vote for Designing with Web Standards. While not the best "beginner" book out there in terms of holding your hand through your first site build, reading this book is hands down the best way for you to establish a solid foundation of good habits so that when you do get to learning how to code you'll understand why it is important to do things the RIGHT way.
That being said. HTML is cake. Tying it into CSS is a creative challenge, and really being able to understand javascript will set you apart.
As far as technologies becoming irrelevant: Stay away from Flash. Other than that everything is as strong as ever.
You should try this website Technobits.net, which will give you a kick start morning with latest updates in your favorite technology. Check out following urls.
http://www.technobits.net/technologies/html5-css/
http://www.technobits.net/search/?q=html5
HTML5 is basically the same as HTML4 but with some nice additional little features. Pretty much everything you will learn from HTML4 will work seamlessly in a HTML5 environment.
I would start with learning things in this order: HTML4, then CSS2, then jQuery.
After that, start learning about HTML5 and CSS3 when more information comes out about them. But main issue about learning these languages falls down to your basic understanding. Once you have that in place, the newer technologies just make these basic things a bit easier.
Effectively, they will always be written and constructed in more or less the same way - but in time with newer versions, things will become increasingly easier to achieve.
http://www.codecademy.com/ now has HTML, CSS, as well as lots of Javascript lessons - its free, online, and doesnt involve lots of annoying videos. It works for me anyways...

Help me take my intermediate Javascript to the next level

Sorry for the semi-rant here. I am hooked on javascript and want some direction on where to explore next!
I know the default answer is to just look around at sites and fire up firebug, but that may be inefficient as it's likely many sites have bad design and I won't be able to tell. I could use blogs and sites to follow, like http://ajaxian.com/, John Resig's blog, the YUI site, etc. Any comments are greatly appreciated! :)
Summary: Job needed to write a web app as a support tool. I begrudgingly took the task up to learn a bit of web stuff to implement a snazzy UI. (I come from a computer hardware background with all low level imperative stuff) I saw a jQuery UI demo and also came across an "ajax for dummies" guide pointing to jQuery, so I told myself I'd learn the minimum needed to do my damn job, but that would be it.
I bought the Jonathan Chaffer book Learning jQuery 1.3 and read the minimum needed to make my app work, but I was bothered that I didn't really understand the anonymous functions used, first class objects, etc. I did get an eyebrow raise from the interesting appendix on closures, and began thinking "hmm, that's cool..." So I bought the giant O'Reilly Definitive Guide and read through it. Wanted to know more, so I got the Douglas Crockford book (JS: The Good Parts) and went through his website - wow now I just blew away my previous understanding of JS prototypal inheritance (I was doing it the new() way) and damn, design patterns and unit testing frameworks in this language too? Javascript really must be more serious than I thought! With this newfound background I'm going through the jQuery library and dissecting its guts.
I don't know where to go from here though. Ideas I have but am not sure how to go about exploring include:
Get more into JS' integration into web architecture. I've only been doing basic XHRs, to serialize a few variables and do a GET to retrieve DB stored information, did XML->JSON conversion and back. But there's probably much, much more to make a app like gmail. Where to start?
Graphics and animations seem interesting. Saw some really cool demos from Google I/O 2009. I don't have a graphics background though so I'd need tips on where to start with the theory. I also don't know where JS' graphics capabilities overlap with Flash
Thanks guys! This community is the best (be kind to me, I'm an electrical engineer for my job, not a software guy)
The comp.lang.javascript newsgroup is a good place to advance your JavaScript. There are some seriously knowledgeable and opinionated people who regularly post there. You may need to brace yourself for the somewhat abrasive tone of some of the regulars though.
Google have made their javascript libraries public and open source.
These cover everything from UI widgets to event notification to unit testing.
Well worth looking at as a learning resource, a useful set of tools and as an inspiration as to what you can actually do with Javascript
It's called 'Closure' and is available here
Practise, practise, practise.
Ask lots of questions.
Try answering other people's javascript/jQuery questions here on SO. Examining how different people tackle problems can open your eyes to new methods and ideas.

Processing language vs javascript?

I'm going to develop a comprehensive educational software which runs on the browser and has many visualization and simulation works (electrostatic and electromagnetic visualization, 2D and 3D).
Which language(Processing, javascript or something else) is the best toward my purpose?
The question is indeed broad but I will answer from the experience I've had.
Javascript is not really meant to do mathematical calculations, which is what might be necessary to calculate a lot of E&M phenomenon quickly (Especially if they are not represented as a closed form solution). It really goes into how much detail you want in your graphs as well (More steps = more calculations). You may find yourself needing to do more optimizations to make up for the performance difference.
I did some visualizations of antenna arrays (They had closed form solutions, only simple arrays) in Flash and it worked out ok. Javascript will definitely not be up to par with any 3D simulations you might want to do.
I wonder if Silverlight might be a better solution, because you may find more mathematics libraries for .NET than for Actionscript, that could save you a lot of work of writing the math out yourself (But you might end up doing this anyways because of the performance issues).
As others have suggested javascript is not that strong of a language when it comes to visualization.
Processing is a really good language for what you're trying to do, it's easy to learn and is Java based. Data visualization is built directly into the language, as well as temporal space (ie advance "1 tick" in time and have the visualization react to that.)
Also if you're interested in going that route I'd suggest picking up Visualizing Data which is pretty much a Processing primer.
Flash may be the more common application stack right now for what you are looking for, but Silverlight is looking primed to take the title from them based on the powerful features that it contains.
I would go Flex or Silverlight myself
Plenty of re-usable libraries
Native support for multimedia
Native support for graphics and animation
I'm a little late to the show, but what you want, has been implemented in JavaScript, and you'll find this incredibly useful. I recommend running it under Chrome as the JS processing engine is extremely fast. (You may even want to try Chrome 2 which is even faster)
http://ejohn.org/blog/processingjs/
http://ejohn.org/apps/processing.js/examples/basic/ (91 basic demos.)
http://ejohn.org/apps/processing.js/examples/topics/ (51 larger, topical, demos.)
http://ejohn.org/apps/processing.js/examples/custom/ (4 custom "in the wild" demos.)
See also: http://www.chromeexperiments.com/
I second LFSR Consulting's opinion: Processing is used a lot for educational purposes, it is free, and fast (Java is faster than Flash in general) and easy to learn, so you have faster results. It supports 3D, you can tackle Java libraries for simulation and computing, etc. And it has a great community! :-)
JavaScript is a bit light for such usage. JavaFX is hype, but it hasn't really 3D (although one used Java3D with it) and it is still a bit young.
Flash and Silverlight: no comment, not much experience in the field. OpenLazlo can be an alternative...
You really have two choices ActionScript in Flash or VB.NET/C#/other in Silverlight.
So first you need to decide which of these platforms you will target.
You may be able to split the problem into two parts, the user-interaction and display part, and the heavy calculations part.
If you can move the heavy calculations to a server then you can still show everything in javascript.
One difficulty with javascript is that it is interpreted and you will need to write more of the equations yourself, so there is a performance hit and development time, but it will work without any plugins, unless you don't want to do 3D in the canvas tag.
Flash and Silverlight may have better options, but then you are learning new languages and requiring plugins, depending on what version of Flash you want to use.
Check out processing.js, xcode, and iprocessing!
ProcessingJS is great for data visualization but lacks in interactivity.
You should probably try python. It is a really good language for educational and computational purposes it has a pretty decent community and the syntax is not so tough. Even though it was designed to for command line you can create front end gui's for it using some external package and it also provides packages like Scipy, Numpy and Matplotlib for advanced plotting and data visualization.

Categories