HTML5 Game - Remove balls when bouncing off canvas

  1. HOME
  2. HTML5 Game
  3. Canvas Animation
  4. Bounce

Description

Remove balls when bouncing off canvas

Demo

ResultView the demo in separate window 

<!doctype html>
<html>

<head>
    <style>
        canvas {/*from w ww  . j ava 2  s.  co  m*/
            border: 1px solid red;
        }
    </style>
    <style>
        #canvas {
            background-color: #000000;
        }
    </style>
</head>

<body>
    <canvas id="canvas" width="400" height="400"></canvas>
    <script>
        class Ship {
            constructor() {
                this.x = 0;
                this.y = 0;
                this.width = 25;
                this.height = 20;
                this.rotation = 0;
            }

            draw(context) {
                context.save();
                context.translate(this.x, this.y);
                context.rotate(this.rotation);
                context.lineWidth = 1;
                context.strokeStyle = "#ffffff";
                context.beginPath();
                context.moveTo(10, 0);
                context.lineTo(-10, 10);
                context.lineTo(-5, 0);
                context.lineTo(-10, -10);
                context.lineTo(10, 0);
                context.stroke();

                context.beginPath();
                context.moveTo(-7.5, -5);
                context.lineTo(-15, 0);
                context.lineTo(-7.5, 5);
                context.stroke();

                context.restore();
            }

        }
        window.onload = function() {
            let canvas = document.getElementById('canvas'),
                context = canvas.getContext('2d'),
                ship = new Ship(),
                vr = 0,
                vx = 0,
                vy = 0,
                thrust = 0;

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

            window.addEventListener('keydown', function(event) {
                switch (event.keyCode) {
                    case 37: //left  
                        vr = -3;
                        break;
                    case 39: //right  
                        vr = 3;
                        break;
                    case 38: //up  
                        thrust = 0.05;
                        ship.showFlame = true;
                        break;
                }
            });

            window.addEventListener('keyup', function() {
                vr = 0;
                thrust = 0;
                ship.showFlame = false;
            });

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

                ship.rotation += vr * Math.PI / 180;
                let angle = ship.rotation, //in radians  
                    ax = Math.cos(angle) * thrust,
                    ay = Math.sin(angle) * thrust,
                    left = 0,
                    right = canvas.width,
                    top = 0,
                    bottom = canvas.height;

                vx += ax;
                vy += ay;
                ship.x += vx;
                ship.y += vy;

                //screen wrapping  
                if (ship.x - ship.width / 2 > right) {
                    ship.x = left - ship.width / 2;
                } else if (ship.x + ship.width / 2 < left) {
                    ship.x = right + ship.width / 2;
                }
                if (ship.y - ship.height / 2 > bottom) {
                    ship.y = top - ship.height / 2;
                } else if (ship.y < top - ship.height / 2) {
                    ship.y = bottom + ship.height / 2;
                }
                ship.draw(context);
            }());
        };
    </script>
</body>

</html>

Related Topic