Browse Source

添加配置表

master
song 4 years ago
parent
commit
d3a9028ff4
  1. 64
      public/index.html
  2. 101
      src/dom.js
  3. 5
      src/index.js

64
public/index.html

@ -11,6 +11,7 @@
<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>
@ -36,8 +37,6 @@
</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>
@ -51,6 +50,67 @@
<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-center">动作分值表</p>
<div id="directionDetail"></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>

101
src/dom.js

@ -87,7 +87,6 @@ export function handlePlayCodeButtons() {
actionButtons.forEach(item => {
item.addEventListener('click', function () {
const { code } = item.dataset;
sendMessage('play', code);
})
})
@ -156,3 +155,103 @@ export function changeButtonsDisplay(eventType) {
function $id(id) {
return document.getElementById(id);
}
// 弹出配置表
export function openSettingTable() {
var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')
myModal.addEventListener('click', function () {
myInput.style.display = "block"
})
}
// 配置参数
export function submitSetting(){
var submit = document.getElementById("submit")
var gameModes = document.getElementsByName("gameMode")
var difficulties = document.getElementsByName("difficulty")
gameModes.forEach(mode => {
mode.addEventListener('click', function () {
game.mode = mode.value - 0;
})
})
difficulties.forEach(item => {
item.addEventListener('click', function () {
game.level = item.value - 0;
})
})
var totalTimes = document.getElementById("totalTimes")
var totalScore = document.getElementById("totalScore")
var count = document.getElementById("count")
var gameTime = document.getElementById("gameTime")
var directionScore = document.getElementById("directionScore")
var directionTable = document.getElementById("directionTable")
directionScore.addEventListener("blur", function(){
directionTable.classList.remove('d-none');
setDirection(directionScore.value - 0)
if(!directionScore.value || directionScore.value === '0'){
directionTable.classList.add('d-none');
}
})
submit.addEventListener('click', function () {
game.totalTimes = totalTimes.value - 0
game.totalScore = totalScore.value - 0
game.count = count.value - 0
game.gameTime = gameTime.value - 0
setScores()
myInput.style.display = "none"
setDefaultStyle()
})
}
// 动作分支表
export function setDirection(value){
let directionDetail = document.getElementById("directionDetail")
let str = ''
for (let i = 0; i < value; i++) {
str += `
<div class="mb-3 d-flex flex-row align-items-center">
<div style="width: 130px">动作${ i + 1 }</div>
<input placeholder="动作次数" type="number" class="form-control ms-3 directionTimes">
<input placeholder="动作分值" type="number" class="form-control ms-3 directionScores">
</div>
`
}
directionDetail.innerHTML = str
}
// 设置动作分支表
export function setScores(){
game.scores = []
game.directions = []
var directionTimes = document.getElementsByClassName("directionTimes")
var directionScores = document.getElementsByClassName("directionScores")
for (let i = 0; i < directionScores.length; i++) {
const score = directionScores[i];
const item = {
direction: 0, score: 0
}
item.direction = i
item.score = score.value - 0
game.scores.push(item)
}
for (let time = 0; time < directionTimes.length; time++) {
const item = directionTimes[time].value - 0
for (let j = 0; j < item; j++) {
game.directions.push(time)
}
}
}
// 取消配置
export function cancelSetting(){
var cancel = document.getElementsByClassName("cancel")
for (let i = 0; i < cancel.length; i++) {
const item = cancel[i];
item.addEventListener('click', function () {
myInput.style.display = "none"
})
}
}

5
src/index.js

@ -1,4 +1,4 @@
import { setDefaultStyle, handleEventButtons, handlePlayCodeButtons,handleLevelButtons,handleModeButtons } from "./dom";
import { setDefaultStyle, handleEventButtons, handlePlayCodeButtons,handleLevelButtons,handleModeButtons, openSettingTable,submitSetting,cancelSetting } from "./dom";
import { onMessage, setFrameStyle } from "./frame";
window.addEventListener('load', init, false)
@ -14,8 +14,11 @@ function init() {
// 初始化dom 正式程序不需要 就删除掉
function initDom() {
setDefaultStyle(); // 设置 等级/模式的默认样式
openSettingTable(); // 配置表
handleLevelButtons(); // 点击切换等级
handleModeButtons(); // 点击切换模式
handleEventButtons(); // 按钮绑定事件
handlePlayCodeButtons(); // 事件play code 绑定事件
submitSetting(); // 提交配置表
cancelSetting(); // 取消配置表
}

Loading…
Cancel
Save