Merge pull request #840 from gurjott/simple_drawing_game

PBJI · web-flow · commit 908d0bcc420b · 2023-10-12T17:43:20.000+05:30
added simple drawing game
diff --git a/DrawingGame/gurjott/index.html b/DrawingGame/gurjott/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Simple Drawing Game</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <h1>Simple Drawing Game</h1>
+    <canvas id="canvas" width="400" height="400"></canvas>
+    <button id="clear-btn">Clear</button>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/DrawingGame/gurjott/script.js b/DrawingGame/gurjott/script.js
@@ -0,0 +1,47 @@
+// Get canvas element and drawing context
+const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+// Variables for tracking drawing state
+let drawing = false;
+let lastX = 0;
+let lastY = 0;
+
+// Set line style
+ctx.strokeStyle = 'black';
+ctx.lineWidth = 2;
+
+// Function to start drawing
+function startDrawing(e) {
+    drawing = true;
+    [lastX, lastY] = [e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop];
+}
+
+// Function to draw a line
+function draw(e) {
+    if (!drawing) return;
+
+    ctx.beginPath();
+    ctx.moveTo(lastX, lastY);
+    [lastX, lastY] = [e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop];
+    ctx.lineTo(lastX, lastY);
+    ctx.stroke();
+}
+
+// Function to stop drawing
+function stopDrawing() {
+    drawing = false;
+    ctx.closePath();
+}
+
+// Event listeners for drawing
+canvas.addEventListener('mousedown', startDrawing);
+canvas.addEventListener('mousemove', draw);
+canvas.addEventListener('mouseup', stopDrawing);
+canvas.addEventListener('mouseout', stopDrawing);
+
+// Clear canvas button
+const clearButton = document.getElementById('clear-btn');
+clearButton.addEventListener('click', () => {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+});
diff --git a/DrawingGame/gurjott/styles.css b/DrawingGame/gurjott/styles.css
@@ -0,0 +1,12 @@
+body {
+    font-family: Arial, sans-serif;
+    text-align: center;
+}
+
+canvas {
+    border: 2px solid #000;
+}
+
+button {
+    margin-top: 10px;
+}
