J1B2-Game-controller/web/game.js

let port;
let reader;
const decoder = new TextDecoder("utf-8");
let readibleoutput = 0;
let booleanArray = [];
// Request a port and open a connection.
async function connect() {
    //vraag aan de browser om een serial port te selecteren
    port = await navigator.serial.requestPort();
    await port.open({ baudRate: 9600 });
    reader = port.readable.getReader();
    console.log("Port is open!");
    readLoop()
}

// Read data from serial port
async function readLoop() {
    let buffer = [];

    // loop until reader.cancel() is called
    while (true) {
        // Wait for data
        const { value, done } = await reader.read();


        for (let iByte = 0; iByte < value.length; iByte++) {
            let singleByte = value[iByte];
            //functie maken er van met boolean!!!
            if (singleByte != 10) {
                buffer.push(singleByte);
            }
            else {
                let sensorString = decoder.decode(new Uint8Array(buffer));
                //Put all data in a json Array and parse it to a boolean array
                try {
                    // Parse the incoming data as JSON
                    // "replace(/'/g, '\"')" replaces all single quotes with double quotes with use of regular expressions. So we can use Jsonparse to parse it into a booleanArray
                    let SerialArray = JSON.parse(sensorString.replace(/'/g, '"'));
                    // Ensure SerialArray is an array
                    if (Array.isArray(SerialArray)) {
                        //Convert the array of strings to a boolean array
                        //When a bit is 1 it becomes true, when a bit is 0 it becomes false
                        booleanArray = SerialArray.map(bit => bit == '1');
                        console.log(booleanArray);
                    } else {
                        console.error("Dit is geen Array");
                    }
                } catch (e) {
                    console.log("json niet geparserd");
                }
                Movementloop()
                buffer = [];
            }
            if (done) {
                console.log('[readLoop] DONE', done);
                reader.releaseLock();
                break;
            }
        }
    }
    
}
// Sluit de poort
async function disconnect() {
    await reader.cancel();
    await port.close();
    console.log("Port is closed!");
}
//--------------------Game--------------------
// Game variables
const width = 1000;
const height = 600;

// Player variables
let Playerposx = 500;
let Playerposy = 300;
const playerSize = 10;
let radius = playerSize/2;
let playerX = 500
let playerY = 300;
let playerSpeed = 3;


let squareX = 100;
let squareY = 100;
const squareSize = 100;
let startPosX;
let startPosY;
let shotSpeed = 5;

// the function setup() is called once when the page is loaded
function setup() {
    // create a canvas element and append it to the body
    createCanvas(width, height);
    frameRate(120);
    // disable the outline of shapes
    Movementloop()
    noStroke();
}

function keyPressed() {
    if (keyIsDown(LEFT_ARROW) && playerX > 0+radius) {
        playerX -= playerSpeed;
    }
    if (keyIsDown(RIGHT_ARROW) && playerX < width-radius) {
        playerX += playerSpeed;
    }
    if (keyIsDown(UP_ARROW) && playerY > 0+radius) {
        playerY -= playerSpeed;
    } 
    if (keyIsDown(DOWN_ARROW) && playerY < height-radius) {
        playerY += playerSpeed;
    }
}

async function Movementloop() {
    if (booleanArray[1]) {
        playerX += playerSpeed;}
    if (booleanArray[3]) {
        playerX -= playerSpeed;}
    if (booleanArray[2]) {
        playerY += playerSpeed;}
    if (booleanArray[0]) {
        playerY -= playerSpeed;}
}    

function object_collision() {
    var squareCenterX = squareX + squareSize / 2;
    var squareCenterY = squareY + squareSize / 2;

    var distance = dist(playerX, playerY, squareCenterX, squareCenterY);

    if (distance < squareSize / 2 + radius) {
        squareX = random(0, width - squareSize);
        squareY = random(0, height - squareSize);
    }
}

async function shoot(startPosX, startPosY) {
    circle(startPosX, startPosY, 30);
    let shootingCirclePos = createVector(startPosX, startPosY);
    let targetCirclePos = createVector(playerX, playerY);

    let direction = p5.Vector.sub(targetCirclePos, shootingCirclePos);
    direction.normalize();
    direction.mult(shotSpeed);

    shootingCirclePos.add(direction);

    circle(shootingCirclePos.x, shootingCirclePos.y, 5);
}

// the function draw() is called every frame
function draw() {
    keyPressed();
    // clear the background with a transparent black color
    background(0, 0, 0, 100);
    shoot(500,100);

    // draw a circle at the mouse position

    circle(constrain(playerX,0+radius,width-radius), constrain(playerY,0+radius,height-radius), playerSize);
    square(squareX,squareY,squareSize);
    object_collision();
}