Interactive Game HTML5, JAVASCRIPT AND CSS3

GAME : MARCHING SHAPES THE CODING FOR MAKING THESE INTERACTIVE GAMES MUST BE IN HTML5, JAVASCRIPT AND CSS3 IN ORDER TO FUNCTION IN ALL TYPES OF COMPUTERS AND TABLETS. HOWEVER THE GAMES WILL BE DEVELOPED, THE PEOPLE THAT WILL CREATE THEM MUST SPEAK TO THE PERSON IN CHARGE OF BUILDING OUR WEBSITE, SO THAT THEY CAN BE COMPATIBLE WITH THE WEBSITE CODING. GAME EXPLANATION THIS IS A SIMPLE DRAG AND DROP EXERCISE WHERE THE USER MUST BE ABLE TO PLACE THE CORRECT SHAPE OR SHAPES IN THE CORRECT SPACE BASED IN THE DIRECTIONS GIVEN. THE GAME IS DIVIDED INTO FOUR DIFFERENT PARTS. PART 1 PLACING THE SHAPES IN GROUPS. HERE, THE USER MUST PLACE THE SHAPES IN GROUPS BASED ON THE DIFFERENCE OF COLORS. ACCORDING TO WHERE WILL THE USER PLACE THE FIRST SHAPE OF EACH SPACE. THEN THAT SPACE MUST RECOGNIZE THAT IT MUST EXPECT THE SAME COLORS AS THE CORRECT ANSWER, SINCE THERE IS NO WAY TO KNOW WHICH SHAPE WILL END UP IN THE 3 SPACES GIVEN. IT IS A SIMPLE DRAG AND DROP FUNCTION. WHEN ALL THE SPACES ARE FILLED WITH THE CORRECT SHAPES, THEN THE USER WILL GET AWARDED THROUGH THE SOUND EFFECTS AND THE PANEL THAT SAYS WELL DONE, AND A GREEN ARROW BUTTON WILL HELP THEM PROCEED TO PART 2. IF A SHAPE IS TO BE MISPLACED, THEN IT SHOULD ANIMATEDLY RETURN TO THE SPOT IT OCCUPIED BEFORE IT WAS MOVED. PART 2 THIS PART FOLLOWS THE SAME LOGIC AS PART 1. THE ONLY DIFFERENCE IS THAT THE SHAPES MUST BE GROUPED ACCORDING TO THE SHAPE, NOT THE COLOR. PART 3 EXACTLY THE SAME WITH PART 1, BUT WITH MORE SHAPES AND BLANK PLACES TO BE FILLED. PART 4 THIS PART IS THE SAME DRAG AND DROP ROUTINE, BUT THIS TIME THE USER IS ASKED TO PLACE THE SHAPE THAT IS EXACTLY AS THE 3 ALREADY PLACED ONES IN THE BOX. SAME EFFECTS APPLY DURING CORRECT AND INCORRECT PLACEMENT. THIS PART HAS 3 DIFFERENT PARTS IN IT, ALL FOLLOWING THE SAME LOGIC. WHEN THE GAME ENDS, THEN THERE IS A PANEL AWARDING THE USER, AND THE OPTION TO GO BACK AND PLAY THE GAME FROM THE BEGINNING.