InternetComputing-Lab-4

Posted on | In | Visitors: | Readers 人

here for website

  • Author: Yiqing Ma (Hongkong University of Science and Technology )

  • TA , Course

Step 0: target

[show the target video]

In this lab, we will build a jumping game.

  • The player walks along a path
  • Things in the sky or on the grass moves backwards
  • The player needs to jump over bombs
  • If the player falls into the bomb, the game will be over

You will use a lot of CSS animations to do all animations in the game.

Step 1: basic introduction to the jumping game.

[I Introduce the knowledge you need in this game.]

You are given a starting HTML file here. And you can download it easily.

So basically, you are given a “Game Over” html.

The coordinate system of the SVG area has been set up using the viewBox attribute so that the top left corner is (0, 0) and the bottom right corner is (1000, 400).Even if you change the size of the browser, the coordinate system will remain within the SVG area, i.e. the coordinate system is not related to the actual size of the SVG area in the browser

To make the game in , you need to: “

  1. Create the necessary SVG elements into the game, which include :

    • the sky
    • the ground
    • some clouds
    • the player
    • two double bombs on the ground

  2. Make appropriate CSS animations for the SVG elements

  3. Control the animations using JavaScript

Similar to the previous labs, this game uses a Google font that you can see from the link:

1
<link href="https://fonts.googleapis.com/css?family=Dosis:700" rel="stylesheet">

Step 2: Creating the SVG Elements

we should create these SVG elements in the game:

  • the sky
  • the ground
  • some clouds
  • the player
  • two bombs on the ground

You can freely choose one of the following ways to create them:

  • Writing your own SVG code
  • Using SVG edit to draw the SVG pictures and copy the SVG code into the game
    (It already has a web link for the SVG edit. )
  • Searching on the Web for useful SVG pictures and copy the code into the game

Writing your Own SVG Code

you may think it is not easy to write your own SVG Code. However, sometimes this is the best way to create simply SVG elements in your game. For example, the sky and the ground of the game can both be a simple rectangle.To do that, you can write your own rectangle using some code.

1
<rect height="400" width="1000" y="0" x="0" stroke="none" fill="skyblue"/>

You can then make some adjustments to make the sky linear gradually change to blue.

Every Time you can inspect the code to see how SVG code is written.

[open the demo]
Remember in this game you should make a sky, a cloud and a grass for the background.

you can make the sky a day-like or a night-like , if you make a day-like , you should do like the demo, do three clouds with a blue sky. if you make a night-like, you should make a dark sky and three stars.

this total grass, dark and cloud thing is sky (5pt), a grass (3pt) 3 clouds/ 3 stars(5pt) total together 13pt

Using SVG Edit

If you are not too sure about writing your own SVG code, you can make use of SVG edit to help you do that. you can see the introductions through the website.

I will talk about how to make a ball-like bomb.

[open the website to show examples]

First you can see many examples they can all be built by svg.

It’s super easy cause you only need to draw the picture (like photoshop) and then click on the svg translate, then you get a svg photo.

[open the website to show examples]

Now i’m going to talk about how to make a ball-like bomb.

show how to make this photo.

Here is the important thing, that you need to make a 3d ball-like bomb in the game. And if you made a good one , you can get the score of 5 . And another 2 score here is put the bomb to the correct location of the game.

remeber it is very important to put the location of the clouds and bombs correctly, it will show just like what its place in the svg-editor

Searching for SVG Pictures on the web

If you want to include some fantastic pictures in your game, it may take you a long time to draw/make one Then the simplest way is to ‘borrow’ one from the Web. You can search for SVG pictures easily using Google search. You can either:

  • Change the advanced settings in Google Image search to include only SVG results
  • Alternatively, search for SVG files using the filetype:svg directive

For example, here are the results of searching for ‘Hello Kitty’ in Google:

[open the website to search for Hello Kitty]

hello kitty filetype:svg

Right Hello Kitty1 !

