<canvas id="world"width="320" height="320"></canvas>
<script type="text/javascript">

/* グローバル変数の宣言 */
var SCREEN_SIZE = 282; // キャンバスの幅
var FPS = 60; // フレームレート
var canvas; //= document.getElementById('world');
var context; //= canvas.getContext('2d');
var x;
var y;
var angle = 0; // 角度
var distance; // おもちゃの中心までの距離
var speed; // 速度
var acceleration; // 加速度
var RESISTANCE = 0.05; // 空気抵抗

function start() {
  /* ゲームの初期化処理と開始処理 */
  canvas = document.getElementById('world'); // canvas要素を取得
  canvas.width = canvas.height = SCREEN_SIZE; // キャンバスのサイズを設定
  context = canvas.getContext('2d');                // コンテキスト
  context.fillStyle = 'rgb(0, 0, 0)';          // 色
  draw();
  update();   // ゲームループ開始
}

function update() { // 距離の計測とキャンバスの描画処理
  canvas.onmousemove = function(event) { // マウスの座標を得る
    x = event.offsetX;
    y = event.offsetY;
  }
  distance = Math.sqrt((SCREEN_SIZE / 2 - x) * (SCREEN_SIZE / 2 - x) + (SCREEN_SIZE / 2 - y) * (SCREEN_SIZE / 2 - y)); // 2点間の距離を計算
  if(angle > 90) angle -= 90;
    acceleration = 0.1 - (distance / 1000); // 0.1は最高速度。おもちゃの中心からマウスが離れると減算される
    if(acceleration > 0) speed += acceleration; // 加速度が0以上なら加速
    speed -= RESISTANCE; // おもちゃの回転は常に空気抵抗を受ける
    if(speed >= 0) angle += speed; else speed = 0; // 速度が0以上なら加速。マイナスなら0
  if(speed != 0) draw(); // canvasを更新
  setTimeout(update, 1000/FPS); // ミリ秒後に再帰
}

function draw() { // キャンバスの描画処理。update関数で呼び出される
  context.save(); // 描画スタイルを保存
  context.clearRect(0, 0, SCREEN_SIZE, SCREEN_SIZE); // 画面をクリア
  context.translate(SCREEN_SIZE / 2, SCREEN_SIZE / 2);
  context.rotate(angle * Math.PI / 180); // おもちゃを回転
  context.fillRect(-100, -100, 200, 200);
  context.restore(); // 描画スタイルを復元
}
start();
</script>