Split the script and added eventlistener
This commit is contained in:
74
web/Serial.js
Normal file
74
web/Serial.js
Normal file
@@ -0,0 +1,74 @@
|
|||||||
|
let port;
|
||||||
|
let reader;
|
||||||
|
const decoder = new TextDecoder("utf-8");
|
||||||
|
let readibleoutput = 0;
|
||||||
|
|
||||||
|
// 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
|
||||||
|
let booleanArray = SerialArray.map(bit => bit == '1');
|
||||||
|
// Dispatch an event with booleanArray as detail
|
||||||
|
let event = new CustomEvent('booleanArrayUpdated', { detail: booleanArray });
|
||||||
|
window.dispatchEvent(event);
|
||||||
|
console.log(booleanArray);
|
||||||
|
} else {
|
||||||
|
console.error("Dit is geen Array");
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.log("json niet geparserd");
|
||||||
|
}
|
||||||
|
|
||||||
|
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!");
|
||||||
|
}
|
78
web/game.js
78
web/game.js
@@ -1,71 +1,3 @@
|
|||||||
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--------------------
|
||||||
// Game variables
|
// Game variables
|
||||||
const width = 1000;
|
const width = 1000;
|
||||||
@@ -77,8 +9,7 @@ let radius = playerSize / 2;
|
|||||||
let playerPosX = 500
|
let playerPosX = 500
|
||||||
let playerPosY = 300;
|
let playerPosY = 300;
|
||||||
let playerSpeed = 3;
|
let playerSpeed = 3;
|
||||||
|
let booleanArray = window.booleanArray;
|
||||||
|
|
||||||
// let squareX = 100;
|
// let squareX = 100;
|
||||||
// let squareY = 100;
|
// let squareY = 100;
|
||||||
// const squareSize = 100;
|
// const squareSize = 100;
|
||||||
@@ -113,7 +44,13 @@ function keyPressed() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
async function Movementloop() {
|
async function Movementloop() {
|
||||||
|
window.addEventListener('booleanArrayUpdated', function (event) {
|
||||||
|
// event.detail contains the booleanArray
|
||||||
|
let booleanArray = event.detail;
|
||||||
|
// Use booleanArray here...
|
||||||
|
|
||||||
if (booleanArray[1]) {
|
if (booleanArray[1]) {
|
||||||
playerPosX += playerSpeed;
|
playerPosX += playerSpeed;
|
||||||
}
|
}
|
||||||
@@ -126,6 +63,7 @@ async function Movementloop() {
|
|||||||
if (booleanArray[0]) {
|
if (booleanArray[0]) {
|
||||||
playerPosY -= playerSpeed;
|
playerPosY -= playerSpeed;
|
||||||
}
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// function object_collision() {
|
// function object_collision() {
|
||||||
|
Reference in New Issue
Block a user