Skip to content
Snippets Groups Projects
Commit 9de54feb authored by jeremy.gobet's avatar jeremy.gobet
Browse files

Initial commit

parents
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
Showing
with 643 additions and 0 deletions
.gitignore 0 → 100644
+ 26
− 0
View file @ 9de54feb
# ignore all files starting with . or ~
.*
~*
# ignore node/grunt dependency directories
node_modules/
# ignore packaged files
*.7z
*.dmg
*.gz
*.iso
*.jar
*.rar
*.tar
*.zip
# ignore private/secret files
*.der
*.key
*.pem
# track these files, if they exist
!.gitignore
dist/
README.md 0 → 100644
+ 49
− 0
View file @ 9de54feb
# Breakout
Jeu du casse brique réalisé sur Phaser.js.
## Sources
Les fichiers sources du programme se trouve dans le dossier **src**.
## Installation
Installer les dépendances du projet avec NPM. La commande crée un dossier **node_modules** contenant les dépendances du projet:
`npm install`
## Exécution en local
La commande ci-dessous transpile le projet et exécute automatiquement le jeu dans un onglet de votre navigateur :
`npm run start`
Pour modifier l'exécution du programme en local voir le fichier **webpack.dev.js**.
## Build
Le build du projet est effectué dans le dossier **dist** créé à la première exécution de la commande ci-dessous:
`npm run build`
Pour modifier la transilation du programme pour la production, voir le fichier **webpack.prod.js**
## Test
exécutez les tests unitaires présent dans le dossier **test** avec la commande suivante:
`npm run test`
## Lint
Exécuter ESLint pour vérifier les règles sur le code source en TypeScript:
`npx eslint src/**/**.ts`
## Deploy
Pour déployer sur Firebase il faut au préalable faire la configuration et créer un nouveau projet Firebase. Toutes les étapes sont décritent dans le fichier **firebase_setup.md**
Déployer le projet sur Firebase:
`firebase deploy`
babel.config.js 0 → 100644
+ 6
− 0
View file @ 9de54feb
module.exports = {
presets: [
['@babel/preset-env', {targets: {node: 'current'}}],
'@babel/preset-typescript',
],
};
firebase_setup.md 0 → 100644
+ 58
− 0
View file @ 9de54feb
Pour setup Firebase.
1. Créer un projet firebase depuis [la console firebase](https://console.firebase.google.com/u/0/)
2. Installer sur votre machine les outils `firebase` avec la commande :
```bash
npm install -g firebase-tools
```
3. Log in depuis la `CLI` en utilisant le __même compte__ que celui utilisé pour créer le projet `firebase` en utilisant la commande
```bash
firebase login
```
4. Puis utiliser cette commande pour initialiser `firebase` depuis le répertoire contenant le frontend.
```
firebase init
```
Dans la `CLI` interative, sélectionner :
Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
Choisir "Use an existing project" et choisir le projet créé préalablement.
Le `public directory` indique le sous-répertoire où se trouveront les fichiers à déployer. Par convention web, nous utiliserons `/dist/<nom_du_projet>` : C'est ici que le framework angular génère des fichiers lors du build.
Indiquer "yes" à l'option de génération sous forme de `single-page app`.
Puis ne pas automatiquement générer des `GitHub Action deploys` puisque nous utiliserons GitLab.
Cette commande crée alors un fichier `.json` qui doit se trouver à la racine de votre projet frontend. Ce dernier contient les détails du hosting pour firebase.
5. Pour push depuis une pipeline CI/CD, nous avons besoin de commandes non interactives, or la commande `firebase login` est interactive et ne fonctionnera pas depuis la pipeline. Nous allons alors générer un `token` que nous pourrons utiliser pour déployer le projet en nous authentifiant, sans passer par la commande `login`. Utiliser la commande suivante pour générer un token :
```bash
firebase login:ci
```
Le `token` retourné doit être noté puisqu'il sera nécessaire pour le déploiement.
6. Finallement, pour vérifier votre installation : `build` le projet angular en utilisant `ng build --aot`, et déployer le contenu en utilisant la commande :
```bash
firebase deploy --token <token>
```
En remplaçant `<token>` par le votre, obtenu à l'étape 5. `Firebase` déploie alors le contenu du dossier indiqué lors de la commande `init`, en s'authentifiant à l'aide de votre `token`. La `CLI` vous retourne l'adresse à laquelle votre projet est disponible.
Il est désormait possible d'utiliser cette commande `deploy` dans votre CI/CD pour mettre à jour le frontend à l'exécution de votre pipeline, après avoir installé les outils `firebase` sur le runner. Attention à ne pas hardcoder votre `token` !!! (très mauvaise pratique !), pensez bien à la variabiliser depuis l'interface graphique de `gitlab` et à limiter son accès. Dans votre `.gitlab-ci.yml` remplacez la valeur du `token` par votre variable.
package.json 0 → 100644
+ 35
− 0
View file @ 9de54feb
{
"name": "breakout",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"test": "jest",
"start": "webpack-dev-server --open --config webpack.dev.js",
"build": "webpack --config webpack.prod.js"
},
"author": "",
"license": "",
"dependencies": {
"firebase": "^9.0.1",
"phaser": "^3.55.2"
},
"devDependencies": {
"@babel/core": "^7.20.5",
"@babel/preset-env": "^7.20.2",
"@babel/preset-typescript": "^7.18.6",
"@typescript-eslint/eslint-plugin": "^5.45.1",
"@typescript-eslint/parser": "^5.45.1",
"babel-jest": "^29.3.1",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^6.0.2",
"eslint": "^8.29.0",
"jest": "^29.3.1",
"ts-loader": "^7.0.5",
"typescript": "^3.9.5",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.1",
"webpack-dev-server": "^4.11.1",
"webpack-merge": "^4.2.2"
}
}
src/assets/breakout.json 0 → 100644
+ 180
− 0
View file @ 9de54feb
{"frames": {
"ball1":
{
"frame": {"x":452,"y":2,"w":22,"h":22},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":22,"h":22},
"sourceSize": {"w":22,"h":22}
},
"ball2":
{
"frame": {"x":476,"y":2,"w":22,"h":22},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":22,"h":22},
"sourceSize": {"w":22,"h":22}
},
"blue1":
{
"frame": {"x":386,"y":2,"w":64,"h":32},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":64,"h":32},
"sourceSize": {"w":64,"h":32}
},
"blue2":
{
"frame": {"x":108,"y":53,"w":64,"h":32},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":64,"h":32},
"sourceSize": {"w":64,"h":32}
},
"button":
{
"frame": {"x":2,"y":2,"w":190,"h":49},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":190,"h":49},
"sourceSize": {"w":190,"h":49}
},
"buttonOver":
{
"frame": {"x":194,"y":2,"w":190,"h":49},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":190,"h":49},
"sourceSize": {"w":190,"h":49}
},
"green1":
{
"frame": {"x":2,"y":79,"w":64,"h":32},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":64,"h":32},
"sourceSize": {"w":64,"h":32}
},
"green2":
{
"frame": {"x":174,"y":53,"w":64,"h":32},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":64,"h":32},
"sourceSize": {"w":64,"h":32}
},
"paddle1":
{
"frame": {"x":386,"y":36,"w":104,"h":24},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":104,"h":24},
"sourceSize": {"w":104,"h":24}
},
"paddle2":
{
"frame": {"x":2,"y":53,"w":104,"h":24},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":104,"h":24},
"sourceSize": {"w":104,"h":24}
},
"particle1":
{
"frame": {"x":492,"y":26,"w":10,"h":10},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":10,"h":10},
"sourceSize": {"w":10,"h":10}
},
"particle2":
{
"frame": {"x":492,"y":38,"w":10,"h":10},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":10,"h":10},
"sourceSize": {"w":10,"h":10}
},
"particle3":
{
"frame": {"x":68,"y":79,"w":20,"h":19},
"rotated": false,
"trimmed": true,
"spriteSourceSize": {"x":0,"y":1,"w":20,"h":19},
"sourceSize": {"w":20,"h":21}
},
"purple1":
{
"frame": {"x":240,"y":53,"w":64,"h":32},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":64,"h":32},
"sourceSize": {"w":64,"h":32}
},
"purple2":
{
"frame": {"x":306,"y":53,"w":64,"h":32},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":64,"h":32},
"sourceSize": {"w":64,"h":32}
},
"red1":
{
"frame": {"x":372,"y":62,"w":64,"h":32},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":64,"h":32},
"sourceSize": {"w":64,"h":32}
},
"red2":
{
"frame": {"x":438,"y":62,"w":64,"h":32},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":64,"h":32},
"sourceSize": {"w":64,"h":32}
},
"silver1":
{
"frame": {"x":90,"y":87,"w":64,"h":32},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":64,"h":32},
"sourceSize": {"w":64,"h":32}
},
"silver2":
{
"frame": {"x":156,"y":87,"w":64,"h":32},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":64,"h":32},
"sourceSize": {"w":64,"h":32}
},
"yellow1":
{
"frame": {"x":222,"y":87,"w":64,"h":32},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":64,"h":32},
"sourceSize": {"w":64,"h":32}
},
"yellow2":
{
"frame": {"x":288,"y":87,"w":64,"h":32},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":64,"h":32},
"sourceSize": {"w":64,"h":32}
}},
"meta": {
"app": "http://www.codeandweb.com/texturepacker",
"version": "1.0",
"image": "breakout.png",
"format": "RGBA8888",
"size": {"w":504,"h":121},
"scale": "1",
"smartupdate": "$TexturePacker:SmartUpdate:001f51c9029c40bfd47dffb21081606f:e188858ff10f5876d9b056ceae3435f7:aa94e37632703bccd6a813800bf3159a$"
}
}
src/assets/breakout.png 0 → 100644
+ 0
− 0
View file @ 9de54feb
src/assets/breakout.png

