jQuery石頭剪刀布猜拳游戲特效代碼下載



7 26 9



特效描述:jQuery 石頭剪刀布 猜拳游戲,jQuery石頭剪刀布猜拳游戲特效代碼下載

代碼結構

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">

2. 引入JS

<script src="js/jquery.min.js"></script>
<script src="js/simplebar.min.js"></script>

3. HTML代碼

<section>
	<button id="rock" data-play="rock"><i class="fa fa-hand-rock-o"></i><span>Rock</span></button>
	<button id="paper" data-play="paper"><i class="fa fa-hand-paper-o"></i><span>Paper</span></button>
	<button id="scissors" data-play="scissors"><i class="fa fa-hand-scissors-o"></i><span>Scissors</span></button>
	<button id="lizard" data-play="lizard"><i class="fa fa-hand-lizard-o"></i><span>Lizard</span></button>
	<button id="spock" data-play="spock"><i class="fa fa-hand-spock-o"></i><span>Spock</span></button>
	<div class="result"></div>
</section>
<aside>
	<div class="legend">
		<div class="me">
			<div>Me</div>
		</div>
		<div class="cpu">
			<div>CPU</div>
		</div>
	</div>
	<div class="scoreboard">
		<div class="win">
			<span>0</span>
			<div>wins</div>
		</div>
		<div class="tie">
			<span>0</span>
			<div>ties</div>
		</div>
		<div class="loss">
			<span>0</span>
			<div>losses</div>
		</div>
		<div class="move">
			<span>0</span>
			<div>total</div>
		</div>
	</div>
</aside>
<script>
$(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 = {};
	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('<div class="animated fadeOutUp">' + $message + '</div>');
	});
	function play($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 = 'tied with ' + $selection;
			$moveCount++;
			$tieCount++;
			recordScore('tie', $selection, $cpuPlays);
			return 'tie';
		}
		// Check if player won
		if($winners[$cpuPlays].indexOf($selection) == -1) {
			$message = $selection + ' beat ' + $cpuPlays;
			$moveCount++;
			$winCount++;
			recordScore('win', $selection, $cpuPlays);
			return 'win';
		}
		// Check if CPU won
		if($winners[$selection].indexOf($cpuPlays) == -1) {
			$message = $selection + ' lost against ' + $cpuPlays;
			$moveCount++;
			$lossCount++;
			recordScore('loss', $selection, $cpuPlays);
			return 'loss';
		}
		return 'none';
	}
	function randomPlay($arr) {
		return $arr[Math.floor(Math.random() * $arr.length)];
	}
	function recordScore($type, $player, $cpu) {
		$('aside').prepend('<div class="history-item ' + $type + '"><i class="fa fa-hand-' + $player + '-o"></i><i class="fa fa-hand-' + $cpu + '-o"></i></div>');
		$('.scoreboard .win span').text($winCount);
		$('.scoreboard .tie span').text($tieCount);
		$('.scoreboard .loss span').text($lossCount);
		$('.scoreboard .move span').text($moveCount);
	}
});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 小游戲 H5游戲 游戲源碼 手機游戲 微信游戲 網頁游戲 其他游戲 其他h5游戲 其他h5源碼游戲
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

林肯娱乐怎么赚钱