Skip to content

Instantly share code, notes, and snippets.

@vivirenremoto
Created October 2, 2011 14:33
Show Gist options
  • Save vivirenremoto/1257505 to your computer and use it in GitHub Desktop.
Save vivirenremoto/1257505 to your computer and use it in GitHub Desktop.
piedra, papel, tijeras con voz html5
<!DOCTYPE html>
<html>
<head>
<title>¡piedra, papel, tijeras con voz con html5!</title>
<meta charset="utf-8"/>
</head>
<body>
<style>
*{font-family:arial;font-size:20px;text-align:center}
b{font-size:40px}
.wrap{width:350px;margin:auto;margin-top:200px}
.score{float:left;font-size:20px;margin-left:60px}
.clear{clear:both}
H1{padding-bottom:30px}
</style>
<div class="wrap">
<h1>piedra, papel, tijeras con voz con html5 by @miquelcamps</h1>
<div class="score">
victorias<br/>
<b id="val_win">0</b>
</div>
<div class="score">
derrotas<br/>
<b id="val_fail">0</b>
</div>
<br class="clear"/><br/>
¿que eliges piedra, papel o tijeras?<br/>
<input id="me" type="text" x-webkit-speech onwebkitspeechchange="newGame(this.value);" />
<br/><br/>
<b id="txt_result"></b>
</div>
<script>
var posibilidades = ['piedra','papel','tijera']
var win = 0;
var fail = 0;
function newGame(me){
random = Math.floor(Math.random()*3);
bot = posibilidades[random];
if( me == 'apple' ) me = 'papel';
var result = 0;
var encontrado = false;
var i = 0;
while( i < posibilidades.length && !encontrado ){
encontrado = ( me.indexOf(posibilidades[i]) == 0 );
i++;
}
if( encontrado ){
document.getElementById('txt_result').innerHTML = '<span style="color:blue">tu:' + me + '</span> vs <span style="color:red">bot:' + bot+'</span>';
if( me && me != bot ){
if( me.indexOf('papel') == 0 && bot == 'piedra' ){
result = 1;
}else if( me.indexOf('piedra') == 0 && bot == 'tijera' ){
result = 1;
}else if( me.indexOf('tijera') == 0 && bot == 'papel' ){
result = 1;
}
if( result ){
win++;
}else{
fail++;
}
document.getElementById('val_win').innerHTML = win;
document.getElementById('val_fail').innerHTML = fail;
}
}else{
document.getElementById('txt_result').innerHTML = 'partida no valida';
}
document.getElementById('me').value = '';
document.getElementById('me').focus();
}
document.getElementById('me').focus();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment