add printChipInfo()
This commit is contained in:
50
index.html
50
index.html
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user