HiveBrain v1.2.0
Get Started
← Back to all entries
principlejavascriptMinor

Strategy Game in Javascript with Three.JS

Submitted by: @import:stackexchange-codereview··
0
Viewed 0 times
threejavascriptwithgamestrategy

Problem

I've been playing around with porting a simple strategy game over to Javascript, the idea being to run it in a browser for testing. I've done some simple Javascript code in the past, but this is my first model/view setup. I'd love to get feedback on following Javascript best practices and avoiding pitfalls. I know that I am falling way short of the full features of the language because I don't use any prototypes. I am using THREE.js and jQuery.js, THREE.js being the main rendering engine.

The code here simply creates a Tower that contains a Javascript version of a dictionary of Floor objects with positions. They are then rendered in the THREE.scene based on their position. The idea will be to calculate clicking on them to issue commands to the floor based on the camera position and click position, but I haven't gotten that far yet. I want to find out if I am doing things properly before I get much further. This is partly just for fun but I still want to learn how to do things the right way.

Here is the codepen. Just move the mouse up and down to move, and click to see the coordinates of the view and camera.

Here is the HTML:


    

        body {
        background-color: #C0C0C0;
        margin: 0px;
        overflow: hidden;
        font-family:Monospace;
        font-size:13px;
        text-align:center;
        font-weight: bold;
        text-align:center;
    }

    div{
        background: #C0C0C0;
    }
    

    
    

    
    
    


And here is the Javascript Game:

```
var container;
var camera;
var scene;
var renderer;

var mouseX = 0;
var mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;

//this is the game model object
var worldSize = new WorldSize(windowHalfX, windowHalfY);
var tower = new Tower(worldSize);

init();
//not good to do animate here
//animate();

function init() {
container = document.createElement('div');
document.body.appendChild(container);

//these settings

Solution

From a once over:

  • HTML looks clean, though your title should not be blank per the HTML spec



  • Your objects look fine, old skool JS OO, which is nice to read



  • When you write for (obj in this.towerFloors) { you are polluting the global namespace, either declare obj on top in your function (my favourite approach) or use for (var obj in this.towerFloors) { , but only the first time you use obj otherwise JsHint throw warnings for duplicate declarations



  • There is not much functionality to review really, I hope that you got further with this and post a new question with more meat.

Context

StackExchange Code Review Q#57063, answer score: 3

Revisions (0)

No revisions yet.