186 lines
5.7 KiB
HTML
186 lines
5.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<script src="https://cjrtnc.leaningtech.com/2.3/loader.js"></script>
|
|
<style>
|
|
*{
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.popwindow {
|
|
width:500px;
|
|
height:550px;
|
|
border:3px solid #ff928e;
|
|
visibility: hidden;
|
|
position: absolute;
|
|
z-index: 999;
|
|
opacity: 1;
|
|
overflow: hidden;
|
|
background-color: white;
|
|
text-align: center;
|
|
margin-top: 10%;
|
|
margin-left: 35%;
|
|
border-radius: 10px;
|
|
}
|
|
.leftInfoBlock{
|
|
margin-top: 20px;
|
|
height: 180px;
|
|
background: #f1a087;
|
|
}
|
|
.leftInfo {
|
|
width: 90%;
|
|
top: 20px;
|
|
position:absolute;
|
|
background: #f7a2a2;
|
|
}
|
|
.rightQuery{
|
|
width: 10%;
|
|
left: 90%;
|
|
height: 400px;
|
|
top: 20px;
|
|
position:absolute;
|
|
background: #a19cee;
|
|
}
|
|
.circleButton{
|
|
align-items: center;
|
|
border-radius:50%;
|
|
border: none
|
|
}
|
|
.pararadio{
|
|
height: 20%;
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
<div id="replayWindow" class="popwindow">
|
|
<div id="replayWindowGame">
|
|
</div>
|
|
<div align="center"><button onClick="closeReplayWindow()">Close Window</button></div>
|
|
</div>
|
|
|
|
|
|
|
|
<body>
|
|
<div class = "leftInfo">
|
|
<div class = "leftInfoBlock">
|
|
<h3 align = "center"> Game 1</h3>
|
|
<img src="../levels/test1.png" width="100%" >
|
|
<div align="center"><button onClick="Replay('test1')">Replay Game1</button></div>
|
|
</div>
|
|
|
|
<div class = "leftInfoBlock">
|
|
<h3 align = "center"> Game 2</h3>
|
|
<img src="../levels/test2.png" width="100%" >
|
|
<div align="center"><button onClick="Replay('test2')">Replay Game2</button></div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
//The Funtions
|
|
function closeReplayWindow(){
|
|
var replayWindow=document.getElementById("replayWindow");
|
|
replayWindow.style.visibility = 'hidden';
|
|
}
|
|
function Replay(id){
|
|
var replayWindow=document.getElementById("replayWindow");
|
|
replayWindow.style.visibility = 'visible';
|
|
cjCall("Play", "replayGameMain", id, id);
|
|
}
|
|
function getValue(){
|
|
var radio = document.getElementsByName("gameRadio");
|
|
for (i=0; i<radio.length; i++) {
|
|
if (radio[i].checked) {
|
|
alert(radio[i].value)
|
|
}
|
|
}
|
|
}
|
|
function PostToServer(data) {
|
|
var httpRequest = new XMLHttpRequest();//第一步：建立所需的对象
|
|
httpRequest.open("POST",""); //调用AddDataToServer
|
|
httpRequest.setRequestHeader("Content-Type", "application/json"); //设置请求头信息
|
|
httpRequest.onreadystatechange = function () {
|
|
if (httpRequest.readyState == 4 && httpRequest.status == 200) {
|
|
//alert('添加成功');
|
|
}
|
|
}
|
|
httpRequest.send(JSON.stringify(data)); //设置为发送给服务器数据
|
|
}
|
|
window.onload=function(){
|
|
closeReplayWindow();
|
|
}
|
|
</script>
|
|
<script>
|
|
cheerpjInit();
|
|
var divElement = document.getElementById("replayWindowGame");
|
|
cheerpjCreateDisplay(500,500,divElement);
|
|
cheerpjRunMain("Play", "/app/Mario-AI-Interface.jar", "0", "f_l");
|
|
closeReplayWindow();
|
|
</script>
|
|
</div>
|
|
<div class = "rightQuery">
|
|
<!-- <button class = "circleButton" style = "width: 100px; height: 100px;"></button>
|
|
<button class = "circleButton" style = "width: 60px; height: 60px;"></button>
|
|
<button class = "circleButton" style = "width: 40px; height: 40px;"></button>
|
|
<button class = "circleButton" style = "width: 60px; height: 60px;"></button>
|
|
<button class = "circleButton" style = "width: 100px; height: 100px;"></button> -->
|
|
<fieldset style="height: 100%;" >
|
|
<legend align="center" height = 30px >Fun</legend>
|
|
|
|
<div class = "pararadio">
|
|
<input type="radio" value="1-2" name="fun">
|
|
<label for="gameRadio">Game1 Better</label>
|
|
</div>
|
|
|
|
<div class = "pararadio">
|
|
<input type="radio" value="1-1" name="fun">
|
|
<label for="gameRadio">Game1 Good</label>
|
|
</div>
|
|
|
|
<div class = "pararadio">
|
|
<input type="radio" value="0-0" name="fun">
|
|
<label for="gameRadio">Equal</label>
|
|
</div>
|
|
|
|
<div class = "pararadio">
|
|
<input type="radio" value="2-1" name="fun">
|
|
<label for="gameRadio">Game2 Good</label>
|
|
</div>
|
|
|
|
<div class = "pararadio">
|
|
<input type="radio" value="2-2" name="fun">
|
|
<label for="gameRadio">Game2 Better</label>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<script>
|
|
function getRadioValue(){
|
|
var obj = document.getElementsByName("fun");
|
|
for(var i=0; i<obj.length; i ++){
|
|
if(obj[i].checked){
|
|
PostToServer(obj[i].value);
|
|
alert(obj[i].value);
|
|
}
|
|
}
|
|
// var radio = document.getElementsByName("gameRadio");
|
|
// var addressID = $("input[name='sex']:checked").val();
|
|
// alert(addressID)
|
|
|
|
}
|
|
</script>
|
|
<button onclick="getRadioValue()"> Submit </button>
|
|
|
|
|
|
</div>
|
|
|
|
</body>
|
|
|
|
|
|
|
|
</html> |