HTML5石头剪刀布手机端小游戏代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 HTML5石头剪刀布手机端小游戏代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="msapplication-tap-highlight" content="no">
<title>HTML5石头剪刀布手机端小游戏代码</title>
<link rel='stylesheet prefetch' href='css/font-awesome.min.css'>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body ng-app="app" ng-controller="ctrl">

<main class="column" style="background-image: {{b}}">

<article class="column">
  <div class="flip-container" ng-class="{'flip-me': answered}">
	<div class="flipper">
	  <div class="front">
		<div class="chip bg-light">
		  <span class="fa fa-hand-spock-o fa-fw ghost"></span>
		</div>
	  </div>
	  <div class="back">
		<div class="chip bg-light">
		  <span class="fa fa-hand-{{splashIcon}}-o fa-fw"></span>
		</div>
	  </div>
	</div>
  </div>

  <div class="answers row around" ng-class="{'ghost': spocked}">
	<div class="column align-center">
	  <div class="chip" ng-class="uiSetMoveClasses('rock', 1)" ng-click="uiPlay('rock')">
		<span class="fa fa-hand-rock-o fa-fw fa-2x"></span>
	  </div>
	</div>
	<div class="column align-center">
	  <div class="chip" ng-class="uiSetMoveClasses('paper', 2)" ng-click="uiPlay('paper')">
		<span class="fa fa-hand-paper-o fa-fw fa-2x"></span>
	  </div>
	</div>
	<div class="column align-center">
	  <div class="chip" ng-class="uiSetMoveClasses('scissors', 3)" ng-click="uiPlay('scissors')">
		<span class="fa fa-hand-scissors-o fa-fw fa-2x"></span>
	  </div>
	</div>
  </div>

  <footer class="row around">
	<div>
	  <span class="ghost">Me</span>
	  <h1>{{score.me}}</h1>
	</div>
	<div>
	  <span class="ghost">Spock</span>
	  <h1>{{score.spock}}</h1>
	</div>
  </footer>

</article>

<div class="message-wrap content {{answered}}" ng-class="{'show': answered}">
  <div class="message row align-center" ng-click="uiPlayAgain()" ng-class="{'bg-warning': spocked, 'bg-info': winner==='tie','bg-success': winner=='me','bg-alert': winner=='spock'}">
	<div class="text">{{message}}</div>
	<div class="chip beacon-1">
	  <span class="fa fa-3x fa-refresh"></span>
	</div>
  </div>
</div>
</main>
<script src='js/angular.min.js'></script>
<script src='js/underscore-min.js'></script>
<script src="js/main.js"></script>
</body>
</html>

JS代码(main.js):

