webdevpuneet.com

Related Snippets

67 in Games category
1–6 of 60

Pocket Artillery Tank Duel

Switchyard Train Switch Puzzle Game

Checkers Game

Mini Sudoku Puzzle (6x6)

Battleship Game vs Computer

Color Sort Water Puzzle

Pocket Artillery – Free HTML, CSS & JS Tank Duel Game

Pocket Artillery Tank Duel · Games · Plain HTML, CSS & JS · Live preview

CategoryGames
TagsCanvasKeyboard NavigationGames

Copy & paste

Source Code

<div class="pa-wrap">
  <div class="pa-header">
    <h2>Pocket Artillery</h2>
    <div class="pa-scores">
      <span class="pa-you"><span id="pa-name-you">You</span> <strong id="pa-score-you">0</strong></span>
      <span class="pa-shot" id="pa-shot">Shot 1 / 6</span>
      <span class="pa-cpu"><span id="pa-name-cpu">CPU</span> <strong id="pa-score-cpu">0</strong></span>
    </div>
  </div>

  <div class="pa-stage">
    <canvas id="pa-canvas" aria-label="Artillery battlefield with two tanks"></canvas>
    <div class="pa-overlay" id="pa-overlay">
      <p class="pa-title" id="pa-title">Pocket Artillery</p>
      <p class="pa-sub" id="pa-sub">Drag on the field to aim. Six shots each, closest blasts score most.</p>
      <div class="pa-opts">
        <div class="pa-seg" id="pa-mode" role="group" aria-label="Mode">
          <button type="button" data-v="cpu" class="on">vs CPU</button>
          <button type="button" data-v="two">2 players</button>
        </div>
        <div class="pa-seg" id="pa-diff" role="group" aria-label="CPU level">
          <button type="button" data-v="0">Easy</button>
          <button type="button" data-v="1" class="on">Normal</button>
          <button type="button" data-v="2">Hard</button>
        </div>
      </div>
      <div class="pa-btns">
        <button class="pa-btn" id="pa-play" type="button">Play</button>
        <button class="pa-btn pa-btn-alt" id="pa-daily" type="button">Daily map</button>
      </div>
      <p class="pa-best" id="pa-best"></p>
    </div>
  </div>

  <div class="pa-panel" id="pa-panel">
    <label class="pa-ctl"><span>Angle <strong id="pa-angle-val">55</strong>&deg;</span>
      <input id="pa-angle" type="range" min="0" max="180" value="55" aria-label="Angle">
    </label>
    <label class="pa-ctl"><span>Power <strong id="pa-power-val">60</strong></span>
      <input id="pa-power" type="range" min="10" max="100" value="60" aria-label="Power">
    </label>
    <button class="pa-fire" id="pa-fire" type="button">Fire!</button>
  </div>
  <div class="pa-weapons" id="pa-weapons" role="group" aria-label="Weapons"></div>
  <div class="pa-foot">
    <span>Drag the field or arrows to aim &middot; Space: fire &middot; 1-8: weapon</span>
    <button class="pa-mute" id="pa-mute" type="button" aria-pressed="false">Sound on</button>
  </div>
</div>

Extend with AI

Take This Snippet Further With AI

Paste this snippet's HTML, CSS, and JS into an AI coding assistant like Claude and ask it to explain how the height-map terrain, the fixed-step physics and the simulate() function the CPU uses fit together, then ask for a new weapon such as a Napalm shell that leaves a burning patch, or a campaign of maps with rising CPU levels.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text
Build a turn-based artillery tank duel with the HTML5 Canvas API in plain HTML, CSS and JavaScript, no frameworks and no audio files.
- Light, bright look: pale sky gradient, clouds, soft hills, green-topped soil, one coral tank (player, left) and one blue tank (CPU, right).
- Store terrain as a height array with one value per pixel column. Explosions carve a circular crater by lowering columns; a Dirt Ball weapon raises them. Tanks sit on the surface and settle after each blast.
- Controls: Angle slider 0-180, Power slider 10-100, Fire button, arrow keys to aim (Shift for bigger steps), Space to fire, keys 1-8 to choose a weapon, and slingshot-style drag on the field (pull back from the tank: direction = angle, length = power). Works with touch.
- Physics on a fixed 60 Hz step: shell velocity from angle and power, constant gravity, and a per-turn wind from -5 to 5 shown in a badge.
- Eight weapons, each usable once per match: Missile, Big Boom (large radius), Triple (three shells spread by 7 degrees), Bouncer (two hops), Mini Nuke (huge crater, fewer points), Roller (rolls along the ground after landing), Digger (five stacked craters straight down), Dirt Ball (no points).
- Six shots each, alternating, so players choose which weapons to skip. Score the enemy by blast distance: pts * (1 - distance / (radius + 13)), with floating +points text.
- CPU opponent with Easy, Normal and Hard levels (aim error and slip chance): pick an unused weapon, try many angle and power pairs with an offline simulate() copy of the physics, choose the closest landing to the player, add a random error. Also a 2 players mode on one device that swaps the controls between the tanks.
- Random map button, Daily map button seeded from the date, best score saved in localStorage inside try/catch.
- Particles, expanding rings, screen shake, Web Audio synth sounds with a mute button, a start overlay and a results overlay.

Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.

What's included

Features

Destructible terrain stored as a one-dimensional height map, carved by craters and raised by dirt
Wind that changes every turn and bends the shells, shown in a badge on the field
Eight weapons, each usable once, six shots per player: Missile, Big Boom, Triple, Bouncer, Mini Nuke, Roller, Digger and Dirt Ball
Drag-to-aim on the field, slingshot style, plus sliders and keyboard controls
Two-player hot-seat mode on one device, or a CPU with Easy, Normal and Hard levels
CPU opponent that simulates around 1,300 shots, picks the closest and adds a level-based human-like error
Distance-based scoring, so near misses still earn points
Daily map from a date seed plus a random map button, using a small seeded random generator
Fixed 60 Hz physics step, so shell flight is the same on every screen refresh rate
Bright light theme with a sky, clouds and soft hills, plus particles, rings and screen shake
Mouse, touch and keyboard controls, Web Audio sound with a mute button, best score in localStorage

About this UI Snippet

Pocket Artillery — Drag-to-Aim, Destructible Terrain, Eight Weapons & an AI That Simulates Its Shots

Screenshot of the Pocket Artillery Tank Duel snippet rendered live

Artillery duels are one of the oldest game ideas on the PC: two tanks, a hill between them, and a guess at angle and power. This snippet is a bright, light-themed canvas version you can play at once: six shots each, eight weapons to choose from that can each be fired only once, wind that changes every turn, and terrain that really crumbles when it is hit. Pull back on the field like a slingshot to aim, play the CPU on three levels, or hand the device to a friend for a two-player duel.

Terrain as a height map you can carve

The ground is one array, ground[x], holding the surface height of every pixel column. A blast calls crater(cx, cy, r), which lowers each column inside the circle to the bottom of that circle, and the Dirt Ball does the opposite with addDirt(). Because the map is just numbers, collision is a single lookup (s.y >= ground[Math.round(s.x)]), the tanks settle by reading the same array, and the soil and grass are drawn from it every frame.

Ballistics with wind on a fixed time step

Each shell gets a velocity from the angle and power (speed = power * 0.085), then gravity pulls vy down and the wind adds a small sideways push each step. The loop runs on a 60 Hz accumulator, so the flight is identical on a 144 Hz monitor, and the same step rule is reused by the CPU when it plans a shot.

A CPU that tests shots before it fires

On its turn the computer tries about 1,300 angle and power pairs through simulate(), a copy of the physics that stops at the first terrain hit, and keeps the pair that lands closest to your tank. Then it adds a random error, with an occasional bigger slip. The three levels only change those numbers: Easy errs by about 6 degrees and slips often, Normal by 2.4, Hard by under 1, so the same code gives a beatable opponent or a sharp one.

Scoring by closeness

A blast scores pts * (1 - distance / reach) for the enemy tank, so a direct hit is worth the full value and a near miss still pays a little. Each weapon trades radius against points: the Mini Nuke covers a huge area for fewer points, and the Dirt Ball scores nothing but can bury a tank.

Weapons with their own behaviour

The Roller lands, then runs along the height map, faster downhill, until it meets a wall, a tank or runs out of steps. The Digger carves five stacked craters straight down and scores only on a tight radius. The Triple fires three shells 7 degrees apart, and the Bouncer hops twice before it explodes. Each one is a few lines in fire() or step(), keyed by its id.

Drag to aim, or play two-player

On the field, a pointer drag measures the pull from the tank: the direction gives the angle and the length gives the power, so it feels like a slingshot and works the same with a mouse or a finger. In the two-player mode the same controls act on whichever tank is up (cur()), and the CPU turn is simply skipped.

Step by step

How to Use

  1. 1
    Start a matchChoose "vs CPU" (Easy, Normal or Hard) or "2 players", then press "Play" for a random map or "Daily map" for the same map everyone gets today. You are the coral tank on the left.
  2. 2
    Set angle and powerDrag on the field away from your tank like a slingshot (the pull sets both), or use the sliders, or the arrow keys (Shift moves five at a time). A dotted line shows where the barrel points.
  3. 3
    Read the windThe Wind badge at the top shows the direction and strength for this turn. Aim a little into it so the shell drifts back onto the target.
  4. 4
    Pick a weapon and fireChoose one of the eight weapons (keys 1 to 8) and press "Fire!" or Space. Each weapon can be used once per match, and you get six shots, so you choose which two to skip.
  5. 5
    Score the closest blastAfter six shots each the higher score wins. Your best score is saved in the browser.

Real-world uses

Common Use Cases

Quick arcade mini-game for a site
A match takes about two minutes and needs no assets or libraries, so it fits an Easter egg page, a 404 screen or a "while you wait" corner.
Teaching projectile motion
Angle, power, gravity and wind are all visible and adjustable, which makes the game a hands-on demo for a physics or maths lesson.
Reference for height-map terrain
Carving and filling a column array is the simplest way to get destructible ground, and the code shows it in under 20 lines.
Example of an AI that plans by simulation
The CPU does not cheat: it runs the same physics offline, scores each result and picks the best, a pattern reused in many turn-based games.
Branded reskin for a campaign
Swap the tank colours, the sky and the weapon names for brand versions to make a "beat our mascot" promo game.
Local two-player duel on one screen
The built-in 2 players mode hands the same controls to each tank in turn, which suits a classroom, a break room or a phone passed between friends.
Related: Tank Arena
See the Tank Arena for a top-down tank shooter that pairs well with this turn-based duel.

Got questions?

Frequently Asked Questions

The ground is an array with one surface height per pixel column. A blast lowers every column inside its circle to the bottom of that circle, so the hole is round, and the tanks then read the new height and drop down into it.

It finds the best angle and power by simulating many shots, then adds a random error of a couple of degrees, and now and then a bigger one. Lower the error values in cpuTurn() for a harder opponent or raise them for an easier one.

Each physics step adds wind * 0.0025 to the shell's horizontal speed. The wind is a whole number from -5 to 5 picked from the seeded generator at the start of every turn.

It seeds the random generator with today's date as a number, so the terrain, the tank positions and the wind sequence are the same for everyone that day.

Add an entry to the WEAPONS array with a name, blast radius, points and colour. Special behaviour such as the Triple spread, the Bouncer hops, the Roller run or the Digger tunnel lives in fire(), step() and explode(), keyed by the weapon id. The weapon buttons are built from the array, so a new entry shows up by itself.

Edit the LEVELS array: err is the aim error in degrees and slip is the chance of a bigger mistake. Easy, Normal and Hard just select one of the three rows, and the search over angles and powers stays the same.

A pointerdown on the canvas starts a drag. The vector from the pointer to the tank gives the angle (atan2) and its length divided by 1.3 gives the power, and both are clamped. Pointer events and touch-action: none make it work for mouse and touch.