Simple Tank

Personal rewrite of TankTrouble2, a lovely Flash game, whose latest version is now here.

This project is open source on Github.

Tips

  • Player 1: Use Q to shoot and ESDF to move
  • Player 2: Use M to shoot and direction keys to move

ScoreBoard

Player 1

0

Player 2

0

4 changes: 2 additions & 2 deletions4 run.sh @@ -4,7 +4,7 @@ FLAG_WATCH="--watch" if [[ $1=$FLAG_WATCH ]] then deno run --watch --allow-net --allow-read scripts/server.ts deno run --watch --allow-net --allow-read server.ts else deno run --allow-net --allow-read scripts/server.ts deno run --allow-net --allow-read server.ts fi 6 changes: 3 additions & 3 deletions6 scripts/commons.js @@ -15,8 +15,8 @@ export const Display = { FPS: 60, TPS: 200, // ticks per second CANVAS_WIDTH: 1080, CANVAS_HEIGHT: 1080, CANVAS_WIDTH: 960, CANVAS_HEIGHT: 960, CANVAS_PADDING: 50, } @@ -37,7 +37,7 @@ export const Constants = { TANK_HEIGHT: 5.5, TANK_BARREL_WIDTH: 0.75, TANK_BARREL_HEIGHT: 1.0, TANK_HEIGHT_BIAS: 3.25, TANK_HEIGHT_BIAS: 3.25, // pivot to barrels' tip TANK_BODY_HEIGHT: 4.5, TANK_V_FORWARD: 20 / Display.TPS, TANK_V_BACKWARD: -12.5 / Display.TPS, 13 changes: 11 additions & 2 deletions13 scripts/draw.js @@ -4,7 +4,8 @@ import { Colors } from "./colors.js" import { sprite_map, map_size } from "./objs.js" const score_p1 = document.getElementById("player1") const score_p2 = document.getElementById("player2") const cvs = document.getElementById("cvs") const ctx = cvs.getContext("2d") @@ -21,7 +22,15 @@ function drawCircle(x_, y_, r_, c) { ctx.fill() } let scale = undefined export function incScore(p) { if (p == 1) { score_p1.textContent = Number(score_p1.textContent) + 1 } else { score_p2.textContent = Number(score_p2.textContent) + 1 } } let scale export function initCanvas() { cvs.width = Display.CANVAS_WIDTH 7 changes: 6 additions & 1 deletion7 scripts/dynamics.js @@ -12,14 +12,17 @@ import { add, clamp, tankBodyBox, tankPoly } from "./maths.js" import { sprite_map, import { setWinner, sprite_map, newBullet } from "./objs.js" // handle objects and relationships export function prestep() { let tank_ids = [] for (const [id, sprite] of sprite_map.entries()) { switch (sprite.type) { case "tank": tank_ids.push(id) if (sprite.v_ang == 0) { sprite.v_ang = (sprite.leftspin ^ sprite.rightspin) ? Constants.TANK_SPIN_V_ANG * @@ -46,6 +49,8 @@ export function prestep() { default: } } if (tank_ids.length < 2) setWinner(tank_ids[0]) } // handle movements 14 changes: 10 additions & 4 deletions14 scripts/objs.js @@ -5,13 +5,19 @@ import { randInt } from "./maths.js" import { genMap, validateMap } from "./map.js" export const sprite_map = new Map() export const tank_list = [] export const bullet_list = [] export let map_size = undefined export let sprite_map = new Map() export let winner_id export let map_size let regions, max_c export function setWinner(id) { winner_id = id } export function initMap() { sprite_map = new Map() setWinner(false) map_size = { height: randInt(MapSize.MINL, MapSize.MAXL + 1), width: randInt(MapSize.MINL, MapSize.MAXL + 1) 23 changes: 19 additions & 4 deletions23 scripts/simple_tank.js @@ -2,32 +2,44 @@ import { Display } from "./commons.js" import { initCanvas, blitMap, drawSprites, incScore } from "./draw.js" import { sprite_map, winner_id, setWinner, newTank, initMap } from "./objs.js" import { prestep, step, collide } from "./dynamics.js" let tank1_id, tank2_id function blit() { blitMap() drawSprites() } function refresh() { prestep() if (winner_id) { incScore(winner_id == tank1_id ? 1 : 2) gameStart() return } step() collide() } (function main() { function gameStart() { initMap() initCanvas() const tank1_id = newTank("assets/tank1.png") const tank2_id = newTank("assets/tank2.png") tank1_id = newTank("assets/tank1.png") tank2_id = newTank("assets/tank2.png") const tank = (i) => sprite_map.get([tank1_id, tank2_id][i]) @@ -98,8 +110,11 @@ function refresh() { }) console.log(sprite_map) } (function main() { setInterval(blit, 1000 / Display.FPS) setInterval(refresh, 1000 / Display.TPS) gameStart() })() 12 changes: 12 additions & 0 deletions12 scripts/server.ts → server.ts @@ -76,6 +76,18 @@ async function handleRequest(request: Deno.RequestEvent) { } ) ) } else if (/css\/.*css/.test(pathname)) { request.respondWith( new Response ( await Deno.readFile('.' + pathname), { status: Status.OK, headers: { "content-type": "text/css" }, } ) ) } else { request.respondWith( new Response ("Path Not accessible",