(function($angular,_){
	'use strict';
	var _prefix = 'hullabaloo';
	var _p1 = 'me';
	var _p2 = 'spock';
	var randum = function(max){
	return Math.round(Math.random() * max);
}
var hexify = function(x){
	return ('0' + parseInt(x).toString(16)).slice(-2);
}
var randex = function(){
	return '#' + hexify(randum(255)) + hexify(randum(255)) + hexify(randum(255));
}
;
	var blender = function(){
	if (!!Math.round(Math.random())){
	return 'radial-gradient(circle at ' + randum(100) + '% ' + randum(100) + '%,' + randex() + ',' + randex() + ')';
}
else{
	return 'linear-gradient(' + randum(360) + 'deg,' + randex() + ',' + randex() + ')';
}
}
;
	$angular.module('app',[]) .run(['StorageService',function(storage){
	var data = storage.get(_prefix);
	if (!data){
	storage.save(_prefix,{
	me:0,spock:0}
);
}
}
]) .controller('ctrl',['$scope','$timeout','StorageService',function($scope,$timeout,storage){
	var splashIconArray = [];
	splashIconArray = _.flatten(_.times(29,function(i){
	var _arr = ['rock','paper','scissors'];
	if (i % 9 === 0){
	_arr.push('spock');
}
return _arr;
}
));
	var init = function(){
	$scope.spocked = false;
	$scope.answered = false;
	$scope.score = storage.get(_prefix);
	$scope.b = blender();
}
;
	var _recordScore = function(winner){
	var _myScore = parseInt($scope.score.me),_spockScore = parseInt($scope.score.spock),_prefs;
	if (winner === _p1){
	_myScore = parseInt($scope.score.me) + 1;
}
if (winner === _p2){
	_spockScore = parseInt($scope.score.spock) + 1;
}
var _score ={
	me:_myScore,spock:_spockScore}
;
	storage.save(_prefix,_score);
	return _score;
}
;
	$scope.uiPlay = function(hand){
	if ($scope.answered){
	return;
}
var _winner = false;
	var message = '';
	$scope.splashIcon = splashIconArray[_.random(0,splashIconArray.length - 1)];
	$scope.answered = hand;
	if ($scope.splashIcon === 'spock'){
	$scope.spocked = true;
	_winner = _p2;
	message = 'You\'ve been Spock\'d';
}
else{
	if (hand === $scope.splashIcon){
	_winner = 'tie';
	message = 'It\'s a tie!';
}
else{
	if (hand === 'rock' && $scope.splashIcon === 'scissors' || hand === 'scissors' && $scope.splashIcon === 'paper' || hand === 'paper' && $scope.splashIcon === 'rock'){
	_winner = _p1;
	message = 'You won!';
}
else{
	_winner = _p2;
	message = 'You lost.';
}
}
}
if (_winner !== 'tie'){
	$scope.score = _recordScore(_winner);
}
$scope.winner = _winner;
	$scope.message = message;
}
;
	$scope.uiSetMoveClasses = function(hand,n){
	var classes = [];
	if ($scope.answered === hand){
	classes.push('bg-dark');
	classes.push('answered');
	if ($scope.winner === _p1){
	classes.push('winner');
}
}
else if (!$scope.answered){
	classes.push('bg-light');
	classes.push('beacon-' + n);
}
return classes.join(' ');
}
;
	$scope.uiPlayAgain = function(){
	init();
}
;
	init();
}
]) .factory('StorageService',[function(){
	// get item out of local storage and if it's a string,turn it into a json object var get = function(key){
	var item = window.localStorage.getItem(key);
	if (item && _.isString(item) && _.isEmpty(item) === false){
	return $angular.fromJson(item);
}
else{
	return item;
}
}
;
	// save object as a json string var save = function(key,data){
	window.localStorage.setItem(key,$angular.toJson(data));
}
;
	// remove a specific item var remove = function(key){
	window.localStorage.removeItem(key);
}
;
	// blow them all away var clearAll = function(){
	window.localStorage.clear();
}
;
	// Return array of keys for local storage // Example use:var keys = StorageService.keys() var keys = function(filter){
	var prefix = _prefix + (filter || '');
	var prefixLength = prefix.length;
	var keys = [];
	for (var key in window.localStorage){
	// Only return keys that are for this app if (key.substr(0,prefixLength) === prefix){
	try{
	keys.push(key.substr(prefixLength + 1));
}
catch (e){
	return [];
}
}
}
return keys;
}
;
	return{
	get:get,save:save,remove:remove,clearAll:clearAll,keys:keys}
;
}
]);
}
)(window.angular,window._);

CSS代码(style.css):

