Answered step by step
Verified Expert Solution
Link Copied!

Question

1 Approved Answer

Create a drag and drop puzzle game. 1. Take a picture and cut it into 4 equal pieces in your favorite graphic editing program. Save

Create a drag and drop puzzle game.

1. Take a picture and cut it into 4 equal pieces in your favorite graphic editing program. Save the pictures as .png, .gif, or .jpg formats.

2. On your web page, show the user what the final image should look like.

3. Create the source image objects. Create 4 image tags with the images set to the four puzzle pieces.

4. Create the target div tags. Have 4 div tags. Use CSS so that the div tags are setup with a gray border and the same dimensions as the image puzzle pieces.

5. The user should be able to drag the pieces from the images to the div tags. When the user has dragged all four to the correct place, then display a message to the user that the user won the game!

Note that there are many different ways to solve this problem. Its up to you to be creative. Ive given some direction. The goal is to meet the program requirements above, demonstrate your understanding of the DOM and write efficient code that works!

Review your program to make sure you also used descriptive names for the variables, classes and other elements and stuctures.

Preview and test your program. Again, make sure there is adequate documentation in the CSS, HTML and JavaScript programs!

If you need additional screen shots to show your program, just add them here.

Step by Step Solution

There are 3 Steps involved in it

Step: 1

blur-text-image

Get Instant Access to Expert-Tailored Solutions

See step-by-step solutions with expert insights and AI powered tools for academic success

Step: 2

blur-text-image_2

Step: 3

blur-text-image_3

Ace Your Homework with AI

Get the answers you need in no time with our AI-driven, step-by-step assistance

Get Started

Recommended Textbook for

Database Systems A Practical Approach To Design Implementation And Management

Authors: THOMAS CONNOLLY

6th Edition

9353438918, 978-9353438913

More Books

Students also viewed these Databases questions

Question

=+h. Do all of the related materials project one cohesive message?

Answered: 1 week ago

Question

Know how productivity improvements impact quality and value.

Answered: 1 week ago