background preloader

Tutorial: Simple game with HTML5 Canvas - part 1

Tutorial: Simple game with HTML5 Canvas - part 1
Check other language versions: [RUSSIAN] Tutorial: Simple game with HTML5 Canvas Part 1 - Introduction & Background Part 2 - Character & Animation Part 3 - Physics & Controls Part 4 - Platforms & Collisions Part 5 - Scrolling & Game States If you are interested in news and updates of that tutorial just follow me on twitter: [MichalBe's Twitter] Because 10KApart is closed now, and we are all waiting for the results, it is good time to remind my very simple "Stairs to heaven" game and explain in details how it was made. StH is very simple clone of Doodle Jump, but to be honest I was inspired by Icy Tower and discover DJ after I submit StH to the competition. Never mind. Part 1. That's all in HTML we will need during this tutorial. First of all its important to understand one thing about canvas - it is not possible to move objects in the canvas surface. var clear = function(){ ctx.fillStyle = '#d0e7f9'; //set active color to #d0e... Nice, but boring less only a little.

free game graphics It is once again time for a prototyping challenge! The rules are the same. You are an elite programmer that wants to make something fun without spending ten years in art school learning how to draw stick figures. I provide some easy-to-use graphics and an intriguing game design for you to riff upon. Send me the links to your masterpieces and I'll post them for folks to enjoy and critique. This time, we are tackling an ancient, yet still fascinating, genre that is long overdue resurrection: The God Game. Back in the day, there was a game call Populous where you played a god. I've divided the challenge up into two sections. Challenge Part I: Core MechanicsHave you ever experienced the simple joy of sorting your Legos? As with all mechanics, the written design is a starting point. The mapThe land starts out with randomly sorted PlanetCute prototyping tiles, piled up to five levels deep. There are several types of tiles: The finished house will pop out the villager upon completion.

Creating Particles with Three.js ## Introduction Hello again. So by now you’ve got started with Three.js. If you’ve not you might want to go back. Assuming you have you’re probably thinking that you’d like to do something with particles. Three.js treats a particle system like any other primitive shape in that it has geometry and position, scale and rotation properties. Even though they are treated as part of the same object we can still style the particles individually in terms of their colour since Three.js sends through colour attributes to the shader when it’s drawing them. There is also a knock-on effect of having a particle system governed by the geometry vertices, which you may need to consider. To create a particle system we need the following code: