如何应用重力弹跳球在javascript中 - [英] How to apply gravity to bouncing balls in javascript -

问题描述

我想从一个球在画布上来回弹跳，有一些重力，最后掉落。
我知道我需要改变速度，当它到达底部，但我不知道如何这样做和编码。

我是一个全新的JS学生，没有物理背景 - 这是多么难？我很高兴学习等。我试图让球碰撞，并以正确的角度脱落，但现在似乎在我以上。

  var canvas，
 ctx，
 cx = 100，
 cy = 150，
 vx = 0，
 vy = 5，
 radius = 30; 
 
 function init（）{
 
 canvas = document.getElementById（gameCanvas）; 
 ctx = canvas.getContext（2d）; 
 
 circle（）; 
} 
 
 function circle（）{
 ctx.clearRect（0，0，canvas.width，canvas.height）; 
 requestAnimationFrame（circle）; 
 
 if（cx + radius> canvas.width || cx  -  radius< 0）
 vx = -vx; 
 if（cy + radius> canvas.height || cy  -  radius< 0）
 vy = 
 
 cx + = vx; 
 cy + = vy; 
} 
  

我已经拿出cx运动只用于上/下动画和圆绘制空间的代码
下一步是什么？

我将碰撞时将其当前速度乘以0.8， / p>

原谅基本/可怕的写代码 - 必须从某处开始。

解决方案

你很近，认为重力是一个恒定的向下速度增量，所以在每一步，你需要添加到你的 vy 计算。

我知道我需要改变速度，当它到达底部

这不是真的，因为重力影响对象所有的时间。当你触摸底部时，可能发生材料阻尼和表面摩擦等事情。

  var canvas，ctx，cx = 100，cy = 100， vx = 2，vy = 5，半径= 5，重力= 0.2，阻尼= 0.9，牵引= 0.8， ; function init（）{canvas = document.getElementById（gameCanvas）; ctx = canvas.getContext（2d）; canvas.width = 300; canvas.height = 150; circle（）;} function circle（）{ctx.clearRect（0，0，canvas.width，canvas.height）; if（！paused）requestAnimationFrame（circle）; if（cx + radius> = canvas.width）{vx = -vx * damping; cx = canvas.width  -  radius; } else if（cx-radius <= 0）{vx = -vx * damping; cx = radius; } if（cy + radius> = canvas.height）{vy = -vy * damping; cy = canvas.height  -  radius; //牵引这里vx * =牵引; } else if（cy  -  radius< = 0）{vy = -vy * damping; cy = radius; } vy + = gravity; // < -  this this is it is cx + = vx; cy + = vy; ctx.beginPath（）; ctx.arc（cx，cy，radius，0，2 * Math.PI，false）; ctx.fillStyle ='green'; ctx.fill（）;} init（）; //花哨/不相关的鼠标grab'n'throw东西下面canvas.addEventListener（'mousedown'，handleMouseDown）; canvas.addEventListener（'mouseup'，handleMouseUp）; function handleMouseDown {cx = e.pageX  -  canvas.offsetLeft; cy = e.pageY  -  canvas.offsetTop; vx = vy = 0; paused = true;} function handleMouseUp（e）{vx = e.pageX  -  canvas.offsetLeft  -  cx; vy = e.pageY  -  canvas.offsetTop  -  cy; suspended = false; circle（）;}  

  canvas {border：1px solid black ; cursor：crosshair;} p {margin：0;}  

  < / canvas>< p>通过在画布上按住并释放鼠标左键即可抛出球（反弹弓）< / p>  / pre> 

I want to move from having a ball bounce back and forth around a canvas to having some gravity and eventually dropping. I know i need to change the velocity when it reaches the bottom but i have no idea how this should be done and coded.

I am a completely new JS student, with no physics background - how hard is this going to be? I'm quite happy to learn etc. I tried having balls collide and come off at correct angles but that seems way above me for now.

var canvas,
    ctx,
    cx = 100,
    cy = 150,
    vx = 0,
    vy = 5,
    radius = 30;

function init() {

    canvas = document.getElementById("gameCanvas");
    ctx = canvas.getContext("2d");

    circle();
}

function circle() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    requestAnimationFrame(circle);

    if (cx + radius > canvas.width || cx - radius < 0)
    vx = -vx;
    if (cy + radius > canvas.height || cy - radius < 0)
    vy = -vy;

    cx += vx;  
    cy += vy;
}

I've taken out cx movement just for up/down animation and the circle draw codes for space What would be the next step?

Will i be multiplying its current velocity by a number like 0.8 on collision and where/how?

Forgive basicness/horrible written code - gotta start somewhere!

解决方案

You were very close, think of the gravity as a constant downwards velocity increment, so in each step you need to add that to your vy calculation.

"I know i need to change the velocity when it reaches the bottom"`

That is not true because gravity affects objects ALL the time. When you touch the bottom, things like material dampening and surface friction can happen.

var canvas,
  ctx,
  cx = 100,
  cy = 100,
  vx = 2,
  vy = 5,
  radius = 5,
  gravity = 0.2,
  damping = 0.9,
  traction = 0.8,
  paused = false;
  ;

function init() {

  canvas = document.getElementById("gameCanvas");
  ctx = canvas.getContext("2d");
  
  canvas.width = 300;
  canvas.height = 150;

  circle();
}

function circle() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  if (!paused)
    requestAnimationFrame(circle);

  if (cx + radius >= canvas.width) {
    vx = -vx * damping;
    cx = canvas.width - radius;
  } else if (cx - radius <= 0) {
    vx = -vx * damping;
    cx = radius;
  }
  if (cy + radius >= canvas.height) {
    vy = -vy * damping;
    cy = canvas.height - radius;
    // traction here
    vx *= traction;
  } else if (cy - radius <= 0) {
    vy = -vy * damping;
    cy = radius;
  }

  vy += gravity; // <--- this is it

  cx += vx;
  cy += vy;

  ctx.beginPath();
  ctx.arc(cx, cy, radius, 0, 2 * Math.PI, false);
  ctx.fillStyle = 'green';
  ctx.fill();
}

init();

// fancy/irrelevant mouse grab'n'throw stuff below
canvas.addEventListener('mousedown', handleMouseDown);
canvas.addEventListener('mouseup', handleMouseUp);

function handleMouseDown(e) {
  cx = e.pageX - canvas.offsetLeft;
  cy = e.pageY - canvas.offsetTop;
  vx = vy = 0;
  paused = true;
}

function handleMouseUp(e) {
  vx = e.pageX - canvas.offsetLeft - cx;
  vy = e.pageY - canvas.offsetTop - cy;
  paused = false;
  circle();
}

canvas {border: 1px solid black; cursor: crosshair;}
p {margin: 0;}

<canvas id="gameCanvas"></canvas>
<p>Throw the ball by holding and releasing the left mouse button on the canvas (reverse slingshot)</p>

这篇关于如何应用重力弹跳球在javascript中 - 的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！