html.game

SHOBHIT910-netizen · web-flow · commit c27844b1ca1d · 2024-12-31T11:19:47.000+05:30
diff --git a/game.js b/game.js
@@ -0,0 +1,53 @@
+// Select Canvas and set up
+const canvas = document.getElementById('gameCanvas');
+const ctx = canvas.getContext('2d');
+
+// Player properties
+const player = {
+  x: 50,
+  y: 50,
+  width: 50,
+  height: 50,
+  color: 'blue',
+  speed: 5,
+};
+
+// Movement keys
+const keys = {};
+
+// Event listeners for key presses
+window.addEventListener('keydown', (e) => {
+  keys[e.key] = true;
+});
+window.addEventListener('keyup', (e) => {
+  keys[e.key] = false;
+});
+
+// Update game state
+function update() {
+  if (keys['ArrowUp']) player.y -= player.speed;
+  if (keys['ArrowDown']) player.y += player.speed;
+  if (keys['ArrowLeft']) player.x -= player.speed;
+  if (keys['ArrowRight']) player.x += player.speed;
+
+  // Keep player within bounds
+  player.x = Math.max(0, Math.min(canvas.width - player.width, player.x));
+  player.y = Math.max(0, Math.min(canvas.height - player.height, player.y));
+}
+
+// Draw everything
+function draw() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear canvas
+  ctx.fillStyle = player.color;
+  ctx.fillRect(player.x, player.y, player.width, player.height); // Draw player
+}
+
+// Game loop
+function gameLoop() {
+  update();
+  draw();
+  requestAnimationFrame(gameLoop); // Loop the game
+}
+
+// Start the game
+gameLoop();
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Simple HTML Game</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <canvas id="gameCanvas" width="800" height="600"></canvas>
+  <script src="game.js"></script>
+</body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,13 @@
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  margin: 0;
+  background-color: #f0f0f0;
+}
+
+canvas {
+  border: 2px solid #000;
+  background-color: #fff;
+}
