Advertisement Jump to content
  • Advertisement

Pathfinding, Tower and Wall Placement Helpers.



Just wrapped up organising the code.

Originally when I set out to program this project I had the idea that would-be followers of my efforts could just copy and paste quick little bits to the base files from my Introduction to Three.js post.  However, I'm not that organise and don't have the level of skill to be able to pull that off.  I've had to go through many older functions and modify this or that.  So you'll have to bare with me but if you want to stay up to date with this project and have a copy of the code as of 'today' you'll have to just download everything here

current functionality:
Toggle Screen Size; if you press ' ' you'll toggle the size of the screen.

Walls; If you press ' w ' you'll be able to select locations for walls.  Moving your mouse along the grid you'll see the grid line the cursor is closest to turn yellow.  If you left click the mouse button you'll create a wall.  If you right click on a line under a wall that already exists the wall will be removed.  Walls can be created between adjoining cells/squares/spaces.  When you select a grid line that will block the path to an exit the line will turn red indicating that a wall can't be built there.  If you try to left click nothing will happen.

Towers; If you press ' ' you'll be able to select the locations for tower.  Moving your mouse along the grid you'll see a large square 2x2 appear in cyan if you select a location that doesn't envelop any surrounding wall.  The large square will turn red if the location isn't permitted.  As of right now the Tower placement function doesn't take into account Towers blocking the path to an exit.

If you want to switch between walls and towers you must de-select your previous choice by pressing the say keyboard key.  Clear as mud?  Hope not.

Here's a video showing what's been added.


Now that this is all done I can start adding towers and enemies. 
I'm going to scrap the Misty Mist Tower.  I'm instead going to replace it with the Tach Tower.  It will shot bullets that will slow down an enemy with each successive hit.  It's been done a bunch before.  But unlike other games where the effect wears off, in this one the effect will be permanent.  However; in order to dramatically reduce the speed of an enemy, it have to be shot many times.

Let me know what you think!

Thanks for reading.


Recommended Comments

Cool Bro ^_^y I'm amaze that we can do this now over modern browser, I wrote my own simple 2D Game engine in HTML5/TypeScript maybe it's time to upgrade it and put 3D support, last time I created 3D over the web was using Silverlight but today  WebGL rocks !

Share this comment

Link to comment

Good stuff so you will defend by placing your walls rather than just having the enemies follow a preset path, that is definitely more realistic! :)

I know what you mean about code organisation, mine is a mess at the moment I am going to have to restructure at the end to release the source. I suspect with most of these source code tutorials they finish the whole thing first, then start building up what they already know works, bit by bit (then sometimes pretend they are making it up as they go lol!).

Share this comment

Link to comment

@DexterZ101, I know right. When I was first introduced to THREE.js I was immediately drawn in at just how quickly I could get things done.  It's a great API to just play around with.  And the number of artistic features it supports is vast.

@lawnjelly Yes I agree.  I think they backward engineer their tutorials.  Unless they've done the same thing time and time again.

Share this comment

Link to comment

Nice job with the walls :) I'm doing my entry with dynamic pathing by creating mazes, but the wall idea is even better than what I have going! Awesome stuff! :) 

