Skip to content

Instantly share code, notes, and snippets.

@alingogo
Created March 5, 2013 15:05
Show Gist options
  • Save alingogo/5090927 to your computer and use it in GitHub Desktop.
Save alingogo/5090927 to your computer and use it in GitHub Desktop.
自作デモ:じゃんけんゲーム(中国語)
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<style>
* {
font-family: Verdana, Arial, sans-serif;
}
a:link {
color:#000;
text-decoration: none;
}
a:visited {
color:#000;
}
a:hover {
color:#33F;
}
.center {
padding: 10px;
text-align: center;
}
.sidebyside {
display: inline-block;
width: 30%;
min-height: 40px;
text-align: left;
vertical-align: top;
}
</style>
<body>
<div class="center">
<div id="div_start">
<button id="start_button" onclick="startButton(event)">
<img alt="Start" id="start_img" src="https://www.google.com/intl/en/chrome/assets/common/images/content/mic.gif"/>
</button>
</div>
<div id="results"> <span class="final" id="final_span"></span> <span class="interim" id="interim_span"></span>
</div>
<div class="sidebyside">
<h2>me</h2>
<img id="image" src="http://pds.exblog.jp/pds/1/200704/17/29/a0040929_1933338.jpg"
height="150" />
</div>
<div class="sidebyside">
<h2>Bot</h2>
<img id="imagebot" src="http://pds.exblog.jp/pds/1/200704/17/29/a0040929_1933338.jpg"
height="150" />
</div>
<p id="result" font="20px"></p>
<div id="answer">
<h4>help</h4>
<p>点击麦克风图标,说“石头”,“剪刀”,“布”。然后系统会自动和Bot评判</p>
<p><a href="https://docs.google.com/spreadsheet/viewform?formkey=dEFLRWt5TFB5NkJqNWhac2VUdnBEdFE6MQ">Question</a>
</p>
</div>
</div>
</body>
<script>
var rpsman = [
["石头", "http://stat.ameba.jp/user_images/20100519/18/teltelbozz/02/72/g/t02200220_0334033410549134531.gif", 1],
["布", "http://next-ah.up.seesaa.net/image/paa-02.gif", 2],
["剪刀", "http://blogimg.goo.ne.jp/user_image/34/8f/836d3d889300e4b8ad87b0fb2d6853d5.png", 3]
];
var rpsbot = [
["http://stat.ameba.jp/user_images/20100519/18/teltelbozz/02/72/g/t02200220_0334033410549134531.gif"],
["http://next-ah.up.seesaa.net/image/paa-02.gif"],
["http://blogimg.goo.ne.jp/user_image/34/8f/836d3d889300e4b8ad87b0fb2d6853d5.png"]
];
var final_transcript = '';
var recognizing = false;
winlose = function(man, bot) {
if (man == bot) {
return "Draw";
} else {
if (man > bot) {
return "You Win";
} else {
if (man == 1 && bot == 3) {
return "You Win";
}
}
}
return "You Lose";
};
if (!('webkitSpeechRecognition' in window)) {
final_span.innerHTML = "please update to chrome 25";
} else {
var recognition = new webkitSpeechRecognition();
recognition.continuous = false;
recognition.interimResults = false; //true;
recognition.onresult = function(event) {
var interim_transcript = '';
//final_transcript = '';
if (typeof(event.results) == 'undefined') {
return;
}
for (var i = event.resultIndex; i < event.results.length; ++i) {
if (event.results[i].isFinal) {
final_transcript = event.results[i][0].transcript;
boo = true;
man = 2;
for (var i = 0; i < 3; ++i) {
if (final_transcript == rpsman[i][0]) {
image.src = rpsman[i][1];
man = rpsman[i][2];
boo = false;
}
}
if (boo) {
image.src = rpsman[1][1];
}
bot = Math.floor(Math.random() * 3 + 1)
imagebot.src = rpsbot[(bot - 1)][0];
resulte = winlose(man, bot);
//result.innerHTML = resulte;
recognition.onend = null;
recognition.stop();
start_img.src = "https://www.google.com/intl/en/chrome/assets/common/images/content/mic.gif";
alert(resulte);
} else {
interim_transcript += event.results[i][0].transcript;
}
}
//console.log(232);
interim_span.innerHTML = final_transcript;
};
recognition.onstart = function() {
recognizing = true;
start_img.src = 'http://www.google.com/intl/en/chrome/assets/common/images/content/mic-animate.gif';
};
recognition.onerror = function(event) {
console.log(event);
};
recognition.onaudiostart = function(event) { //console.log(1)
};
recognition.onsoundstart = function(event) { //console.log(2)
};
recognition.onspeechstart = function(event) { //console.log(3)
};
recognition.onspeechend = function(event) { //console.log(31)
};
recognition.onsoundend = function(event) { //console.log(21)
};
recognition.onaudioend = function(event) { //console.log(11)
};
recognition.onend = function() {
console.log(9);
recognizing = false;
start_img.src = "https://www.google.com/intl/en/chrome/assets/common/images/content/mic.gif";
};
}
function startButton(event) {
//if (recognizing) {
// recognizing = false;
// recognition.stop();
// start_img.src = "https://www.google.com/intl/en/chrome/assets/common/images/content/mic.gif";
// return;
// }
console.log(32432);
recognition.lang = "cmn-Hans-CN";
console.log(recognition);
recognition.start();
}
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment