CSE 154

Section 8: MAMP Setup and More JS

Today's Agenda

Setup MAMP (local PHP/MySQL server)

Ducky Game

Finish prior sections or Nonograms for more practice

Mamp Setup

If you have not already, install MAMP on your computer. This will allow you to run a local server that can host PHP files and interact with a MySQL database. We will start using this more in the second half of the course, but we want to make sure everything is working now.

Note: there is more information on this under "Local Servers" on the course website's resources page.

Mac Setup

Windows Setup

Rest of Section

Worktime for Ducky Game lab (following slides)

Finish prior sections or Nonograms for more practice

Ducky Game

We have provided HTML and CSS, and a duck.svg files for the Ducky Game. You are to implment ducky-game.js, a file that adds interactivity to the game (see following slides).

Running Solution

Starting the Game

When the page loads, the Ducky Game should start.

  • Every 200 milliseconds, the ducky should move in a random direction by 20px.
  • Try to prevent the duck from having the ability to walk off the edge of the pond!
  • When the ducky is clicked, the player's score should increment by one point.

Hint: To get the current top and left values of an element, you will need to use window.getComputedStyle(). The reason for this is that we want to get the current value on the screen, not necessarily a value set in CSS (our CSS never even sets top or left values). 

let top = window.getComputedStyle(element).top;
let left = window.getComputedStyle(element).left;

JS

Expanding On The Ducky Game

While fun as it is, the Ducky Game has a lot of room for growth! See if you can add some more features to make the game even more fun! Here are some suggestions of possible features to implment:

  • The more ducks the better - add more ducks to the game, or let the user choose how many ducks to play with.
  • Allow a user to reset their score or stop the game.
  • Keep track of total time elapsed. Hint, we did this in Skittles!
  • Send the user a message on the screen when they score a point, then remove it after two seconds.
  • Add barriers to the pond that prevent the ducky from moving in certain directions.
  • Penalize the player with negative points for clicking away from the ducky.