asteroids canvas

by ian_smithz

HTML

<div id="game-container">
      <canvas id="canvas" width="780" height="540"></canvas>
      <div id="left-controls">
        <div id="up" class='button'>THRUST</div>
        <div id="left" class='button'>LEFT</div>
        <div id="right" class='button'>RIGHT</div>
      </div>
      <div id="right-controls">
        <div id="space" class='button'>FIRE</div>
      </div>
    </div>

CSS

#canvas { border:1px solid black; top:0px; left:0px; }
      .button { position:absolute; border:1px solid black; }
      #left-controls { position:absolute; left:1px; bottom:0px; display:none; }
      #right-controls { position:absolute; right:1px; bottom:0px; display:none; }
      #up { width:200px; height:100px; bottom:100px;}
      #left { width:100px; height:100px; bottom:0px;}
      #right { width:100px; height:100px; bottom:0px; left:100px; }
      #space { width:200px; height:200px; bottom:0px; right:0px; }

JavaScript

vector_battle = {"glyphs":{"S":{"x_min":65,"x_max":980,"ha":1045,"o":"m 963 17 l 963 716 l 65 716 l 65 1305 l 980 1305 l 980 1288 l 81 1288 l 81 733 l 980 733 l 980 0 l 65 0 l 65 17 l 963 17 "},"¦":{"x_min":0,"x_max":0,"ha":1361},"/":{"x_min":65.125,"x_max":980.296875,"ha":1045,"o":"m 81 0 l 65 0 l 963 1305 l 980 1305 l 81 0 "},"y":{"x_min":65.375,"x_max":980.546875,"ha":1046,"o":"m 958 1305 l 980 1305 l 528 716 l 528 0 l 512 0 l 512 716 l 65 1305 l 87 1305 l 519 738 l 958 1305 "},"Á":{"x_min":0,"x_max":0,"ha":1361},"g":{"x_min":65,"x_max":980,"ha":1045,"o":"m 980 1305 l 980 1132 l 963 1132 l 963 1288 l 81 1288 l 81 17 l 963 17 l 963 716 l 292 716 l 292 733 l 980 733 l 980 0 l 65 0 l 65 1305 l 980 1305 "},"²":{"x_min":0,"x_max":0,"ha":1361},"–":{"x_min":0,"x_max":0,"ha":1361},"ë":{"x_min":0,"x_max":0,"ha":1361},"ƒ":{"x_min":0,"x_max":0,"ha":1361},"Î":{"x_min":45.1875,"x_max":1008.875,"ha":1045,"o":"m 271 46 l 414 159 l 759 35 l 972 347 l 691 555 l 958 677 l 760 844 l 511 683 l 293 854 l 83 665 l 174 475 l 81 226 l 271 46 m 263 6 l 45 226 l 141 466 l 47 669 l 292 883 l 506 717 l 763 875 l 1005 677 l 739 547 l 1008 352 l 760 6 l 414 130 l 263 6 "},"e":{"x_min":65,"x_max":980.15625,"ha":1045,"o":"m 81 716 l 81 17 l 980 17 l 980 0 l 65 0 l 65 1305 l 980 1305 l 980 1288 l 81 1288 l 81 733 l 980 733 l 980 716 l 81 716 "},"Ã":{"x_min":0,"x_max":0,"ha":1361},"J":{"x_min":65.453125,"x_max":980.609375,"ha":1046,"o":"m 534 1288 l 534 1305 l 980 1305 l 980 0 l 494 0 l 65 437 l 87 437 l 498 17 l 964 17 l 964 1288 l 534 1288 "},"»":{"x_min":261.1875,"x_max":863.984375,"ha":1045,"o":"m 457 1038 l 476 1038 l 863 724 l 476 408 l 457 408 l 845 724 l 457 1038 m 261 1038 l 280 1038 l 668 724 l 280 408 l 261 408 l 649 724 l 261 1038 "},"‐":{"x_min":65,"x_max":980,"ha":1045,"o":"m 65 733 l 980 733 l 980 717 l 65 717 l 65 733 "},"©":{"x_min":128,"x_max":914,"ha":1045,"o":"m 128 350 l 128 1054 l 522 1110 l 914 1054 l 914 350 l 522 297 l 128 350 m 898 364 l 898 1043 l 522 1095 l 144 1043...