Share this comment

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Advertisement
  • Advertisement
  • What is your GameDev Story?

    In 2019 we are celebrating 20 years of! Share your GameDev Story with us.

    (You must login to your account.)

  • Blog Entries

  • Similar Content

    • By George2004
      Hello, i want to create my own ps2 game just for fun.
      I know javascript-still learning it.
      What do i need to make a ps2 game(software,skills, etc.)
      i know i need license but i dont want to publish it, just a game for me and my friend
      P.S i want to make it 2d (i have a lot to study and dont have enough time to make it 3d)
    • By Pedro Alves
      i try puting some values in my charts from my homepage components and my question
      for now i want show in charts the values records
      this my code from records to my chats
      import { Component, OnInit } from '@angular/core'; declare var $: any; declare var Index: any; declare var Charts: any; @Component({ selector: 'app-homepage', templateUrl: './homepage.component.html', styleUrls: ['./homepage.component.css'] }) export class HomepageComponent implements OnInit { records=[ { codprodut:'1', descricao:'Peras', quantidade:'200', preco:'200€' }, { codprodut:'2', descricao:'Maças', quantidade:'20', preco:'10€' }, { codprodut:'3', descricao:'Merda', quantidade:'20', preco:'5€' }, ] constructor() { } ngOnInit() { $(document).ready(function() { Charts.init(); Index.init(); }); } } chart.js code
      var Charts = function() {"use strict"; var doughnutChartHandler = function() { var data = [{ value: 300, color: '#F7464A', highlight: '#FF5A5E', label: 'Red' }, { value: 50, color: '#46BFBD', highlight: '#5AD3D1', label: 'Green' }, { value: 100, color: '#FDB45C', highlight: '#FFC870', label: 'Yellow' }]; // Chart.js Options var options = { // Sets the chart to be responsive responsive: false, //Boolean - Whether we should show a stroke on each segment segmentShowStroke: true, //String - The colour of each segment stroke segmentStrokeColor: '#fff', //Number - The width of each segment stroke segmentStrokeWidth: 2, //Number - The percentage of the chart that we cut out of the middle percentageInnerCutout: 50, // This is 0 for Pie charts //Number - Amount of animation steps animationSteps: 100, //String - Animation easing effect animationEasing: 'easeOutBounce', //Boolean - Whether we animate the rotation of the Doughnut animateRotate: true, //Boolean - Whether we animate scaling the Doughnut from the centre animateScale: false, //String - A legend template legendTemplate: '<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style="background-color:<%=segments[i].fillColor%>"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>' }; // Get context with jQuery - using jQuery's .get() method. var ctx = $("#doughnutChart").get(0).getContext("2d"); // This will get the first returned node in the jQuery collection. var doughnutChart = new Chart(ctx).Doughnut(data, options); //generate the legend var legend = doughnutChart.generateLegend(); //and append it to your page somewhere $('#doughnutLegend').append(legend); }; return { //main function to initiate template pages init: function() { doughnutChartHandler(); } }; }();  
    • By p3nd_
      Im a beginner programmer in java script (hobbyist) and im trying to replicate pong in the p5.js web editor. i have this problem that i cant solve with the player colision, i tried several things. i ahve the distance from the player to the ball but i dont know how to use that information to make a colision detection.
      i provide you the code below:
      would be very happy if i would get help.
    • By Steffi
      Hello everyone, in the game code below (written using the Phaser framework) I am trying to pass the variable this.inputScore to the global function assignValue. How can I do this? The assignValue function is being read by an external Index.html file on game over and I need this.inputScore to be passed to the Index.html file. I would greatly appreciate any help - new to programming. Thank you.
      //GLOBAL FUNCTION function assignValue() { document.getElementById("inputScore").value = this.inputScore; //how can I get this.inputScore from the game code below? }; //GAME CODE var CrystalRunner = CrystalRunner || {}; CrystalRunner.GameState = { init: function() { //...code here }, create: function() { //...code here }, update: function() { //..code here //check if the player needs to die if( >= { this.gameOver(); } }, gameOver: function(){ //..code here this.updateHighscore(); //..code here }, updateHighscore: function(){ this.highScore = +localStorage.getItem('highScore'); if(this.highScore < this.myScore){ this.highScore = this.myScore; this.inputScore = this.highScore; //I need this.inputScore to be passed into the assignValue function this.submitScoreButton =,, 'submitScoreButton'); { window.location.href = "index1.php"; //Index1.php will have a form input value into which this.inputScore will be passed }, this); } localStorage.setItem('highScore', this.highScore); }, };  
    • By blesseddisciple
      So I have a decent amount of JavaScript experience now and decided I was gonna lower my head and start cranking out some 2d games, partly to learn, partly to have fun. Afterall, HTML5 canvas is such an easy and enticing medium. I love the JavaScript implementation of it. But after literally struggling for a week to get basic game functionality working I have had enough of the little stupid bugs that pop up with JavaScript. Don't get me wrong, I still love the language for scripting. I'm just not going to spend 20 mins coding and 5 hours debugging just because the language is crap.
      I've decided to return to my previous endeavor, Java. I like Java a lot and the only reason I haven't pursued more in the way of game development is just for the fact that Java is limited to mobile or PC apps that may never see the light of day unless it's hosted on some obscure Java game hosting website that is populated with 2,000 half developed games that no one will ever care about. BUT, still, I enjoy hand coding and I know C# but don't feel like using Visual studio and I really don't wanna hand code C# on the .Net or whatever. I use Visual Studio for business apps (ASP.NET) but I don't wanna build a game with it.
      So, does anyone have any points to share about why moving to Java for game development is not smart? Besides the whole, "Java is slow" thing. I mean things that might make it harder in JAva to make games vs. in other languages. Please share your thoughts. 

Important Information

By using, you agree to our community Guidelines, Terms of Use, and Privacy Policy. is your game development community. Create an account for your GameDev Portfolio and participate in the largest developer community in the games industry.

Sign me up!