2
\$\begingroup\$

I made a complete little platformer game as a code snippet.

The goal is to try to keep jumping on the enemies without touching the ground to increase score. I used Tad's Basic Game Objects, an open source set of JavaScript classes.

What do you think of the code?

(function() {
    let map = [ [3,3,3,3,3,3,3,3,3,4],
                [3,0,0,0,0,0,0,0,0,3],
                [3,0,0,0,0,0,0,0,0,3],
                [3,0,0,0,0,0,0,0,0,3],
                [3,0,0,0,0,0,0,0,0,3],
                [3,0,0,0,0,0,0,3,0,3],
                [3,0,0,0,0,3,0,0,0,3],
                [3,0,0,0,0,0,0,0,0,3],
                [3,0,0,0,0,0,3,0,0,3],
                [3,3,3,3,3,3,3,3,3,3] ];
    const characterSpriteSheet = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAAgCAYAAACFM/9sAAAEAUlEQVRoQ81ZO44UQQxlDkHICTZA5CRIBEuy50BcgDNwAcQ5NmGDlUjIEQEnIOQQvf1a5ea1x99uBs1Eo+6yn/1sV9W8OT1zPi9v7ybr1c+H+5Nnw88vYV/FRhwWftW+Y2uS4SWPwCpBXKv9kdg925DAxze/N8329tuLNoHs4/nHH+3uZfsM/8+nV9OMge47GxL4qeDr4gu+Z5sSiIDmwACOoHYRQD4uan8pAqPcXQJ194G9SgV5/9E+xB6JRv6kCzz7YA82922sH02QFpA7sDI9nsMJY9BN4N3rmyWBr99/LTlqH4PACckkBVn8OPYuf4JvLRgxpQTOtmsRGL88wpoEDmZ+B3Jc0vGeP0KkPJP3UTJMgrbPtpCIQCls1InaXuGbeW8eZgEIEZpEGslliSZSd4RXhAw/KJ7gmiMMIkbxzVHOcI34Fz/4mAQKoGVodaHe05JRcseIu98qAuIqjD/I2hDJ+VhFyHDLBMr8ex1ELZ3tJd5mXrKL8LsEVrcBkOg1jjd5Zx2oR9HajCun2d37z+5pCJ/3Xz6YRBbwswJIyCv+HMsmDQ+bFrWKvwmIE9DAI/HwOpARJ0FWCHTwSwTqOGa8BRo+MwKjHCxbK6DJCj5LHuPPdhaYBLc3icxukLTpIJBHp79bgErx2wSSwUqOl4TsIclVY0kuuQ6hU1YSQIAUpktgZf1ojLD4UeHPKmIRUSGHTrJwzIrrhED44u/Wtmw9a9kU8nMLbxKIiPi4LyZdTS5dx3h7sLs2lfXeGrdbOpqYZuSILXwdsb+EDomYWnKWl0TkiEk8ksS1aole7m4HypUGGhx/KqIkbLXdCCBVRUCg1gAFv4KNtRI7vnMcFXuNzz4s+2jDX1ST/02gECAaYpeAf2GPg0s0UOagReCRKoqwGZwW4UnN2FkHcMdpvVHwpQiVDtQdzD52EThkdOai8mtgihSZTFXRxZsDF/zKT8CTZ1+5UFsEEgdn+OEIS9SaDI8A6by9chZVafNrgv1V9EhPhxT/mR5pCBDur5m1WthzssT1SFq6oPiJlI2sAzN97oCeuKTgKToZLhVgbbw2gUe0tYg4FjI8LbAyghUt0vtPJpK0vLzNEU6CyH7L7hm/9eoRTcI16JGjC/92YHBStnQx8eNJSRo4wMUrEzsTUzNFJRMXstuDhW92YFcTYzJgy/obv8sS8IqA5/B5lEDxH+mRmIBIC4UP/oeuTWAWBN7zfww7FOGNnNUpQCQ7aYls9tvOfTTGxi50oitVDUKPp7JL75FExKYbog4mSQrw4fUs0iMZW/xYzyTHSA+MAlkuytl1hIhs6XPDrqUJViQpNR1dks2cS3qg7qhqsGLXXa8T3WOfHFLhawvPi+EJa7Kxll+2uQIAAAAASUVORK5CYII=";
    let enemies = [];
    let score = 0; 

    class VeryQuickPlatformer extends tabageos.GameSkeleton {

      constructor() { 
        super(); 
        this.dontEstablishWorkers();
        this.initialConstruction({gWidth:160, gHeight:160, cameraWidth:160, cameraHeight:160, spriteSheetImage:characterSpriteSheet,controllerDivId:"cn", gameLoop:this.loop,gameScale:0, initializationSpecifics:this.setup, fullResetSpecifics:this.backToTitle});  
      }

      setup() { 
        this.startButton.innerHTML = "Click/Touch to Start";this.removeHUD();
        
        var cani = new tabageos.CanvasAnimation(this._image, this.charLayer,null,16,32,16,16);
        cani.defineAnimation("left", [3,1,2,1,3,1,2,1]); 
        cani.defineAnimation("right",[1,0,2,0,1,0,2,0]);
        cani.currentAnimation = "right";
        
        this.player = new tabageos.MapTraveler(16,32,16,16, map,cani,1,0,16,16,map.length,map[0].length,0);
        this.player._jumps = 1;
        this._cameraType = 2;
        window.console.clear();
        
        tabageos.BlitMath.drawSquaresFromPattern(this.display, map, 16, 16, {3:"#ffc8c8",0:"#c8c8c8",4:"#000000"}); 
        
        if(!this.getButton("exit")) { this.makeButton("exit",144,0,16,16,"tabageos.GameSkeleton.game.fullResetToTitle()","back to title"); }
        
        this.beforeStartGameLoop = function() { 
          this.appendButton("exit"); 
        } 
        
        while(enemies.length < 3) {
          enemies.push( new tabageos.MapTraveler(32 * enemies.length,144,16,16,map,null) );
        }
      };
      
      backToTitle() {
          this.removeButton("exit");
          score = 0;
      };
      
      loop(ts) {
        var btns = this.controller.buttons;
        this.player.move(btns.left,btns.right,btns.up,btns.down);
        
        if(this.player._veloc.x <= -1) this.player._canvasAnimation.currentAnimation = "left";
        if(this.player._veloc.x >= 1) this.player._canvasAnimation.currentAnimation = "right";
        this.player._canvasAnimation.matchPosition(this.player);
        if(this.player._veloc.x !=0) this.player._canvasAnimation.animate(.3);
        this.player._canvasAnimation.blit();
        
        for(var en of enemies) {
          if(en._pRight) en._veloc.x = -2;
          if(en._pLeft) en._veloc.x = 2;
          en.update();
          if(tabageos.GeometricMath.testForPointInCircle(this.player._pos, 8, en._pos)) {
            if(!this.player._grounded) { this.player._veloc.y -= 4;score += 1;break; }
          }
          this.charLayer.drawRect(en.getRectangle(),"#bbbbbb");
        }
        
        this.pixelType(16,16,"score: "+score+"");
      };

    }
    new VeryQuickPlatformer();
})();
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/tabageos/tabageos/tbgs_min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/tabageos/tabageos/ControllerPad.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/tabageos/tabageos/ControllerPad.css">

<div id="container" style="position:absolute;width:160px;height:160px">
  <div id="root" style="width:160px;height:160px"> </div>
  <div id="cn"> </div>
</div>

\$\endgroup\$
2
  • 1
    \$\begingroup\$ That seems to be a fun little library! In your code I would remove the (function() { IIFE function. If you need the code to be private you can change your JS file to a module <script type="module" src="...">. Also you don't need the function keyword when you define a method on a class. setup() { .. } should be enough. \$\endgroup\$
    – Kokodoko
    Commented Dec 15, 2023 at 1:52
  • \$\begingroup\$ Yes that is cleaner, in this case the(function() { is helping to indent the map array properly, I can't seem to get it to indent right without that line now. \$\endgroup\$
    – mrall
    Commented Dec 15, 2023 at 13:26

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.