Can someone help me get my bullets to work in Phaser 3

Question

This is the code I currently have, the commented code was my initial try and the movements for the bullet are inspired by what I researched on google, but the game continues to crash upon input.

'use strict'

const game = new Phaser.Game(1675, 800, Phaser.AUTO, 'game-canvas', { preload, create, update })

let tma
let hp
let dude
let fon
let cursor
let bot
let de1
let de2
let de3
let counter = 0
let epc = 0
let bul

function preload() {
    game.load.image("de1", "de1.png")
    game.load.image("de2", "de2.png")
    game.load.image("de3", "de3.png")
    game.load.image("ba", "ba.png")
    game.load.image("ts", "16x16_tileset_platfprms_sunset(1).png")
    game.load.image("bul", "bullet.png")
    game.load.tilemap("tm", 'tm1.json', null, Phaser.Tilemap.TILED_JSON)
    game.load.spritesheet('dude', 'dude-green.288x40.9x1.png', 288 / 9, 40 / 1)
    game.load.image("bul", "bullet.png")
}

function create() {
    crmap()
    dudee()
    enemy_spawn()
    enemy_move()
    game.physics.arcade.enable(bul)
}

function update() {
    game.physics.arcade.collide(dude, bot)
    dude_move()
    counter++
    console.log('counter')

    if (game.input.activePointer.isDown && counter >= 100) {
        bullet()
        counter = 0

    }
}
function crmap(params) {
    tma = game.add.tilemap('tm')
    tma.addTilesetImage("tileset", 'ts')

    bot = tma.createLayer("bot")

    tma.setCollisionBetween(1, 999, true)
}
function dudee() {
    dude = game.add.sprite(game.width / 2, game.height / 2, "dude")
    dude.scale.setTo(2)
    dude.frame = 4
    dude.animations.add('left', [0, 1, 2, 3], 10, false)
    dude.animations.add("right", [5, 6, 7, 8], 10, false)
    cursor = game.input.keyboard.createCursorKeys()

    game.physics.arcade.enable(dude)
    dude.body.gravity.y = 400
    dude.body.collideWorldBounds = true
    game.physics.arcade.collide(dude, bot)
}
function dude_move() {
    if (cursor.right.isDown) {
        dude.body.velocity.x = 200
        dude.animations.play("right")
    } if (cursor.left.isDown) {
        dude.body.velocity.x = -200
        dude.animations.play("left")
    }
    if (cursor.up.justDown) {
        dude.body.velocity.y = -200

    }
    if (game.input.keyboard.createCursorKeys().down.isUp && 
        game.input.keyboard.createCursorKeys().right.isUp && 
        game.input.keyboard.createCursorKeys().left.isUp && 
        game.input.keyboard.createCursorKeys().up.isUp) {

        dude.body.velocity.x = 0
        dude.frame = 4
    }
}
function enemy_spawn() {
    de1 = game.add.sprite(game.rnd.integerInRange(0, 1675 - 94.5), 0, 'de1')
    de1.scale.setTo(0.3)
    game.physics.arcade.enable(de1)
    de1.body.collideWorldBounds = true
    game.physics.arcade.collide(de1, bot)
}
function enemy_spawn2() {
    de2 = game.add.sprite(game.rnd.integerInRange(0, 1675 - 94.5), 0, 'de2')
    de2.scale.setTo(0.3)
    game.physics.arcade.enable(de2)
    de2.body.collideWorldBounds = true
    game.physics.arcade.collide(de2, bot)
}
function enemy_spawn3() {
    de3 = game.add.sprite(game.rnd.integerInRange(0, 1675 - 94.5), 0, 'de3')
    de3.scale.setTo(0.3)
    game.physics.arcade.enable(de3)
    de3.body.collideWorldBounds = true
    game.physics.arcade.collide(de3, bot)
}
function enemy_move() {
    de1.body.velocity.setTo(game.rnd.integerInRange(100, 200), 0)
    de1.body.bounce.setTo(1)

    de3.body.velocity.setTo(game.rnd.integerInRange(400, 500))
    de3.body.bounce.setTo(1)
}
function enemy_poof1() {
    de1.destroy()
    epc += 1
    enemy_spawn2()
}
function enemy_poof2() {
    de2.destroy()
    epc += 1
    enemy_spawn3()
}
function enemy_poof3() {
    de3.destroy()
    epc += 1
}
function bullet() {
    bul = game.add.image(dude.x, dude.y, "bul")

    const playerX = dude.x;
    const playerY = dude.y;

    // Get the game input location (where the user clicks)
    const inputX = game.input.x;
    const inputY = game.input.y;

    // Calculate the direction vector from the player to the input location
    const directionX = inputX - playerX;
    const directionY = inputY - playerY;

    // Normalize the direction vector
    const length = Math.sqrt(directionX * directionX + directionY * directionY);
    const normalizedDirectionX = directionX / length;
    const normalizedDirectionY = directionY / length;

    // Set the velocity of the bullet based on the normalized direction
    const bulletSpeed = 100; // Adjust as needed
    bul.body.velocity.setTo(normalizedDirectionX * bulletSpeed, normalizedDirectionY * bulletSpeed);

}

function bul_move() { }

function bullet_destroy() {
    bul.destroy()
}

I tried all of the said above but google keeps telling me either bul's body or its' velocity is undefined. I am trying to make it so upon a click the bullet will go from the dude's location to that of the active pointer in the time of the click

Answer 1

This seems to be phaser2/PhaserCE. (or a wierd way to write phaser 3 games) I would recommend using phaser3, and checkout the official examples since there most common tasks are shown, and keep to the phaser 3 ES6 coding style like in this example

1. Shooting bullets example with physics
2. platformer example
3. and many more

That said: you are creating bul= game.add.image(dude.x,dude.y,"bul") as an simple image but using it as physics object.

You probably would need the make it first to a "physics object" with game.physics.arcade.enable(bul), than bul should have a body property.

Tipp: for posting on StackOverflow it is always better:

1. post only the relevant code
2. post the relevant error message (from the browser console for example)
3. And checkout this SO-article (https://stackoverflow.com/help/how-to-ask) for a simple and good guide.

All this might help to get answers faster.