principlejavascriptMinor
Strategy Game in Javascript with Three.JS
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:
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
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 declareobjon top in your function (my favourite approach) or usefor (var obj in this.towerFloors) {, but only the first time you useobjotherwise 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.