Use wasd to walk around, move the mouse to aim, shoot by pressing the mouse.
Click for full screen
(function() {
var map = [
[ [37,74], [37,74], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [36,74] ],
[ [37,74], [37,74], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [36,74] ],
[ [37,74], [37,74], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [37,74] ],
[ [37,74], [37,74], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [37,74] ],
[ [37,74], [37,74], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [37,74] ],
[ [37,74], [37,74], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [27,80], [27,81], [27,81], [27,81], [27,81], [27,81], [27,81], [27,81], [27,81], [27,82], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [37,74] ],
[ [37,74], [37,74], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [37,74] ],
[ [37,74], [37,74], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [37,74] ],
[ [37,74], [37,74], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [37,74] ],
[ [37,74], [37,74], [36,75], [36,76], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [37,74] ],
[ [37,74], [37,74], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [37,74] ],
[ [37,74], [37,74], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [36,73], [36,75], [36,75], [37,74] ],
[ [37,74], [37,74], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [37,74] ],
[ [37,74], [37,74], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [27,80], [27,81], [27,81], [27,81], [27,81], [27,81], [27,81], [27,81], [27,82], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [36,74] ],
[ [37,74], [37,74], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [36,74] ],
[ [37,74], [37,74], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [36,74] ],
[ [37,74], [37,74], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [27,80], [27,81], [27,81], [27,81], [27,81], [27,81], [27,81], [27,82], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [37,74] ],
[ [37,74], [37,74], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [37,74] ],
[ [37,74], [37,74], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [0,0], [37,74] ],
[ [27,81], [27,81], [27,81], [27,81], [27,81], [27,81], [27,81], [27,81], [27,81], [27,81], [27,81], [27,81], [27,81], [27,81], [27,81], [27,81], [27,81], [27,81], [27,81], [27,81], [27,81], [27,81], [27,81], [27,81], [27,81], [27,81], [27,81], [27,81], [27,81], [27,81], [27,81], [27,81], [27,81], [27,81], [27,81], [27,81], [27,81], [27,81], [27,81], [27,81], [27,81], [27,81], [27,81], [27,81], [27,81], [27,81], [27,81], [27,81], [27,81], [27,81] ]
];
var exF;
var pmp = new tabageos.MoverPoint();
var bullets =[];
var pBulletThrott = 300;
var eBulletThrott = 400;
var gun;
var enemies = [];
function ThreeSixtyShooter() {
//the games using one of the Rotating Classes work easiest at either no scale or full scale.
//to get them to work at some scale in between we'd have to calculate the difference in scale and camera cords and add that to the mouseMoveOffset.
var gameSpecs = {
gWidth:800, gHeight:320,cameraWidth:320, cameraHeight:320,
cameraFollowOffsetX:-320, cameraFollowOffsetY:0, tileW:16, tileH:16,
spriteSheetImage: "thesheet.png", containerDivId:"container", rootDivId:"root",
controllerDivId:"controller", gameScale:0, hudScale:8,useScreenOrganizer:true,startWidth:50, startHeight:25,
controllerHeight:144, initialLives:3, initPlayerPosition:new tabageos.MoverPoint(64,16),
gameLoop:this.loop,initializationSpecifics:this.setup, disableBackgroundAlpha:0,useSceneChanger:0,
addedResizeMethod:null, sceneResetSpecifics:null,fullResetSpecifics:null, additionalSceneResetSpecifics:null,
positionResetSpecifics:null, cameraType:1, backgroundColor:"#c8c8c8"
};
tabageos.GameSkeleton.call(this, gameSpecs);
this.establishKeyEventsForReset();
}
ThreeSixtyShooter.constructor = ThreeSixtyShooter;
ThreeSixtyShooter.prototype = Object.create(tabageos.GameSkeleton.prototype);
ThreeSixtyShooter.prototype.setup = function(sax,say) {
this.lives = 3;
this.title.floor.context.fillStyle = "#ffffff";
this.title.floor.context.fillRect(0,0,1280,128);
this.backgroundLayer.copyPixels(this._image, new tabageos.Rectangle(16,1760,800,320), new tabageos.MoverPoint());
tabageos.BlitMath.specificPatternBlit(this.display, this._image, map, 16,16);
var rotationImage = new tabageos.CanvasObject(null,96,96);
var wd = new tabageos.WayDeterminer(0,null);
wd._defaultReturn = true;
//just the gun is a RotatingShooter
gun = new tabageos.RotatingShooter(wd,this._image,this.charLayer,null,0,0,32,32, rotationImage, new tabageos.Rectangle(32,256,96,96),this.charLayer,new tabageos.Rectangle(1472,128,16,16));
var playerAnimation = new tabageos.CanvasAnimation(this._image,this.charLayer,null,0,0,16,16);
playerAnimation.animationSpecs = {
"left":[9, [52,9,52,9,52,9,52,9,50,9,50,9,50,9,50,9,48,9,48,9,48,9,48,9,46,9,46,9,46,9,46,9,44,9,44,9,44,9,44,9,42,9,42,9,42,9,42,9,40,9,40,9,40,9,40,9,38,9,38,9,38,9,38,9] ],
"right":[11, [38,11,38,11,38,11,38,11,40,11,40,11,40,11,40,11,42,11,42,11,42,11,42,11,44,11,44,11,44,11,44,11,46,11,46,11,46,11,46,11,48,11,48,11,48,11,48,11,50,11,50,11,50,11,50,11,52,11,52,11,52,11,52,11] ],
"up":[11, [38,11,38,11,38,11,38,11] ],
"down":[9, [38,9,38,9,38,9,38,9] ],
"upleft":[9, [52,9,52,9,52,9,52,9] ],
"upright":[11, [38,11,38,11,38,11,38,11] ],
"downleft":[9, [38,9,38,9,38,9,38,9] ],
"downright":[11, [52,11,52,11,52,11,52,11] ],
"rightidle":[9, [34,9,34,9,34,9,34,9] ],
"leftidle":[11, [34,11,34,11,34,11,34,11] ],
"upidle":[11, [38,11,38,11,38,11,38,11] ],
"downidle":[9, [38,9,38,9,38,9,38,9] ],
"idle":[9, [34,9,34,9,34,9,34,9] ]
};
playerAnimation.currentAnimation = "right";
playerAnimation.fromWidthOffset = 16;
playerAnimation.fromHeightOffset = 16;
//the player is just a MapTraveler.
this.player = new tabageos.MapTraveler(64,16,16,16,map,playerAnimation,0,0,16,16,map.length,map[0].length);
this.player._gravityLevel = .285;
this.player._jumps = 1;
this.player._jumpSpeed = 7;
this.player._autoAnimate = 1;
this.resizeRootForNoTouch = 1;
this.charLayer.context.fillStyle = "#6495ed";
this.controller.basicArrows.d = 69;
this.controller.basicWasd.d = 69;
if(tabageos.seekTouch()) {
this.controller._basicControllerButtonTakedown();
this.controller.rotationalControllerButtonSetup();
}
this.beforeStartGameLoop = function(e) {
this.controller.centerRotationX = ((window.innerWidth/2) - 160) + 32;
//window.console.log(this._scaleRectRef);
this.controller.centerRotationY = 320 + 72;
};
exF = new tabageos.ExplosionFactory(16,16,9,160,16);//many quick animations, all horizontal in the sprite sheet, all from a default location if not specified otherwise.
var goDiv = document.createElement("div");
goDiv.setAttribute("style", "position:absolute;font-family: 'soupoj', sans-serif;width:640px;color:black;text-align:center");
goDiv.innerHTML = "<h2>Game Over</h2><br /><span style='cursor:pointer' onclick='tabageos.GameSkeleton.game.hudExit()'>Press Start</span>";
this.gameOverContainer.div.appendChild(goDiv);
//we call setupMouseTouchHandle passing 1 to also handle mouse down, which we get via the mouseIsDown property.
this.setupMouseTouchHandle(1);
this.mouseMoveOffset = 32;//default is 32.
var twoe = 0;var en;var enCa;
for(twoe;twoe < 2;twoe++) {
enCa = new tabageos.CanvasAnimation(this._image,this.charLayer,null,0,0,48,48);
enCa.animationSpecs = {"left":[16, [87,16,87,16,87,16,87,16] ], "right":[16, [91,16,91,16,91,16,91,16] ] };
enCa.currentAnimation = "right";
enCa.fromXOffset = -(48 - 16);
enCa.fromYOffset = -(48 - 16);
en = new tabageos.MapMover(twoe ? 600 : 500,!twoe ? 32 : 100,48,48,map,enCa,1,0,16,16,map.length,map[0].length);
en.health = 100;
en.edx = 0;
enemies.push(en);
}
};
ThreeSixtyShooter._resizing = function(e) {
//switching to fullscreen.
if( tabageos.GameSkeleton.game.gameScale != 1 && tabageos.GameSkeleton.game.hudScale != 3) {
//hide the code section.
document.getElementById("thecode").setAttribute("style", "display:none");
//set the gameScale to full screen then re-resize the game using the instance method.
tabageos.GameSkeleton.game.gameScale = 1;
tabageos.GameSkeleton.game.hudScale = 3;
tabageos.GameSkeleton.game.__instanceBasicTwoLayerResize();//resize with instance variables
//calculate the centerRotation cords.
tabageos.GameSkeleton.game.controller.centerRotationX = 0 + 32;
tabageos.GameSkeleton.game.controller.centerRotationY = 320 + (tabageos.GameSkeleton.game._scaleRectRef.height/(tabageos.GameSkeleton.game._scaleRectRef.height/320)) - 72;
//the container style position needs to be relative if it is among other content, and absolute if it is to fill the screen.
//otherwise mouse calculations will not be correct.
document.getElementById("container").style.position = "absolute";
//to switch back from fullscreen to no scale, we'd have to actually set up a scale instead of 0.
//to see an example of that see the top down shooter example.
}
};
ThreeSixtyShooter.prototype.loop = function() {
var cb = this.controller.buttons;
this.player.move(cb.left,cb.right,cb.up,cb.down);
gun.setX( this.player.x - 8 );//set the gun to be in middle of player.
gun.setY( this.player.y - 16 );
if(!this.device) {
gun.rotateWithMoverPoint(this.mousePoint, 32,32);//gun rotates with the mouse/touch.
} else {
gun.setRotation(this.controller.rotation);
}
if(cb.d || this.mouseIsDown) {//if d button or mouse held down, gun shoots.
if(pBulletThrott <= 0) {
pBulletThrott = 300;
bullets.push(gun.shoot(-8,-8));
} else { pBulletThrott -= 33.3; }
}
var i = 0;var b;var en; var ei = 0;
for(i;i<bullets.length;i++) {//bullet movement.
b = bullets[i];
b.move();
b.blit();
//if the bullet goes off screen recycle it.
if(b.x < this.camera.v.x || b.x > this.camera.v.x + this.camera.v.width || b.y < 0 || b.y > this.camera.v.y + this.camera.v.height) {
tabageos.GeometricMath.splice(bullets, bullets.indexOf(b));//take bullet out of bullets array.
gun.reclaimBullet(b);//put it back in the guns pool of bullets.
break;
}
ei = 0;
for(ei;ei<enemies.length;ei++) {//for each enemy.
en = enemies[ei];
if(tabageos.GeometricMath.testForPointInCircle(b._pos,32,en._pos)) {//if the bullet hits it.
exF.addExplosion(b.x,b.y ,1,320,16,32,32,1);//show an explosion animation where the bullet hit.
tabageos.GeometricMath.splice(bullets, bullets.indexOf(b));
gun.reclaimBullet(b);
en.health -= 1;
this._helperRect.x = en.x + (en.width * .5);
this._helperRect.y = en.y - (16/2);
this._helperRect.width = Math.round(en.health/5);
this._helperRect.height = 3;
this.charLayer.drawRect(this._helperRect, "#ff0000");//enemy health bar.
if(en.health <= 0) {
tabageos.GeometricMath.splice(enemies, enemies.indexOf(en));
exF.addExplosion(b.x,b.y ,1,320,16,32,32,.2);
}
break;break;
}
}
}
i = 0; var rightTile, leftTile;
for(i;i<enemies.length;i++) {//move and draw each enemy.
en = enemies[i];
rightTile = tabageos.BlitMath.checkTileValueAt(en.x + en.width + 4,en.y+en.height+2,map,16,16);
leftTile = tabageos.BlitMath.checkTileValueAt(en.x - 4,en.y+en.height+2,map,16,16);
if(!en._grounded) { en._state = 3; en._veloc.y = 4; en.update(); }//cause the enemy to fall if it is in the air.
if(en._pRight || (rightTile[0] == 0 && rightTile[1] == 0)) {//if colliding right or the right floor tile is empty, go left.
en.edx = en._pLeft ? 0 : 1;
} else if (en._pLeft || (leftTile[0] == 0 && leftTile[1] == 0)) {
en.edx = 0;
}
en.move(en.edx,en.edx ? 0 : 1,0,0);//use edx to go left or right.
en._canvasAnimation.x = en.x+1-1;en._canvasAnimation.y=en.y+1-1;
en._canvasAnimation.currentAnimation = (en._veloc.x < 0) ? "left" : (en._veloc.x >= 1 ? "right" : en._canvasAnimation.currentAnimation+"");
en._canvasAnimation.animate(.5);
en._canvasAnimation.blit();//draw to charLayer.
}
exF.displayExplosions(this.charLayer, this._image);
pmp.x = gun.x - 32; pmp.y = gun.y - 32;//offset the drawing of the rotation.
gun.blit(0,0, pmp);
};
window.resizeToFullScreenGame = function() {
ThreeSixtyShooter._resizing();
};
new ThreeSixtyShooter();
})();
back to top