-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtemplate.html
106 lines (98 loc) · 2.45 KB
/
template.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>vinchin's toy Car</title>
<style type="text/css">
body,div{
margin:0;
padding:0;
border:0;
}
#main{
margin:auto;
width:100%;
height:100%;
position:relative;
}
</style>
</head>
<body>
<div id="main">
<canvas width="360" height="500" id="myCanvas">你的浏览器不支持html5的canvas</canvas>
</div>
</body>
<script>
function $(str)
{
return document.getElementById(str);
}
var myCanvas = $("myCanvas");
var myImg = new Image();
myImg.src = 'resource/1.png';
var arrowImgDefault = new Image();
arrowImgDefault.src = 'resource/2.png';
var arrowImgActive = new Image();
arrowImgActive.src = 'resource/3.png';
var ctx = myCanvas.getContext('2d');
myImg.onload = function() {
ctx.drawImage(myImg, 0, 0, 360, 500);
}
//websocket创建
var websocketBusyFlag = 0;
var WS = null;
if(window.WebSocket)
{
WS = new WebSocket('ws://192.168.0.107:8880/websocket'); //注意：更改ip地址和端口号，要和python代码一致
}
else
{
alert("你的浏览器不支持websocket");
}
WS.onopen = function() {
WS.send('hello websocket!');
}
WS.onmessage = function(e) {
var message = e.data;
if(message == 'reset') websocketBusyFlag = 0;
else alert(message);
}
/**********************操作事件<开始>***************************/
//装子弹按键中心坐标：(x=65,y=115),有效半径：r=55
//射击按键中心坐标：(x=65,y=385),有效半径：r=55
var ReX = 65, ReY = 115, ReR = 55;
var SeX = 65, SeY = 385, SeR = 55;
myCanvas.ontouchstart = function(e) {
var x = e.touches[0].clientX;
var y = e.touches[0].clientY;
//装子弹
if(Math.sqrt((x - ReX)*(x - ReX) + (y - ReY)*(y - ReY)) <= ReR)
{
if(websocketBusyFlag==0){
websocketBusyFlag=1;
WS.send('accelerate');}
}
//射击开始
if(Math.sqrt((x - SeX)*(x - SeX) + (y - SeY)*(y - SeY)) <= SeR)
{
if(websocketBusyFlag==0){
websocketBusyFlag=1;
WS.send('brake');}
}
event.preventDefault();
}
//myCanvas.ontouchmove = function(e){
//event.preventDefault();
//}
//myCanvas.ontouchend = function(e) {
// WS.send('shoot_end');
// event.preventDefault();
//}
//myCanvas.ontouchcancel = function(e) {
// WS.send('shoot_end');
// event.preventDefault();
//}
/********************操作事件<结束>***************************/
</script>
</html>