<!-- quite definitely a work-in-progress
see the description for more details

- move the tank with the arrow keys ← →
- shoot projectiles with the up arrow key ↑

feel free to use the a-w-d keys or the buttons for the same result
-->

<!-- define a blocky arrow pointing upwards -->
<svg viewBox="0 0 100 100" style="display: none;">
    <defs>
        <rect id="square" x="-10" y="-10" width="20" height="20" fill="currentColor"></rect>
        <g id="arrow" transform="translate(50 50)">
            <use href="#square"></use>
            <use href="#square" y="40"></use>
            <use href="#square" x="40"></use>
            <use href="#square" x="-40"></use>
            <use href="#square" x="20" y="-20"></use>
            <use href="#square" x="-20" y="-20"></use>
            <use href="#square" x="0" y="-40"></use>
        </g>
    </defs>
</svg>

<!-- in the controls re-use the blocky arrow changing the rotation to identify the left and right arrow keys -->
<div class="controls">
    <!-- specify a negative tab index to avoid keyboard focus
    the game is played through the arrow or AWD keys
    -->
    <button tabindex="-1" id="left">
        <svg style="transform: rotate(-90deg);" viewBox="0 0 100 100" width="30" height="30">
            <use href="#arrow"></use>
        </svg>
    </button>
    <button tabindex="-1" id="fire">
        <svg viewBox="0 0 100 100" width="30" height="30">
            <use href="#arrow"></use>
        </svg>
    </button>
    <button tabindex="-1" id="right">
        <svg style="transform: rotate(90deg);" viewBox="0 0 100 100" width="30" height="30">
            <use href="#arrow"></use>
        </svg>
    </button>
</div>