Added intial files for hindi translation

This commit is contained in:
Sanjay
2020-12-28 00:01:05 +05:30
parent e673998d7e
commit cc833ce34f
82 changed files with 1794 additions and 0 deletions

View File

@@ -0,0 +1,17 @@
*Complete this quiz after the lesson by checking one answer per question.*
1. Classes rely on inheritance to ascribe to behaviors
- [ ] true
- [ ] false
2. Composition is a preferred design pattern for game objects
- [ ] true
- [ ] false
3. Pub/Sub stands for:
- [ ] Publish/Subscribe
- [ ] Print/Staple
- [ ] Publish/Sanitize

View File

@@ -0,0 +1,18 @@
*A warm-up quiz about game development using JavaScript*
Complete this quiz in class
1. JavaScript is an unpopular language for building games
- [ ] [true]
- [ ] [false]
2. Pub/Sub is a preferred pattern for managing the game's assets and flow
- [ ] [true]
- [ ] [false]
3. Object inheritance can be handled by either using classes or composition
- [ ] [true]
- [ ] [false]

View File

@@ -0,0 +1,11 @@
# Mock up a game
## Instructions
Using the code samples in the lesson, write a representation of a game you enjoy. It will have to be a simple game, but the goal is to use either the class or the composition pattern and the pub/sub pattern to show how a game might launch. Get creative!
## Rubric
| Criteria | Exemplary | Adequate | Needs Improvement |
| -------- | ------------------------------------------------------- | ----------------------------------------------------- | --------------------------------------------------- |
| | Three elements are placed on the screen and manipulated | Two elements are placed on the screen and manipulated | One element is placed on the screen and manipulated |

View File

@@ -0,0 +1,17 @@
*Complete this quiz after the lesson by checking one answer per question.*
1. You can perform drawing operations directly on the Canvas
- [ ] true
- [ ] false
2. You listen to the `onload` event to know when an image has loaded asynchronously
- [ ] true
- [ ] false
3. You draw images onto a screen with an operation called
- [ ] paintImage()
- [ ] drawImage()
- [ ] draw()

View File

@@ -0,0 +1,18 @@
*A warm-up quiz about game development*
Complete this quiz in class
1. The Canvas element is what you use to draw on a screen
- [ ] true
- [ ] false
2. You can only draw simple geometric shapes
- [ ] true
- [ ] false
3. The point 0,0 is in the bottom left
- [ ] true
- [ ] false

View File

@@ -0,0 +1,18 @@
*Complete this quiz after the lesson by checking one answer per question.*
1. You always need to redraw the screen
- [ ] true
- [ ] false
2. What is a game loop?
- [ ] A function that ensures the game can be restarted
- [ ] A function that decided how fast the game should run
- [ ] A function that is invoked at regular intervals and draws what the user should see
3. A good case for redrawing the screen is
- [ ] A user interaction happened
- [ ] Something has moved
- [ ] Time has passed

View File

@@ -0,0 +1,19 @@
*A warm-up quiz about game development*
Complete this quiz in class
1. Any object on the screen can receive keyboard events
- [ ] true
- [ ] false
2. You can use the same method to listen to key events and mouse events
- [ ] true
- [ ] false
3. To make things happen at a regular interval, you use what function?
- [ ] setInterval()
- [ ] setTimeout()
- [ ] sleep()

View File

@@ -0,0 +1,11 @@
# Comment Your Code
## Instructions
Go over your current /app.js file in your game folder, and find ways to comment it and tidy it up. It's very easy for code to get out of control, and now's a good chance to add comments to ensure that you have readable code so that you can use it later.
## Rubric
| Criteria | Exemplary | Adequate | Needs Improvement |
| -------- | ------------------------------------------------------------------ | ------------------------------------- | -------------------------------------------------------------- |
| | `app.js` code is fully commented and organized into logical blocks | `app.js` code is adequately commented | `app.js` code is somewhat disorganized and lacks good comments |

View File

@@ -0,0 +1,12 @@
*Complete this quiz after the lesson by checking one answer per question.*
1. In collision detection you compare two
- [ ] circles and whether they intersect
- [ ] rectangles and whether they intersect
- [ ] the distance between two points
2. The reason for implementing a *cooldown* effect is because
- [ ] Making the game harder as you can't repeatedly fire a laser to destroy enemies
- [ ] JavaScript can only produce a certain number of events per time unit, so you need to limit them

