|
|
|
|
<!doctype html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
|
|
|
<title><%= htmlWebpackPlugin.options.title %></title>
|
|
|
|
|
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div class="d-flex flex-column" style="height: 100vh">
|
|
|
|
|
<div class="container p-3 clearfix">
|
|
|
|
|
<div class="float-start">
|
|
|
|
|
<button type="button" class="btn btn-success btn-sm me-3" data-bs-toggle="modal" id="myModal" data-bs-target="#myModal">配置</button>
|
|
|
|
|
<div class="float-end level me-3" id="level-container">
|
|
|
|
|
等级：
|
|
|
|
|
<button type="button" class="btn border btn-sm" data-code="1">入门</button>
|
|
|
|
|
<button type="button" class="btn border btn-sm" data-code="2">简单</button>
|
|
|
|
|
<button type="button" class="btn border btn-sm" data-code="3">普通</button>
|
|
|
|
|
<button type="button" class="btn border btn-sm" data-code="4">困难</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="float-end mode me-3" id="mode-container">
|
|
|
|
|
模式：
|
|
|
|
|
<button type="button" class="btn border btn-sm" data-code="0">正常模式</button>
|
|
|
|
|
<button type="button" class="btn border btn-sm" data-code="1">演示模式</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="float-start events d-flex align-items-center">
|
|
|
|
|
<button type="button" class="btn btn-primary btn-sm" data-event="start" id="start">开始</button>
|
|
|
|
|
<button type="button" class="btn btn-warning btn-sm d-none" id="pause" data-event="pause" data-status="0">暂停</button>
|
|
|
|
|
<!-- <button type="button" class="btn btn-danger btn-sm d-none" id="finish" data-event="finish">结束</button> -->
|
|
|
|
|
|
|
|
|
|
<div class="d-flex align-items-center d-none" id="again-box" style="height: 31px;">
|
|
|
|
|
<button type="button" class="btn btn-primary btn-sm me-3" id="again" data-event="again">再来一次</button>
|
|
|
|
|
<div class="d-flex align-items-center">最终得分: <span class="ms-2 fs-1 fw-bold text-danger" id="score"></span></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="float-end actions d-none" id="action-container">
|
|
|
|
|
动作：
|
|
|
|
|
<button type="button" class="btn btn-outline-primary btn-sm" data-code="0">0</button>
|
|
|
|
|
<button type="button" class="btn btn-outline-secondary btn-sm" data-code="1">1</button>
|
|
|
|
|
<button type="button" class="btn btn-outline-success btn-sm" data-code="2">2</button>
|
|
|
|
|
<button type="button" class="btn btn-outline-danger btn-sm" data-code="3">3</button>
|
|
|
|
|
<button type="button" class="btn btn-outline-warning btn-sm" data-code="4">4</button>
|
|
|
|
|
<button type="button" class="btn btn-outline-info btn-sm" data-code="5">5</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<hr />
|
|
|
|
|
<!-- <iframe id="iframe" src="http://127.0.0.1:5500/dist/" frameborder="0" style="flex: 1"></iframe> -->
|
|
|
|
|
<iframe id="iframe" src="https://www.tall.wiki/kangfu/game/bird/game" frameborder="0" style="flex: 1"></iframe>
|
|
|
|
|
|
|
|
|
|
<!-- 配置 -->
|
|
|
|
|
<div class="modal" tabindex="-1" id="myInput" style="background: rgba(0,0,0,.5);">
|
|
|
|
|
<div class="modal-dialog">
|
|
|
|
|
<div class="modal-content">
|
|
|
|
|
<div class="modal-header">
|
|
|
|
|
<h5 class="modal-title">配置表</h5>
|
|
|
|
|
<button type="button" class="btn-close cancel" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="modal-body">
|
|
|
|
|
<form>
|
|
|
|
|
<div class="mb-3">
|
|
|
|
|
<lable for="gameMode">
|
|
|
|
|
<span style="display: inline-block;width: 129px" class="text-end">游戏模式：</span>
|
|
|
|
|
<input class="ms-3 me-1" type="radio" name="gameMode" value="0" checked />正常模式
|
|
|
|
|
<input class="ms-3 me-1" type="radio" name="gameMode" value="1" />演示模式
|
|
|
|
|
</lable>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="mb-3">
|
|
|
|
|
<lable for="difficulty">
|
|
|
|
|
<span style="display: inline-block;width: 129px" class="text-end">难度等级：</span>
|
|
|
|
|
<input class="ms-3 me-1" type="radio" name="difficulty" value="1" checked />入门
|
|
|
|
|
<input class="ms-3 me-1" type="radio" name="difficulty" value="2" />简单
|
|
|
|
|
<input class="ms-3 me-1" type="radio" name="difficulty" value="3" />普通
|
|
|
|
|
<input class="ms-3 me-1" type="radio" name="difficulty" value="4" />困难
|
|
|
|
|
</lable>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="mb-3 d-flex flex-row align-items-center">
|
|
|
|
|
<label for="totalTimes" class="form-label text-end" style="width: 180px">总次数(次)：</label>
|
|
|
|
|
<input type="number" class="form-control" id="totalTimes">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="mb-3 d-flex flex-row align-items-center">
|
|
|
|
|
<label for="totalScore" class="form-label text-end" style="width: 180px">总分(分)：</label>
|
|
|
|
|
<input type="number" class="form-control" id="totalScore">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="mb-3 d-flex flex-row align-items-center">
|
|
|
|
|
<label for="count" class="form-label text-end" style="width: 180px">倒计时时长(秒)：</label>
|
|
|
|
|
<input type="number" class="form-control" id="count">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="mb-3 d-flex flex-row align-items-center">
|
|
|
|
|
<label for="gameTime" class="form-label text-end" style="width: 180px">游戏时长(秒)：</label>
|
|
|
|
|
<input type="number" class="form-control" id="gameTime">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="mb-3 d-flex flex-row align-items-center">
|
|
|
|
|
<label for="directionScore" class="form-label text-end" style="width: 180px">动作种类：</label>
|
|
|
|
|
<input type="number" class="form-control" id="directionScore">
|
|
|
|
|
</div>
|
|
|
|
|
<div id="directionTable" class="d-none">
|
|
|
|
|
<p class="text-end" style="width: 112px">动作分值表</p>
|
|
|
|
|
<div id="directionDetail"></div>
|
|
|
|
|
<div class="mb-3 d-flex flex-row align-items-center position-relative">
|
|
|
|
|
<label for="actionSequences" class="form-label text-end" style="width: 180px">动作序列表：</label>
|
|
|
|
|
<input type="text" class="form-control" id="actionSequences">
|
|
|
|
|
<span class="position-absolute top-100 text-black-50" style="left: 140px;font-size: 12px;">每个动作之间用英文 , 隔开</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="modal-footer">
|
|
|
|
|
<button type="button" class="btn btn-secondary cancel" data-bs-dismiss="modal">取消</button>
|
|
|
|
|
<button id="submit" type="button" class="btn btn-primary">确定</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
