Archive | HTML5 Games

RSS feed for this section

Developing a street basketball game. Part ll: Throw a ball into a basket.

Creating a 3D browser game with physics in a few steps.

 Street Basketball Tutorial Part 2

This time we will talk about creating of basketball net (with physics), the way we will keep the ball, and throw it in different directions depending on mouse position. If you haven’t read a Part 1: Getting workflow ready, read it first, please. I describe there what to start with, how to create basic scene elements (ball, basket, wall and ground).

In this post I will try to describe in-game mechanics as much as possible and how all this things interact in Three.js and Ammo.js wrapped by Whitestorm.js framework. Without this framework there will be much more unnecessary code used. One more thing is softbody physics… in javascript… I have told you that we are going to create a net that will be shaked when it collides with the ball, not a scripted animation that happens when we score a goal, but a complete physics for net and ball collisions.

Two more files.

We compile this project using rollup.js, it means we can use es6 moduleswithout any restrictions. Let’s add two files that will handle: 1) Events, 2)Loops.

App JS Foler Structure

We’ll back to them soon, but let’s create a backboard and a basketball net first.

Backboard & basketball net

Backboard is just a WHS.Box with applied map, normalMap (defines how light will be casted on texture) and displacementMap. Backboard will be 41 x 28 and with depth of 1. We don’t want backboard to fall down, so it’s mass will be 0 as with wall and ground.  Continue Reading →

Multi-Player Gaming Software – Tech Factors to Bear in Mind

Multi-Player Games

Solitaire is a card game that is fun to play online. The only downside is that being a one player game, it isn’t great for being sociable. If you like to talk and engage in activities with other people multi-player games are your ticket. Fortunately for HTML5, modern browsers can now handle the workload of additional players. You can see a great tutorial that shows you how to create a playable demo using, Node.js and the HTML5 canvas element here:

When it comes to developing good multi-player games online, there are many ways in which it can be done. Turn based games like chess or poker work on a turn-based method which exchanges information between each computer using a server. Browsers actually make it quite simple to have games like this created, though it was not always the case. Chess for instance would be easy to create in the past because it only requires semi-real time connections, because a player can make their move and have the computer send the information to the server which will in turn alert the player on the other PC that it is now his turn.

Poker has always been a bit trickier though, with games averaging five players a game and sometimes reaching up to as many as ten. The connections here have to be rapid.

Nowadays, players want real time action for their multi-player games and whereas before it was not possible through a browser, it can now be achieved as real time connections between servers and clients in the modern browsers.

Still Not An Easy Task Though

Creating a game on its own is a very difficult thing to do anyway, with you needing to make sure that the game not only feels and plays good, but also that the physics are smooth and the controls are as tight as they can possibly be. However, when you decide you want to make it multi-player, it just adds to the complexity of the whole process because now for the very first time there has to be a server of some kind involved. Continue Reading →

HTML5 Game that Teaches You HTML

HTML5 game called Super Markup Man

If we could learn everything we need to know about life by playing games, living would be a breeze. I would create the “How to Wipe Your Rear End” game. I’m somewhat of an expert on the subject although I haven’t started a blog…or should I say “log”. The game would go on to be a big hit because everybody needs to know how to wipe and I would make so much money that I could finally afford to get that Steve Ballmer’s autograph I’ve always wanted.

Markup Man Game Character

Super Markup Man is an HTML5 game where players can learn about the rules and organization of HTML markup without writing any actual code. The main character of Super Markup Man is Markup Man…shocking! Markup Man looks like what would happen if Prince William and an 8-bit Zelda made a “royal” baby. The goal of each level is to move HTML tags around using Markup Man to make the website example a reality. There are 30 levels which get more challenging as you play. The game is timed and progress is auto-saved if you leave early. It’s a very simple game that is fun to play even if you already know HTML tags. How fast can you get through all 30 levels? Feel free to post your times in the comment section.

HTML5 Game Engine Tutorial

You can also learn more about HTML5 game programming thanks to this game. The game designer has made a series of tutorials to explain how Super Markup Man was built. So far he has published Part 1: The Basic Engine and Part 2: Jumping, Falling, and Stopping. The tutorials are written in an easy to understand way and include example files. Continue Reading →