Javascript Pseudo-3d Game


    Hello, Habrasociety.
    I really love JavaScript for its grace, beauty, and many other advantages. And I really love to write on it. Moreover, I like to write not only standard things, but also the fact that few people usually write in this language. In this series of articles I want to talk in detail about creating a cross-browser (IE6 +, Chrome, O9 +, Fx2 +, Konq) pseudo-3D game in JavaScript + DOM (without using Canvas) in several stages. The game will be similar to the first Might and Magic. The plans are to make movement through the maze with a top view, then from a first-person view, then populate the maze with monsters, traps, doors, and at the end add a network game with the server part in PHP and, of course, do not forget about the multifunction map editor. I am sure that with time and suggestions other ideas will appear.

    So, I present the finished first stage of the game.

    A game



    The principle of the game at this moment is insanely simple. You are the arrow, which must get from the green square to red and so on 5 times.
    We move the arrows. Or through shift + arrows. The second mode is still more convenient. But for certain reasons, the main one will be precisely the “I go where I look” regime, and not the “I go where the arrow shows”. This is because of the plans.
    Latin "e" - includes a map editor.

    Editor


    Move the active cell with arrows. Using shift + arrow, or using [ asdw ] we set the walls in a certain direction.
    Z is the beginning, X is the end. Enter - play our map. Please note that now only editing existing maps is implemented. If you want to create a map of a certain size from scratch - use the link http://freecr.ru/maze/?editor&w= 15 & h = 10

    Implementation and Technology


    During the creation of the engine, I tried to use the many possibilities of the typed odhod in ZhS and I think that I was completely successful in this. Inheritance has not yet been used, but it will be needed in the next steps. The code turned out to be readable and easily extensible, although it requires easy refactoring (which we will continue to do). I would like to receive advice and opinions from no less experienced comrades. I hope these sources can serve as a great example for beginners in the future.

    Only the DOM and not a single image are used to display the result. To manipulate the DOM, jQuery is used. For catching keyboard events - my $ .keyboard plugin . Everything else is either written by me from scratch, or taken somewhere from my archives.

    Plans


    As I said, development will be carried out in several stages. The first step is to create a basic engine and map editor. The next step is a first-person view. You can already see the previous implementation: freecr.ru/lab (oooh, just don’t look at the source!). The goal is to achieve the same result. And again - only the DOM:

    If there are those who want it, I will describe in detail the implementation, algorithms, problems and their solutions in a separate topic.

    miscellanea


    The project is hosted on Google code (for me this is already a tradition).
    License - GPL v3
    I accept offers and issues.

    Also popular now: