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>
(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 thefunction
keyword when you define a method on a class.setup() { .. }
should be enough. \$\endgroup\$(function() {
is helping to indent the map array properly, I can't seem to get it to indent right without that line now. \$\endgroup\$