Movatterモバイル変換

Get the penguin pngs!

Before we start, we need to make sure we have all the image files this project requires. If you haven’t already, download the file at the top of this page calledpenguin_pngs.zip.

Once you’ve downloaded thezip file make sure it’s in a place you can find it and open it to get at the files inside. It should be full of image files with the"png" extension.

Step 1: Upload our penguins

Alright. Let’s start making our cute penguin game. The first thing we need to do is upload all our penguin images.

Make a new app in Coder. We called oursPop-Up Penguins.
Open or unzip thepenguin_pngs.zip file. You need the image files inside, not the zip itself.
In Coder, open the media tab in your app. It's the file icon at the top.
Click the “+” sign and add each file that you found inside thepenguin_pngs.zip file. You should see them pop into the media folder.
It might take a minute, but upload each of the files into your app this way.

To finish this step:

Upload all the images in the media folder.

Step 2: Make some divs

Now that we’ve added all our files let’s start building our game. We’ll be adding a set of divs to our HTML and matching styles in our CSS that create the image above.

Open the HTML tab and delete everything between the<body> tags.
Add the following code:

What this code is doing:

These divs are defining the structure for our game. Each“penguin” div will be a little bump of snow hiding a penguin (or yeti). We will be adding the images to them in the CSS.

Next, go to the CSS tab.
Go ahead and erase the code that’s already there.

Add the following code to the CSS tab:

body { background-color: #ccf5f5;}#gameholder { width: 600px; margin-left: auto; margin-right: auto;}#title { width: 600px; height: 150px; background-image:url('');}

What this code is doing:

body is making our background a nice blue color.

#gameholder is making ourgameholder div600px wide and centering it in the screen. It’s invisible, but helps us organize our other elements.

#title is setting a size for our ourtitle div and giving that div a background image. In this case that image happens to be the title/instructions to our game. We’ll add that in the next step.

Now open the media tab.
Find the file called:penguin_title.png
Put your cursor between the(' and') at the end of the background image property, right between the quotes, and click“paste to code” in the media panel. This copies the image url to your code at the location of your cursor.

Save and take a look at the preview window. You should see some snow covered lettering that says“Find the Penguins.”

We’ve got our title, let’s add some little snow-covered mounds for our penguins!

Add the following class to the CSS tab:

.penguin1 { width: 200px; height: 200px; float: left; background-image:url('');}

Now open the media tab.
Find the file called:mound_1.png
Put your cursor between the(' ') at the end of the background image property and click“paste to code”

All of our CSS looks like this so far:

body { background-color: #ccf5f5;}#gameholder { width: 600px; margin-left: auto; margin-right: auto;}#title { width: 600px; height: 150px; background-image:url('/static/apps/pop_up_penguins/media/penguin_title.png');}.penguin1 { width: 200px; height: 200px; float: left; background-image:url('/static/apps/pop_up_penguins/media/mound_1.png');}

To finish this step:

Copy the.penguin1 class and use it to make styles for.penguin2 through.penguin8. Make a.yeti class as well. You’ll find image files for each one labeled in the Media folder.

Step 3: Add a rollover

Now let’s add a rollover or:hover effect to each one of our mounds. This will pop up a question mark and jiggle the snow a little adding intrigue and suspense to our game.

In the CSS tab find our.penguin1 class.
Make a new line above the class and add the following style:

.penguin1:hover { background-image:url(''); cursor: pointer;}

This style is what’s called apseudo-class. It’s a way to add effects and additional styles to elements that we’ve already created. In this case we will be changing the background image of that div when a mouse is over it. We will also be changing the cursor to a pointer, or little hand giving our users another clue that the mound is clickable.

Go into the Media tab and find the image for mound_1_hover.png.
Paste the image link inside the quotes('') of thebackground-image property.
Go to the preview mode and run your mouse over the first mound. Did the question mark pop up? That’s:hover doing its job.

To finish this step:

Make new:hover classes for each of our.penguin and.yeti classes. You can find the images in our media folder.

Step 4: Pop up the penguins!

Now that we’ve got our mounds tempting us with those question marks, let’s hide some penguins (and a yeti!) inside each one and use anotherpseudo-class to make them pop up when clicked.

In the CSS tab find the.penguin1:hover class.
Underneath, that class add the following class:

.penguin1:active { background-image:url('');}

:active is another type ofpseudo-class. Similar:hover it adds/changes the style of.penguin1 when thediv isclicked with the mouse.

The position in the code ofpseudo-classes is important. An:active class should always come after or underneath:hover in the code for the effect to work properly.

Go into the media tab and find a penguin image. You can start withpenguin_1.png.
Paste the code for the image inbetween the(‘’)
Go back to the preview and click the first mound. Did the penguin pop up? Hold your mouse button down to keep the penguin from popping back down.

To finish this step:

Make new:active classes for each of our.penguin and.yeti classes. Add penguin images from the media tab. Make sure you hide the Yeti somewhere too.

Step 5: Yeti alert!

We’ve got all our penguins and yeti in place. Let’s add a yeti alert that will pop up when the yeti is clicked!

Go to the JS tab.
On the line below“//This code will run after your page loads” add a handler for the "mousedown" event to the.yeti div. It will look like this:

$(document).ready( function() { //This code will run after your page loads $(".yeti").mousedown(function() { alert("Yaaaarrrr!"); });});

This is a little bit ofJavascript andjQuery that will pop up a browser alert with the text “Yaaaarrrr” when you press your mouse button on the yeti. Try it out in the preview mode. To learn more about Javascript try playing around with theNight and Day project next.

Step 6: Mix it up and challenge someone

Now that we’ve got all our penguins (and yeti) hidden let’s play the game! Find a friend or a family member and challenge them to find all the penguins without accidently clicking on the yeti.

After they’ve had a go, mix theclasses up in your HTML to reshuffle the mounds and let them try again. To make it extra challenging, change the images in the:active states to put different penguins (and your yeti) under different mounds.

To finish this step:

Teach your playing partner how to change the images in the:active states and trade off challenging each other to a game of“Find the Penguins.”

Bonus Rounds

Once you’ve mastered the game we’ve built together, see if you can make it bigger and better.

A whole colony!Easy

Why not make it more challenging. Double or triple the number of mounds to make the game more difficult! You can use the samepenguin png files more than once if you like but you’ll need to make moredivs andclasses.

Stay, penguin, stay!Hard

See if you can useJavascript andjQuery to make the penguins stay up when clicked and disappear when the yeti is awoken. If you’re not sure how to do that try finishing theNight and Day project to learn some tricks.

Real squeaks, squawks, and roarsHard

If you feel like your penguin game is lacking certain level of auditory awesomeness try adding some sound effects to each click. You’ll probably need to learn a little bit about audio files. Fortunately, ourMusic Boxes project covers those subjects.

Coder Projects to Try Next

Making interactive things is kinda cool. Try these projects next, if you want to make your mouse clicks even more powerful.

Night and Day

Ever wish you could control the universe? Well now you can pretend with this project. Change day into night and back again with the click of a mouse and learn a whole new programming language along the way.

Open Project

Medium