View File

@@ -0,0 +1,14 @@
*A warm-up quiz about about game development*
Complete this quiz in class
1. Collision detection is how we detect if two things have collided.
- [ ] true
- [ ] false
2. How can we remove an item from the screen?
- [ ] Call the garbage collector
- [ ] Mark it as dead, only paint *not dead* objects next time we draw the screen
- [ ] Place the item on a negative coordinate

View File

@@ -0,0 +1,11 @@
# Explore Collisions
## Instructions
## Rubric
To better understand how collisions work, build a very small game with a few items that collide. Make them move via keypresses or mouse clicks, and make something happen to one of the items when it is hit. It could be something like a meteor hitting the earth, or bumper-cars. Get creative!
| Criteria | Exemplary | Adequate | Needs Improvement |
| -------- | ------------------------------------------------------------------------------------------------------------------------ | ------------------------------ | ----------------- |
| | Complete working code sample is produced, with items drawn to canvas, basic collision happening, and reactions occurring | Code is incomplete in some way | Code malfunctions |

View File

@@ -0,0 +1,12 @@
*Complete this quiz after the lesson by checking one answer per question.*
1. What's a fun way to show how many lifes a player has left
- [ ] a number of ships
- [ ] a decimal number
2. How do you center text in the middle of the screen using the Canvas element
- [ ] You use Flexbox
- [ ] You instruct the text to be drawn at the x coordinate of: the client window width/2
- [ ] You set the `textAlign` property to the value `center` on the context object.

View File

@@ -0,0 +1,14 @@
*A warm-up quiz about game development*
Complete this quiz in class
1. How do you draw text on a screen using the Canvas element?
- [ ] place text inside a div or span element
- [ ] Call drawText() on the Canvas element
- [ ] Call fillText() on the context object
2. Why do you have the concept of *lifes* in a game?
- [ ] to show how much damage you can take.
- [ ] So that the game doesn't end straight away, but you have n number of chances before the game is over.

View File

