JSFiddle - React, Tailwind, and code Playground

by Tsuneo Yoshioka

HTML

<div style="width:100%;height:100%;margin:0;">
    <canvas id="canvas-2d" width="1000" height="1000" style="width:50%;height:50%;object-fit:contain;"></canvas>
    <img id="player-image" src="https://paiza.jp//images/bg_ttl_01.gif" width=100 height=100 style="display: none">
  </div>

JavaScript

const canvas = $('#canvas-2d')[0];
const context = canvas.getContext('2d');
const playerImage = $('#player-image')[0];



PLAYER_WIDTH=100
PLAYER_HEIGHT=100
BULLET_WIDTH=10

players = [
	{
  	x: 50,
    y: 50,
    angle: 3.14/2,
  },
  {
  	x:100,
    y:200,
    angle: -3.14/2,
  }
];
bullets = [
	{
  	x: 300,
    y: 300,
  },
	{
  	x: 300,
    y: 400,
  },
]


context.clearRect(0, 0, canvas.width, canvas.height);

context.lineWidth = 10;
context.beginPath();
context.rect(0, 0, canvas.width, canvas.height);
context.stroke();

function show(state){
  context.clearRect(0, 0, canvas.width, canvas.height);

  context.lineWidth = 10;
  context.beginPath();
  context.rect(0, 0, canvas.width, canvas.height);
  context.stroke();

players = [].concat(state.user).concat(state.ai)
  bullets = [].concat(state.user.bullets).concat(state.ai.bullets)

  Object.values(players).forEach((player) => {
    context.save()
         context.translate(player.x, player.y);
          context.rotate(2 * Math.PI * player.angle / 360);
          context.drawImage(playerImage, 0, 0, 50, 50, -PLAYER_WIDTH/2, -PLAYER_HEIGHT/2, PLAYER_WIDTH, PLAYER_HEIGHT);
    context.restore();

    context.font = '30px Bold Arial';
    context.fillText('Player', player.x, player.y - 20);
  });

  Object.values(bullets).forEach((bullet) => {
    context.beginPath();
    context.arc(bullet.x, bullet.y, BULLET_WIDTH/2, 0, 2 * Math.PI);
    context.stroke();
  });


}


let actions = [
  {
    "result": "CONTINUE",
    "userInput": "0\n500 900 -90\n500 100 90\n0\n1\n500 300 90",
    "state": {
      "ai": {
        "bullets": [
          {
            "angle": 90,
            "y": 300,
            "x": 500,
            "id": 101
          }
        ],
        "angle": 90,
        "y": 100,
        "x": 500
      },
      "user": {
        "bullets": [],
        "angle": -90,
        "y": 900,
        "x": 500
      }
    },
    "player": "ai",
    "turn": 0
  },
  {
    "stdout": "FORWARD\n",
    "player":...