Or create an account

Question about Tower Defense game

0 Posted 18 Jul 2014
Posts: 3
Hi man! I found ur TD game and I loved it. Great job man. And I deceided to do a similar one. But I am just learning js. So I've got a few problems. Can U explain some of ur code to me?

1. How is the tower building realized?
2. How is the hover over the board realized?

here is some code. Why it doesnt work? There is a trouble with coordinates.
1 Posted 18 Jul 2014
User avatar
Rick Hendricksen
Posts: 2269
Your first mistake, shown in the browser's debugger, is "event is not defined", so you can fix that by adding the parameter "event" on line 48.

Next, onmouseover behaves a little strange, it only does something when the mouse first "enters" the canvas. You want it to keep doing something, so you should use addEventListener which behaves the way you want. See code below:
  1. canvas.addEventListener("mousemove", function (event){
  2. mouseMove(event);
  3. if (createTower || true){ // i added "|| true" for testing, remove this when you start using createTower
  4. context.fillStyle = "#29FF37";
  5. context.fillRect(ingameX*cellSize, ingameY*cellSize, cellSize, cellSize); // i removed "+ ingameX"
  6. }
  7. });

Now you probably want to repaint the application constantly. You already have a bit of code that draws the grid, so make that a function:

  1. function draw(){
  2. context.clearRect(0,0,canvas.width,canvas.height);
  3. for (var i=0; i<(n+1); i++){
  4. context.beginPath();
  5. context.moveTo(i * cellSize, 0);
  6. context.lineTo(i * cellSize, cellSize * n);
  7. context.strokeStyle = '#D3D3D3';
  8. context.stroke();
  9. context.closePath();
  10. context.beginPath();
  11. context.moveTo(0, i * cellSize);
  12. context.lineTo(cellSize * n, i * cellSize);
  13. context.strokeStyle = '#D3D3D3';
  14. context.stroke();
  15. context.closePath();
  16. }
  17. // draw towers here
  18. }

Note that i also added a clearRect call, which clears the canvas.
Now to actually call that draw function constantly, add :
  1. setInterval(draw, 16);

This calls the draw method every 16 milliseconds, which is about 60 frames per second.

I hope this helps :)

2 Posted 20 Jul 2014
Posts: 3
BIG BIG thanks. and Thanks for fast response.
3 Posted 21 Jul 2014
Posts: 3
Can I ask u one more question?


If I put the canvas in a container with margin, something is going wrong. The coordinates does ignore the margin and paint green boxes from the beging of the window. What is my mistake?

I found i can add the margin to the offset, but i think that is not right.
And why there is an offset from the current mouse coordiate, when i Place a tower? (dont look at the repainted lines, i fixed it but forgot it to fix in the online box)

And could You explain me the mob move(for example morve from point A to point B) and path algoritm?
4 Posted 22 Jul 2014
User avatar
Rick Hendricksen
Posts: 2269
You may need to add position:relative for mouse coordinates to work properly.
  1. canvas.style.position = "relative";

The mob moving part was fairly complicated in my solution, I basically tried to find the "next" square for a mob, and let it walk there. Just move it ~5% of the way every time, and when you reach the target you just find the next square again. So, you have an old position a and a new position b, both 2d coordinates. Then the animation is:
  1. newPosition = t * b + (1 - t) * a;
with t between 0 and 1. So if t = 0, the position is a, if its 1 then the position is b (the "next" position).

The path finding algorithm is just Breadth-first-search, while marking the visited nodes such that they don't need to be visited again. After this every square has a "next" variable that points to the next square that you should go to if you want to go to the end (look at how breadth first search works). This is what the mobs use to get to the end.
© Rick Hendricksen