사용자:Riemann/testplugin: 두 판 사이의 차이

리버티게임, 모두가 만들어가는 자유로운 게임
백괴게임>Riemann
잔글 (플러그인 이름을 적절하게 수정.)
백괴게임>Riemann
잔글 (partial work)
14번째 줄: 14번째 줄:
<syntaxhighlight lang="javascript">
<syntaxhighlight lang="javascript">
$("#wa").append('<canvas id="can" width="500" height="500">Alt text</canvas>');
$("#wa").append('<canvas id="can" width="500" height="500">Alt text</canvas>');
        var c = document.getElementById("can");
var c = document.getElementById("can");
        var ctx = c.getContext("2d");
var ctx = c.getContext("2d");
        ctx.fillStyle="#808080";
 
        ctx.beginPath();
var Earth = {};
        ctx.arc(250,250,50,0,2*Math.PI);
Earth.x = 250;
        ctx.fill();
Earth.y = 250;
       
Earth.draw = function() {
        $( document ).on( "mousemove", function( event ) {
    ctx.beginPath();
            ctx.clearRect(0,0,500,500);
    ctx.fillStyle = 'gray';
            ctx.fillStyle="#808080";
    ctx.arc(this.x, this.y, 50, 0, 2 * Math.PI);
            ctx.beginPath();
    ctx.fill();
            ctx.arc(250,250,50,0,2*Math.PI);
}
            ctx.fill();
 
            var mouseX = event.pageX - $("#can").offset().left;
var You = {};
            var mouseY = event.pageY - $("#can").offset().top;
You.x = 250;
            norm = Math.sqrt( Math.pow(mouseX - 250, 2) + Math.pow(mouseY - 250, 2))
You.y = 250;
            X = 250 + 50 * (mouseX - 250) / norm
var mouseX;
            Y = 250 + 50 * (mouseY - 250) / norm
var mouseY;
            ctx.fillStyle="#000000";
 
            ctx.beginPath();
document.addEventListener("mousemove", mouseMoveHandler, false);
            ctx.arc(X, Y, 10,0,2*Math.PI);
function mouseMoveHandler(e) {
            ctx.fill();
    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");
    var bdry = c.getBoundingClientRect();
    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.random(), Math.random() );
    asterList.push(aster);
}
 
for (var i = 0; i < asterList.length; i++) {
    asterList[i].draw();
    asterList[i].update();
}
 
Earth.draw();
You.draw();
You.update();
 
requestAnimationFrame(loop);
}
loop();
</syntaxhighlight>
</syntaxhighlight>
}}
}}

2018년 7월 30일 (월) 16:32 판

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

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






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

이 플러그인에 대한 설명문서는 사용자: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");
    var bdry = c.getBoundingClientRect();
    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.random(), Math.random() );
    asterList.push(aster);
}

for (var i = 0; i < asterList.length; i++) {
    asterList[i].draw();
    asterList[i].update();
}

Earth.draw();
You.draw();
You.update();

requestAnimationFrame(loop);
}
loop();