Finalize of v1.113

legacy/offline/pong.js

@@ -0,0 +1,158 @@
+/*
+    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;
+  }

web/desktop.system

@@ -10,6 +10,7 @@
     <script type="text/javascript" src="script/tocas/tocas.js"></script>
     <script type="text/javascript" src="script/jquery.min.js"></script>
     <script type="text/javascript" src="script/ao_module.js"></script>
+    <script type="text/javascript" src="SystemAO/desktop/offline/pong.js"></script>
     <script type="text/javascript" src="SystemAO/desktop/script/jsCalendar/source/jsCalendar.js"></script>
     <style>
         body {
@@ -938,6 +939,7 @@
     </div>
 
     <script>
+
         /*
         ArOZ Online Desktop Interface