• General
    • Home
    • Contact Us
    • Privacy Policy
    • Sitemap
  • Photographs
    • 2018
    • 2017
    • 2016
    • 2015
  • Literature
    • Poems
  • News
    • Announcements
    • Charity
    • Legal
    • Medicine
    • Politics
  • Education
    • Code Samples
      • Basic
      • Simple
      • Intermediate
      • Advanced
      • Tips
    • History
    • Literature
    • Quotes
    • Videos
    • Vocabulary
  • Entertainment
    • Art
    • Humor
    • Photos
    • Video
  • Technology
    • Software
      • Support
      • Tweaks
    • Company
    • Science
    • Security
Major Mike

Knowledge is Power - Share the Power

Classic Pong [ADVANCED]

September 25, 2015 by GµårÐïåñ

An advanced example of using the canvas to create a game. This was featured by Bing on the anniversary of the release of PONG. Click to start and click to pause, very simple and first to 5 wins.

    <div class="content">
        <div>
            <div id="container">
                <canvas id="baseLayer"></canvas>
                <canvas id="dynamicLayer"></canvas>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        var Pong;
        (function(Pong) {
            Pong.Consts = {
                "initMessage": "Click to start",
                "winMessage": "You win!",
                "loseMessage": "You lose!",
                "continueMessage": "Click to play again",
                "pausedMessage": "Paused"
            };
        })(Pong || (Pong = {}));
        var __extends = this.__extends || function(n, t) {
                function r() {
                    this.constructor = n
                }
                for (var i in t) t.hasOwnProperty(i) && (n[i] = t[i]);
                r.prototype = t.prototype;
                n.prototype = new r
            },
            Pong;
        (function(n) {
            var e, t, i, r, u, f;
            (function(n) {
                n[n.Init = 0] = "Init";
                n[n.Game = 1] = "Game";
                n[n.Paused = 2] = "Paused";
                n[n.Win = 3] = "Win";
                n[n.Lose = 4] = "Lose"
            })(n.State || (n.State = {}));
            e = n.State;
            t = function() {
                function n(n, t) {
                    this.x = 0;
                    this.y = 0;
                    this.x = n;
                    this.y = t
                }
                return n.prototype.clone = function() {
                    return new n(this.x, this.y)
                }, n.prototype.getRaw = function() {
                    return {
                        x: this.x,
                        y: this.y
                    }
                }, n
            }();
            n.Vector = t;
            i = function() {
                function n() {
                    this.position = new t(0, 0);
                    this.size = new t(0, 0)
                }
                return n
            }();
            n.Box = i;
            r = function(n) {
                function t() {
                    n.apply(this, arguments);
                    this.score = 0;
                    this.hasTurn = !1
                }
                return __extends(t, n), t
            }(i);
            n.Player = r;
            u = function(n) {
                function t() {
                    n.apply(this, arguments);
                    this.direction = null
                }
                return __extends(t, n), t
            }(i);
            n.Ball = u;
            f = function() {
                function n() {
                    this.maxScore = 5;
                    this.redrawBaseLayer = !1;
                    this.width = 0;
                    this.height = 0;
                    this.state = 0;
                    this.tick = 0;
                    this.delayTick = 0
                }
                return n.prototype.reset = function(n, t) {
                    this.width = n;
                    this.height = t;
                    this.redrawBaseLayer = !0;
                    this.assignConstants();
                    this.ball = new u;
                    this.ball.size.x = this.ballSize;
                    this.ball.size.y = this.ballSize;
                    this.ball.direction = null;
                    this.player = new r;
                    this.player.size.x = this.padWidth;
                    this.player.size.y = this.padHeight;
                    this.cpu = new r;
                    this.cpu.size.x = this.padWidth;
                    this.cpu.size.y = this.padHeight;
                    this.resetPositions()
                }, n.prototype.checkRedrawBaseLayer = function() {
                    var n = this.redrawBaseLayer;
                    return this.redrawBaseLayer = !1, n
                }, n.prototype.scheduleRedraw = function() {
                    this.redrawBaseLayer = !0
                }, n.prototype.getWidth = function() {
                    return this.width
                }, n.prototype.getHeight = function() {
                    return this.height
                }, n.prototype.getPlayerScore = function() {
                    return this.player.score
                }, n.prototype.getCpuScore = function() {
                    return this.cpu.score
                }, n.prototype.getBall = function() {
                    return this.ball
                }, n.prototype.getPlayer = function() {
                    return this.player
                }, n.prototype.getCpu = function() {
                    return this.cpu
                }, n.prototype.getState = function() {
                    return this.state
                }, n.prototype.canStartGame = function() {
                    return this.state !== 1
                }, n.prototype.isPaused = function() {
                    return this.state === 2
                }, n.prototype.pause = function() {
                    this.state === 1 && this.setState(2)
                }, n.prototype.resume = function() {
                    this.state === 2 && this.setState(1)
                }, n.prototype.getBallSpeed = function() {
                    return this.ballSpeed
                }, n.prototype.getCpuSpeed = function() {
                    return this.aiSpeed
                }, n.prototype.getTick = function() {
                    return this.tick
                }, n.prototype.setTick = function(n) {
                    this.tick = n
                }, n.prototype.getDelayTick = function() {
                    return this.delayTick
                }, n.prototype.startGame = function() {
                    this.canStartGame() && (this.resetPositions(), this.setState(1))
                }, n.prototype.cpuMiss = function() {
                    ++this.player.score;
                    this.processMissedBall(!0)
                }, n.prototype.playerMiss = function() {
                    ++this.cpu.score;
                    this.processMissedBall(!1)
                }, n.prototype.resetPositions = function() {
                    this.player.position.x = this.width - this.padOffset;
                    this.player.position.y = this.height / 2;
                    this.cpu.position.x = this.padOffset;
                    this.cpu.position.y = this.height / 2;
                    this.player.hasTurn = !0;
                    this.player.score = 0;
                    this.cpu.hasTurn = !1;
                    this.cpu.score = 0;
                    this.placeBallToCenter();
                    this.tick = 0
                }, n.prototype.assignConstants = function() {
                    var n = this.height / 128,
                        t = this.width / 256;
                    this.ballSize = ~~(6 * n);
                    this.padWidth = ~~(4 * n);
                    this.padHeight = ~~(24 * n);
                    this.padOffset = ~~(15 * n);
                    this.ballSpeed = ~~(165 * Math.max(n, t));
                    this.aiSpeed = ~~(62.5 * Math.max(n, t))
                }, n.prototype.setState = function(n) {
                    this.state !== n && (this.redrawBaseLayer = !0, this.state = n)
                }, n.prototype.placeBallToCenter = function() {
                    this.ball.position.x = this.width / 2;
                    this.ball.position.y = this.height / 2
                }, n.prototype.delay = function() {
                    this.delayTick = this.tick + 1e3
                }, n.prototype.processMissedBall = function(n) {
                    this.player.hasTurn = !n;
                    this.cpu.hasTurn = n;
                    this.ball.direction = null;
                    this.scheduleRedraw();
                    this.checkGameOver() || this.delay()
                }, n.prototype.checkGameOver = function() {
                    return this.state !== 1 ? !1 : (this.player.score >= this.maxScore ? this.setState(3) : this.cpu.score >= this.maxScore && this.setState(4), this.state !== 1)
                }, n
            }();
            n.GameState = f
        })(Pong || (Pong = {})),
        function(n) {
            var t = function() {
                function t() {}
                return t.prototype.simulate = function(n, t) {
                    var i, r, u, f;
                    t.getState() === 1 && ((i = this.updateTick(n, t), t.getTick() < t.getDelayTick()) || (r = t.getBall(), u = r.direction == null, u && (f = t.getPlayer().hasTurn, r.direction = this.throwBall(f), t.placeBallToCenter()), this.advanceBall(t, i), this.advanceCpu(t, i)))
                }, t.prototype.advanceBall = function(n, t) {
                    var i = n.getBall(),
                        s = n.getBallSpeed(),
                        u = i.position.x,
                        r = i.position.y,
                        a = i.direction.x,
                        v = i.direction.y,
                        e = i.size.x / 2,
                        f = i.size.y / 2,
                        h = n.getWidth(),
                        o = n.getHeight(),
                        c, l;
                    u += a * s * t;
                    r += v * s * t;
                    r < f && (i.direction.y = -i.direction.y, c = f - r, r = f + c);
                    r > o - f && (i.direction.y = -i.direction.y, l = r - (o - f), r = o - f - l);
                    this.isLeftBorderCrossed(i.position.x, u, e, n.getCpu()) && this.isBallDeflected(r, f, n.getCpu()) && (i.direction = this.getDeflectionAngle(r, n.getCpu(), !1));
                    this.isRightBorderCrossed(i.position.x, u, e, n.getPlayer()) && this.isBallDeflected(r, f, n.getPlayer()) && (i.direction = this.getDeflectionAngle(r, n.getPlayer(), !0));
                    u < e && (u = e, n.cpuMiss());
                    u > h - e && (u = h - e, n.playerMiss());
                    i.position.x = u;
                    i.position.y = r
                }, t.prototype.isLeftBorderCrossed = function(n, t, i, r) {
                    var u = r.position.x + r.size.x;
                    return n >= u && t <= u
                }, t.prototype.isRightBorderCrossed = function(n, t, i, r) {
                    var u = r.position.x;
                    return n + i <= u && t + i >= u
                }, t.prototype.isBallDeflected = function(n, t, i) {
                    var r = i.size.y / 2,
                        u = i.position.y - r,
                        f = i.position.y + r,
                        e = n - t,
                        o = n + t;
                    return o >= u && e <= f
                }, t.prototype.getDeflectionAngle = function(n, t, i) {
                    var e = t.size.y / 2,
                        u = (n - t.position.y) / e,
                        f, r;
                    return u = Math.max(-1, Math.min(u, 1)), f = Math.asin(u / Math.sqrt(2)), r = this.getVectorFromAngle(f), i && (r.x = -r.x), r
                }, t.prototype.advanceCpu = function(n, t) {
                    var h = n.getBall(),
                        r = n.getCpu(),
                        e = n.getCpuSpeed(),
                        c = h.position.y,
                        i = r.position.y,
                        u = r.size.y / 2,
                        o = n.getHeight(),
                        f = i - c,
                        s;
                    Math.abs(f) < r.size.y / 4 && (f = 0);
                    s = f < 0 ? e : f > 0 ? -e : 0;
                    i += s * t;
                    i < u && (i = u);
                    i > o - u && (i = o - u);
                    r.position.y = i
                }, t.prototype.updateTick = function(n, t) {
                    var i = t.getTick(),
                        r, u;
                    return i || (i = n), r = n - i, u = r / 1e3, t.setTick(n), u
                }, t.prototype.getVectorFromAngle = function(t) {
                    var i = Math.cos(t),
                        r = Math.sin(t);
                    return new n.Vector(i, r)
                }, t.prototype.getRandomVectorFromAngle = function(n, t) {
                    var i = t - n,
                        r = Math.random() * i + n;
                    return this.getVectorFromAngle(r)
                }, t.prototype.throwBall = function(n) {
                    var i = -Math.PI / 4,
                        r = Math.PI / 4,
                        t = this.getRandomVectorFromAngle(i, r);
                    return n && (t.x = -t.x), t
                }, t
            }();
            n.Physics = t
        }(Pong || (Pong = {})),
        function(n) {
            var t = function() {
                    function n(n) {
                        this.canvas = n;
                        this.ctx = this.canvas.getContext("2d")
                    }
                    return n.prototype.getContext = function() {
                        return this.ctx
                    }, n.prototype.getElement = function() {
                        return this.canvas
                    }, n
                }(),
                i = function() {
                    function i(n, i) {
                        this.backgroundColor = "#000";
                        this.foregroundColor = "#fff";
                        this.fontHeightMeasured = 0;
                        this.lastBallPosition = null;
                        this.lastPlayerPosition = null;
                        this.lastCpuPosition = null;
                        this.baseLayer = new t(n);
                        this.dynamicLayer = new t(i)
                    }
                    return i.prototype.reset = function() {
                        this.lastBallPosition = null;
                        this.lastPlayerPosition = null;
                        this.lastCpuPosition = null
                    }, i.prototype.render = function(n) {
                        n.checkRedrawBaseLayer() && this.renderBaseLayer(n);
                        this.renderDynamicLayer(n)
                    }, i.prototype.renderBaseLayer = function(t) {
                        var i = this.baseLayer.getContext(),
                            r, u, f;
                        i.fillStyle = this.backgroundColor;
                        i.fillRect(0, 0, t.getWidth(), t.getHeight());
                        this.dashedLine(i, ~~(t.getWidth() / 2), 0, ~~(t.getWidth() / 2), t.getHeight(), [6, 3]);
                        i.strokeStyle = this.foregroundColor;
                        i.lineWidth = 2;
                        i.stroke();
                        i.fillStyle = this.foregroundColor;
                        this.fontHeightMeasured !== t.getHeight() && (this.fontHeightMeasured = t.getHeight(), this.fontHeight = ~~(this.fontHeightMeasured * 14 / 128), this.font = this.fontHeight + "px Arial", i.font = this.font, i.textBaseline = "middle", i.textAlign = "center", this.fontWidth = i.measureText("0").width);
                        i.fillText(t.getPlayerScore().toString(), ~~(t.getWidth() / 2 + this.fontWidth * 2), this.fontHeight);
                        i.fillText(t.getCpuScore().toString(), ~~(t.getWidth() / 2 - this.fontWidth * 2), this.fontHeight);
                        r = t.getState();
                        r !== 1 && (i.fillStyle = this.backgroundColor, i.fillRect(t.getWidth() / 4, t.getHeight() / 4, t.getWidth() / 2, t.getHeight() / 2), i.fillStyle = this.foregroundColor, r === 0 ? i.fillText(n.Consts.initMessage, t.getWidth() / 2, t.getHeight() / 2) : r === 2 ? i.fillText(n.Consts.pausedMessage, t.getWidth() / 2, t.getHeight() / 2) : (r === 3 || r === 4) && (u = r === 3 ? n.Consts.winMessage : n.Consts.loseMessage, f = n.Consts.continueMessage, i.fillText(u, t.getWidth() / 2, t.getHeight() / 2 - this.fontHeight), i.fillText(f, t.getWidth() / 2, t.getHeight() / 2 + this.fontHeight)))
                    }, i.prototype.renderDynamicLayer = function(n) {
                        var t = this.dynamicLayer.getContext(),
                            i;
                        this.lastBallPosition == null || this.lastCpuPosition == null || this.lastPlayerPosition == null ? t.clearRect(0, 0, n.getWidth(), n.getHeight()) : (i = 10, this.clearBox(t, n.getBall(), this.lastBallPosition, i), this.clearBox(t, n.getPlayer(), this.lastPlayerPosition, i), this.clearBox(t, n.getCpu(), this.lastCpuPosition, i));
                        t.fillStyle = this.foregroundColor;
                        (n.getState() === 1 || n.getState() === 2) && this.renderBox(t, n.getBall());
                        this.renderBox(t, n.getPlayer());
                        this.renderBox(t, n.getCpu());
                        this.lastBallPosition = n.getBall().position.clone();
                        this.lastPlayerPosition = n.getPlayer().position.clone();
                        this.lastCpuPosition = n.getCpu().position.clone()
                    }, i.prototype.clearBox = function(n, t, i, r) {
                        var u = ~~(t.size.x / 2),
                            f = ~~(t.size.y / 2);
                        n.clearRect(i.x - u - r, i.y - f - r, t.size.x + r * 2, t.size.y + r * 2)
                    }, i.prototype.renderBox = function(n, t) {
                        var i = ~~(t.size.x / 2),
                            r = ~~(t.size.y / 2);
                        n.fillRect(t.position.x - i, t.position.y - r, t.size.x, t.size.y)
                    }, i.prototype.dashedLine = function(n, t, i, r, u, f) {
                        f || (f = [10, 5]);
                        n.save();
                        var e = r - t,
                            o = u - i,
                            s = Math.sqrt(e * e + o * o),
                            c = Math.atan2(o, e);
                        n.translate(t, i);
                        n.moveTo(0, 0);
                        n.rotate(c);
                        var l = f.length,
                            a = 0,
                            h = !0;
                        for (t = 0; s > t;) t += f[a++ % l], t > s && (t = s), h ? n.lineTo(t, 0) : n.moveTo(t, 0), h = !h;
                        n.restore()
                    }, i
                }();
            n.Renderer = i
        }(Pong || (Pong = {})),
        function(n) {
            var i = function() {
                    function n() {}
                    return n
                }(),
                t = function() {
                    function t() {
                        this.lastPlayingStatus = !1;
                        this.fieldSize = null;
                        this.dragSuppressor = null;
                        this.state = new n.GameState;
                        this.physics = new n.Physics;
                        this.attachToDom();
                        this.bindEvents();
                        this.defineAnimation()
                    }
                    return t.prototype.run = function() {
                        this.initialize();
                        this.loop()
                    }, t.prototype.getState = function() {
                        return this.state
                    }, t.prototype.initialize = function() {
                        this.state.reset(this.fieldSize.width, this.fieldSize.height);
                        this.renderer.reset()
                    }, t.prototype.loop = function() {
                        var t = this,
                            n;
                        this.requestAnimFrame.call(window, function() {
                            return t.loop()
                        });
                        n = (new Date).getTime();
                        this.physics.simulate(n, this.state);
                        this.renderer.render(this.state);
                        this.update()
                    }, t.prototype.update = function() {
                        var n = this.state.getState() === 1;
                        n !== this.lastPlayingStatus && (this.lastPlayingStatus = n, this.lastPlayingStatus ? ThirdParty.addClass(this.container, "playing") : ThirdParty.removeClass(this.container, "playing"), this.state.getState() === 3 ? ThirdParty.logShow("win", 1) : this.state.getState() === 4 && ThirdParty.logShow("lose", 1))
                    }, t.prototype.attachToDom = function() {
                        var u = ThirdParty._ge;
                        this.container = u("container");
                        var i = u("baseLayer"),
                            r = u("dynamicLayer"),
                            f = this.container.offsetWidth,
                            e = this.container.offsetHeight,
                            t = this.calculateDimentions(f, e);
                        this.fieldSize = t;
                        i.style.width = t.actualWidth + "px";
                        i.style.height = t.actualHeight + "px";
                        r.style.width = t.actualWidth + "px";
                        r.style.height = t.actualHeight + "px";
                        i.width = r.width = t.width;
                        i.height = r.height = t.height;
                        this.renderer = new n.Renderer(i, r)
                    }, t.prototype.calculateDimentions = function(n, t) {
                        var i = {
                            width: n,
                            height: t,
                            actualWidth: n,
                            actualHeight: t
                        };
                        return n > t ? i.height = n / 2 : i.width = t * 2, i
                    }, t.prototype.onClick = function() {
                        if (this.state.canStartGame())
                            if (this.state.isPaused()) {
                                var n = (new Date).getTime();
                                this.state.setTick(n);
                                this.state.resume()
                            } else this.state.startGame(), this.renderer.reset(), ThirdParty.logClick("start");
                        else this.state.pause()
                    }, t.prototype.onDoubleClick = function() {
                        ThirdParty.toggleFullscreen()
                    }, t.prototype.onMouseMove = function(n) {
                        var r, e, t, u, i, f;
                        this.lastPlayingStatus && (r = 0, n.touches && n.touches.length ? (e = n.touches[0], r = e.pageY) : r = n.pageY || 0, t = r - this.container.offsetTop, u = this.state.getPlayer(), t = t * this.fieldSize.height / this.fieldSize.actualHeight, i = u.size.y / 2, f = this.fieldSize.height, t < i && (t = i), t > f - i && (t = f - i), u.position.y = t)
                    }, t.prototype.onMouseDown = function() {
                        this.dragSuppressor && (this.dragSuppressor(), this.dragSuppressor = null);
                        this.dragSuppressor = ThirdParty.dragSuppress()
                    }, t.prototype.onMouseUp = function() {
                        this.dragSuppressor && (this.dragSuppressor(), this.dragSuppressor = null)
                    }, t.prototype.bindEvents = function() {
                        var n = this,
                            t = ThirdParty.bindEvent;
                        t(this.container, "click", function() {
                            return n.onClick()
                        });
                        t(this.container, "dblclick", function() {
                            return n.onDoubleClick()
                        });
                        t(_d, "mousemove", function(t) {
                            return n.onMouseMove(t)
                        });
                        t(_d, "touchmove", function(t) {
                            return n.onMouseMove(t)
                        });
                        t(this.container, "mousedown", function(t) {
                            return n.onMouseDown(t)
                        });
                        t(_d, "mouseup", function(t) {
                            return n.onMouseUp(t)
                        });
                        t(this.container, "touchstart", function(t) {
                            return n.onMouseDown(t)
                        });
                        t(_d, "touchend", function(t) {
                            return n.onMouseUp(t)
                        })
                    }, t.prototype.defineAnimation = function() {
                        this.requestAnimFrame = function() {
                            return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(n) {
                                window.setTimeout(n, 1e3 / 60)
                            }
                        }()
                    }, t
                }();
            n.PongGame = t
        }(Pong || (Pong = {})),
        function(n) {
            var t = new n.PongGame;
            t.run()
        }(Pong || (Pong = {}));
        var ThirdParty;
        (function(n) {
            function i() {
                var i = t.performance,
                    r = i && i.timing,
                    e = i && i.navigation,
                    o, u, f;
                if (i && r && e && i.now) {
                    o = r.navigationStart + Math.ceil(i.now());
                    u = {};
                    for (f in r) typeof r[f] == "number" && (u[f] = r[f]);
                    u.loadEventEnd = o;
                    n.sendMessage("Perf", {
                        timing: u,
                        navigation: e,
                        now: i.now()
                    })
                }
            }

            function r() {
                document.readyState === "complete" ? setTimeout(i, 1) : n.bindEvent(t, "load", i)
            }
            var t = window;
            r()
        })(ThirdParty || (ThirdParty = {}));
    </script>
