-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
76 lines (73 loc) · 1.74 KB
/
index.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
<!DOCTYPE html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=0"/>
<!-- <meta name="viewport" content="width=device-width,initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=0"/>-->
<title>karas-battle-city</title>
<style>
html,body{
margin:0;
}
#canvas{
position:relative;
}
#canvas canvas, #canvas svg{
display:block;
margin:0 auto;
width:100%;
height:100%;
max-width:600px;
max-height:600px;
background:#000;
}
#control{
position:relative;
margin:10px auto 0;
width:320px;
height:205px;
background:url(control.png);
background-size:contain;
}
#control span{
position:absolute;
width:40px;
height:40px;
background:rgba(255,0,0,0.1);
}
#w{
left:88px;
top:0;
}
#a{
left:2px;
top:78px;
}
#s{
left:88px;
bottom:0;
}
#d{
left:173px;
top:78px;
}
#j{
left:267px;
top:78px;
}
</style>
</head>
<body>
<div id="canvas"></div>
<div>当前渲染模式，点击切换：<label id="tc"><input type="radio" name="type" value="canvas" checked="checked"/>canvas</label> <label id="ts"><input type="radio" name="type" value="svg"/>svg</label></div>
<div id="control">
<span id="w"></span>
<span id="a"></span>
<span id="s"></span>
<span id="d"></span>
<span id="j"></span>
</div>
<script src="https://gw.alipayobjects.com/os/lib/howler/2.2.1/dist/howler.min.js"></script>
<script src="https://gw.alipayobjects.com/os/lib/karas/0.47.10/index.min.js"></script>
<script src="index.js"></script>
</body>
</html>