사용자:Riemann/testplugin

요령 => 아래 변수들의 첫번째 인자들을 내용에 맞게 자르고 붙여넣어주세요

!!!!!!!!!!!!!!!! 플러그인 정보 입력 구간 윗부분은 만지지 마시오 절대로!!!!!!!!!!!!!!!!!

!!!!!!!!!!!!!!!! 플러그인 정보 입력 구간 끝 아래는 만지지 마시오!!!!!!!!!!!!!!!!!

이 플러그인에 대한 설명문서는 사용자:Riemann/testplugin/설명문서에서 만들 수 있습니다.

		 
$("#wa").append('<canvas id="can" width="500" height="500">Alt text</canvas>');
var c = document.getElementById("can");
var ctx = c.getContext("2d");

var Earth = {};
Earth.x = 250;
Earth.y = 250;
Earth.draw = function() {
    ctx.beginPath();
    ctx.fillStyle = 'gray';
    ctx.arc(this.x, this.y, 50, 0, 2 * Math.PI);
    ctx.fill();
}

var You = {};
You.x = 250;
You.y = 250;
var mouseX;
var mouseY;

document.addEventListener("mousemove", mouseMoveHandler, false);
function mouseMoveHandler(e) {
    mouseX = e.clientX - $("#can").offset().left;
    mouseY = e.clientY - $("#can").offset().top;
}

You.draw = function() {
    ctx.beginPath();
    ctx.fillStyle = 'black';
    ctx.arc(this.x, this.y, 10, 0, 2 * Math.PI);
    ctx.fill();
}

You.update = function() {
    event = new MouseEvent("mouse");
    norm = Math.sqrt( Math.pow(mouseX - 250, 2) + Math.pow(mouseY - 250, 2));
    this.x = 250 + 50 * (mouseX - 250) / norm;
    this.y = 250 + 50 * (mouseY - 250) / norm;
}

function Asteroid(x, y, dx, dy) {
    this.x = x;
    this.y = y;
    this.dx = dx;
    this.dy = dy;
}

Asteroid.prototype.draw = function() {
    ctx.beginPath();
    ctx.fillStyle = 'gray';
    ctx.arc(this.x, this.y, 20, 0, 2 * Math.PI);
    ctx.fill();
}

Asteroid.prototype.update = function() {
    this.x += this.dx;
    this.y += this.dy;
}

var asterList = []

function loop() {
    ctx.fillStyle = 'rgb(240, 240, 240)';
    ctx.fillRect(0, 0, 500, 500);
    
    while (asterList.length < 5) {
        var aster = new Asteroid(Math.floor(460 * Math.random()) + 20, Math.floor(460 * Math.random()) + 20, Math.cos(2 * Math.PI * Math.random()), Math.sin(2 * Math.PI * Math.random()) );
        asterList.push(aster);
    }
    
    for (var i = 0; i < asterList.length; i++) {
        asterList[i].draw();
        asterList[i].update();
        if (asterList[i].x > 500 || asterList[i].x < 0 || asterList[i].y > 500 || asterList[i].y < 0) {
            asterList.splice(i, 1);
        }
    }
    
    Earth.draw();
    You.draw();
    You.update();
    
    window.requestAnimationFrame(loop);
}
loop();