123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158 |
- /*
- pong.js
- Author: tobychui
- */
- function newPongGame(targetDom, width=200, height=400) {
- console.log("Pong Loaded")
- const game = {};
- game.dom = targetDom;
-
- //Initiate the DOM element css
- $(game.dom).css({
- "backdrop-filter":"blur(5px)",
- "background-color":"rgba(26, 26, 26, 0.7)",
- "width": width,
- "height":height
- });
- //Inject the main canvas
- var canvas = document.createElement('canvas');
- canvas.width = width;
- canvas.height = height;
- canvas.style.position = "absolute";
- canvas.style.top = "0px";
- canvas.style.left = "0px";
- $(canvas).css("border", "1px solid black");
- targetDom.appendChild(canvas);
- var ctx = canvas.getContext("2d");
- game.canvas = canvas;
- game.ctx = ctx;
- game.pause = false;
- //Create game state
- game.state = {
- player: {
- x: width/2,
- y: height - 30
- },
- cpu: {
- x: width/2,
- y: 30
- },
- ball: {
- x: width/2,
- y: height/2,
- dx: 1,
- dy: 1
- }
- }
- function drawCenterLine(){
- ctx.beginPath();
- ctx.setLineDash([4, 8]);
- ctx.moveTo(0, height/2);
- ctx.lineTo(width, height/2);
- ctx.strokeStyle = '#ffffff';
- ctx.stroke();
- }
- function drawPlate(x,y){
- var width = 40;
- var height = 6;
- x = x - width / 2;
- y = y - height / 2;
- game.ctx.beginPath();
- game.ctx.moveTo(x, y);
- game.ctx.lineTo(x + width, y);
- game.ctx.lineTo(x + width, y + height);
- game.ctx.lineTo(x, y + height);
- game.ctx.closePath();
- // the outline
- game.ctx.lineWidth = 1;
- game.ctx.strokeStyle = '#666666';
- game.ctx.stroke();
- // the fill color
- game.ctx.fillStyle = "#ffffff";
- game.ctx.fill();
- }
- function drwaBall(x,y){
- game.ctx.beginPath();
- game.ctx.arc(x, y, 8, 0, 2 * Math.PI);
- game.ctx.stroke();
- game.ctx.fillStyle = "#ffffff";
- game.ctx.fill();
- }
- function clearScreen(){
- game.ctx.clearRect(0, 0, canvas.width, canvas.height);
- }
- function resetGame(){
- var dx = 1;
- if (Math.random() < 0.5){
- dx = -1;
- }
- game.state.ball = {
- x: width/2,
- y: height/2,
- dx: dx,
- dy: game.state.ball.dy * -1
- }
- }
- //Register functions on that DOM
- game.render = function() {
- clearScreen();
- drawCenterLine();
- //Move the ball
- game.state.ball.x += game.state.ball.dx;
- game.state.ball.y += game.state.ball.dy;
- if (game.state.ball.x < 8){
- game.state.ball.x = 8;
- game.state.ball.dx = -1 * game.state.ball.dx;
- }else if (game.state.ball.x > width - 8){
- game.state.ball.x = width - 8;
- game.state.ball.dx = -1 * game.state.ball.dx;
- }
- if (game.state.ball.y < 0){
- //Player win
- resetGame();
- }else if (game.state.ball.y > height){
- //CPU win
- resetGame();
- }
- //Move the CPU plate position
- if (game.state.cpu.x > game.state.ball.x){
- game.state.cpu.x -= 0.6;
- }else if (game.state.cpu.x < game.state.ball.x){
- game.state.cpu.x += 0.6;
- }
- drawPlate(game.state.player.x, game.state.player.y);
- drawPlate(game.state.cpu.x, game.state.cpu.y);
- drwaBall(game.state.ball.x, game.state.ball.y);
- if (game.paused != true){
- window.requestAnimationFrame(game.render);
- }
-
- };
- window.requestAnimationFrame(game.render);
- return game;
- }
|