imshvc/noxious_client
1
0
Fork 0
forked from noxious/client
Code Pull Requests Activity

moved player logic back into player component

Browse Source
This commit is contained in:
root 2024-05-01 16:48:06 +02:00
parent 7abfc52918
commit 2817cb6d2f
2 changed files with 59 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/World.vue
View File

@ -1,12 +1,11 @@
<template>
<TilemapLayer ref="tilemapLayer" :tilemap="map" :layerIndex="0" :tileset="data" />
<!-- <Sprite ref="player" texture="player" :x="playerX" :y="playerY" />-->
<TilemapLayer ref="tilemapLayer" :tilemap="map" :layerIndex="0" :cull-padding-x="5" :cull-padding-y="5" :tileset="data" />
<Player />
</template>
<script setup>
import { Sprite, TilemapLayer, useScene, useGame } from 'phavuer'
import Player from '@/components/player/Player.vue'
import { ref } from 'vue'
import config from '@/config'
const scene = useScene()
@ -24,8 +23,6 @@ const { width, height } = scene.cameras.main;
const map = new Phaser.Tilemaps.Tilemap(scene, mapData);
const tileset = map.addTilesetImage('default', 'tiles');
const layer = map.createBlankLayer('layer', tileset, -config.tile_size.x + width / 2, height / 2 - (config.tile_size.x * tileSizeWidth * 0.25));
layer.cullPaddingX = 20;
layer.cullPaddingY = 20;
const game = useGame();
@ -47,40 +44,4 @@ data.forEach((row, y) => {
layer.putTileAt(tile, x, y);
});
});
const player = ref();
let playerX = ref(0)
let playerY = ref(0)
// W,S,A,D
// Listen for keydown events
scene.input.keyboard.on('keydown', function (event) {
// Check which key was pressed
switch (event.code) {
case 'KeyW': // Move up and to the left
playerX.value -= config.tile_size.x / 2;
playerY.value -= config.tile_size.y / 2;
break;
case 'KeyS': // Move down and to the right
playerX.value += config.tile_size.x / 2;
playerY.value += config.tile_size.y / 2;
break;
case 'KeyA': // Move down and to the left
playerX.value -= config.tile_size.x / 2;
playerY.value += config.tile_size.y / 2;
break;
case 'KeyD': // Move up and to the right
playerX.value += config.tile_size.x / 2;
playerY.value -= config.tile_size.y / 2;
break;
}
});
/**
* 1 tile is 64x32
* the map is 10x10
* so the map is 640x320
*/
</script>

59
src/components/player/Player.vue
View File

@ -1,12 +1,67 @@
<template>
<Sprite ref="player" texture="player" :x="playerX" :y="playerY" />
</template>
<script setup>
import { Sprite, useScene, Body } from 'phavuer'
import { Sprite, useScene } from 'phavuer'
import { ref } from 'vue'
import config from '@/config.js'
const scene = useScene()
const player = ref();
let playerX = ref(0)
let playerY = ref(0)
// W,S,A,D
// Listen for keydown events
scene.input.keyboard.on('keydown', function (event) {
// Check which key was pressed
switch (event.code) {
case 'KeyW': // Move up and to the left
playerX.value -= config.tile_size.x / 2;
playerY.value -= config.tile_size.y / 2;
break;
case 'KeyS': // Move down and to the right
playerX.value += config.tile_size.x / 2;
playerY.value += config.tile_size.y / 2;
break;
case 'KeyA': // Move down and to the left
playerX.value -= config.tile_size.x / 2;
playerY.value += config.tile_size.y / 2;
break;
case 'KeyD': // Move up and to the right
playerX.value += config.tile_size.x / 2;
playerY.value -= config.tile_size.y / 2;
break;
}
});
scene.input.on('pointerdown', function (pointer) {
// Convert pointer coordinates to tile coordinates
const tileX = Math.floor(pointer.x / config.tile_size.x);
const tileY = Math.floor(pointer.y / config.tile_size.y);
// Convert tile coordinates to world coordinates (center of the tile)
const worldX = tileX * config.tile_size.x + config.tile_size.x / 2;
const worldY = tileY * config.tile_size.y + config.tile_size.y / 2;
// Update the sprite's position
playerX.value = gridToScreen(tileX, tileY, config.tile_size).screenX;
playerY.value = gridToScreen(tileX, tileY, config.tile_size).screenY;
});
/**
* 1 tile is 64x32
* the map is 10x10
* so the map is 640x320
*/
function gridToScreen(x, y, tileSize) {
// Convert grid coordinates to screen coordinates
const screenX = x * tileSize.x + tileSize.x / 2;
const screenY = y * tileSize.y + tileSize.y / 2;
return { screenX, screenY };
}
</script>