@import "https://fonts.googleapis.com/css?family=Roboto+Condensed";@-webkit-keyframes beacon{0%{box-shadow:0 0 0 0 rgba(255,255,255,0.35);}
100%{box-shadow:0 0 0 2rem transparent;}
}
@keyframes beacon{0%{box-shadow:0 0 0 0 rgba(255,255,255,0.35);}
100%{box-shadow:0 0 0 2rem transparent;}
}
.row{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:row;-ms-flex-flow:row;flex-flow:row;}
.column{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:column;-ms-flex-flow:column;flex-flow:column;}
.align-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}
.between{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}
.around{-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around;}
.chip{width:1em;height:1em;border-radius:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:row;-ms-flex-flow:row;flex-flow:row;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;box-shadow:0 0.2em 0.35em -0.15em rgba(35,41,44,0.5);}
.chip .fa{font-size:65%;}
.beacon-1{-webkit-animation:beacon 1s infinite linear;animation:beacon 1s infinite linear;}
.beacon-2{-webkit-animation:beacon 1s infinite linear;animation:beacon 1s infinite linear;-webkit-animation-delay:.15s;animation-delay:.15s;}
.beacon-3{-webkit-animation:beacon 1s infinite linear;animation:beacon 1s infinite linear;-webkit-animation-delay:.3s;animation-delay:.3s;}
.bg-info{background:#00BCD4;color:#f3f4f5;}
.bg-success{background:#cddc39;color:#f3f4f5;}
.bg-alert{background:#FF3B80;color:#f3f4f5;}
.bg-warning{background:#ff5722;color:#f3f4f5;}
.bg-dark{background:#23292C;color:#f3f4f5;}
.bg-light{background:#f3f4f5;color:#23292C;}
.fg-light{color:#f3f4f5;}
.fg-dark{color:#23292C;}
.ghost{opacity:.35;}
.flip-container{-webkit-perspective:800;perspective:800;}
.flip-container.flip-me .flipper{-webkit-transform:rotateY(180deg);transform:rotateY(180deg);}
.flip-container,.front,.back,.answers,footer{width:100vw;text-align:center;margin:0 auto;}
.answers{font-size:8vmax;}
footer{font-size:3vmax;}
footer h1{margin:0;}
.flipper{font-size:35vmin;height:1em;-webkit-transition:0.8s cubic-bezier(1,-0.5,0.2,1.5);transition:0.8s cubic-bezier(1,-0.5,0.2,1.5);-webkit-transform-style:preserve-3d;transform-style:preserve-3d;position:relative;}
.flipper .front,.flipper .back{backface-visibility:hidden;-webkit-backface-visibility:hidden;position:absolute;top:0;height:1em;left:50%;-webkit-transform:translate(-50%,0%);transform:translate(-50%,0%);-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;border-radius:100%;}
.flipper .front{z-index:2;color:#838789;-webkit-transform:translate(-50%,0%) rotateY(0deg);transform:translate(-50%,0%) rotateY(0deg);}
.flipper .back{-webkit-transform:translate(-50%,0%) rotateY(180deg);transform:translate(-50%,0%) rotateY(180deg);width:1em;}
article{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;background-size:cover;background-position:center;-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}
main{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-transform-origin:center;transform-origin:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;color:#f3f4f5;background-color:#23292C;background-image:-webkit-linear-gradient(280deg,#cddc39,#ff5722);background-image:linear-gradient(170deg,#cddc39,#ff5722);background-size:cover;background-position:center;text-align:center;-webkit-transform-origin:center;transform-origin:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
main .answered:not(.winner){opacity:.5;background:none;}
main .flipper{margin:0 auto;}
main .message-wrap{bottom:35%;left:50%;position:absolute;-webkit-transform:translateX(-50%) scale(0);transform:translateX(-50%) scale(0);-webkit-transition:0.3s cubic-bezier(0.5,0.1,0.3,1.4);transition:0.3s cubic-bezier(0.5,0.1,0.3,1.4);-webkit-transition-delay:0s;transition-delay:0s;z-index:1;}
main .message-wrap.show{bottom:50%;-webkit-transform:translateX(-50%) scale(1);transform:translateX(-50%) scale(1);-webkit-transition-delay:0.9s;transition-delay:0.9s;}
main .message-wrap .message{padding:.5em 1em;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;border-radius:3em;box-shadow:0 0 2em -0.3em rgba(18,21,22,0.65);line-height:1.5;opacity:.9;}
main .message-wrap .text{margin-right:1em;}
main .message-wrap div{font-size:1.5em;}
html,body{height:100%;}
body{margin:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:column;-ms-flex-flow:column;flex-flow:column;font-family:"Roboto Condensed",Helvetica,Arial,sans-serif;}

附件:下载该文件资源,减少时间成本(增值服务)