Right Hello Kitty2 !

Once you have chosen a desired SVG picture from the result You can again copy the appropriate SVG code into your game. However, most of the time the pictures on the Web may not have the size that you want.

In this case, you can use SVG edit to help you change the canvas and the location correctly (this is also 5pt)

[open the svg code edit]

I will show how to do it. -> First change the canvas background size and then move it to the correct place

Here is the important thing, that you need to choose a cute player(for example hello kitty but not only hello kitty) . And if you made a good one , you can get the score of 5 . And if you get the correct svg code and correctly put it into the location of the game. you will get the whole 10 score.

The Elements in the Game

The SVG elements will scatter all over the place. Therefore, you should group the SVG elements of an object together and give the group an element so that you can work with the group later.

for example, the code is like this 

1
2
3
<g id="player">
    ...SVG elements for the player...
</g>

there is no need for grouping the sky and the grass. This is because you do not really need to create animation for the sky and grass. they just still. But for the clouds(or starts), the bomb (bombs) and the player(maybe hellokitty or a dinasour) they all need to have animations so they need group id

so after this huge step 2 what we should have in our code is that like this two effects.

[show two effect after step 2]

Because it is a hand-in lab so i will not teach you the code hand by hand. so you need to learn by yourself and you can ask me on the class. after step 2 if you get the version i show you just then, you will get the full score

Step 3: Making the Animations:

Actually to this part, you have already build half of the lab 4; the remaining half is the animation part

So you will make CSS animations for the three things in the game:

  • The three cloud(or star)
  • The two bombs
  • The player

Animation for the Cloud

[open the final demo]

first assume that you have your cloud ready inside an SVG group, i.e.

1
2
3
<g id="cloud">
    ...SVG elements for a cloud...
</g>

then for the cloud, we need it move slowly from right to left.
To do that, you need to create the @keyframes rule for cloud animation.

The Keyframes Rule

The @keyframes rule in CSS defines the change of CSS properties for a particular animation. That means you don’t need to build your own code with complicate functions.instead, you only need to learn how to use the given code

1
2
3
4
@keyframes ...name... {
    from { ...CSS properties... }
    to   { ...CSS properties... }
}

Since you want to change the x position of the cloud to move from right to left, you can make use of the transform property to do that.

For example, you can move the cloud from the left side of the screen and then transfer it to the right side of the screen.

we can build the code like this:

1
2
3
4
@keyframes cloud-animation {
    from { transform: translateX(1000) }
    to   { transform: translateX(-120) }
}

A negative value is used for the target translateX because you would want to move the cloud out of the left edge of the SVG area.

Also this value is relative to the original place of the cloud. so you may need to try a little.

The Animation Property

Now you need to care about the more Animation properties:
There are three properties:

  1. Animation name
  2. Animation duration
  3. Animation timing function
  4. Animation-iteration-count

first two are easy to understanding, animation duration we can set to 10s .animation-timing-function is the easing you want to use the animation, for the cloud it is set to linearly. and the last one animation-iteration-count is the number you want to run the animation (you can set it to infinite , then the cloud moves continously)

so for the cloud-animation, the code is like:

1
2
3
4
5
6
7
8
9
10
11
@keyframes cloud-animation {
  from { transform: translateX(1000px); }
  to   { transform: translateX(-120px); }
}

#cloud {
    animation-name: cloud-animation;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 10s;
}

in this game you should make 3 clouds. You can consider making a cloud class to apply the animation to all your clouds.

A trick to start your animation differently for the clouds is to use the animation-delay property

So for your code, you can easily set 3 clouds, and for each clouds set different kinds of animation-delay and properties. This is 5 pt in the game
So if you done three clouds or stars move correctly ,you will get 10 pt.

Animation for the bombs

[open the final demo]

you can see through the demo, that the animation for the bomb is not so much different to the cloud one.
large part of them is the same. But there is one thing you need to do for the bomb is that.

