Pudding+Tap+Movement&Sound：EAT THE PUDDING

What I picked from the lists are 

🍮Pudding

Tap

Movement&Sound

IDEA  🌟

From the keywords, I have a clear picture of the interaction between people and the piece of work.

Someone taps a pudding, then the pudding moves away and makes sounds.

For me, I had some coding experience with HTML/CSS/JavaScript. Therefore, the first idea that came to my mind was to present the interaction in a digital form. 

Why not putting it on a dinner table❓

Why not letting it play with people❓

Why not making a mini game-like interaction ❓

CODING : WHO IS GOING TO EAT THE PUDDING FIRST

I always start with the layout and styles. The picture is pretty clean and simple. The white rectangle is the table. You can see a knife, a fork, a plate and a pudding on the table. Before playing around, you can read the tips first. 

Let’s play with it. In order to eat the pudding, you need to put it on the plate first by clicking it and clicking it. Here, I wrote a Function getRandomInt(), which would randomly generate a number between 0 to 9.In this way, you would randomly get the (x,y), which indicates the position of the pudding. Every click will cause the movement of the pudding. When it is on the plate, you will here a sound "Eat me!" 

I tried 👇🏻

Is it fun? Let’s see how lucky you are.

Link to my work: https://codepen.io/hh2871/pen/JjRzGKo