jQuery石头剪刀布猜拳网页小游戏
工具/原料
adobedreamweaver
方法/步骤
1、新建html文档。
2、书写hmtl代码。<section><buttonid="rock"data-play="rock"><iclass="fafa-hand-rock-o"></i><span>Rock</span></button><buttonid="paper"data-play="paper"><iclass="fafa-hand-paper-o"></i><span>Paper</span></button><buttonid="scissors"data-play="scissors"><iclass="fafa-hand-scissors-o"></i><span>Scissors</span></button><buttonid="lizard"data-play="lizard"><iclass="fafa-hand-lizard-o"></i><span>Lizard</span></button><buttonid="spock"data-play="spock"><iclass="fafa-hand-spock-o"></i><span>Spock</span></button><divclass="result"></div></section><aside><divclass="legend"><divclass="me"><div>Me</div></div><divclass="cpu"><div>CPU</div></div></div><divclass="scoreboard"><divclass="win"><span>0</span><div>wins</div></div><divclass="tie"><span>0</span><div>ties</div></div><divclass="loss"><span>0</span><div>losses</div></div><divclass="move"><span>0</span><div>total</div></div></div></aside>
3、书写css代码跷孳岔养。<style>html{background-color:#ecee髫潋啜缅ef;min-height:100%;}html*{outline:0;}section{height:120px;width:600px;position:absolute;top:50%;left:50%;background-color:#fff;padding:10px;margin-top:-100px;margin-left:-210px;border-radius:6px;box-shadow:04px6pxrgba(50,50,93,0.11),01px3pxrgba(0,0,0,0.08);}sectionbutton{background:0;border:0;height:120px;width:20%;float:left;}sectionbutton.fa{font-size:80px;display:block;margin-bottom:20px;}sectionbutton.win{color:#15a015;}sectionbutton.loss{color:#ff1515;}sectionbutton.tie{color:#1515ff;}section.result{position:absolute;text-align:center;font-size:28px;height:40px;color:#fff;top:-40px;right:0;left:0;}section.result.animated{-webkit-animation-duration:1.7s;animation-duration:1.7s;}aside{box-shadow:rgba(0,0,0,0.2)02px4px;background-color:#e9eaed;padding-top:50px;padding-bottom:50px;position:fixed;width:200px;bottom:0;left:0;top:0;}aside.legend{position:fixed;top:0;left:0;right:0;width:200px;background-color:#fff;height:50px;border-top:1pxsolidrgba(0,0,0,0.1);}aside.legend.me,aside.legend.cpu{height:40px;line-height:40px;font-size:14px;width:50%;float:left;text-align:center;padding:0.3rem0;}aside.history-item{height:40px;font-size:24px;line-height:40px;border-bottom:1pxsolidrgba(0,0,0,0.1);}aside.history-item.win{background-color:rgba(0,150,0,0.1);}aside.history-item.loss{background-color:rgba(150,0,0,0.1);}aside.history-item.tie{background-color:rgba(0,0,150,0.1);}aside.history-item.fa{text-align:center;width:50%;}aside.scoreboard{position:fixed;bottom:0;left:0;right:0;width:200px;background-color:#fff;height:50px;border-top:1pxsolidrgba(0,0,0,0.1);}aside.scoreboard.win,aside.scoreboard.loss,aside.scoreboard.tie,aside.scoreboard.move{height:40px;line-height:20px;font-size:11px;width:25%;float:left;text-align:center;padding:0.3rem0;}</style>
4、书写并添加js蜣贺鱿柢代码。<scriptsrc="js/jquery.min.js"></script><scripts鸡堕樱陨rc="js/simplebar.min.js"></script><script>$(document).ready(function(e){ var$rps=false;//Defaulttotrue var$options; var$message; var$winCount=0; var$lossCount=0; var$tieCount=0; var$moveCount=0; var$history={}; if($rps==true){ $options=['rock','paper','scissors']; }else{ $options=['rock','paper','scissors','lizard','spock']; } $('button').click(function(e){ var$this=$(this); var$selection=$this.data('play'); var$play=play($selection); $('button').removeClass(); $this.addClass($play); $('.result').empty().html('<divclass="animatedfadeOutUp">'+$message+'</div>'); }); functionplay($selection){ var$winners={ rock:['scissors','lizard'], paper:['rock','spock'], scissors:['paper','lizard'], lizard:['spock','paper'], spock:['rock','scissors'] } var$cpuPlays=randomPlay($options); // console.log('CPU:'+$cpuPlays,'Player:'+$selection); if($selection===$cpuPlays){ $message='tiedwith'+$selection; $moveCount++; $tieCount++; recordScore('tie',$selection,$cpuPlays); return'tie'; } //Checkifplayerwon if($winners[$cpuPlays].indexOf($selection)==-1){ $message=$selection+'beat'+$cpuPlays; $moveCount++; $winCount++; recordScore('win',$selection,$cpuPlays); return'win'; } //CheckifCPUwon if($winners[$selection].indexOf($cpuPlays)==-1){ $message=$selection+'lostagainst'+$cpuPlays; $moveCount++; $lossCount++; recordScore('loss',$selection,$cpuPlays); return'loss'; } return'none'; } functionrandomPlay($arr){ return$arr[Math.floor(Math.random()*$arr.length)]; } functionrecordScore($type,$player,$cpu){ $('aside').prepend('<divclass="history-item'+$type+'"><iclass="fafa-hand-'+$player+'-o"></i><iclass="fafa-hand-'+$cpu+'-o"></i></div>'); $('.scoreboard.winspan').text($winCount); $('.scoreboard.tiespan').text($tieCount); $('.scoreboard.lossspan').text($lossCount); $('.scoreboard.movespan').text($moveCount); }});</script>
5、代码整体结构。
6、查看效果。
