Welcome, Guest. Please login or register.

Login with username, password and session length

 
Advanced search

1411273 Posts in 69323 Topics- by 58380 Members - Latest Member: bob1029

March 28, 2024, 02:10:38 AM

Need hosting? Check out Digital Ocean
(more details in this thread)
TIGSource ForumsCommunityTownhallForum IssuesArchived subforums (read only)TutorialsAll you need is a main game loop: Basic HTML5 gamedev
Pages: [1]
Print
Author Topic: All you need is a main game loop: Basic HTML5 gamedev  (Read 4639 times)
Zarkonnen
Level 1
*


Games! Kittens! Wine!


View Profile WWW
« on: April 20, 2014, 07:50:24 AM »

Based on a bunch of conversations I've had with people wanting to start making game, I've written a rant slash tutorial on very basic HTML5 game development. Making the point that to start out, you really don't need an engine or complex framework - a main game loop will do.

Excerpt:

Fundamentally, games work by keeping track of the state of the game world and then doing the following three things over and over again: processing user input, updating the game state, and displaying the game to the player.

The game state is all the information that has to be kept track of for the game. For example, with chess, this is the position of the pieces. With tic-tac-toe (noughts and crosses), it's a grid of nine fields that can contain an X, an O, or be blank. In both cases, the state also keeps track of whose turn it is. With a Flappy Bird game, the game state boils down to the position and velocity of the bird and the position of the pipes.

After each iteration of the main game loop, the game waits until it is time to go around again. It's fairly standard for a game to loop around sixty times per second. Depending on the game, nothing might happen in most of these frames - chess players usually take more than sixteen milliseconds to make a move. But that's fine. If nothing's changed, the game just re-displays the same game state and waits for the next cycle.

Read the rest
Logged

jgrams
Level 3
***



View Profile
« Reply #1 on: April 20, 2014, 09:42:08 AM »

Nicely written!
Logged
ShereKhan
TIGBaby
*


View Profile
« Reply #2 on: May 22, 2014, 01:10:22 AM »

Hey, nice article.

Having a game loop is basic practice and it can be applied to multiple games programming, not only the ones in HTML5. For example, I've built a game in DirectX following the same basic principles. I would like to tell you more about it, because I think you may find fun, and I see Zarkonnen already has an example of it in his article (more exactly, of the Classic mode of it).

First, it's called Ultimate Tic-Tac-Toe, and it can be played immediately after it gets the Greenlight from Steam. Let me just tell you what sets it apart from the Classic game (which you can also play). The more interesting part of it is the Ultimate game mode and it's played like this:

Each square of the 3x3 game board contains another, smaller, 3x3 game board.
Where the player makes his move in a square of any small board, the opponent is sent in the respective square of the big board.
If the player is sent to an already won or draw board, then he can go wherever he likes.
3 squares in-a-row in a small board wins the small board and the big square.
3 squares in-a-row in the big board wins the game.
A draw board will not count for either players.

There is a level system that is active in Ultimate type Single Player and Multiplayer, but not Hot Seat games.
There are 50 levels, with the following rules for leveling up or down:
- Levels 0 to 20: game win: +1, game lose: -1, game draw: 0;
- Levels 21 to 35: game win: +1, game lose: -2, game draw: 0;
- Levels 36 to 50: game win: +1, game lose: -2, game draw: -1.

The game features Single Player (with 3 different difficulty settings), Hot Seat and Multiplayer modes.
There are achievements and other goodies, too. You can download a demo here.

If you're interested, please head over to the Steam Greenlight page and vote for it.

Thank you!
Logged
Trash_Empire
Level 0
***



View Profile
« Reply #3 on: July 17, 2014, 02:50:19 PM »

This is great.  Smiley Smiley
Logged
Feedbal
Level 0
*


View Profile
« Reply #4 on: July 31, 2014, 06:37:22 AM »

Thanks for sharing!
Logged
shirgho
Level 0
*


View Profile
« Reply #5 on: September 09, 2014, 04:11:45 AM »

Thanks, nice place to start!
Logged
desttinghim
Level 0
*


View Profile
« Reply #6 on: December 03, 2014, 07:04:18 PM »

I really liked this tutorial! Definitely helped me get something done - I made the tic-tac-toe example there in Haxe and openfl. Thanks for sharing it.
Logged
Pages: [1]
Print
Jump to:  

Theme orange-lt created by panic