Created
May 9, 2012 15:04
-
-
Save mojowill/2645216 to your computer and use it in GitHub Desktop.
Pong Game
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * jQuery Pong plugin | |
| * | |
| * @name jquery-pong-0.4.1.js | |
| * @author Geoffray Warnants - http://www.geoffray.be | |
| * @version 0.4.1 | |
| * @date 20100127 | |
| * @example http://www.geoffray.be/lab/pong | |
| * | |
| * @todo Better reflect the default options (+ initialisaiton via CSS) | |
| * @todo Positioning problems when integrated into a page with content | |
| * @todo Manage the end of the game | |
| * @todo Better manage the gradual acceleration of the difficulty | |
| */ | |
| (function($) { | |
| $.version = "0.4.1"; | |
| $.fn.pong = function(options) { | |
| return $(this).each(function() { | |
| var $this = $(this); | |
| var css_opts = { | |
| "width": $this.css("width"), | |
| "height": $this.css("height"), | |
| "background-color": $this.css("background-color"), | |
| "border-width": $this.css("border-width"), | |
| "pad-width": $this.css("border-width"), | |
| "pad-color": $this.css("color"), | |
| "ball-size": $this.css("border-width"), | |
| "ball-color": $this.css("color"), | |
| "font-family": $this.css("font-family"), | |
| "font-color": $this.css("color"), | |
| "border-color": $this.css("color") | |
| }; | |
| var test_opts = $.extend({}, $.fn.pong.defaults, css_opts); //console.log(test_opts); | |
| // initializes the options | |
| var opts = $.extend({}, $.fn.pong.defaults, options); | |
| $this.data("pong_speed", opts.speed); | |
| $this.data("max_speed", opts.max_speed); | |
| $this.data("pong_playing", false); | |
| $this.data("pong_dx", 1); | |
| initScreen($this, opts); | |
| $this.data("x_min", $("#" + $this.attr("id") + "_player1").position().left + $("#" + $this.attr("id") + "_player1").width()); | |
| $this.data("x_max", $("#" + $this.attr("id") + "_player2").position().left - $("#" + $this.attr("id") + "_ball").width()); | |
| $this.data("y_min", 0); | |
| $this.data("y_max", $this.height() - $("#" + $this.attr("id") + "_ball").width()); | |
| $this.mousemove(onMousemove); | |
| $this.click(onClick); | |
| $('html').keydown(onKeyPress); | |
| }); | |
| }; | |
| function onMousemove(e) { | |
| var $this = $(this); | |
| if ($this.data("pong_playing")) { | |
| var y_rel = $(window).scrollTop() + (e.clientY - parseInt($this.offset().top)); // thereto of the cursor | |
| var y = y_rel - parseInt($("#" + $this.attr("id") + "_player1").height() / 2); | |
| if (y < 0) { | |
| y = 0; | |
| } else if (y + $("#" + $this.attr("id") + "_player1").height() > $this.height()) { | |
| y = ($this.height()) - $("#" + $this.attr("id") + "_player1").height(); | |
| } | |
| $("#" + $this.attr("id") + "_player1").css({ | |
| "top": y | |
| }); | |
| } | |
| }; | |
| function onKeyPress(e) { | |
| var $this = $('#pong1_player1'); | |
| var relTop = parseInt($this.css('top')); | |
| var maxTop = parseInt($('.pong_demo').css('height')) - parseInt($this.css('height')); | |
| var moveInt = maxTop / 6; | |
| if (e.keyCode == 40) { | |
| e.preventDefault(); // down | |
| if (relTop + moveInt > maxTop) { | |
| $this.css({ | |
| 'top': maxTop | |
| }); | |
| } else { | |
| $this.css({ | |
| 'top': relTop + moveInt | |
| }); | |
| } | |
| } else if (e.keyCode == 38) { // up | |
| e.preventDefault(); | |
| if (relTop - moveInt < 0) { | |
| $this.css({ | |
| 'top': 0 | |
| }); | |
| } else { | |
| $this.css({ | |
| 'top': relTop - moveInt | |
| }); | |
| } | |
| } else if (e.keyCode == 32) { | |
| onClick(); | |
| $('.pong_demo').click(); | |
| } | |
| }; | |
| function onClick(e) { | |
| var $this = $(this); | |
| if (!$this.data("pong_playing")) { | |
| $this.data("pong_playing", true); | |
| $("#" + $this.attr("id") + "_title_box").css({ | |
| "display": "none" | |
| }); | |
| rebondir($this); | |
| } | |
| }; | |
| function initScreen(obj, opts) { | |
| obj.css({ | |
| "position": "relative", | |
| "border-style": "solid", | |
| "font-family": opts.font_family, | |
| "border-width": opts.border_width | |
| }); | |
| if ((obj.css("background-color")) == "transparent") { | |
| obj.css({ | |
| "background-color": opts.background_color | |
| }); | |
| } | |
| if ((obj.css("border-color")) == "") { | |
| obj.css({ | |
| "border-color": +opts.border_color | |
| }); | |
| } | |
| // Construction of the game screen | |
| obj.append($("<div></div>").attr("id", obj.attr("id") + "_player1").css({ | |
| "position": "absolute", | |
| "width": opts.pad_width, | |
| "height": opts.pad_height, | |
| "background-color": opts.pad_color, | |
| "left": 10, | |
| "top": (obj.height() / 2) - opts.pad_height / 2 | |
| })); | |
| obj.append($("<div></div>").attr("id", obj.attr("id") + "_player2").css({ | |
| "position": "absolute", | |
| "width": opts.pad_width, | |
| "height": opts.pad_height, | |
| "background-color": opts.pad_color, | |
| "left": obj.width() - 20, | |
| top: (obj.height() / 2) - opts.pad_height / 2 | |
| })); | |
| obj.append($("<div></div>").attr("id", obj.attr("id") + "_ball").css({ | |
| "position": "absolute", | |
| "width": opts.ball_size, | |
| "height": opts.ball_size, | |
| "background-color": opts.ball_color | |
| })); | |
| obj.append($("<span></span>").css({ | |
| "background-color": "transparent", | |
| "color": obj.css("color"), | |
| "border": 0, | |
| "position": "absolute", | |
| "text-align": "center", | |
| "width": 100, | |
| "left": (obj.width() / 2) - 120 | |
| }).attr("type", "text").attr("id", obj.attr("id") + "_score1").text(0)); | |
| obj.append($("<span></span>").css({ | |
| "background-color": "transparent", | |
| "color": obj.css("color"), | |
| "border": 0, | |
| "position": "absolute", | |
| "text-align": "center", | |
| "width": 100, | |
| "left": (obj.width() / 2) + 20 | |
| }).attr("type", "text").attr("id", obj.attr("id") + "_score2").text(0)); | |
| obj.append($("<div></div>").attr("id", obj.attr("id") + "_title_box").css({ | |
| "position": "absolute", | |
| "color": obj.css("color"), | |
| "text-align": "center", | |
| "font-weight": "bold", | |
| "width": obj.width(), | |
| "height": 150, | |
| "top": (obj.height() / 2) - 75 | |
| }) | |
| .append($("<div></div>").attr("id", obj.attr("id") + "_title") | |
| .html("Pong") | |
| ) | |
| .append($("<div></div>").attr("id", obj.attr("id") + "_title_msg") | |
| .append($("<span></span>") | |
| .html("Click or tap spacebar to start,<br />use your mouse or arrow keys to control the pad!") | |
| ) | |
| ) | |
| ); | |
| } | |
| function moveComputer($this, yc) { | |
| if (yc < 0) { | |
| yc = 0; | |
| } else if (yc > $this.height() - $("#" + $this.attr("id") + "_player2").height()) { | |
| yc = $this.height() - $("#" + $this.attr("id") + "_player2").height(); | |
| } | |
| $("#" + $this.attr("id") + "_player2").stop().animate({ | |
| "top": yc | |
| }, 640, "linear"); | |
| } | |
| // ego added function | |
| function end_game($player_score, $win_lose) { | |
| //console.log($player_score); | |
| $('#submit_details').fadeIn('fast'); | |
| $('#submit_details input:text[name=score]').val($player_score); | |
| $('#scorex').empty().append($player_score); | |
| $('#pong1_player1, #pong1_player2, #pong1_ball, #pong1_title_box, #pong1_score1, #pong1_score2').hide(); | |
| } | |
| function rebondir($this) { | |
| var optsSpeed = $.fn.pong.defaults.speed; | |
| var speed = $this.data("pong_speed"); | |
| var dx = $this.data("pong_dx"); | |
| var x = $this.data((dx == 1) ? "x_max" : "x_min"); | |
| var y = Math.floor($this.data("y_min") + Math.random() * $this.data("y_max") - $this.data("y_min")); | |
| $("#" + $this.attr("id") + "_ball").animate({ | |
| "left": x, | |
| "top": y | |
| }, speed, "linear", function() { | |
| $this.data("pong_dx", 0 - $this.data("pong_dx")); | |
| if (dx == -1) { | |
| var y_min = parseInt($("#" + $this.attr("id") + "_player1").css("top")) - $("#" + $this.attr("id") + "_ball").height(); | |
| var y_max = y_min + $("#" + $this.attr("id") + "_player1").height() + $("#" + $this.attr("id") + "_ball").height(); | |
| if (y > y_min && y < y_max) { | |
| if (speed - 50 < $this.data("max_speed")) { | |
| $this.data("pong_speed", $this.data("max_speed")); | |
| } else { | |
| $this.data("pong_speed", speed - 50); | |
| } | |
| } else { | |
| $this.data("pong_playing", false); | |
| $("#" + $this.attr("id") + "_score2").text(parseInt($("#" + $this.attr("id") + "_score2").text()) + 1); | |
| $this.data("pong_speed", optsSpeed); | |
| if (parseInt($("#" + $this.attr("id") + "_score2").text()) >= 5) { | |
| $("#" + $this.attr("id") + "_title").html("You lose!"); | |
| $("#" + $this.attr("id") + "_title_msg").html(""); | |
| $("#" + $this.attr("id") + "_title_box").css({ | |
| "display": "block" | |
| }); | |
| end_game(parseInt($("#" + $this.attr("id") + "_score1").text()), $("#" + $this.attr("id") + "_title").html()); | |
| } | |
| } | |
| } else { | |
| var y_min = parseInt($("#" + $this.attr("id") + "_player2").css("top")) - $("#" + $this.attr("id") + "_ball").height(); | |
| var y_max = y_min + $("#" + $this.attr("id") + "_player2").height() + $("#" + $this.attr("id") + "_ball").height(); | |
| if (y > y_min && y < y_max) { | |
| if (speed - 50 < $this.data("max_speed")) { | |
| $this.data("pong_speed", $this.data("max_speed")); | |
| } else { | |
| $this.data("pong_speed", speed - 50); | |
| } | |
| } else { | |
| $this.data("pong_playing", false); | |
| $("#" + $this.attr("id") + "_score1").text(parseInt($("#" + $this.attr("id") + "_score1").text()) + 1); | |
| $("#" + $this.attr("id") + "_player2").stop(); | |
| $this.data("pong_speed", optsSpeed); | |
| if (parseInt($("#" + $this.attr("id") + "_score1").text()) >= 5) { | |
| $("#" + $this.attr("id") + "_title").html("You win!"); | |
| $("#" + $this.attr("id") + "_title_msg").html(""); | |
| $("#" + $this.attr("id") + "_title_box").css({ | |
| "display": "block" | |
| }); | |
| end_game(parseInt($("#" + $this.attr("id") + "_score1").text()), $("#" + $this.attr("id") + "_title").html()); | |
| } | |
| } | |
| } | |
| if ($this.data("pong_playing")) { | |
| rebondir($this); | |
| } | |
| }); | |
| if ($this.data("pong_playing")) { | |
| window.setTimeout(function() { | |
| moveComputer($this, ((dx == 1) ? y : $this.height() / 2) - $("#" + $this.attr("id") + "_player2").height() / 2); | |
| }, Math.round((500 - (2 * speed)) + Math.random() * (1000 - (2 * speed)))); | |
| } | |
| } | |
| // Default values of options | |
| $.fn.pong.defaults = { | |
| "width": 860, | |
| // Width of the game screen | |
| "height": 580, | |
| // Height of the game screen | |
| "background_color": "#cccccc", | |
| // Background color | |
| "border_width": 10, | |
| // Border width | |
| "pad_width": 15, | |
| // Width of paddles | |
| "pad_height": 100, | |
| // Height of paddles | |
| "pad_color": "#f5913f", | |
| // Color of paddless | |
| "ball_size": 15, | |
| // Size of the ball | |
| "ball_color": "#f5913f", | |
| // Color of the ball | |
| "font_family": "Arial", | |
| // Font? | |
| "font_color": "#f5913f", | |
| // Font Color | |
| "border_color": "#000000", | |
| // Border color of the game screen | |
| "speed": 1500, | |
| // Speed of the ball | |
| "max_speed": 500 // Max speed of ball so game remains playable - EGO ADDED | |
| }; | |
| })(jQuery); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment