hola quisiera que me ayudaran a mover un objeto dentro del canvas para un juejo de ping pong. quiero mover las paletas con el mouse o el teclado. aqui el codigo:
<!DOCTYPE html>
<html>
<head>
<title>Simple Canvas Example</title>
<style>
canvas {
border: 3px #CCC solid;
}
</style>
</head>
<body>
<div id="container">
<canvas id="myCanvas" height="400" width="500"></canvas>
</div>
<script>
var mainCanvas = document.querySelector("#myCanvas");
var mainContext = mainCanvas.getContext("2d");
var canvasWidth = mainCanvas.width;
var canvasHeight = mainCanvas.height;
var xc = 100;
var yc = 100;
var xcc = 150;
var ycc = 150;
var vxx = -6;
var vyy = 1;
var cx = 200;
var cy = 200;
var velx = 2;
var vely = 1;
var vx = 6;
var vy = 2;
var vry = 1;
var vryy = -1;
var ryy = 150;
var rxx = 50;
var ry = 150;
var rx = 350;
var dist = 1;
var dist2 = 1;
var dist3 = 1;
var requestAnimationFrame = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame;
function drawCircle() {
mainContext.clearRect(0, 0, canvasWidth, canvasHeight);
// color in the background
mainContext.fillStyle = "#FCC4E3";
mainContext.fillRect(0, 0, canvasWidth, canvasHeight);
// primera pelota pink
drawBall1(mainContext, xc, yc, "#FF7BC6");
//segunda pelota pink
drawBall2(mainContext, cx, cy, "#DC3EC7");
//tercer palota pink
drawBall1(mainContext, xcc, ycc, "#B50ECB");
//pelota verde
xcc += vxx;
ycc += vyy;
if (xcc > canvasWidth || xcc <0)
{
vxx = -vxx;
};
if (ycc > canvasHeight || ycc <0)
{
vyy = -vyy;
};
if (vxx>0 && xcc>= rx && xcc<=rx+10 && ycc >= ry && ycc <= ry+150)
{ vxx = -vxx;
xcc = xcc-10;
mainContext.fillStyle = "#504400";
mainContext.fillRect(0, 0, canvasWidth, canvasHeight);
}
if (vxx>0 && xcc>= rxx && xcc<=rxx+10 && ycc >= ryy && ycc <= ryy+150)
{ vxx = -vxx;
xcc = xcc-10;
mainContext.fillStyle = "#099099";
mainContext.fillRect(0, 0, canvasWidth, canvasHeight);
}
if (vxx<0 && xcc>=rx && xcc<= rx+20 && ycc >= ry && ycc <= ry+ 150)
{ vxx = -vxx;
}
if (vxx<0 && xcc>=rxx && xcc<= rxx+20 && ycc >= ryy && ycc <= ryy+ 150)
{ vxx = -vxx;
}
//pelota azul
cx += velx;
cy += vely;
if (cx > canvasWidth || cx < 0)
{
velx = -velx;
};
if (cy > canvasHeight || cy < 0)
{
vely = -vely;
};
if (velx>0 && cx>= rx && cx<=rx+10 && cy >= ry && cy <= ry+150)
{ velx = -velx;
cx = cx-10;
}
if (velx>0 && cx>= rxx && cx<=rxx+10 && cy >= ryy && cy <= ryy+150)
{ velx = -velx;
cx = cx-10;
}
if (velx<0 && cx>=rx && cx<= rx+20 && cy >= ry && cy <= ry+ 150)
{ velx = -velx;
}
if (velx<0 && cx>=rxx && cx<= rxx+20 && cy >= ryy && cy <= ryy + 150)
{ velx = -velx;
}
// drawBall(mainContext, xc-50, yc, "red");
//pelota roja
xc += vx;
yc += vy;
if (xc > canvasWidth || xc < 0)
{
vx = -vx;
};
if (yc > canvasHeight || yc < 0)
{
vy = -vy;
};
ry = ry - vry;
if (ry < 0 || ry> canvasHeight - 150)
{
vry = -vry ;
}
ryy = ryy - vryy;
if (ryy < 0 || ryy> canvasHeight - 150)
{
vryy = -vryy;
}
if (vx>0 && xc>= rx && xc<=rx+10 && yc >= ry && yc <= ry+150)
{ vx = -vx;
xc = xc-10;
}
if (vx>0 && xc>= rxx && xc<=rxx+10 && yc >= ryy && yc <= ryy+150)
{ vx = -vx;
xc = xc-10;
}
if (vx<0 && xc>=rx && xc<= rx+20 && yc >= ry && yc <= ry+150)
{ vx = -vx;
}
if (vx<0 && xc>=rxx && xc<= rxx+20 && yc >= ryy && yc <= ryy+150)
{ vx = -vx;
}
//detectar colision entre pelotas
dist=Math.sqrt(((xc-cx)*(xc-cx))+((yc-cy)*(yc-cy)));
dist2=Math.sqrt(((xc-xcc)*(xc-xcc))+((yc-ycc)*(yc-ycc)));
dist3=Math.sqrt(((xcc-cx)*(xcc-cx))+((ycc-cy)*(ycc-cy)));
if ( dist <= 35)
{
}
//cambio x
if (vx < 0 && velx >0 && dist <= 45)
{
vx = -vx;
velx = -velx;
}
if(vx < 0 && vxx >0 && dist2 <= 30)
{
vx = -vx;
vxx = -vxx;
}
if (vxx < 0 && velx >0 && dist3 <= 45)
{
vxx = -vxx;
velx = -velx;
}
//cambio y
if (vy < 0 && vely >0 && dist <= 45)
{
vy = -vy;
vely = -vely;
}
if (vy < 0 && vyy >0 && dist2 <= 30)
{
vy = -vy;
vyy = -vyy;
}
if (vyy < 0 && vely >0 && dist3 <= 45)
{
vyy = -vyy;
vely = -vely;
}
//cond1
if (vx < 0 && velx < 0 && dist <= 45)
{
vx = -vx;
}
if (vx < 0 && vxx < 0 && dist2 <= 30)
{
vx = -vx;
}
if (vxx < 0 && velx < 0 && dist3 <= 45)
{
vxx = -vxx;
}
//cond2
if (vy < 0 && vely <0 && dist <= 45)
{
vy = -vy;
}
if (vy < 0 && vyy <0 && dist2 <= 30)
{
vy = -vy;
}
if (vyy < 0 && vely <0 && dist3 <= 45)
{
vyy = -vyy;
}
requestAnimationFrame(drawCircle);
}
drawCircle();
function drawBall1(context, cx, cy, color)
{ context.fillStyle = "rgb(41,155,243)";
context.fillRect (rx, ry, 20, 150);
context.beginPath();
var radius = 20;
context.arc(cx, cy, radius, 0, Math.PI * 2, false);
context.closePath();
// color in the circle
mainContext.fillStyle = color;
mainContext.fill();
}
function drawBall2(context, cx, cy, color)
{ context.fillStyle = "rgb(41,155,243)";
context.fillRect (rxx, ryy, 20, 150);
context.beginPath();
var radius = 20;
context.arc(cx, cy, radius, 0, Math.PI * 2, false);
context.closePath();
// color in the circle
mainContext.fillStyle = color;
mainContext.fill();
}
</script>
</body>
</html>