-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
47 lines (40 loc) · 1.81 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>N子棋</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<h2>N子棋</h2>
<div style="margin:1rem 0;">
<label>棋盘：</label>
<input type="number" min="3" style="width:2.5rem" value="15" id="row-size">行 x
<input type="number" min="3" style="width:2.5rem" value="15" id="column-size">列
<input type="number" min="3" style="width:2rem;margin-left: 1rem" value="5" id="target-count">子胜利
<button onclick="genrateBoard()">生成棋盘</button>
</div>
<!-- We will put our React component inside this div. -->
<div id="game-ctn"></div>
<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- Load our React component. -->
<script src="game.js" type="text/babel"></script>
<script src="winner-calculator.js" type="text/javascript"></script>
<script src="robot.js" type="text/javascript"></script>
<script type="text/babel">
function genrateBoard(){
const domContainer = document.querySelector('#game-ctn');
const rowSize = parseInt(document.querySelector('#row-size').value);
const colSize = parseInt(document.querySelector('#column-size').value);
const targetCount = parseInt(document.querySelector('#target-count').value);
ReactDOM.unmountComponentAtNode(domContainer);
ReactDOM.render(<Game rowSize={rowSize} colSize={colSize} targetCount={targetCount} />, domContainer);
}
genrateBoard();
</script>
</body>
</html>