一款jQuery猜拳小游戏-石头剪刀布游戏代码,右边的5个手势可以自由点击出拳(结构立即显示在手势上面),左边会有电脑的出拳和所有历史记录,胜负比分等在右边最下面罗列显示出来。
页面的head部分,需引入页面元素的样式文件、图标字体库、jQuery库和一个JS文件,代码如下:
<link type="text/css" rel="stylesheet" href="css/style.css"/>
<link type="text/css" rel="stylesheet" href="css/font-awesome.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/simplebar.min.js"></script>
页面的body部分,需设置好左边的记录得分和右边的手势按钮列表的容器,代码如下:
<section>
<button id="rock" data-play="石头"><i class="fa fa-hand-rock-o"></i><span>石头</span></button>
<button id="paper" data-play="布"><i class="fa fa-hand-paper-o"></i><span>布</span></button>
<button id="scissors" data-play="剪刀"><i class="fa fa-hand-scissors-o"></i><span>剪刀</span></button>
<button id="lizard" data-play="蝎子手"><i class="fa fa-hand-lizard-o"></i><span>蝎子手</span></button>
<button id="spock" data-play="星际手"><i class="fa fa-hand-spock-o"></i><span>星际手</span></button>
<div class="result"></div>
</section>
<aside>
<div class="legend">
<div class="me">
<div>我</div>
</div>
<div class="cpu">
<div>电脑</div>
</div>
</div>
<div class="scoreboard">
<div class="win">
<span>0</span>
<div>胜</div>
</div>
<div class="tie">
<span>0</span>
<div>平</div>
</div>
<div class="loss">
<span>0</span>
<div>负</div>
</div>
<div class="move">
<span>0</span>
<div>回</div>
</div>
</div>
</aside>
页面的底部,设置好手势点击的事件响应和对应样式效果,代码如下:
$(document).ready(function(e) {
var $rps = false; // Default to true
var $options;
var $message;
var $winCount = 0;
var $lossCount = 0;
var $tieCount = 0;
var $moveCount = 0;
var $history = {};
var $fa = ['rock', 'paper', 'scissors', 'lizard', 'spock'];
if ($rps == true) {
$options = ['石头', '布', '剪刀'];
} else {
$options = ['石头', '布', '剪刀', '蝎子手', '星际手'];
}
$('button').click(function(e) {
var $this = $(this);
var $selection = $this.data('play');
var $play = play($selection);
$('button').removeClass();
$this.addClass($play);
$('.result').empty().html('<div class="animated fadeOutUp">' + $message + '</div>');
});
function play($selection) {
var $winners = {
'石头': ['剪刀', '蝎子手'],
'布': ['石头', '星际手'],
'剪刀': ['布', '蝎子手'],
'蝎子手': ['星际手', '布'],
'星际手': ['石头', '剪刀']
}
var $cpuPlays = randomPlay($options);
// console.log('CPU: ' + $cpuPlays, 'Player: ' + $selection);
if ($selection === $cpuPlays) {
$message = $selection + ' 平 ' + $cpuPlays;
$moveCount++;
$tieCount++;
recordScore('tie', $selection, $cpuPlays);
return 'tie';
}
// Check if player won
if($winners[$cpuPlays].indexOf($selection) == -1) {
$message = $selection + ' 赢 ' + $cpuPlays;
$moveCount++;
$winCount++;
recordScore('win', $selection, $cpuPlays);
return 'win';
}
// Check if CPU won
if($winners[$selection].indexOf($cpuPlays) == -1) {
$message = $selection + ' 负 ' + $cpuPlays;
$moveCount++;
$lossCount++;
recordScore('loss', $selection, $cpuPlays);
return 'loss';
}
return 'none';
}
function randomPlay($arr) {
return $arr[Math.floor(Math.random() * $arr.length)];console.log();
}
function recordScore($type, $player, $cpu) {
$('aside').prepend('<div class="history-item ' + $type + '"><i class="fa fa-hand-' + $fa[$options.indexOf($player)] + '-o"></i><i class="fa fa-hand-' + $fa[$options.indexOf($cpu)] + '-o"></i></div>');
$('.scoreboard .win span').text($winCount);
$('.scoreboard .tie span').text($tieCount);
$('.scoreboard .loss span').text($lossCount);
$('.scoreboard .move span').text($moveCount);
}
});
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791