PuzzleGame Used AI

Fixed a few glitches in the code (like in puzzle three, there were false collision detections). Re-uploaded to GitHub and updated page to host website.

Moved the code to GitHub and created a GitHub page to host the website game.

I worked on the last page of the website. I wanted to add an animation affect and counter to the page. The counter was easy (I learned the difference between const and let in javascript), but the animation took a while. I got it to work, but then scrolling messed it up. After doing research on how to fix it and some trial and error, I eventually got it to work how I wanted. I also added a button to the bottom to take you back to the start. Done with the site. Now just a final test before shipping it.

I made the final puzzle. I decided to add a text input element and draggable pieces. The text input element and the javascript to recognize the correct code was easy. Making the draggable pieces was slightly harder, but I eventually figured out the javascript. The thing that took me the longest was figuring out the dragging feature, and then position every draggable element on the page. Using html, css, and javascript, I was able to make a dragging feature with a text input.

Finished working on the fourth puzzle (one more to go). This one was much quicker and easier than the previous two since the style and format was similar to the first puzzle. While I used the same code from the first puzzle, I had to adjust the CSS to accommodate for the large texts on the 4th puzzle. Did this by changing the class name of the element I wanted to change and adding new CSS code targeting that new class. (Now I have to think of the hardest puzzle for the final one)

I worked on make my third puzzle. This was a challenge since I wanted to add moving elements, user interaction, and collision detection using javascript (I have very little to no experience in these). I worked step by step, coding one thing at a time. I started with moving the character, then I added collision detection. I used copilot to help generate some base code, and then modified the code, adding and removing parts as well as changing parameters. In the end, after a lot of trial and research, I got the third puzzle to work.

I worked on my second puzzle. My first challenge was that I wanted an image to move when I hovered over it. With some research, I used JavaScript to make this happen. Then, I wanted to add a shadow and flashlight effect, which was hard. After using AI (and trying multiple times), I got a base code I was able to manipulate to work. I finally got my second puzzle to work.

I finished making the second (or officially first) puzzle. I also made a page you get redirected to if you fail, and then it redirects you to the home page. One challenge I faced was getting the buttons to make a grid pattern. However, after some trial and error, and looking at my previous projects, I managed to make it work.

I worked on the home page, where the user will do their first puzzle. I made a css file to make the page look nice and add some hidden elements. I also made my next two pages and linked them to the first page, finishing the welcome screen.