@@ -0,0 +1,189 @@
# Build a Space Game Part 5: Scoring and Lives
## Pre-Lecture Quiz
[Pre-lecture quiz](.github/pre-lecture-quiz.md)
In this lesson, you'll learn how to add scoring to a game and calculate lives.
## Draw text on the screen
To be able to display a game score on the screen, you'll need to know how to place text on the screen. The answer is using the `fillText()` method on the canvas object. You can also control other aspects like what font to use, the color of the text and even its alignment (left, right, center). Below is some code drawing some text on the screen.
```javascript
ctx.font = "30px Arial";
ctx.fillStyle = "red";
ctx.textAlign = "right";
ctx.fillText("show this on the screen", 0, 0);
```
✅ Read more about [how to add text to a canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text), and feel free to make yours look fancier!
## Life, as a game concept
The concept of having a life in a game is only a number. In the context of a space game it's common to assign a set of lives that get deducted one by one when your ship takes damage. It's nice if you can show a graphical representation of this like miniships or hearts instead of a number.
## What to build
Let's add the following to your game:
- **Game score**: For every enemy ship that is destroyed, the hero should be awarded some points, we suggest a 100 points per ship. The game score should be shown in the bottom left.
- **Life**: Your ship has three lives. You lose a life every time an enemy ship collides with you. A life score should be displayed at the bottom right and be made out of the following graphic ![life image](solution/assets/life.png).
## Recommended steps
Locate the files that have been created for you in the `your-work` sub folder. It should contain the following:
```bash
-| assets
-| enemyShip.png
-| player.png
-| laserRed.png
-| index.html
-| app.js
-| package.json
```
You start your project the `your_work` folder by typing:
```bash
cd your-work
npm start
```
The above will start a HTTP Server on address `http://localhost:5000`. Open up a browser and input that address, right now it should render the hero and all the enemies, and as you hit your left and right arrows, the hero moves and can shoot down enemies.
### Add code
1. **Copy over the needed assets** from the `solution/assets/` folder into `your-work` folder; you will add a `life.png` asset. Add the lifeImg to the window.onload function:
```javascript
lifeImg = await loadTexture("assets/life.png");
```
1. Add the `lifeImg` to the list of assets:
```javascript
let heroImg,
...
lifeImg,
...
eventEmitter = new EventEmitter();
```
2. **Add variables**. Add code that represents your total score (0) and lives left (3), display these scores on a screen.
3. **Extend `updateGameObjects()` function**. Extend the `updateGameObjects()` function to handle enemy collisions:
```javascript
enemies.forEach(enemy => {
const heroRect = hero.rectFromGameObject();
if (intersectRect(heroRect, enemy.rectFromGameObject())) {
eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy });
}
})
```
4. **Add `life` and `points`**.
1. **Initialize variables**. Under `this.cooldown = 0` in the `Hero` class, set life and points:
```javascript
this.life = 3;
this.points = 0;
```
1. **Draw variables on screen**. Draw these values to screen:
```javascript
function drawLife() {
// TODO, 35, 27
const START_POS = canvas.width - 180;
for(let i=0; i < hero.life; i++ ) {
ctx.drawImage(
lifeImg,
START_POS + (45 * (i+1) ),
canvas.height - 37);
}
}
function drawPoints() {
ctx.font = "30px Arial";
ctx.fillStyle = "red";
ctx.textAlign = "left";
drawText("Points: " + hero.points, 10, canvas.height-20);
}
function drawText(message, x, y) {
ctx.fillText(message, x, y);
}
```
1. **Add methods to Game loop**. Make sure you add these functions to your window.onload function under `updateGameObjects()`:
```javascript
drawPoints();
drawLife();
```
1. **Implement game rules**. Implement the following game rules:
1. **For every hero and enemy collision**, deduct a life.
Extend the `Hero` class to do this deduction:
```javascript
decrementLife() {
this.life--;
if (this.life === 0) {
this.dead = true;
}
}
```
2. **For every laser that hits an enemy**, increase game score with a 100 points.
Extend the Hero class to do this increment:
```javascript
incrementPoints() {
this.points += 100;
}
```
Add these functions to your Collision Event Emitters:
```javascript
eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
first.dead = true;
second.dead = true;
hero.incrementPoints();
})
eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
enemy.dead = true;
hero.decrementLife();
});
```
✅ Do a little research to discover other games that are created using JavaScript/Canvas. What are their common traits?
By the end of this work, you should see the small 'life' ships at the bottom right, points at the bottom left, and you should see your life count decrement as you collide with enemies and your points increment when you shoot enemies. Well done! Your game is almost complete.
---
## 🚀 Challenge
Your code is almost complete. Can you envision your next steps?
## Post-Lecture Quiz
[Post-lecture quiz](.github/post-lecture-quiz.md)
## Review & Self Study
Research some ways that you can increment and decrement game scores and lives. There are some interesting game engines like [PlayFab](https://playfab.com). How could using one of these would enhance your game?
## Assignment
[Build a Scoring Game](assignment.md)

View File

@@ -0,0 +1,11 @@
# Build a Scoring Game
## Instructions
Create a game where you display life and points in a creative way. A suggestion is to show the life as hearts and the points as a big number in the bottom center part of the screen. Have a look here for [Free game resources](https://www.kenney.nl/)
# Rubric
| Criteria | Exemplary | Adequate | Needs Improvement |
| -------- | ---------------------- | --------------------------- | -------------------------- |
| | full game is presented | game is partially presented | partial game contains bugs |

View File

@@ -0,0 +1,12 @@
*Complete this quiz after the lesson by checking one answer per question.*
1. What is a good pattern to use when a game end condition has been met?
- [ ] Display a suitable message
- [ ] Quit the game
- [ ] Display a suitable message, offer the player to restart, and display what key to hit for that action
1. You should offer a restart only when the game has ended
- [ ] true
- [ ] false

View File

@@ -0,0 +1,14 @@
*A warm-up quiz about game development*
Complete this quiz in class
1. When is a good time to restart a game
- [ ] when a player wins or loses
- [ ] whenever
2. When should a game end
- [ ] when an enemy ship is destroyed
- [ ] when a hero ship is destroyed
- [ ] when points are collected

View File

@@ -0,0 +1,222 @@
# Build a Space Game Part 6: End and Restart
## Pre-Lecture Quiz
[Pre-lecture quiz](.github/pre-lecture-quiz.md)
There are different ways to express and *end condition* in a game. It's up to you as the creator of the game to say why the game has ended. Here are some reasons, if we assume we are talking about the space game you have been building so far:
- **`N` Enemy ships have been destroyed**: It's quite common if you divide up a game into different levels that you need to destroy `N` Enemy ships to complete a level
- **Your ship has been destroyed**: There are definitely games where you lose the game if your ship is destroyed. Another common approach is that you have the concept of lives. Every time a your ship is destroyed it deducts a life. Once all lives have been lost then you lose the game.
- **You've collected `N` points**: Another common end condition is for you to collect points. How you get points is up to you but it's quite common to assign points to various activities like destroying an enemy ship or maybe collect items that items *drop* when they are destroyed.
- **Complete a level**: This might involve several conditions such as `X` enemy ships destroyed, `Y` points collected or maybe that a specific item has been collected.
## Restarting
If people enjoy your game they are likely to want to replay it. Once the game ends for whatever reason you should offer an alternative to restart.
✅ Think a bit about under what conditions you find a game ends, and then how you are prompted to restart
## What to build
You will be adding these rules to your game:
1. **Winning the game**. Once all enemy ships have been destroyed, you win the game. Additionally display some kind of victory message.
1. **Restart**. Once all your lives are lost or the game is won, you should offer a way to restart the game. Remember! You will need to reinitialize the game and the previous game state should be cleared.
## Recommended steps
Locate the files that have been created for you in the `your-work` sub folder. It should contain the following:
```bash
-| assets
-| enemyShip.png
-| player.png
-| laserRed.png
-| life.png
-| index.html
-| app.js
-| package.json
```
You start your project the `your_work` folder by typing:
```bash
cd your-work
npm start
```
The above will start a HTTP Server on address `http://localhost:5000`. Open up a browser and input that address. Your game should be in a playable state.
> tip: to avoid warnings in Visual Studio Code, edit the `window.onload` function to call `gameLoopId` as is (without `let`), and declare the gameLoopId at the top of the file, independently: `let gameLoopId;`
### Add code
1. **Track end condition**. Add code that keeps track of the number of enemies, or if the hero ship has been destroyedby adding these two functions:
```javascript
function isHeroDead() {
return hero.life <= 0;
}
function isEnemiesDead() {
const enemies = gameObjects.filter((go) => go.type === "Enemy" && !go.dead);
return enemies.length === 0;
}
```
1. **Add logic to message handlers**. Edit the `eventEmitter` to handle these conditions:
```javascript
eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
first.dead = true;
second.dead = true;
hero.incrementPoints();
if (isEnemiesDead()) {
eventEmitter.emit(Messages.GAME_END_WIN);
}
});
eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
enemy.dead = true;
hero.decrementLife();
if (isHeroDead()) {
eventEmitter.emit(Messages.GAME_END_LOSS);
return; // loss before victory
}
if (isEnemiesDead()) {
eventEmitter.emit(Messages.GAME_END_WIN);
}
});
eventEmitter.on(Messages.GAME_END_WIN, () => {
endGame(true);
});
eventEmitter.on(Messages.GAME_END_LOSS, () => {
endGame(false);
});
```
1. **Add new message types**. Add these Messages to the constants object:
```javascript
GAME_END_LOSS: "GAME_END_LOSS",
GAME_END_WIN: "GAME_END_WIN",
```
2. **Add restart code** code that restarts the game at the press of a selected button.
1. **Listen to key press `Enter`**. Edit your window's eventListener to listen for this press:
```javascript
else if(evt.key === "Enter") {
eventEmitter.emit(Messages.KEY_EVENT_ENTER);
}
```
1. **Add restart message**. Add this Message to your Messages constant:
```javascript
KEY_EVENT_ENTER: "KEY_EVENT_ENTER",
```
1. **Implement game rules**. Implement the following game rules:
1. **Player win condition**. When all enemy ships are destroyed, display a victory message.
1. First, create a `displayMessage()` function:
```javascript
function displayMessage(message, color = "red") {
ctx.font = "30px Arial";
ctx.fillStyle = color;
ctx.textAlign = "center";
ctx.fillText(message, canvas.width / 2, canvas.height / 2);
}
```
1. Create an `endGame()` function:
```javascript
function endGame(win) {
clearInterval(gameLoopId);
// set a delay so we are sure any paints have finished
setTimeout(() => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "black";
ctx.fillRect(0, 0, canvas.width, canvas.height);
if (win) {
displayMessage(
"Victory!!! Pew Pew... - Press [Enter] to start a new game Captain Pew Pew",
"green"
);
} else {
displayMessage(
"You died !!! Press [Enter] to start a new game Captain Pew Pew"
);
}
}, 200)
}
```
1. **Restart logic**. When all lives are lost or the player won the game, display that the game can be restarted. Additionally restart the game when the *restart* key is hit (you can decide what key should be mapped to restart).
1. Create the `resetGame()` function:
```javascript
function resetGame() {
if (gameLoopId) {
clearInterval(gameLoopId);
eventEmitter.clear();
initGame();
gameLoopId = setInterval(() => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "black";
ctx.fillRect(0, 0, canvas.width, canvas.height);
drawPoints();
drawLife();
updateGameObjects();
drawGameObjects(ctx);
}, 100);
}
}
```
1. Add a call to the `eventEmitter` to reset the game in `initGame()`:
```javascript
eventEmitter.on(Messages.KEY_EVENT_ENTER, () => {
resetGame();
});
```
1. Add a `clear()` function to the EventEmitter:
```javascript
clear() {
this.listeners = {};
}
```
👽 💥 🚀 Congratulations, Captain! Your game is complete! Well done! 🚀 💥 👽
---
## 🚀 Challenge
Add a sound! Can you add a sound to enhance your game play, maybe when there's a laser hit, or the hero dies or wins? Have a look at this [sandbox](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play) to learn how to play sound using JavaScript
## Post-Lecture Quiz
[Post-lecture quiz](.github/post-lecture-quiz.md)
## Review & Self Study
Your assignment is to create a fresh sample game, so explore some of the interesting games out there to see what type of game you might build.
## Assignment
[Build a Sample Game](assignment.md)

View File

@@ -0,0 +1,19 @@
# Build a Sample Game
## Instructions
Try building a small game where you practice on different end conditions. Vary between getting a number of points, the hero loses all lives or all monsters are defeated. Build something simple like a console based adventure game. Use the below game flow as inspiration:
```
Hero> Strikes with broadsword - orc takes 3p damage
Orc> Hits with club - hero takes 2p damage
Hero> Kicks - orc takes 1p damage
Game> Orc is defeated - Hero collects 2 coins
Game> ****No more monsters, you have conquered the evil fortress****
```
## Rubric
| Criteria | Exemplary | Adequate | Needs Improvement |
| -------- | ---------------------- | --------------------------- | -------------------------- |
| | full game is presented | game is partially presented | partial game contains bugs |

View File

@@ -0,0 +1,31 @@
# Build a Space Game
A space game to teach more advanced JavaScript fundamentals
In this lesson you will learn how to build your own space game. If you've ever played the game "Space Invaders", this game has the same idea: to steer a spaceship and fire on monsters that come down from above. Here's what the finished game will look like:
![Finished game](images/pewpew.gif)
In these six lessons you will learn the following:
- **Interact** with the Canvas element to draw things on a screen
- **Understand** the cartesian coordinate system
- **Learn** the Pub-Sub pattern to create sound game architecture that's easier to maintain and extend
- **Leverage** Async/Await to load game resources
- **Handle** keyboard events
## Overview
- Theory
- [Introduction to building games with JavaScript](1-introduction/README.md)
- Practice
- [Drawing to canvas](2-drawing-to-canvas/README.md)
- [Moving elements around the screen](3-moving-elements-around/README.md)
- [Collision detection](4-collision-detection/README.md)
- [Keeping score](5-keeping-score/README.md)
- [Ending and restarting the game](6-end-condition/README.md)
## Credits
The assets used for this came from https://www.kenney.nl/.
If you are into building games, these are some seriously good assets, a lot is free and some are paid.