first commit
This commit is contained in:
commit
31c7eaefb6
|
|
@ -0,0 +1,8 @@
|
||||||
|
---
|
||||||
|
name: Phaser 3.90 Framework
|
||||||
|
---
|
||||||
|
|
||||||
|
- Follow best practices for Phaser 3.90
|
||||||
|
- Follow best ES6 practices
|
||||||
|
- Write class imports using full .js paths, NPM package manager or any other web packager is not installed
|
||||||
|
- Break things out into classes when it makes sense
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 73 KiB |
Binary file not shown.
|
|
@ -0,0 +1,16 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<title>The Jewel Weaver</title>
|
||||||
|
<style>
|
||||||
|
body { margin: 0; background-color: black; }
|
||||||
|
canvas { display: block; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="game-container"></div>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/phaser@v3.90.0/dist/phaser.min.js"></script>
|
||||||
|
<script type="module" src="./src/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,122 @@
|
||||||
|
export class GameScene extends Phaser.Scene {
|
||||||
|
constructor() {
|
||||||
|
super({ key: 'GameScene' });
|
||||||
|
|
||||||
|
this.gridConfig = {
|
||||||
|
allPadding: 50,
|
||||||
|
leftPadding: 700,
|
||||||
|
rows: 8,
|
||||||
|
cols: 8,
|
||||||
|
jewelWidth: 100,
|
||||||
|
jewelHeight: 100,
|
||||||
|
};
|
||||||
|
|
||||||
|
this.numberOfJewels = 5;
|
||||||
|
this.startRows = 2;
|
||||||
|
this.level = 1;
|
||||||
|
this.levelTime = 60;
|
||||||
|
}
|
||||||
|
|
||||||
|
preload() {
|
||||||
|
this.load.spritesheet('jewels', 'assets/jewels.png', {
|
||||||
|
frameWidth: 100,
|
||||||
|
frameHeight: 100
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
create() {
|
||||||
|
this.makeGrid();
|
||||||
|
this.physics.world.setBounds(this.grid.getBounds().x, this.grid.getBounds().y, this.grid.getBounds().width, this.grid.getBounds().height);
|
||||||
|
this.jewels = this.physics.add.group({
|
||||||
|
collideWorldBounds: true,
|
||||||
|
});
|
||||||
|
this.physics.add.collider(this.jewels, this.jewels);
|
||||||
|
this.createStart();
|
||||||
|
this.createJewel(this.getJewelAtPosition(1, 7), 3, 3);
|
||||||
|
}
|
||||||
|
|
||||||
|
update(time, delta) {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
selectJewel(x, y) {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
makeGrid() {
|
||||||
|
this.grid = this.add.rectangle(
|
||||||
|
this.gridConfig.leftPadding + this.gridConfig.allPadding,
|
||||||
|
0 + this.gridConfig.allPadding,
|
||||||
|
this.gridConfig.cols * this.gridConfig.jewelWidth,
|
||||||
|
this.gridConfig.rows*this.gridConfig.jewelHeight,
|
||||||
|
0x000000,
|
||||||
|
.5
|
||||||
|
).setOrigin(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
createJewel(type, col, row) {
|
||||||
|
// Create a jewel sprite from the spritesheet using the type as frame index
|
||||||
|
const jewel = this.physics.add.sprite(
|
||||||
|
col * this.gridConfig.jewelWidth + this.gridConfig.leftPadding,
|
||||||
|
row * this.gridConfig.jewelHeight,
|
||||||
|
'jewels',
|
||||||
|
type
|
||||||
|
);
|
||||||
|
jewel.setDisplaySize(this.gridConfig.jewelWidth, this.gridConfig.jewelHeight);
|
||||||
|
jewel.jewelType = type;
|
||||||
|
this.jewels.add(jewel);
|
||||||
|
}
|
||||||
|
|
||||||
|
createStart() {
|
||||||
|
// Create jewels at the bottom of the grid
|
||||||
|
let createWait = 0;
|
||||||
|
const startRow = this.gridConfig.rows - this.startRows;
|
||||||
|
|
||||||
|
for (let row = this.startRows; row > 0; row--) {
|
||||||
|
for (let col = 1; col <= this.gridConfig.cols; col++) {
|
||||||
|
let type = null;
|
||||||
|
let match = false;
|
||||||
|
|
||||||
|
do {
|
||||||
|
type = Phaser.Math.Between(0, this.numberOfJewels - 1)
|
||||||
|
match = false;
|
||||||
|
|
||||||
|
if (this.getJewelAtPosition(col-1, startRow + row) === type &&
|
||||||
|
this.getJewelAtPosition(col-2, startRow + row) === type) {
|
||||||
|
match = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.getJewelAtPosition(col, startRow + row + 1) === type &&
|
||||||
|
this.getJewelAtPosition(col, startRow + row + 2) === type) {
|
||||||
|
match = true;
|
||||||
|
}
|
||||||
|
} while (match === true);
|
||||||
|
|
||||||
|
// Create the jewel at the correct position
|
||||||
|
this.createJewel(type, col, startRow + row);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
getJewelAtPosition(col, row) {
|
||||||
|
// Convert grid coordinates to world coordinates
|
||||||
|
const x = col * this.gridConfig.jewelWidth + this.gridConfig.leftPadding;
|
||||||
|
const y = row * this.gridConfig.jewelHeight;
|
||||||
|
|
||||||
|
// Find the jewel at that position
|
||||||
|
let jewelAtPosition = null;
|
||||||
|
|
||||||
|
// Iterate through all jewels to find one near the specified position
|
||||||
|
this.jewels.children.iterate((jewel) => {
|
||||||
|
if (jewel &&
|
||||||
|
Math.abs(jewel.x - x) < this.gridConfig.jewelWidth / 2 &&
|
||||||
|
Math.abs(jewel.y - y) < this.gridConfig.jewelHeight / 2) {
|
||||||
|
jewelAtPosition = jewel;
|
||||||
|
return false; // Stop iteration
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Return the jewel type or null if not found
|
||||||
|
return jewelAtPosition ? jewelAtPosition.jewelType : null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
export const GRID_CONFIG = {
|
||||||
|
rows: 8,
|
||||||
|
cols: 8,
|
||||||
|
jewelWidth: 100,
|
||||||
|
jewelHeight: 100,
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,29 @@
|
||||||
|
import { GameScene } from './GameScene.js';
|
||||||
|
|
||||||
|
const GAME_CONFIG = {
|
||||||
|
type: Phaser.AUTO,
|
||||||
|
scale: {
|
||||||
|
mode: Phaser.Scale.FIT,
|
||||||
|
autoCenter: Phaser.Scale.CENTER_BOTH,
|
||||||
|
width: 1600,
|
||||||
|
height: 900,
|
||||||
|
parent: 'game-container'
|
||||||
|
},
|
||||||
|
parent: 'game-container',
|
||||||
|
backgroundColor: '#2c3e50',
|
||||||
|
scene: [
|
||||||
|
GameScene
|
||||||
|
],
|
||||||
|
physics: {
|
||||||
|
default: 'arcade',
|
||||||
|
arcade: {
|
||||||
|
gravity: { y: 100 },
|
||||||
|
debug: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Create the game instance
|
||||||
|
const game = new Phaser.Game(GAME_CONFIG);
|
||||||
|
|
||||||
|
console.log('The Jewel Weaver game initialized successfully!');
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
python -m http.server 8000
|
||||||
Loading…
Reference in New Issue