2018 ソフトウェア設計及び演習用の班Wiki
18::gr08::脱落後の画面
@datsuraku_result.html
脱落したプレイヤーは、他プレイヤーの役職が開示される。
また、ミニゲームも遊ぶことができる。
-
function inqury
全プレイヤーの役職が開示する - function addMessage (msg)
まだ生存しているプレイヤーのチャット表示 - function resultMessage (msg)
脱落者の画面も結果画面に遷移しなければならないので、
あかずきん陣営が勝利した場合チャットにaが表示され、あかずきん陣営勝利画面へ遷移
ウルフ陣営が勝利した場合チャットにwが表示され、ウルフ陣営勝利画面へ遷移する
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="datsuraku.css" type="text/css">
<link rel="stylesheet" href="moji.css" type="text/css">
<link rel="stylesheet" href="chat.css" type="text/css">
<link rel="stylesheet" href="play-day-background.css" type="text/css">
<link rel="stylesheet" href="button.css" type="text/css">
<script src="jquery-3.3.1.min.js"></script>
<meta charset="utf-8" />
<title>脱落</title>
</head>
<body>
<center>
<br><br><br>
<h1>脱落者の部屋</h1>
<span class="example">
<img src="" id="img1" alt="">
<p id="text1"></p>
</span>
<span class="example">
<img src="" id="img2" alt="">
<p id="text2"></p>
</span>
<span class="example">
<img src="" id="img3" alt="">
<p id="text3"></p>
</span>
<span class="example">
<img src="" id="img4" alt="">
<p id="text4"></p>
</span>
<span class="example">
<img src="" id="img5" alt="">
<p id="text5"></p>
</span>
<span class="example">
<img src="" id="img6" alt="">
<p id="text6"></p>
</span>
<span class="example">
<img src="" id="img7" alt="">
<p id="text7"></p>
</span>
<span class="example">
<img src="" id="img8" alt="">
<p id="text8"></p>
</span>
<span class="example">
<img src="" id="img9" alt="">
<p id="text9"></p>
</span>
<span class="example">
<img src="" id="img10" alt="">
<p id="text10"></p>
</span>
</center>
<center>
<p><a href="minigame.html" class="square_btn" target="_blank" style="position: ;top: 250px" >ミニゲーム</a></p>
<p><a href="canpas.html" class="square_btn" target="_blank" style="position: ;top: 250px" >ひとりでお絵かき</a></p>
<p><a href="canpas2.html" class="square_btn" target="_blank" style="position: ;top: 250px" >みんなでお絵かき</a></p>
</center>
<div class="blocka">
<div class="box1" id="area">
<div id="msg"></div></div>
<script src="/socket.io/socket.io.js"></script>
<script type="text/javascript">
var socketio = io.connect();
var jobpict = [ "../data/aka.png" ,//あか
"../data/pan.png" ,//ぱん
"../data/esper.png" ,//えすぱー
"../data/ghost.png" ,//ごーすと
"../data/super.png" ,//スーパー
"../data/psycho.png" ,//サイコ
"../data/wolf.png" //ウルフ
];
var img = [ "img1" ,
"img2" ,
"img3" ,
"img4" ,
"img5" ,
"img6" ,
"img7" ,
"img8" ,
"img9" ,
"img10" ,
];
var text = [ "text1" ,
"text2" ,
"text3" ,
"text4" ,
"text5" ,
"text6" ,
"text7" ,
"text8" ,
"text9" ,
"text10" ,
];
function inqury(){
socketio.emit("UJinfo_inqury",0);
}
socketio.on("UJinfo_respons" , function(data){
var UInfo = [];
var Uinfo = [{},{},{},{},{},{},{},{},{},{}];
var users =0;
var i=0;
UInfo = data.value.split(",");
for(var j=0;j<10;j++){
if(UInfo[i] == "undefined"){
users = j;
break;
}
Uinfo[j].name = UInfo[i];
Uinfo[j].job = UInfo[i+1];
console.log(Uinfo[j].name);
console.log(Uinfo[j].job);
i+=2;
}
console.log(users);
for(var i=0; i<users; i++){
document.getElementById(text[i]).innerHTML = " " + Uinfo[i].name + " ";
document.getElementById(img[i]).src = jobpict[Uinfo[i].job-1];
}
});
socketio.on("connected", function(name) {});
socketio.on("s_to_c", function (data) { addMessage(data.value);});
socketio.on("leftout", function (data) { resultMessage(data.value) });
socketio.on("disconnect", function () {});
function addMessage (msg) {
var domMeg = document.createElement('div');
domMeg.innerHTML = new Date().toLocaleTimeString() + ' ' + msg;
msgArea.appendChild(domMeg);
$('#area').animate({scrollTop: $('#area')[0].scrollHeight}, 'fast');
}
var msgArea = document.getElementById("msg");
$( "#msg_input" ).keypress( function ( e ) {
if ( e.which == 13 ) {
publishMessage();
return false;
}
});
function resultMessage (msg) {
if (msg=="a"){
window.location='win_human.html';
}
else if(msg=="w"){
window.location='win_wolf.html';
}
}
inqury();
</script>
</body>
</html>
最終更新日：2018/08/08 17:07:21