DEMO | DOWNLOAD
FacebooktwitterredditpinterestlinkedinmailFacebooktwitterredditpinterestlinkedinmail
Posted in: Advanced, Education Tagged: advanced level, canvas, code, JavaScript
← Code Samples
Coral Bleaching Events →

Show Your Support – We Don’t Believe in Disruptive Ads

Donate in one of two ways :
(BitCoin - preferred)
1BTshbqMSx5AHrDFLEa1YdPAy5EFzRSjr9
(PayPal)
September 2015
M T W T F S S
« Aug   Oct »
 123456
78910111213
14151617181920
21222324252627
282930  

Semper Fidelis

Always Faithful, Always Forward
United States Marine Corp

Places to find me:

StackExchange profile for GµårÐïåñ at StackExchange

CodeProject

Twitter : verified ➠Follow

GitHub ➠Follow @GuardianMajor

ello ➠

deviantArt profile for GµårÐïåñ on deviantArt

Facebook i have made a personal choice after their "name policy" witch hunt which repeats every 2 years it seems at the whim of the "bully mob" (even when they make you jump through hoops and verify you), to just quit it and be done with it, they are not worth my time. I don't need it, I don't miss it, in fact it has made my life more productive and void of gross hate, vitriol and drivel. To those who say they can't stay in touch if I am not on there, if you can't reach me because I am not on Facebook, then you are not trying AT ALL - therefore, good riddance.

Scribd profile for GµårÐïåñ on Scribd

NoScript/FLashGot (Informaction) profile for GµårÐïåñ on Informaction Forums

Subjects

1908 1945 1776 1983 1962 1956 1952 1963 1916 1870 1971 1859 1947 1938 1865 1961 1942 memorial 1980 1812 1918 1901 1851 1902 1977 vocabulary 1995 1989 national park 1975 1911 1960 1969 1994 England 1949 1946 1976 1959 1991 1955 1933 1954 1982 1937 1998 1958 1789 1917 holiday annual 1979 1935 1940 1973 1953 1990 1889 1915 event 1985 Soviet Union 1972 1984 daily pic 1978 New York 1948 1986 1968 1943 1951 1981 has_video 1919 1863 1957 1993 1846 1922 Germany 1967 1964 1965 code 1898 1934 1970 1944 United States NASA 1966 1950 1914 1939 1941 history 1974 2000 has_audio

Archives

Access Options

  • Log in
  • Entries RSS
  • Comments RSS
  • ∞ Guardian International
🎔
Brought to You
by Guardian International

Copyright © 2007-2019 Major Mike | Privacy Policy | DMCA | Contact | About
fortitudo fortis defendit

McAfee SecureNorton by SymantecVirusTotal