diff options
| author | Martial Simon <msimon_fr@hotmail.com> | 2024-03-05 12:51:29 +0200 |
|---|---|---|
| committer | Martial Simon <msimon_fr@hotmail.com> | 2024-03-05 12:51:29 +0200 |
| commit | e78b671a3062d285cfa932589760c5326ba486a2 (patch) | |
| tree | 4a39a829ddc5c4101f66e5efbb8c6ed96251d6f5 | |
| parent | ded4a9e2075960c3ba08b63b882585ed4e3d5994 (diff) | |
meta: renamed description
| -rw-r--r-- | README.md (renamed from principle.md) | 0 | ||||
| -rw-r--r-- | index.html | 2 | ||||
| -rw-r--r-- | index.js | 26 | ||||
| -rw-r--r-- | style.css | 5 |
4 files changed, 23 insertions, 10 deletions
@@ -5,7 +5,7 @@ <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> - + <p id="check"></p> <p id="instructions"> Click anywhere on the screen to move the robot! </p> @@ -1,5 +1,6 @@ const canvas = document.getElementById('drawing-board'); const ctx = canvas.getContext('2d'); +const hit = document.getElementById("check"); const canvasOffsetX = canvas.offsetLeft; const canvasOffsetY = canvas.offsetTop; @@ -11,48 +12,55 @@ let isPainting = false; let lineWidth = 5; let strokeColor = "skyblue" let drawings = []; + +ctx.lineWidth = lineWidth; +ctx.lineCap = 'round'; ctx.strokeStyle = strokeColor; const draw = (x, y) => { if (!isPainting) { return; } - + ctx.lineWidth = lineWidth; ctx.lineCap = 'round'; ctx.lineTo(x - canvasOffsetX, y - canvasOffsetY); drawings.push({x : (x - canvasOffsetX)/canvas.width, y : (y - canvasOffsetY)/canvas.height}); ctx.stroke(); + ctx.beginPath(); } - canvas.addEventListener('mousedown', (e) => { isPainting = true; + hit.style.display = ""; + setTimeout(() => { + hit.style.display = "none" + }, 2 * 1000); }); -canvas.addEventListener('mouseup', (e) => { +/* canvas.addEventListener('mouseup', (e) => { isPainting = false; drawings.push({x : -1, y : -1}) ctx.stroke(); ctx.beginPath(); -}); +}); */ -canvas.addEventListener('mousemove', (e) => draw(e.clientX, e.clientY)); +// canvas.addEventListener('mousemove', (e) => draw(e.clientX, e.clientY)); canvas.addEventListener('touchstart', (e) => { - console.log(e); isPainting = true; + draw(e.targetTouches[0].clientX, e.targetTouches[0].clientY); }); -canvas.addEventListener('touchend', (e) => { +/* canvas.addEventListener('touchend', (e) => { isPainting = false; drawings.push({x : -1, y : -1}) ctx.stroke(); ctx.beginPath(); -}); +}); */ -canvas.addEventListener('touchmove', (e) => draw(e.targetTouches[0].clientX, e.targetTouches[0].clientY)); +// canvas.addEventListener('touchmove', (e) => draw(e.targetTouches[0].clientX, e.targetTouches[0].clientY)); function redrawCanvas() { canvas.width = window.innerWidth - canvasOffsetX * 2; @@ -15,4 +15,9 @@ canvas { border: 3px dashed orange; padding: 4px; pointer-events: none; +} + +#check { + position: absolute; + display: none; }
\ No newline at end of file |