const letterContainer = document.getElementById("letter-container"); const optionsContainer = document.getElementById("options-container"); const userInputSection = document.getElementById("user-input-section"); const newGameContainer = document.getElementById("new-game-container"); const newGameButton = document.getElementById("new-game-button"); const canvas = document.getElementById("canvas"); const resultText = document.getElementById("result-text"); //Options values for buttons let options = { Tools: [ "led", "potentiometer", 'button','sensor','resistor','breadbord','servomotor' ], Technology: ['robot','arduino','technology','coding','robotics'], }; //count let winCount = 0; let count = 0; let chosenWord = ""; //Display option buttons const displayOptions = () => { optionsContainer.innerHTML += `
The word was ${chosenWord}
`; //block all buttons blocker(); } } }); } else { //lose count count += 1; //for drawing man drawMan(count); //Count==6 because head,body,left arm, right arm,left leg,right leg if (count == 6) { resultText.innerHTML = `The word was ${chosenWord}
`; blocker(); } } //disable clicked button button.disabled = true; }); letterContainer.append(button); } displayOptions(); //Call to canvasCreator (for clearing previous canvas and creating initial canvas) let { initialDrawing } = canvasCreator(); //initialDrawing would draw the frame initialDrawing(); }; //Canvas const canvasCreator = () => { let context = canvas.getContext("2d"); context.beginPath(); context.strokeStyle = "#000"; context.lineWidth = 2; //For drawing lines const drawLine = (fromX, fromY, toX, toY) => { context.moveTo(fromX, fromY); context.lineTo(toX, toY); context.stroke(); }; const head = () => { context.beginPath(); context.arc(70, 30, 10, 0, Math.PI * 2, true); context.stroke(); }; const body = () => { drawLine(70, 40, 70, 80); }; const leftArm = () => { drawLine(70, 50, 50, 70); }; const rightArm = () => { drawLine(70, 50, 90, 70); }; const leftLeg = () => { drawLine(70, 80, 50, 110); }; const rightLeg = () => { drawLine(70, 80, 90, 110); }; //initial frame const initialDrawing = () => { //clear canvas context.clearRect(0, 0, context.canvas.width, context.canvas.height); //bottom line drawLine(10, 130, 130, 130); //left line drawLine(10, 10, 10, 131); //top line drawLine(10, 10, 70, 10); //small top line drawLine(70, 10, 70, 20); }; return { initialDrawing, head, body, leftArm, rightArm, leftLeg, rightLeg }; }; //draw the man const drawMan = (count) => { let { head, body, leftArm, rightArm, leftLeg, rightLeg } = canvasCreator(); switch (count) { case 1: head(); break; case 2: body(); break; case 3: leftArm(); break; case 4: rightArm(); break; case 5: leftLeg(); break; case 6: rightLeg(); break; default: break; } }; //New Game newGameButton.addEventListener("click", initializer); window.onload = initializer;