0

ボールとパドルのアニメーションを作っています。ボールがよく跳ねる。<div>この後、x軸にパドルまたは要素の形をした「パドル」が必要です。このパドルは x 軸でのみ移動する必要があり、x 軸の任意の位置でカーソルをアクティブにすると移動する必要があります。何か助けはありますか？

これが私のコードです：

var x=150;
var y=150;
var dx=2;
var dy=4;
var WIDTH;
var HEIGHT;

var ctx=document.getElementById("canvas").getContext("2d");
ctx.beginPath();
ctx.arc(150,150,10,0,2*Math.PI,true);
ctx.closePath();
ctx.fill();

function init() {
  var ctx=document.getElementById("canvas").getContext("2d");
  return setInterval(draw,10);
}
function draw() {
  ctx.clearRect(0,0,300,300);
  ctx.beginPath();
  ctx.arc(x,y,10,0,2*Math.PI,true);
  ctx.closePath();
  ctx.fill();
  x+=dx;
  y+=dy;
  bounce();
}
function bounce(){
  if(x+dx>300||x+dx<0)
    dx=-dx;
  if(y+dy>300||y+dy<0)
    dy=-dy;
}
init();

そしてフィドルで、ここに。

4

1 に答える 1

1

このコードを試してください：

あなたの var 宣言で：

var mouseX = 150;

あなたのinit()機能では：

document.getElementById("canvas").addEventListener('mousemove', moveHandler);

あなたのdraw()機能では：

ctx.rect(mouseX-20,280,40,5); // rect( x , y , width , height )
ctx.fillStyle = 'black';      //       ^ This is the mouse's X position, minus half the paddle width.
ctx.fill();

最後に、次の関数を追加します。

function moveHandler(e){
  e = e || window.event; // Compatibility.
  mouseX = e.offsetX;
}

したがって、結果のコードは次のようになります。

var x=150;
var y=150;
var dx=2;
var dy=4;
var WIDTH;
var HEIGHT;
var mouseX = 150;
var mouseY;

var ctx=document.getElementById("canvas").getContext("2d");
ctx.beginPath();
ctx.arc(150,150,10,0,2*Math.PI,true);
ctx.closePath();
ctx.fill();

function init() {
  document.getElementById("canvas").addEventListener('mousemove', moveHandler);
  return setInterval(draw,10);
}
function moveHandler(e){
  mouseX = e.offsetX;
}
function draw() {
  ctx.clearRect(0,0,300,300);
  ctx.rect(mouseX-20,280,40,5);
  ctx.fillStyle = 'black';
  ctx.fill();
  ctx.beginPath();
  ctx.arc(x,y,10,0,2*Math.PI,true);
  ctx.closePath();
  ctx.fill();
  x+=dx;
  y+=dy;
  bounce();
}
function bounce(){
  if(x+dx>300||x+dx<0)
    dx=-dx;
  if(y+dy>300||y+dy<0)
    dy=-dy;
}
init();
于 2013-01-18T07:53:59.923 に答える