2 files changed, 132 insertions, 0 deletions
diff --git a/js/starting-place/game.js b/js/starting-place/game.js
new file mode 100644
index 0000000..4c9fe74
--- /dev/null
+++ b/js/starting-place/game.js
@@ -0,0 +1,111 @@
+// Get the canvas and context
+const canvas = document.getElementById('game');
+canvas.width = window.innerWidth;
+canvas.height = window.innerHeight;
+canvas.style.backgroundColor = '#f0f0f0';
+const ctx = canvas.getContext('2d');
+
+(function(){
+
+    // Define game colors
+    const COLORS = {
+        player: '#2d2d2d',
+        particles: '#2d2d2d',
+        objects: '#2d2d2d',
+        terrain: '#2d2d2d'
+    };
+
+    // Define game physics
+    const physics = {
+        gravity: 1,
+        jumpForce: 0.5
+    };
+
+    // Define player properties
+    const player = {
+        x: 200,
+        y: 0,
+        vx: 0,
+        vy: 10,
+        vm: 32,
+        jumpForce: physics.gravity + physics.jumpForce,
+        onGround: false,
+        width: 20,
+        height: 20,
+        distanceTraveled: 0
+    };
+
+    // Define terrain properties
+    const terrain = {
+        start: { x: 0, y: canvas.height - 40 },
+        end: { x: canvas.width, y: canvas.height },
+        height: 8
+    };
+
+    // Define game objects
+    const objects = [];
+
+    // Update game state
+    function update() {
+        // Update player
+        player.x += player.vx;
+        player.y += player.vy;
+
+        // Check collision with terrain
+        if (player.y + player.height >= terrain.start.y) {
+            player.y = terrain.start.y - player.height;
+            player.vy = 0;
+            player.onGround = true;
+        } else {
+            player.onGround = false;
+        }
+
+        // Update objects
+        for (let object of objects) {
+            object.y += physics.gravity;
+        }
+    }
+
+    // Render game state
+    function draw() {
+        // Clear canvas
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+        // Draw player
+        ctx.fillStyle = COLORS.player;
+        ctx.fillRect(player.x, player.y, player.width, player.height);
+
+        // Draw terrain
+        ctx.fillStyle = COLORS.terrain;
+        ctx.fillRect(terrain.start.x, terrain.start.y, terrain.end.x - terrain.start.x, terrain.height);
+
+        // Draw objects
+        for (let object of objects) {
+            ctx.fillStyle = COLORS.objects;
+            ctx.fillRect(object.x, object.y, object.width, object.height);
+        }
+    }
+
+    // Handle keydown event
+    document.addEventListener('keydown', function(event) {
+        if (event.code === 'Space' || event.code === 'ArrowUp') {
+            if (player.onGround) {
+                player.vy = -player.jumpForce;
+                player.onGround = false;
+            }
+        }
+    });
+
+    // Game loop
+    function gameLoop() {
+        update();
+        draw();
+
+        // Request next frame
+        requestAnimationFrame(gameLoop);
+    }
+
+    // Start game loop
+    gameLoop();
+
+})();
\ No newline at end of file
diff --git a/js/starting-place/index.html b/js/starting-place/index.html
new file mode 100644
index 0000000..060666a
--- /dev/null
+++ b/js/starting-place/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>starting place</title>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+        }
+        #game {
+            display: block;
+        }
+    </style>
+</head>
+<body>
+    <canvas id="game"></canvas>
+    <script src="game.js"></script>
+</body>
+</html>
\ No newline at end of file