Im trying to create a multiplayer shooting game and i used one of the phaser examples to make the player shoot the bullets. And I got those things working but the mouse movement for the target is messed up I dont know what to change can anyone go through the code and point out the mistakes please?
/** Connect to Moralis server */
const serverUrl = "xxxxxx";
const appId = "xxxxxx";
Moralis.start({ serverUrl, appId });
/** Add from here down */
var config = {
type: Phaser.AUTO,
width: 1260,
height: 575,
physics: {
default: 'arcade',
arcade: {
gravity: { y: 300 },
debug: false,
},
},
scene: {
preload: preload,
create: create,
update: update,
extend: {
player: null,
healthpoints: null,
reticle: null,
//moveKeys: null,
playerBullets: null,
competitorsBullets: null,
time: 0,
}
}
};
var game;
var platforms;
var things;
var player;
var competitors = {};
var cursor;
function launch() {
let user = Moralis.User.current();
if (!user) {
console.log("Please login with Metamask!")
}
else{
console.log(user.get("ethAddress") + " " + "logged in")
game = new Phaser.Game(config);
}
}
launch();
var Bullet = new Phaser.Class({
Extends: Phaser.GameObjects.Image,
initialize:
// Bullet Constructor
function Bullet (scene)
{
Phaser.GameObjects.Image.call(this, scene, 0, 0, 'bullet');
this.speed = 1;
this.born = 0;
this.direction = 0;
this.xSpeed = 0;
this.ySpeed = 0;
this.setSize(12, 12, true);
},
// Fires a bullet from the player to the reticle
fire: function (shooter, target)
{
this.setPosition(shooter.x, shooter.y); // Initial position
this.direction = Math.atan( (target.x-this.x) / (target.y-this.y));
// Calculate X and y velocity of bullet to moves it from shooter to target
if (target.y >= this.y)
{
this.xSpeed = this.speed*Math.sin(this.direction);
this.ySpeed = this.speed*Math.cos(this.direction);
}
else
{
this.xSpeed = -this.speed*Math.sin(this.direction);
this.ySpeed = -this.speed*Math.cos(this.direction);
}
this.rotation = shooter.rotation; // angle bullet with shooters rotation
this.born = 0; // Time since new bullet spawned
},
// Updates the position of the bullet each cycle
update: function (time, delta)
{
this.x += this.xSpeed * delta;
this.y += this.ySpeed * delta;
this.born += delta;
if (this.born > 1800)
{
this.setActive(false);
this.setVisible(false);
}
}
});
//loading assets
async function preload ()
{
this.load.image('lol', 'assets/canva/lol.png');
this.load.image('background', 'assets/canva/bg.png');
this.load.image('tile_full', 'assets/canva/tilefull.png');
this.load.image('tile_centre', 'assets/canva/tilecut.png');
this.load.image('tile_left', 'assets/canva/tileleft.png');
this.load.image('tile_right', 'assets/canva/tileright.png');
this.load.image('player', 'assets/Tiles/player.jpeg');
this.load.image('bullet', 'assets/canva/bullet.png');
this.load.image('target', 'assets/canva/ball.png');
this.load.image('triangle', 'assets/canva/triangle.png');
this.load.image('arch', 'assets/canva/arch.png');
this.load.image('player', url);
this.load.on('filecomplete', function(){
initPlayer()
}, this);
this.load.start()
}
async function initPlayer(){
player = that.physics.add.sprite(500, 250, 'player').setScale(1).refreshBody();
player.setBounce(0.3);
that.physics.add.collider(player, platforms,things)
}
//initial setup
async function create ()
{
this.add.image(630, 287.5, 'background');
this.add.image(630, 30, 'lol').setScale(0.4);
platforms = this.physics.add.staticGroup();
things = this.physics.add.staticGroup();
// Add 2 groups for Bullet objects
playerBullets = this.physics.add.group({ classType: Bullet, runChildUpdate: true });
competitorsBullets = this.physics.add.group({ classType: Bullet, runChildUpdate: true });
//ground 0 starts
platforms.create(0, 575, 'tile_centre').setScale(0.25).refreshBody();
platforms.create(125, 575, 'tile_centre').setScale(0.25).refreshBody();
platforms.create(250, 575, 'tile_centre').setScale(0.25).refreshBody();
things.create(89, 552, 'arch').setScale(0.05).refreshBody();
platforms.create(375, 575, 'tile_centre').setScale(0.25).refreshBody();
platforms.create(500, 575, 'tile_centre').setScale(0.25).refreshBody();
platforms.create(625, 575, 'tile_centre').setScale(0.25).refreshBody();
platforms.create(750, 575, 'tile_centre').setScale(0.25).refreshBody();
platforms.create(875, 575, 'tile_centre').setScale(0.25).refreshBody();
platforms.create(1000, 575, 'tile_centre').setScale(0.25).refreshBody();
platforms.create(1125, 575, 'tile_centre').setScale(0.25).refreshBody();
platforms.create(1250, 575, 'tile_centre').setScale(0.25).refreshBody();
//ground 0 ends
//ground 1 starts
platforms.create(0, 520, 'tile_right').setScale(0.15).refreshBody();
platforms.create(130, 520, 'tile_left').setScale(0.15).refreshBody();
platforms.create(205, 520, 'tile_centre').setScale(0.15).refreshBody();
platforms.create(280, 520, 'tile_right').setScale(0.15).refreshBody();
things.create(455, 502, 'triangle').setScale(0.05).refreshBody(); //use the y value of this for all objs in this ground
platforms.create(440, 520, 'tile_full').setScale(0.15).refreshBody();
platforms.create(620, 520, 'tile_left').setScale(0.15).refreshBody();
platforms.create(695, 520, 'tile_right').setScale(0.15).refreshBody();
platforms.create(820, 520, 'tile_full').setScale(0.15).refreshBody();
platforms.create(980, 520, 'tile_left').setScale(0.15).refreshBody();
things.create(1030, 502, 'arch').setScale(0.05).refreshBody();
platforms.create(1055, 520, 'tile_centre').setScale(0.15).refreshBody();
platforms.create(1130, 520, 'tile_right').setScale(0.15).refreshBody();
//ground 1 ends
//ground 2 starts
platforms.create(0, 465, 'tile_left').setScale(0.15).refreshBody();
things.create(17, 447, 'triangle').setScale(0.05).refreshBody();
platforms.create(75, 465, 'tile_right').setScale(0.15).refreshBody();
platforms.create(200, 465, 'tile_full').setScale(0.15).refreshBody();
platforms.create(420, 465, 'tile_left').setScale(0.15).refreshBody();
platforms.create(495, 465, 'tile_centre').setScale(0.15).refreshBody();
platforms.create(570, 465, 'tile_right').setScale(0.15).refreshBody();
platforms.create(730, 465, 'tile_full').setScale(0.15).refreshBody();
things.create(735, 447, 'arch').setScale(0.05).refreshBody();
platforms.create(940, 465, 'tile_left').setScale(0.15).refreshBody();
platforms.create(1015, 465, 'tile_right').setScale(0.15).refreshBody();
platforms.create(1200, 465, 'tile_full').setScale(0.15).refreshBody();
//ground 2 ends
//ground 3 starts
platforms.create(100, 410, 'tile_left').setScale(0.15).refreshBody();
platforms.create(175, 410, 'tile_centre').setScale(0.15).refreshBody();
platforms.create(250, 410, 'tile_right').setScale(0.15).refreshBody();
platforms.create(375, 410, 'tile_full').setScale(0.15).refreshBody();
things.create(400, 392, 'arch').setScale(0.05).refreshBody();
platforms.create(500, 410, 'tile_left').setScale(0.15).refreshBody();
platforms.create(575, 410, 'tile_right').setScale(0.15).refreshBody();
platforms.create(710, 410, 'tile_left').setScale(0.15).refreshBody();
things.create(725, 392, 'triangle').setScale(0.05).refreshBody();
platforms.create(785, 410, 'tile_centre').setScale(0.15).refreshBody();
platforms.create(860, 410, 'tile_right').setScale(0.15).refreshBody();
platforms.create(1010, 410, 'tile_full').setScale(0.15).refreshBody();
platforms.create(1170, 410, 'tile_left').setScale(0.15).refreshBody();
things.create(1190, 392, 'triangle').setScale(0.05).refreshBody();
platforms.create(1245, 410, 'tile_right').setScale(0.15).refreshBody();
//ground 3 ends
//ground 4 starts
platforms.create(75, 355, 'tile_full').setScale(0.15).refreshBody();
things.create(95, 337, 'arch').setScale(0.05).refreshBody();
platforms.create(220, 355, 'tile_left').setScale(0.15).refreshBody();
platforms.create(295, 355, 'tile_right').setScale(0.15).refreshBody();
platforms.create(440, 355, 'tile_full').setScale(0.15).refreshBody();
platforms.create(565, 355, 'tile_left').setScale(0.15).refreshBody();
things.create(580, 337, 'triangle').setScale(0.05).refreshBody();
platforms.create(640, 355, 'tile_centre').setScale(0.15).refreshBody();
platforms.create(715, 355, 'tile_right').setScale(0.15).refreshBody();
platforms.create(850, 355, 'tile_left').setScale(0.15).refreshBody();
things.create(900, 337, 'triangle').setScale(0.05).refreshBody();
platforms.create(925, 355, 'tile_right').setScale(0.15).refreshBody();
platforms.create(1040, 355, 'tile_left').setScale(0.15).refreshBody();
platforms.create(1115, 355, 'tile_centre').setScale(0.15).refreshBody();
platforms.create(1190, 355, 'tile_right').setScale(0.15).refreshBody();
//ground 4 ends
//ground 5 starts
platforms.create(0, 300, 'tile_left').setScale(0.15).refreshBody();
platforms.create(75, 300, 'tile_centre').setScale(0.15).refreshBody();
things.create(90, 282, 'triangle').setScale(0.05).refreshBody();
platforms.create(150, 300, 'tile_right').setScale(0.15).refreshBody();
platforms.create(310, 300, 'tile_left').setScale(0.15).refreshBody();
platforms.create(385, 300, 'tile_right').setScale(0.15).refreshBody();
platforms.create(510, 300, 'tile_full').setScale(0.15).refreshBody();
things.create(520, 282, 'arch').setScale(0.05).refreshBody();
platforms.create(630, 300, 'tile_left').setScale(0.15).refreshBody();
platforms.create(705, 300, 'tile_centre').setScale(0.15).refreshBody();
platforms.create(780, 300, 'tile_right').setScale(0.15).refreshBody();
platforms.create(920, 300, 'tile_left').setScale(0.15).refreshBody();
platforms.create(995, 300, 'tile_right').setScale(0.15).refreshBody();
things.create(1000, 282, 'arch').setScale(0.05).refreshBody();
platforms.create(1150, 300, 'tile_full').setScale(0.15).refreshBody();
//ground 5 ends
//ground 6 starts
platforms.create(60, 245, 'tile_full').setScale(0.15).refreshBody();
platforms.create(250, 245, 'tile_full').setScale(0.15).refreshBody();
things.create(265, 227, 'triangle').setScale(0.05).refreshBody();
platforms.create(395, 245, 'tile_left').setScale(0.15).refreshBody();
platforms.create(470, 245, 'tile_centre').setScale(0.15).refreshBody();
things.create(540, 227, 'arch').setScale(0.05).refreshBody();
platforms.create(545, 245, 'tile_right').setScale(0.15).refreshBody();
platforms.create(720, 245, 'tile_left').setScale(0.15).refreshBody();
platforms.create(795, 245, 'tile_right').setScale(0.15).refreshBody();
platforms.create(950, 245, 'tile_full').setScale(0.15).refreshBody();
things.create(970, 227, 'arch').setScale(0.05).refreshBody();
platforms.create(1115, 245, 'tile_left').setScale(0.15).refreshBody();
platforms.create(1190, 245, 'tile_centre').setScale(0.15).refreshBody();
platforms.create(1265, 245, 'tile_right').setScale(0.15).refreshBody();
//ground 6 ends
//ground 7 starts
platforms.create(0, 190, 'tile_right').setScale(0.15).refreshBody();
platforms.create(130, 190, 'tile_left').setScale(0.15).refreshBody();
platforms.create(205, 190, 'tile_centre').setScale(0.15).refreshBody();
things.create(270, 172, 'arch').setScale(0.05).refreshBody();
platforms.create(280, 190, 'tile_right').setScale(0.15).refreshBody();
platforms.create(440, 190, 'tile_full').setScale(0.15).refreshBody();
platforms.create(620, 190, 'tile_left').setScale(0.15).refreshBody();
things.create(635, 172, 'triangle').setScale(0.05).refreshBody();
platforms.create(695, 190, 'tile_right').setScale(0.15).refreshBody();
platforms.create(820, 190, 'tile_full').setScale(0.15).refreshBody();
platforms.create(980, 190, 'tile_left').setScale(0.15).refreshBody();
things.create(1040, 172, 'arch').setScale(0.05).refreshBody();
platforms.create(1055, 190, 'tile_centre').setScale(0.15).refreshBody();
platforms.create(1130, 190, 'tile_right').setScale(0.15).refreshBody();
//ground 7 ends
//ground 8 starts
platforms.create(0, 135, 'tile_left').setScale(0.15).refreshBody();
things.create(30, 117, 'triangle').setScale(0.05).refreshBody();
platforms.create(75, 135, 'tile_right').setScale(0.15).refreshBody();
platforms.create(200, 135, 'tile_full').setScale(0.15).refreshBody();
platforms.create(420, 135, 'tile_left').setScale(0.15).refreshBody();
things.create(450, 117, 'arch').setScale(0.05).refreshBody();
platforms.create(495, 135, 'tile_centre').setScale(0.15).refreshBody();
platforms.create(570, 135, 'tile_right').setScale(0.15).refreshBody();
platforms.create(730, 135, 'tile_full').setScale(0.15).refreshBody();
things.create(755, 117, 'arch').setScale(0.05).refreshBody();
platforms.create(940, 135, 'tile_left').setScale(0.15).refreshBody();
platforms.create(1015, 135, 'tile_right').setScale(0.15).refreshBody();
things.create(1025, 117, 'arch').setScale(0.05).refreshBody();
platforms.create(1200, 135, 'tile_full').setScale(0.15).refreshBody();
things.create(1210, 117, 'triangle').setScale(0.05).refreshBody();
//ground 8 ends
//ground 9 start
platforms.create(0, 80, 'tile_centre').setScale(0.15).refreshBody();
platforms.create(75, 80, 'tile_centre').setScale(0.15).refreshBody();
platforms.create(150, 80, 'tile_centre').setScale(0.15).refreshBody();
platforms.create(225, 80, 'tile_centre').setScale(0.15).refreshBody();
platforms.create(300, 80, 'tile_centre').setScale(0.15).refreshBody();
things.create(310, 62, 'arch').setScale(0.05).refreshBody();
platforms.create(375, 80, 'tile_centre').setScale(0.15).refreshBody();
platforms.create(450, 80, 'tile_centre').setScale(0.15).refreshBody();
platforms.create(525, 80, 'tile_centre').setScale(0.15).refreshBody();
platforms.create(600, 80, 'tile_centre').setScale(0.15).refreshBody();
platforms.create(675, 80, 'tile_centre').setScale(0.15).refreshBody();
platforms.create(750, 80, 'tile_centre').setScale(0.15).refreshBody();
platforms.create(825, 80, 'tile_centre').setScale(0.15).refreshBody();
platforms.create(900, 80, 'tile_centre').setScale(0.15).refreshBody();
platforms.create(975, 80, 'tile_centre').setScale(0.15).refreshBody();
platforms.create(1050, 80, 'tile_centre').setScale(0.15).refreshBody();
platforms.create(1125, 80, 'tile_right').setScale(0.15).refreshBody();
//ground 9 ends
player = this.physics.add.sprite(15, 550, 'player').setScale(0.04).refreshBody();
reticle = this.physics.add.sprite(800, 700, 'target');
hp1 = this.add.image(-350, -250, 'target').setScrollFactor(0.5, 0.5);
hp2 = this.add.image(-300, -250, 'target').setScrollFactor(0.5, 0.5);
hp3 = this.add.image(-250, -250, 'target').setScrollFactor(0.5, 0.5);
player.setBounce(0);
player.setCollideWorldBounds(true);
// set bounds so the camera won't go outside the game world
this.cameras.main.setBounds(0, 0, 1260, 575);
// make the camera follow the player
this.cameras.main.startFollow(player);
//this.cameras.main.setZoom(5);
reticle.setOrigin(0.5, 0.5).setDisplaySize(25, 25).setCollideWorldBounds(true);
hp1.setOrigin(0.5, 0.5).setDisplaySize(50, 50);
hp2.setOrigin(0.5, 0.5).setDisplaySize(50, 50);
hp3.setOrigin(0.5, 0.5).setDisplaySize(50, 50);
player.health = 3;
competitors.health = 3;
competitors.lastFired = 0;
this.physics.add.collider(player, platforms);
cursors = this.input.keyboard.createCursorKeys();
let user = Moralis.User.current();
let query = new Moralis.Query('PlayerPosition');
let subscription = await query.subscribe();
subscription.on('create', (plocation) => {
if(plocation.get("player") != user.get("ethAddress")){
//if first time seeing
if(competitors[plocation.get("player")] == undefined){
//create a sprite
competitors[plocation.get("player")] = this.add.image(plocation.get("x"), plocation.get("y"), 'player').setScale(0.25);
}
else{
competitors[plocation.get("player")].x = plocation.get("y");
competitors[plocation.get("player")].y = plocation.get("y");
}
console.log("Someone moved!")
console.log(plocation.get("player"))
console.log("new X", plocation.get("x"))
console.log("new Y", plocation.get("y"))
}
});
// Fires bullet from player on left click of mouse
this.input.on('pointerdown', function (pointer, time, lastFired) {
if (player.active === false)
return;
// Get bullet from bullets group
var bullet = playerBullets.get().setActive(true).setVisible(true);
if (bullet)
{
bullet.fire(player, reticle);
this.physics.add.collider(competitors, bullet, competitorsHitCallback);
}
}, this);
// Pointer lock will only work after mousedown
game.canvas.addEventListener('mousedown', function () {
game.input.mouse.requestPointerLock();
});
// Exit pointer lock when Q or escape (by default) is pressed.
this.input.keyboard.on('keydown_Q', function (event) {
if (game.input.mouse.locked)
game.input.mouse.releasePointerLock();
}, 0, this);
// Move reticle upon locked pointer move
this.input.on('pointermove', function (pointer) {
if (this.input.mouse.locked)
{
reticle.x += pointer.movementX;
reticle.y += pointer.movementY;
}
}, this);
}
function competitorsHitCallback(competitorsHit, bulletHit)
{
// Reduce health of enemy
if (bulletHit.active === true && competitorsHit.active === true)
{
competitorsHit.health = competitorsHit.health - 1;
console.log("Enemy hp: ", competitorsHit.health);
// Kill enemy if health <= 0
if (competitorsHit.health <= 0)
{
competitorsHit.setActive(false).setVisible(false);
}
// Destroy bullet
bulletHit.setActive(false).setVisible(false);
}
}
function playerHitCallback(playerHit, bulletHit)
{
// Reduce health of player
if (bulletHit.active === true && playerHit.active === true)
{
playerHit.health = playerHit.health - 1;
console.log("Player hp: ", playerHit.health);
// Kill hp sprites and kill player if health <= 0
if (playerHit.health == 2)
{
hp3.destroy();
}
else if (playerHit.health == 1)
{
hp2.destroy();
}
else
{
hp1.destroy();
// Game over state should execute here
}
// Destroy bullet
bulletHit.setActive(false).setVisible(false);
}
}
function competitorsFire(competitors, player, time, gameObject)
{
if (competitors.active === false)
{
return;
}
if ((time - competitors.lastFired) > 1000)
{
competitors.lastFired = time;
// Get bullet from bullets group
var bullet = competitorsBullets.get().setActive(true).setVisible(true);
if (bullet)
{
bullet.fire(competitors, player);
// Add collider between bullet and player
gameObject.physics.add.collider(player, bullet, playerHitCallback);
}
}
}
// Ensures sprite speed doesnt exceed maxVelocity while update is called
// Ensures reticle does not move offscreen
function constrainReticle(reticle)
{
var distX = reticle.x-player.x; // X distance between player & reticle
var distY = reticle.y-player.y; // Y distance between player & reticle
// Ensures reticle cannot be moved offscreen (player follow)
if (distX > 1260)
reticle.x = player.x+1260;
else if (distX < -1260)
reticle.x = player.x-1260;
if (distY > 575)
reticle.y = player.y+575;
else if (distY < -575)
reticle.y = player.y-575;
}
async function update ()
{
//logic
if (cursors.left.isDown)
{
player.setVelocityX(-100);
}
else if (cursors.right.isDown)
{
player.setVelocityX(100);
}
else
{
player.setVelocityX(0);
}
if (cursors.up.isDown && player.body.touching.down)
{
player.setVelocityY(-180);
}
if(player.lastX!=player.x || player.lastY!=player.y){
let user = Moralis.User.current();
const PlayerPosition = Moralis.Object.extend("PlayerPosition");
const playerPosition = new PlayerPosition();
playerPosition.set("player",user.get("ethAddress"));
playerPosition.set("x",player.x);
playerPosition.set("y",player.y);
player.lastX = player.x;
player.lastY = player.y;
await playerPosition.save();
}
// Rotates player to face towards reticle
player.rotation = Phaser.Math.Angle.Between(player.x, player.y, reticle.x, reticle.y);
// Rotates enemy to face towards player
competitors.rotation = Phaser.Math.Angle.Between(competitors.x, competitors.y, player.x, player.y);
//Make reticle move with player
reticle.body.velocity.x = player.x;
reticle.body.velocity.y = player.y;
// Constrain velocity of player
//constrainVelocity(player, 500);
// Constrain position of constrainReticle
constrainReticle(reticle);
// Make enemy fire
competitorsFire(competitors, player, time, this);
}
async function login() {
let user = Moralis.User.current();
if (!user) {
try {
user = await Moralis.authenticate({ signingMessage: "Hello World!" })
console.log(user)
console.log(user.get('ethAddress'))
launch()
} catch(error) {
console.log(error)
}
}
}
async function logOut() {
await Moralis.User.logOut();
console.log("logged out");
location.reload();
}
document.getElementById("btn-login").onclick = login;
document.getElementById("btn-logout").onclick = logOut;