HTML5 Game - Acceleration via key event

Description

Acceleration via key event
Demo

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Acceleration 2</title>
    <style>
        canvas {/* w  w w  .j  ava 2  s .c o  m*/
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <canvas id="canvas" width="400" height="400"></canvas>
    <script>
        class Ball {
            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,
                ax = 0;

            ball.x = canvas.width / 2;
            ball.y = canvas.height / 2;

            window.addEventListener('keydown', function(event) {
                if (event.keyCode === 37) { //left  
                    ax = -0.1;
                } else if (event.keyCode === 39) { //right  
                    ax = 0.1;
                }
            }, false);

            window.addEventListener('keyup', function() {
                ax = 0;
            }, false);

            (function drawFrame() {
                window.requestAnimationFrame(drawFrame, canvas);
                context.clearRect(0, 0, canvas.width, canvas.height);

                vx += ax;
                ball.x += vx;
                ball.draw(context);
            }());
        };
    </script>
</body>

</html>
HTML5 Game - Acceleration via key event

Description

Demo

Related Topic
