🎨 Sketch Quest
Choose a mode!
🎨 Colors
Brush Size:
const canvas=document.getElementById("canvas"); const ctx=canvas.getContext("2d");
let drawing=false; let color="black"; let score=0; let timer; let history=[];
const challenges=[ "🐱 Cat", "🚀 Rocket", "🏰 Castle", "🐉 Dragon", "🤖 Robot", "🌳 Tree", "🍕 Pizza" ];
function setColor(c){ color=c; }
function saveState(){
history.push( ctx.getImageData( 0, 0, canvas.width, canvas.height ) );
if(history.length>20) history.shift();
}
function undo(){
if(history.length>0){
ctx.putImageData( history.pop(), 0, 0 );
}
}
function startDrawing(x,y){
saveState();
drawing=true;
ctx.beginPath();
ctx.moveTo(x,y);
}
function draw(x,y){
if(!drawing)return;
let tool=document.getElementById("tool").value;
ctx.lineWidth=document.getElementById("size").value;
ctx.lineCap="round";
if(tool==="eraser") ctx.strokeStyle="white";
else ctx.strokeStyle=color;
ctx.lineTo(x,y);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(x,y);
}
function stopDrawing(){
drawing=false;
ctx.beginPath();
}
canvas.addEventListener( "mousedown", e=>startDrawing( e.offsetX, e.offsetY ) );
canvas.addEventListener( "mousemove", e=>draw( e.offsetX, e.offsetY ) );
canvas.addEventListener( "mouseup", stopDrawing );
canvas.addEventListener( "touchstart", e=>{
let r=canvas.getBoundingClientRect();
startDrawing( e.touches[0].clientX-r.left, e.touches[0].clientY-r.top );
} );
canvas.addEventListener( "touchmove", e=>{
e.preventDefault();
let r=canvas.getBoundingClientRect();
draw( e.touches[0].clientX-r.left, e.touches[0].clientY-r.top );
}, {passive:false} );
canvas.addEventListener( "touchend", stopDrawing );
function clearCanvas(){
saveState();
ctx.clearRect( 0, 0, canvas.width, canvas.height );
}
function startGame(){
clearInterval(timer);
clearCanvas();
let mode= document.getElementById("mode").value;
if(mode==="free"){
document.getElementById("challenge").innerHTML= "📝 Draw anything!";
document.getElementById("timer").innerHTML="∞";
}
if(mode==="challenge"){
document.getElementById("challenge").innerHTML= "Draw: "+randomChallenge();
startTimer(30);
}
if(mode==="speed"){
document.getElementById("challenge").innerHTML= "⚡ Draw: "+randomChallenge();
startTimer(15);
}
if(mode==="color"){
let colors=[ "red", "blue", "green", "purple" ];
color= colors[Math.floor(Math.random()*colors.length)];
document.getElementById("challenge").innerHTML= "Use only "+color+"!";
document.getElementById("timer").innerHTML="∞";
}
}
function startTimer(seconds){
let time=seconds;
document.getElementById("timer").innerHTML=time;
timer=setInterval(()=>{
time--;
document.getElementById("timer").innerHTML=time;
if(time<=0){ clearInterval(timer); score++; document.getElementById("score").innerHTML=score; alert("Time finished! +1 point"); } },1000); } function randomChallenge(){ return challenges[ Math.floor( Math.random()*challenges.length ) ]; } function saveImage(){ let link=document.createElement("a"); link.download="my_drawing.png"; link.href=canvas.toDataURL(); link.click(); }
```