add printChipInfo()

This commit is contained in:
2024-06-18 18:09:33 +02:00
parent 44bcd1c895
commit c1dc21a3ba
4 changed files with 98 additions and 39 deletions

View File

@@ -4,10 +4,8 @@
<title>MBC Bootjes</title>
<meta name="viewport" content="user-scalable=no">
</head>
<body style="position: fixed; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif ;
color:rgb(128, 128, 128);
font-size: xx-large;">
<h1 style="text-align:center">MBC Het Groote Dok</h1>
<body style="position:fixed;margin:0;font-family:'GillSans','GillSansMT',Calibri,'TrebuchetMS',sans-serif;color:rgb(128,128,128);font-size:xx-large;">
<h1 style="text-align:center;width:100vw">MBC Het Groote Dok</h1>
<div id="boats"></div>
<canvas id="canvas" name="game" style="display:none"></canvas>
<div id="clientId"></div>
@@ -81,9 +79,8 @@ font-size: xx-large;">
boatListEl.style.display = 'none';
}
function send(x,y,speed,angle){
var data = clientId + ";d;" + x.toString() + "," + y.toString(); //{"x":x,"y":y,"speed":speed,"angle":angle};
//data = JSON.stringify(data);
function send(x,y,angle){
var data = clientId + ";d;" + x.toString() + "," + y.toString();
connection.send(data);
}
@@ -95,7 +92,7 @@ font-size: xx-large;">
window.addEventListener('load', () => {
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
ctx = canvas.getContext('2d');
resize();
document.addEventListener('mousedown', startDrawing);
@@ -116,16 +113,16 @@ font-size: xx-large;">
function resize() {
width = window.innerWidth;
radius = 200;
height = radius * 6.5;
height = radius * 4.5;
ctx.canvas.width = width;
ctx.canvas.height = height;
background();
joystick(width / 2, height / 3);
joystick(width / 2, height / 2);
}
function background() {
x_orig = width / 2;
y_orig = height / 3;
y_orig = height / 2;
ctx.beginPath();
ctx.arc(x_orig, y_orig, radius + 20, 0, Math.PI * 2, true);
@@ -176,45 +173,30 @@ font-size: xx-large;">
paint = false;
ctx.clearRect(0, 0, canvas.width, canvas.height);
background();
joystick(width / 2, height / 3);
joystick(width / 2, height / 2);
}
function Draw(event) {
if (paint) {
getPosition(event);
ctx.clearRect(0, 0, canvas.width, canvas.height);
background();
var angle_in_degrees,x, y, speed;
var angle_in_degrees, x, y, speed;
var angle = Math.atan2((coord.y - y_orig), (coord.x - x_orig));
if (Math.sign(angle) == -1) {
angle_in_degrees = Math.round(-angle * 180 / Math.PI);
}
else {
angle_in_degrees =Math.round( 360 - angle * 180 / Math.PI);
angle_in_degrees = Math.round(360 - angle * 180 / Math.PI);
}
x = Math.max(-radius, Math.min(radius, coord.x - x_orig));
y = Math.max(-radius, Math.min(radius, coord.y - y_orig));
joystick(x + x_orig, y + y_orig);
if (is_it_in_the_circle()) {
joystick(coord.x, coord.y);
x = coord.x;
y = coord.y;
}
else {
x = radius * Math.cos(angle) + x_orig;
y = radius * Math.sin(angle) + y_orig;
joystick(x, y);
}
getPosition(event);
var speed = Math.round(100 * Math.sqrt(Math.pow(x - x_orig, 2) + Math.pow(y - y_orig, 2)) / radius);
var x_relative = Math.round(x - x_orig);
var y_relative = Math.round(y - y_orig);
send( x_relative,y_relative,speed,angle_in_degrees);
send(x, y, angle_in_degrees);
}
}
</script>