Skip to content

Commit 043cd56

Browse files
Aviral2002Aviral2002
committed
First project
1 parent 25b66c8 commit 043cd56

File tree

5 files changed

+181
-0
lines changed

5 files changed

+181
-0
lines changed

‎SimpleDrawingGame/Aviral2002/README.md

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
2+
# Simple Drawing Game
3+
This is a simple drawing game created using HTML, CSS, and JavaScript. Users can draw on the canvas using various tools provided in the toolbar.
4+
5+
# Features
6+
- Drawing Canvas: The main canvas area where users can draw.
7+
- Toolbar:
8+
- Stroke Color: Users can select the stroke color using a color input.
9+
- Line Width: Users can adjust the line width using a number input.
10+
- Clear Button: Clears the entire canvas.
11+
12+
# How to Use
13+
- Open the index.html file in a web browser.
14+
- Use the color picker to choose the stroke color.
15+
- Adjust the line width using the provided input.
16+
- Start drawing on the canvas.
17+
- Click the "Clear" button to erase the entire canvas.
18+
19+
# Code Explanation
20+
- The HTML file (index.html) contains the structure of the webpage, including the canvas and toolbar elements.
21+
- The CSS file (style.css) provides styling for the webpage.
22+
- The JavaScript file (index.js) contains the logic for drawing on the canvas and handling toolbar interactions.
23+
24+
# Dependencies
25+
No external libraries or frameworks are used in this project. It runs using standard HTML, CSS, and JavaScript.
26+
27+
# How to Contribute
28+
If you'd like to contribute to this project, feel free to fork the repository and submit a pull request with your changes.
29+
30+
# Demo Screenshot
31+
[![Drawing Game Screenshot](demo.png)](demo.png)
32+
33+
# License
34+
This project is licensed under the MIT License. Feel free to use, modify, and distribute the code as per the terms of the license.

‎SimpleDrawingGame/Aviral2002/demo.png

78.4 KB
Loading

‎SimpleDrawingGame/Aviral2002/index.html

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href ="style.css">
7+
<title>SimpleDrawingGame</title>
8+
</head>
9+
<body>
10+
<section class="container">
11+
<div id="toolbar">
12+
<h1>Draw</h1>
13+
<label for="stroke">Stroke</label>
14+
<input id="stroke" name="stroke" type="color">
15+
<label for="LineWidth">Line Width</label>
16+
<input id="LineWidth" name="LineWidth" type="number" value="5">
17+
<button id="clear">Clear</button>
18+
</div>
19+
<div class="drawingBoard">
20+
<canvas id="drawingBoard">
21+
22+
</canvas>
23+
</div>
24+
</section>
25+
<script src="index.js" type="application/javascript"></script>
26+
</body>
27+
</html>

‎SimpleDrawingGame/Aviral2002/index.js

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
const canvas = document.getElementById('drawingBoard');
2+
const toolbar = document.getElementById('toolbar');
3+
const ctx = canvas.getContext('2d');
4+
5+
const canvasOffsetX = canvas.offsetLeft;
6+
const canvasOffsetY = canvas.offsetTop;
7+
8+
canvas.width = window.innerWidth - canvasOffsetX;
9+
canvas.height = window.innerHeight - canvasOffsetY;
10+
11+
let isPainting = false;
12+
let lineWidth = 5;
13+
let startX;
14+
let startY;
15+
16+
toolbar.addEventListener('click', e => {
17+
if (e.target.id === 'clear') {
18+
ctx.clearRect(0, 0, canvas.width, canvas.height);
19+
}
20+
});
21+
22+
toolbar.addEventListener('change', e => {
23+
if(e.target.id === 'stroke') {
24+
ctx.strokeStyle = e.target.value;
25+
}
26+
27+
if(e.target.id === 'LineWidth') {
28+
lineWidth = e.target.value;
29+
}
30+
31+
});
32+
33+
const draw = (e) => {
34+
if(!isPainting) {
35+
return;
36+
}
37+
38+
ctx.lineWidth = lineWidth;
39+
ctx.lineCap = 'round';
40+
41+
// Move to the starting position
42+
ctx.moveTo(startX - canvasOffsetX, startY - canvasOffsetY);
43+
44+
// Draw a line to the current mouse position
45+
ctx.lineTo(e.clientX - canvasOffsetX, e.clientY - canvasOffsetY);
46+
ctx.stroke();
47+
48+
// Update the starting position for the next segment
49+
startX = e.clientX;
50+
startY = e.clientY;
51+
}
52+
53+
canvas.addEventListener('mousedown', (e) => {
54+
isPainting = true;
55+
startX = e.clientX;
56+
startY = e.clientY;
57+
});
58+
59+
canvas.addEventListener('mouseup', e => {
60+
isPainting = false;
61+
// Reset the path
62+
ctx.beginPath();
63+
});
64+
65+
canvas.addEventListener('mousemove', draw);
66+

‎SimpleDrawingGame/Aviral2002/style.css

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
body{
2+
margin: 0;
3+
padding: 0;
4+
height:100%;
5+
overflow:hidden;
6+
color:white;
7+
}
8+
9+
h1 {
10+
font-family:'Times New Roman', Times, serif;
11+
font-weight: bolder;
12+
font-style: oblique;
13+
background-clip: text;
14+
color: black;
15+
margin-top: 5px;
16+
}
17+
18+
.container{
19+
display: flex;
20+
height:100%;
21+
}
22+
23+
#toolbar{
24+
display: flex;
25+
flex-direction: column;
26+
padding: 5px;
27+
width: 80px;
28+
border: 8px solid #404040;
29+
background-color: #e47bae
30+
}
31+
32+
#toolbar *{
33+
margin-bottom: 12px;
34+
35+
}
36+
37+
#toolbar label{
38+
font-size: 16px;
39+
font-family:'Times New Roman', Times, serif;
40+
font-style: oblique;
41+
color:#000000;
42+
font-weight:bold;
43+
}
44+
45+
#toolbar input{
46+
background-color: grey;
47+
color:floralwhite;
48+
}
49+
#toolbar button {
50+
background-color: #1565ce;
51+
border-radius: 4px;
52+
color :white;
53+
padding: 2px;
54+
}

0 commit comments

Comments
 (0)