-
Notifications
You must be signed in to change notification settings - Fork 10
/
index.html
150 lines (149 loc) · 7.59 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
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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PAIA</title>
<link rel="stylesheet" href="node_modules/bootstrap-icons/font/bootstrap-icons.css">
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script>window.jQuery = window.$ = require('jquery');</script>
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
<script src="renderer.js"></script>
</head>
<body>
<div class="card m-3 mx-auto">
<div class="row g-0">
<div class="col-md-4">
<img src="media/easygame.svg" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h6 class="card-subtitle mb-2 text-muted float-right"><span class="verison" game='easy_game'>...</span></h6>
<h3 class="card-title">Easy Game (教學)</h3>
<p class="card-text">一個讓你熟習所有基本操作的小遊戲。</p>
<a href="code.html?game=easy_game" class="btn btn-primary">積木</a>
<a href="python.html?game=easy_game" class="btn btn-primary">Python</a>
</div>
</div>
</div>
</div>
<div class="card m-3 mx-auto">
<div class="row g-0">
<div class="col-md-4">
<img src="media/arkanoid.svg" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h6 class="card-subtitle mb-2 text-muted float-right"><span class="verison" game='arkanoid'>...</span></h6>
<h3 class="card-title">打磚塊</h3>
<p class="card-text">打磚塊(Arkanoid)可是世界上最古老經典遊戲之一，透過決定發球的位置與方向，嘗試接到回彈的球，逐一打掉所有磚塊。來挑戰看看如何在最短時間內擊破所有的磚塊，遊戲中還準備了各種不同的難度來讓你挑戰喔！</p>
<a href="code.html?game=arkanoid" class="btn btn-primary arkanoid">積木</a>
<a href="python.html?game=arkanoid" class="btn btn-primary arkanoid">Python</a>
</div>
</div>
</div>
</div>
<div class="card mb-3 mx-auto" style="width: calc(100vw - (40px));">
<div class="row g-0">
<div class="col-md-4">
<img src="media/pingpong.svg" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h6 class="card-subtitle mb-2 text-muted float-right"><span class="verison" game='pingpong'>...</span></h6>
<h3 class="card-title">乒乓球</h3>
<p class="card-text">想要體驗一場有趣且刺激的乒乓球遊戲嗎？操控發球及反擊的時機讓對手無路可逃，喜歡快節奏的你一定要來體驗看看！遊戲中也有不同難度的對手，歡迎各位來挑戰它們。</p>
<a href="code.html?game=pingpong" class="btn btn-primary pingpong">積木</a>
<a href="python.html?game=pingpong" class="btn btn-primary pingpong">Python</a>
</div>
</div>
</div>
</div>
<div class="card mb-3 mx-auto" style="width: calc(100vw - (40px));">
<div class="row g-0">
<div class="col-md-4">
<img src="media/racingcar.svg" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h6 class="card-subtitle mb-2 text-muted float-right"><span class="verison" game='RacingCar'>...</span></h6>
<h3 class="card-title">賽車</h3>
<p class="card-text">來一場競速的排位賽吧！駕駛著自己的車子享受在馬路上狂飆的快感吧！注意前方與左右來車來妨礙你，閃避其他車子的步步逼近，同時還要小心速度太慢被遠遠甩在後頭喔！關卡還有金幣競爭模式，在競速之餘盡可能的去搶奪路上散落的金幣，衝向終點成為最終贏家。</p>
<a href="code.html?game=RacingCar" class="btn btn-primary RacingCar">積木</a>
<a href="python.html?game=RacingCar" class="btn btn-primary RacingCar">Python</a>
<a onclick="git_download('direct:https://github.com/yen900611/RacingCar.git', 'MLGame/games/RacingCar', this)" class="btn btn-primary float-right"><i class="bi bi-download"></i> 下載 / 更新</a>
</div>
</div>
</div>
</div>
<div class="card mb-3 mx-auto" style="width: calc(100vw - (40px));">
<div class="row g-0">
<div class="col-md-4">
<img src="media/maze_car.svg" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h6 class="card-subtitle mb-2 text-muted float-right"><span class="verison" game='Maze_Car'>...</span></h6>
<h3 class="card-title">迷宮自走車</h3>
<p class="card-text">在錯綜復雜的棋盤迷宮中，如何讓你的自走車突破重圍，走到出口，而不會迷失在其之中。本遊戲也提供多元的關卡，隨著遊戲難度提升，迷宮的牆壁可是會移動，考驗各位玩家如何再多變的環境下，依然能夠逃出迷宮。</p>
<a href="code.html?game=Maze_Car" class="btn btn-primary Maze_Car">積木</a>
<a href="python.html?game=Maze_Car" class="btn btn-primary Maze_Car">Python</a>
<a onclick="git_download('direct:https://github.com/yen900611/Maze_Car.git', 'MLGame/games/Maze_Car', this)" class="btn btn-primary float-right"><i class="bi bi-download"></i> 下載 / 更新</a>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
function update_version_name() {
Array.from(document.getElementsByClassName('verison')).forEach(e => {
var fs = require('fs');
var config_path = path.join(__dirname, 'MLGame', 'games', e.getAttribute('game'), 'game_config.json');
if (fs.existsSync(config_path)) {
var config = JSON.parse(window.readFile(config_path));
e.innerHTML = config['game_name'] + '-' + config['version'];
if (e.classList.contains('text-danger')) {
e.classList.remove("text-danger");
}
e.classList.add("text-muted");
} else {
e.innerHTML = 'Not Found';
if (e.classList.contains('text-muted')) {
e.classList.remove("text-muted");
}
e.classList.add("text-danger");
document.querySelectorAll('a.'+ e.getAttribute('game')).forEach(btn => {
btn.classList.add("disabled");
});
}
});
};
function git_download(url, destination, button) {
if (window.confirm('下載前會清除此遊戲資料夾下的所有檔案，確定執行？')) {
button.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 下載 / 更新';
document.querySelectorAll('a.btn').forEach(e => {
e.classList.add("disabled");
});
var path = require('path');
var fs = require('fs');
destination = path.join(__dirname, destination);
fs.rmdirSync(destination, { recursive: true });
var download = require('download-git-repo');
download(url, destination, { clone: true }, function (err) {
button.innerHTML = '<i class="bi bi-download"></i> 下載 / 更新';
document.querySelectorAll('a.btn').forEach(e => {
e.classList.remove("disabled");
});
if (err) {
window.alert(err);
} else {
var config = JSON.parse(window.readFile(path.join(destination, 'game_config.json')));
window.alert(config['game_name'] + '-' + config['version'] + ' 下載成功');
update_version_name();
}
});
};
};
update_version_name();
</script>