HTML5 Game - Canvas Animation Screen wrapping

Introduction

The concept of screen wrapping is:
If it moves off the left, it reappears on the right.
If it moves off the right, it comes back on the left.
If it moves off the top, it comes back on the bottom.
Demo

<!doctype html>
<html>

<head>
    <style>
        canvas {//from ww  w.  j av a 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>
HTML5 Game - Canvas Animation Screen wrapping

Introduction

Demo

Related Topic
