возьмите svg рисованного джойстика или пульта и на его элементы вешайте события
и будет стильно и удобно, так как кнопочки можно будет фигурными сделать и цвет менять при нажати, наведении ...
<svg width="100%" height="100%" viewBox="0 0 100 100">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(16,16,16);stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(240,240,240);stop-opacity:1"/>
</linearGradient>
<linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(240,240,240);stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(16,16,16);stop-opacity:1"/>
</linearGradient>
<linearGradient id="grad3" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(168,168,168);stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(239,239,239);stop-opacity:1"/>
</linearGradient>
</defs>
<circle cx="50" cy="50" r="50" fill="url(#grad1)"/>
<circle cx="50" cy="50" r="47" fill="url(#grad2)" stroke="black" stroke-width="1.5px"/>
<circle cx="50" cy="50" r="44" fill="url(#grad3)"/>
<circle cx="50" cy="50" r="20" fill="#cccccc" stroke="black" stroke-width="1px" onclick="alert('stop')"/>
<path d="M50,14 54,22 46,22Z" fill="#222" class="triangle"/>
<path d="M86,50 78,54 78,46Z" fill="#222" class="triangle"/>
<path d="M50,86 54,78 46,78Z" fill="#222" class="triangle"/>
<path d="M14,50 22,54 22,46Z" fill="#222" class="triangle"/>
<path fill="transparent" stroke="none" stroke-width="0"
d="m 64.455124,35.514695 c -9.69143,-8.0148 -19.38275,-7.95157 -29.07394,-0.0398 l -18.20456,-18.20456 c 18.2072,-18.12095 47.24543,-17.86741 65.42439,0.0985 z"
onclick="alert('up')"/>
<path fill="transparent" stroke="none" stroke-width="0"
d="m 64.474024,64.647305 c 8.0148,-9.691429 7.95157,-19.382741 0.0398,-29.073939 l 18.20456,-18.204563 c 18.120946,18.207207 17.867406,47.245432 -0.0985,65.424392 z"
onclick="alert('right')"/>
<path fill="transparent" stroke="none" stroke-width="0"
d="m 35.341384,64.548835 c 9.691429,8.0148 19.382741,7.95157 29.073939,0.0398 l 18.204561,18.20456 C 64.412679,100.91414 35.374454,100.6606 17.195493,82.694695 Z"
onclick="alert('down')"/>
<path fill="transparent" stroke="none" stroke-width="0"
d="m 35.381184,35.474895 c -8.0148,9.69143 -7.95157,19.38275 -0.0398,29.07394 l -18.20456,18.20456 c -18.12095,-18.2072 -17.86741,-47.24543 0.0985,-65.424387 z"
onclick="alert('left')"/>
</svg>