사용자: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 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(); | |||
</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();