Blockly-games/Selectgame.html at master · TsingfunLee/Blockly-games · GitHub

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>游戏</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="icon" href="img/favicon/favicon1.ico" />
		<link href="css/common.css" rel="stylesheet" />
		<link href="css/reset.css" rel="stylesheet" />
		<link href="css/selectgame.css" rel="stylesheet" />
		<script src="js/lib/jquery.min.js"></script>
	</head>
	<body>
		<div class="toolbar">
			<div id="top_tool">
				<div id="logo_img">
					<img src="img/logo.jpg"  style="height:60%; margin-left:15%;margin-top:3%;"/>
				</div>
				<div id="nav">
					<div class="nav-menu">
					<a href="index.html" target="_blank" id="html_index">首页</a>
					<a href="Selectgame.html" target="_blank" id="html_game"  class="current">游戏</a>
					<a href="aboutus.html" target="_blank" id="html_about">关于我们</a>
					</div>
					<div class="nav-current"></div>
				</div>
			</div>

			<div class="styled-select">
				<select id="languageMenu">
					<option>中文</option>
					<option>English</option>
				</select>
			</div>
		</div>
		<div id="particles">
			<div class="intro" style="height: 760px;">
				<div class="parallax">
					<div class="para_text">
						<p id="text_1">I CODE 爱编程</p>
						<p id="text_2">Let's  go!</p>
					</div>
					<div class="photo"  data-stellar-background-ratio="0.5"><img class="man" src="img/select/man.png"/></div>
					<div class="photo " data-stellar-background-ratio="0.5"><img class="plane" src="img/select/plane.png"/></div>
					<div class="photo "  data-stellar-background-ratio="0.5"><img class="star" src="img/select/star.png"/></div>
				</div>
				<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="560px" xmlns:xlink="http://www.w3.org/1999/xlink" id="svgAnimation">
				    <g transform="translate(0,-50)">

				    	<svg height="100%" width="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  preserveAspectRatio="none" x="0" y="0">
							<path id="m3path" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#FBF1DB"
								stroke-width="7" stroke-miterlimit="10"
								d="M0,524.699 c0,0,85.09-58.511,127.961-105.021
								c0,0,57.216-83.026,135.299-76.516 c0,0,57.623,4.501,121.93,69.014
								c0,0,46.256,57.012,107.179,61.513 c0,0,71.077,18.004,165.845-61.513

								c0,0,174.393-144.029,273.35-148.53c0,0,123.751-19.504,291.301,118.524

								c0,0,100.989,75.016,195.758,90.02c0,0,71.679,11.261,181.377-41.63"/>

						</svg>
					<img class="icon" id="icon_01" src="img/select/point1.png" width="7%" style="position: relative;top: -36%;left:7%;" />

					<img class="icon" id="icon_02" src="img/select/point2.png" width="7%" style="position: relative;top: -42%;left: 39%;" />

					<img class="icon" id="icon_03" src="img/select/point3.png" width="7%" style="position: relative;top: -39%;left: 61.4%;" />
					</g>
				</svg>
				<div class="gameselect_cont">
					<div class="gamebox" id="draw1">
						<p id="game01">星花海</p>
						<a class="img_hover" href="game.html?name=painting"><img id="img01" src="img/select/draw1.png" width="69%"/></a>
					</div>
					<div class="gamebox" id="rabbit2">
						<p id="game02">兔子历险记</p>
						<a class="img_hover" href="game.html?name=maze"><img id="img02" src="img/select/rabbit1.png" width="58%"/></a>
					</div>
					<div class="gamebox" id="tank3">
						<p id="game03">飞机大战</p>
						<a class="img_hover" href="game.html?name=tank"><img id="img03" src="img/select/tank.png" width="60%"/></a>
					</div>
				</div>
			</div>
        </div>
		<div class="footer">
				Copyright © ICode Inc,All Right Reserved
		</div>
		<script src="js/btn.js" async="true"></script>
		<script src="js/page.js" async="true"></script>
		<script src="js/lang.js"></script>
		<script>
			function setSVGWidth (){
				var width = document.body.clientWidth;
				var scalevalue = width/1510;
			    document.getElementById('svgAnimation').setAttribute('width', width);
			    document.body.style.width = width;
			    document.getElementById('m3path').setAttribute('transform','scale(' + scalevalue + ' 1)');
			}
			window.addEventListener('load', setSVGWidth);
			window.onresize = setSVGWidth;
		</script>
	</body>
</html>