JSFiddle - React, Tailwind, and code Playground

by Tsuneo Yoshioka

HTML

<div id="board"></div>

CoffeeScript

simulate = (element, input, output)->
  console.log("output", output)
  LEN=30
  R=4
  C=4
  poses = []
  init = () ->
    nums = input.split(/[\n ]/)
    for i in [0...R*C]
      if nums[i] == "*"
        nums[i] = "0"
      poses[nums[i]] = i

    nums = output.split(/[ ]/)
    for num in nums
      move(num)
      show()

  move = (num) ->
    dx = [0, 1, 0, -1]
    dy = [1, 0, -1, 0]
    x = poses[num]%C
    y = poses[num]/C
    for i in [0...4]
      x2 = x + dx
      y2 = y + dy
      if poses[num] == "*"
        poses[num] = y2*C+x2
        break

  show = ()->
    str = ""
    for i in [0...(C*R)]
      str += "yy<div id='num" + i + "' style='position:absolute; top:" + (poses[i]/4)*LEN + ";left:" + (poses[i]%4)*LEN + "'>XX</div>"
    element.html(str)
    console.log(str)

  console.log("aa")

  init()

$ ->
  simulate($("#board"), "1 2 3 4 5 6 7 8 9 10 * 11 13 14 15 12", "11 13")