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