Java Script and Canvas Code Harlowe

COIN DROP GAME JS CANVAS Drops COINS AND SPIKE BALLS. Spike Balls do DMG COINS GIVE GOLD.

CAPTURE THE THIEF GAME. THIEVES ARE RAMPAGING THE MARKET PLACE. GWALDOR MUST CLICK ON THE THIEVES TO SEND THE GUARDSMEN TO THEM (OR SEND THEM TO JAIL)

PLAYER MUST SHOOT THE RATS INFESTING THE BASEMENT. SMALL AND A GIANT BOSS RAT.

FIX THE TEMPLE MINI GAME Player needs to move movable nodes into hotspots to rebuild the temple

PUZZLE:. CHOP UP BACKGROUND IMAGE AND PLAYER MUST PLACE PIECES TO FINISH PUZZLE

Quests: -- ITEM QUESTS ---- need an item to place into an object. --- KILL ENEMY QUEST

3 bit creatures. S --- SOLDIER W --- WORKER R --- RESEARCHER ############################# 0 - 7 Speed 0 - 7 Strength 0 - 7 Size ############################# 111 Speed Int Size 1 1 1

<!DOCTYPE html> <html> <head> <title>Moveable Node</title> <style> canvas { border: 1px solid black; } </style> </head> <body> <canvas id="canvas"></canvas> <script> class MoveableNode { constructor(canvas, x, y, radius) { this.canvas = canvas; this.ctx = canvas.getContext("2d"); this.x = x; this.y = y; this.radius = radius; this.isDragging = false; this.canvas.addEventListener("mousedown", this.handleMouseDown.bind(this)); this.canvas.addEventListener("mousemove", this.handleMouseMove.bind(this)); this.canvas.addEventListener("mouseup", this.handleMouseUp.bind(this)); this.canvas.addEventListener("touchstart", this.handleTouchStart.bind(this)); this.canvas.addEventListener("touchmove", this.handleTouchMove.bind(this)); this.canvas.addEventListener("touchend", this.handleTouchEnd.bind(this)); } draw() { this.ctx.beginPath(); this.ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI); this.ctx.fillStyle = "#0000ff"; this.ctx.fill(); this.ctx.closePath(); this.ctx.clearRect(0, 0, canvas.width, canvas.height); } handleMouseDown(event) { const rect = this.canvas.getBoundingClientRect(); const x = event.clientX - rect.left; const y = event.clientY - rect.top; if (this.isPointInside(x, y)) { this.isDragging = true; } } handleMouseMove(event) { if (this.isDragging) { const rect = this.canvas.getBoundingClientRect(); const x = event.clientX - rect.left; const y = event.clientY - rect.top; this.x = x; this.y = y; this.draw(); } } handleMouseUp(event) { this.isDragging = false; } handleTouchStart(event) { const touch = event.changedTouches[0]; const rect = this.canvas.getBoundingClientRect(); const x = touch.clientX - rect.left; const y = touch.clientY - rect.top; if (this.isPointInside(x, y)) { this.isDragging = true; } } handleTouchMove(event) { if (this.isDragging) { const touch = event.changedTouches[0]; const rect = this.canvas.getBoundingClientRect(); const x = touch.clientX - rect.left; const y = touch.clientY - rect.top; this.x = x; this.y = y; this.draw(); } } handleTouchEnd(event) { this.isDragging = false; } isPointInside(x, y) { return Math.sqrt((this.x - x) ** 2 + (this.y - y) ** 2) < this.radius; } } const canvas = document.getElementById("canvas"); const moveableNode = new MoveableNode(canvas, 100, 100, 50); moveableNode.draw(); </script> </body> </html>

GWALDORS INTRO TO OCEN DEEP As the renowned Dwarven Explorer and your guide to the fantastical world of Empire Fable, I welcome you to this interactive fiction game. Here, you will journey with me and my crew as we embark on expeditions and quests throughout the vast lands of the Empire. Allow me to introduce two of my most trusted companions, Arabella BrassFord and Adalyn Mechmaster. Arabella, a member of the esteemed Guild of Science, has generously financed many of our expeditions and has proven herself to be a great asset to our team with her expertise and resourcefulness. Adalyn, our skilled mechanic, keeps our airship, the CloudStrider, running smoothly and efficiently. She's always busy fixing and tinkering with something, but she's never too busy to lend a hand in our adventures. As we journey together, we'll explore the great city of Ocean Deep, with its bustling market district and renowned arena. And who knows, we may even run into other great adventurers like ourselves along the way. So, prepare yourself for the adventure of a lifetime. Together, we'll conquer new lands, face perilous challenges, and discover the hidden treasures of Empire Fable.