Acceleration on two axes
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Acceleration 3</title> <style>canvas{border:1px solid red;}</style> </head> <body> <canvas id="canvas" width="400" height="400"></canvas> <script> class Ball{ /*from ww w.jav a2 s .c o m*/ constructor(radius, color) { if (radius === undefined) { radius = 40; } if (color === undefined) { color = "#ff0000"; } this.x = 0; this.y = 0; this.radius = radius; this.rotation = 0; this.scaleX = 1; this.scaleY = 1; this.color = color; this.lineWidth = 1; } draw(context) { context.save(); context.translate(this.x, this.y); context.rotate(this.rotation); context.scale(this.scaleX, this.scaleY); context.lineWidth = this.lineWidth; context.fillStyle = this.color; context.beginPath(); //x, y, radius, start_angle, end_angle, anti-clockwise context.arc(0, 0, this.radius, 0, (Math.PI * 2), true); context.closePath(); context.fill(); if (this.lineWidth > 0) { context.stroke(); } context.restore(); } } window.onload = function () { let canvas = document.getElementById('canvas'), context = canvas.getContext('2d'), ball = new Ball(), vx = 0, vy = 0, ax = 0, ay = 0; ball.x = canvas.width / 2; ball.y = canvas.height / 2; window.addEventListener('keydown', function (event) { switch (event.keyCode) { case 37: //left ax = -0.1; break; case 39: //right ax = 0.1; break; case 38: //up ay = -0.1; break; case 40: //down ay = 0.1; break; } }, false); window.addEventListener('keyup', function () { ax = 0; ay = 0; }, false); (function drawFrame () { window.requestAnimationFrame(drawFrame, canvas); context.clearRect(0, 0, canvas.width, canvas.height); vx += ax; vy += ay; ball.x += vx; ball.y += vy; ball.draw(context); }()); }; </script> </body> </html>