Using the animation-play-state Property

this property helps us control the generation of the animation, which means we can add some controls to the animation, so that we could add the conditions to deal with the animations.

we want to control the bomb animation, we can setting the animation-play-state property to paused and it is stopped.

it can be restart by changing the property to running.

what is important in this game is that we need two bombs and they start at same place but with different speed. it can be achieved by simply copied the first bomb. and set the different animation-duration. this is worth 10 pt.

this two bomb step makes the game more real-world and harder. The animation for the bomb is 20 pt in total.

Animation for the Player

Finally, it’s time to hellokitty. The animation is used to mimic the jumping action of the player.

[open the final demo]

It should really be jumping up and down only and that means you can adjust the translateY value of the transform property

That implies there are at least three key moments in the animation

so the code should be like :

1
2
3
4
5
@keyframes player-animation {
  0%   { ... }
  50%  { ... }
  100% { ... }
}

The rest of the animation will be similar to what you have done before

so after you build the code you should see hello kitty jump up and down correctly by setting the animation-play-state appropriately.

So after this whole big step 3, which is 30 scores, we should get the animations correctly build. Because it was a hand-in lab, so we don’t have the code teaching , but here i build the code myself, so this is what it looks like when i add all these animation.

in this situation because i have don’t set the animation-play-state to pause ecause i want all of you to see the effect of animation. But actually for the player and bombs, they should be set this property.

Step 4: Controlling the Animations Using JavaScript

You have already finished the majority of the game. The remaining part of the lab is to control those animations. As you have learned already, you can easily start and stop those animations using the animation-play-state property.

Now you will use the property to control the animations in the following cases:

  • Starting to move the bomb at a random start time
  • Making the player jump when the spacebar key is pressed
  • Stopping all animations when the game is over

4.1 Starting to Move the bomb

so in this part you need to build the function called (makebomb) and in this function ,you need to do two things , first is starting the animation,second is stopping the animation

so you can first set a random timeout and by using settimeout() and math.random() according to the given instructions from the website.

The idea is You need to run the animation only once and then you will stop it. you can then restart the animation after a random time again then one iteration of the animation finishes, you temporarily pause the animation, wait for a random time and restart the animation

1
2
3
4
5
6
// The bomb finishes 1 iteration of animation...
$("#bomb").on("animationiteration", function() {

    // You need to stop the animation here

});

So inside the handler, you will :

  • stop the bomb animation
  • start the bomb animation at a random time later, i.e. running the makebomb() function

so in this part, the total score is 10pt, for each function in the handle its 5pt

Making the Player Jump

Now comes to the next step: making the player jump.

In the game, if the spacebar is pressed, you will make the player jump. If you look at the given code, the keydown event handler has been given so that it runs a jump() function to make the player jump.

Similar to what you have done for the bomb,this time we would like the player to jump when the spacebar key is pressed, you will need to stop the animation when one iteration of the animation has completed also do it in the handle.

Checking for the Game Over Situation

this is the last part of this lab—— game over situation.

That means you should hide the “game over “ text when the game starts and the text should show when the game is over. and you need to modify the function checkGameover()

the game is over when

  • The player is near the ground AND
  • The bomb is under the player

Luckily, you can read the transform property to see the current values of them even when they are in the middle of an animation

Reading the Transform Property

However, it is not easy to get the position from the property because it is matrix like (1,0,0,1,0,0) but the instruction has already told you that the position of an element is the last two numbers of the matrix. and one can use the split() of JavaScript string to do that.

Game Over

When the game over, you can then stop all animations of the game, including the cloud(s), the bomb and the player. it worth 5pt. so this is pretty important.

Also, you need to add some fancy animations of the gameover text when it shows up . this also worth 5pt”

so in the last you need to remember to run the checkGameover() again after the game is over so you should not run the following line of code in the function when that happens.

[At the last of the lab , i open the marking scheme to show them again about the important part]