8.4 KiB

src/breakout.ts 0 → 100644
+ 51
− 0
View file @ 9de54feb
import Ball from './scripts/ball';
import Bricks from './scripts/bricks';
import Paddle from './scripts/paddle';
export default class Breakout extends Phaser.Scene {
bricks: Bricks;
paddle: Paddle;
ball: Ball;
constructor(config: Phaser.Types.Core.GameConfig) {
super(config);
}
// Function de PhaserJS permettant de charger toutes les ressources nécessaires
preload() {
this.load.atlas('assets', 'assets/breakout.png', 'assets/breakout.json');
}
// Function de PhaserJS pour définir l'état initial de la scène
create() {
this.bricks = new Bricks(this);
this.paddle = new Paddle(this);
this.ball = new Ball(this);
// Collisions
// https://photonstorm.github.io/phaser3-docs/Phaser.Physics.Arcade.Factory.html#collider__anchor
this.physics.add.collider(this.ball.ballImage, this.bricks.group, this.bricks.hitBrick.bind(this.bricks), null, this);
this.physics.add.collider(this.ball.ballImage, this.paddle.image, this.ball.hitPaddle.bind(this.paddle), null, this);
// Active les collisions sur la bordure sauf au sol
this.physics.world.setBoundsCollision(true, true, true, false);
// Evénements
this.bricks.on("allBricksDestroyedEvent", this.resetLevel.bind(this));
this.paddle.on("paddleMovedEvent", this.ball.paddleMoved.bind(this.ball));
this.ball.on("outOfBoundsEvent", this.outOfBounds.bind(this));
}
// Function de PhaserJS pour la mise à jour de la scène (Boucle de gameplay)
update() {
this.ball.update();
}
resetLevel() {
this.ball.resetPosition(this.paddle.image);
this.bricks.reset();
}
outOfBounds() {
this.ball.resetPosition(this.paddle.image);
}
};
src/index.html 0 → 100644
+ 12
− 0
View file @ 9de54feb
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Phaser3 - Typescript</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta charset="utf-8">
</head>
<body>
<div id="phaser-canvas"></div>
<script src="bundle.js"></script>
</body>
</html>
src/main.ts 0 → 100644
+ 18
− 0
View file @ 9de54feb
import 'phaser';
import Breakout from './breakout';
/*
Configuration de PhaserJS
https://photonstorm.github.io/phaser3-docs/Phaser.Types.Core.html#.GameConfig
*/
const config: Phaser.Types.Core.GameConfig = {
type: Phaser.AUTO, // AUTO, WEBGL ou CANVAS
width: 800, height: 600, // Taille du canvas
parent: 'phaser-canvas', // élement HTML qui contiendra le canvas
scene: [ Breakout ], // JS Classe contenant les fonctions: preload, create, update
physics: { // Configuration de la physique
default: 'arcade' // arcade ou
}
};
var game = new Phaser.Game(config);
src/scripts/ball.ts 0 → 100644
+ 76
− 0
View file @ 9de54feb
const VELOCITY_FACTOR = 10;
// https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.GameObject.html
export default class Ball extends Phaser.GameObjects.GameObject {
ballImage: Phaser.Physics.Arcade.Image;
onPaddle: Boolean;
constructor(scene: Phaser.Scene) {
super(scene, "ball");
this.create();
}
create() {
const canvas = this.scene.game.canvas;
this.ballImage = this.scene.physics.add.image(canvas.width / 2, canvas.height - 100, 'assets', 'ball1')
.setCollideWorldBounds(true)
.setBounce(1);
this.onPaddle = true;
this.scene.input.on('pointerup', () => {
if (this.onPaddle)
{
this.ballImage.setVelocity(-75, -300);
this.onPaddle = false;
}
}, this);
}
resetPosition(paddleImage: Phaser.Physics.Arcade.Image) {
this.ballImage.setVelocity(0);
this.ballImage.setPosition(paddleImage.x, this.scene.game.canvas.height - 100);
this.onPaddle = true;
}
hitPaddle(ballImage: Phaser.Physics.Arcade.Image, paddleImage: Phaser.Physics.Arcade.Image) {
var diff = 0;
if (ballImage.x < paddleImage.x)
{
// Ball is on the left-hand side of the paddle
diff = paddleImage.x - ballImage.x;
ballImage.setVelocityX(-VELOCITY_FACTOR * diff);
}
else if (ballImage.x > paddleImage.x)
{
// Ball is on the right-hand side of the paddle
diff = ballImage.x -paddleImage.x;
ballImage.setVelocityX(VELOCITY_FACTOR * diff);
}
else
{
// Ball is perfectly in the middle
// Add a little random X to stop it bouncing straight up!
ballImage.setVelocityX(2 + Math.random() * 8);
}
}
paddleMoved(paddleImage: Phaser.Physics.Arcade.Image) {
if (this.onPaddle)
{
this.ballImage.x = paddleImage.x;
}
}
update() {
if (this.ballImage.y > this.scene.game.canvas.height)
{
this.emit("outOfBoundsEvent");
}
}
};
src/scripts/bricks.ts 0 → 100644
+ 37
− 0
View file @ 9de54feb
// https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.GameObject.html
export default class Bricks extends Phaser.GameObjects.GameObject {
group: Phaser.Physics.Arcade.StaticGroup;
constructor(scene: Phaser.Scene) {
super(scene, "bricks");
this.create();
}
create() {
// Création des briques dans une grille de 10x6
this.group = this.scene.physics.add.staticGroup({
key: 'assets', frame: [ 'blue1', 'red1', 'green1', 'yellow1', 'silver1', 'purple1' ],
frameQuantity: 10,
gridAlign: { width: 10, height: 6, cellWidth: 64, cellHeight: 32, x: 112, y: 100 }
});
}
reset() {
this.group.children.each((brick: Phaser.Physics.Arcade.Image) => {
https://photonstorm.github.io/phaser3-docs/Phaser.Physics.Arcade.Sprite.html#enableBody__anchor
brick.enableBody(false, 0, 0, true, true);
});
}
hitBrick(ball: Phaser.Physics.Arcade.Image, brick: Phaser.Physics.Arcade.Image) {
// https://photonstorm.github.io/phaser3-docs/Phaser.Physics.Arcade.Sprite.html#disableBody__anchor
brick.disableBody(true, true);
if (this.group.countActive() === 0)
{
this.emit("allBricksDestroyedEvent");
}
}
};
src/scripts/paddle.ts 0 → 100644
+ 26
− 0
View file @ 9de54feb
// https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.GameObject.html
export default class Paddle extends Phaser.GameObjects.GameObject {
image: Phaser.Physics.Arcade.Image;
constructor(scene: Phaser.Scene) {
super(scene, "paddle");
this.create();
}
create() {
const canvas = this.scene.game.canvas;
this.image = this.scene.physics.add.image(canvas.width / 2, canvas.height - 50, 'assets', 'paddle1').setImmovable();
this.scene.input.on('pointermove', function (pointer) {
// Limite le mouvement du plateau aux extrémités gauches et droites
this.image.x = Phaser.Math.Clamp(pointer.x, 52, canvas.width - 52);
this.emit("paddleMovedEvent", this.image);
}, this);
}
};
test/breakout.test.js 0 → 100644
+ 3
− 0
View file @ 9de54feb
test('very usefull test', () => {
expect(true).toBe(true);
})
tsconfig.json 0 → 100644
+ 11
− 0
View file @ 9de54feb
{
"compilerOptions": {
"typeRoots": [
"./node_modules/phaser/types"
],
"types": [
"Phaser"
]
}
}
\ No newline at end of file
webpack.common.js 0 → 100644
+ 34
− 0
View file @ 9de54feb
const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
entry: {
app: './src/main.ts',
},
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
},
resolve: {
extensions: [ '.ts', '.tsx', '.js' ]
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
plugins: [
new CleanWebpackPlugin({ cleanStaleWebpackAssets: false }),
new CopyPlugin({
patterns: [
{ from: 'index.html', context: 'src/' },
{ from: 'assets/*', context: 'src/' },
],
}),
],
};
webpack.dev.js 0 → 100644
+ 10
− 0
View file @ 9de54feb
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
mode: 'development',
devtool: 'inline-source-map',
devServer: {
static: './dist',
},
});
webpack.prod.js 0 → 100644
+ 11
− 0
View file @ 9de54feb
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
mode: 'production',
performance: {
hints: false,
maxEntrypointSize: 512000,
maxAssetSize: 512000
}
});
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please to comment