inital commit
This commit is contained in:
FReenen
commit
6f7140b87d
183
index.html
Normal file
183
index.html
Normal file
@ -0,0 +1,183 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>
|
||||
Mousebot
|
||||
</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>
|
||||
<canvas id="canvas" name="game"></canvas>
|
||||
<div id="clientId"></div>
|
||||
<script>
|
||||
|
||||
var clientId = Math.floor(Math.random() * (2**16)).toString();
|
||||
var clientId = -1;
|
||||
var ca = document.cookie.split(';');
|
||||
for (var i=0; i<ca.length; i++){
|
||||
var c = ca[i].trim();
|
||||
if (c.indexOf("clientId") == 0){
|
||||
clientId = c.substring("clientId=".length, c.length);
|
||||
}
|
||||
}
|
||||
if (clientId == -1){
|
||||
clientId = Math.floor(Math.random() * 10000).toString();
|
||||
document.cookie = "clientId=" + clientId
|
||||
}
|
||||
document.getElementById("clientId").innerHTML = "client id: " + clientId;
|
||||
|
||||
var connection = new WebSocket('ws://' + "10.254.0.1" + ':8080/', ['mbcRcRf']);
|
||||
connection.onopen = function () {
|
||||
connection.send('Connect ' + new Date());
|
||||
};
|
||||
connection.onerror = function (error) {
|
||||
console.log('WebSocket Error ', error);
|
||||
alert('WebSocket Error ', error);
|
||||
};
|
||||
connection.onmessage = function (e) {
|
||||
console.log('Server: ', e.data);
|
||||
};
|
||||
|
||||
function send(x,y,speed,angle){
|
||||
var data = clientId + "," + x.toString() + "," + y.toString(); //{"x":x,"y":y,"speed":speed,"angle":angle};
|
||||
//data = JSON.stringify(data);
|
||||
console.log(data);
|
||||
connection.send(data);
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
<script>
|
||||
var canvas, ctx;
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
|
||||
canvas = document.getElementById('canvas');
|
||||
ctx = canvas.getContext('2d');
|
||||
resize();
|
||||
|
||||
document.addEventListener('mousedown', startDrawing);
|
||||
document.addEventListener('mouseup', stopDrawing);
|
||||
document.addEventListener('mousemove', Draw);
|
||||
|
||||
document.addEventListener('touchstart', startDrawing);
|
||||
document.addEventListener('touchend', stopDrawing);
|
||||
document.addEventListener('touchcancel', stopDrawing);
|
||||
document.addEventListener('touchmove', Draw);
|
||||
window.addEventListener('resize', resize);
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
var width, height, radius, x_orig, y_orig;
|
||||
function resize() {
|
||||
width = window.innerWidth;
|
||||
radius = 200;
|
||||
height = radius * 6.5;
|
||||
ctx.canvas.width = width;
|
||||
ctx.canvas.height = height;
|
||||
background();
|
||||
joystick(width / 2, height / 3);
|
||||
}
|
||||
|
||||
function background() {
|
||||
x_orig = width / 2;
|
||||
y_orig = height / 3;
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.arc(x_orig, y_orig, radius + 20, 0, Math.PI * 2, true);
|
||||
ctx.fillStyle = '#ECE5E5';
|
||||
ctx.fill();
|
||||
}
|
||||
|
||||
function joystick(width, height) {
|
||||
ctx.beginPath();
|
||||
ctx.arc(width, height, radius, 0, Math.PI * 2, true);
|
||||
ctx.fillStyle = '#F08080';
|
||||
ctx.fill();
|
||||
ctx.strokeStyle = '#F6ABAB';
|
||||
ctx.lineWidth = 8;
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
let coord = { x: 0, y: 0 };
|
||||
let paint = false;
|
||||
|
||||
function getPosition(event) {
|
||||
var mouse_x = event.clientX || event.touches[0].clientX;
|
||||
var mouse_y = event.clientY || event.touches[0].clientY;
|
||||
coord.x = mouse_x - canvas.offsetLeft;
|
||||
coord.y = mouse_y - canvas.offsetTop;
|
||||
}
|
||||
|
||||
function is_it_in_the_circle() {
|
||||
var current_radius = Math.sqrt(Math.pow(coord.x - x_orig, 2) + Math.pow(coord.y - y_orig, 2));
|
||||
if (radius >= current_radius) return true
|
||||
else return false
|
||||
}
|
||||
|
||||
|
||||
function startDrawing(event) {
|
||||
paint = true;
|
||||
getPosition(event);
|
||||
if (is_it_in_the_circle()) {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
background();
|
||||
joystick(coord.x, coord.y);
|
||||
Draw();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function stopDrawing() {
|
||||
paint = false;
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
background();
|
||||
joystick(width / 2, height / 3);
|
||||
}
|
||||
|
||||
function Draw(event) {
|
||||
|
||||
if (paint) {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
background();
|
||||
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);
|
||||
}
|
||||
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
15
recever.py
Normal file
15
recever.py
Normal file
@ -0,0 +1,15 @@
|
||||
#!/usr/bin/env python
|
||||
|
||||
import asyncio
|
||||
from websockets.server import serve
|
||||
|
||||
async def echo(ws, path):
|
||||
async for message in ws:
|
||||
print(message)
|
||||
|
||||
async def main():
|
||||
async with serve(echo, "0.0.0.0", 8080):
|
||||
await asyncio.Future()
|
||||
|
||||
asyncio.run(main())
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user