Tag Archives: html5 games

Developing a street basketball game. Part I. Getting workflow ready.

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

Street Basketball Game Tutorial - Part 1

Some days ago I released a new version of WhitestormJS framework named r10 and decided to develop a game using almost all it’s functionality. (Just was curious how easy it would be). The task was to make a 3D game that requires complex 3D physics parts like concave objects and softbodies.

Setting up workflow

Before starting developing the game I added a couple of directories that I will use later: js, css, textures and img. Difference between textures and img folders is that textures folder will be used for images that will be used in 3D part of app and img is for images that are used in html, css and stuff like that.

Rollup

Useful thing when you need to work with es6 models in front-end, especially when you use most of es6 features and want them even on old browser versions. I used it with two plugins: babel for rollup and uglify for rollup to develop a cross-browser 3D app.

Bower
Some libraries are getting updates regularly (yep, like whitestorm.js). For them I need front-end package manager like bower (You can use npm too, but bower will be enough). For tweening I used GSAP library, because of it’s performance and also we need basket.js to keep such a large library as WhitestormJS in localStorage.

…And also i wrote a small bower plugin that will help me make preloading. Check it out there.

bower install whitestormjs gsap progress-loader basket.js

Okay, now seems to be ready…

My index.html file will be simple and will contain just loaded scripts and style.css for featured usage. Note that we don’t load whitestorm.js yet. We will add it then using basket.js.

app.js

As you already noticed, we have app.js included. So, let’s create an empty 3D world with enabled softbody physics(will be used later for a net), autoresize, filled background, camera position and aspect, + gravity:

Now we have a basic world that has 0xcccccc (grey) as it’s background color, gravity set as {x: 0, y: -200, z: 0} and camera that will be at same height as our basket. Also we start the app only after we have whitestorm.js loaded. 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 →

7 Questions for HTML5 Game Designers

7 Questions with 2 HTML5 Game Designers

Here are 7 questions with two HTML5 game designers, Sean Lim & William Tan of GameYawp. Their most recent HTML5 game, Zombie Typomaniac is fantastic! This game is better than any Flash typing game I have ever played. Try it out and see for yourself.

Here they are: At GameYawp, we’ve recently launched our latest HTML5 game: Zombie Typomaniac. It’s a humorous typing shooter where the player types words to shoot a variety of zombies, surviving through different levels of zombies and unique zombie bosses. The game also features powerups that can freeze, slow down zombies etc.  Continue Reading →