HTML5 Canvas と JavaScript を使って作る追尾サンプル 04 – マウスに追尾する処理を追加

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

今回は, マウスの位置について来る処理を追加して少し遊べるようにします.

SAMPLE

今回制作するサンプルはこちら.

VIDEO

チュートリアルムービー

CODE

今回制作したサンプルの script 部分です.

// 定数
var FPS             = 60;
var SCREEN_WIDTH    = 640;
var SCREEN_HEIGHT   = 480;
var CIRCLE_RADIUS   = 30;
var CIRCLE_MAX_NUM  = 10;
var CIRCLE_PURSUIT_RATE = 0.1;  // 収束率

// グローバル
var global = {};
global.context      = null;
global.circleList   = [];
global.mouseX       = null;
global.mouseY       = null;

window.onload = function()
{
    init();
    run();
};

var init = function()
{
    var canvas = $id("c");
    global.context = canvas.getContext("2d");
    
    // Circle を生成
    for (var i=0; i

TIPS

マウスの座標を取得

マウスの座標の取得についてはこちらで詳しく書いています.

最初に生成した円のみマウスを追うようにすることで連鎖的に円がついてくるようにしています.

次回は番外編ということで iPhone 対応してみましょう!!

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。