jQuery猜拳小游戏-石头剪刀布游戏代码

来源:https://www.sucaihuo.com/js/2922.html 2017-09-05 17:01浏览(1209) 收藏

一款jQuery猜拳小游戏-石头剪刀布游戏代码,右边的5个手势可以自由点击出拳(结构立即显示在手势上面),左边会有电脑的出拳和所有历史记录,胜负比分等在右边最下面罗列显示出来。
jQuery猜拳小游戏-石头剪刀布游戏代码
分类:游戏 > 益智 难易:初级
查看演示 下载资源 下载积分: 20 积分

页面的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);
	}
});
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2