HTML5 剪刀石头布小游戏

Paper Scissor Game，和电脑PK。 2016年度候选作品！

html5, game

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 3279
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

(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));
    };

$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

@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;
}

HTML

<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='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js'></script>  
  
</body>

Paper Scissor Game，和电脑PK。 2016年度候选作品！

html5, game

编辑器支持Emmet

快捷键

Paper Scissor Game，和电脑PK。 2016年度候选作品！

html5, game

HTML5经典数独（sudoku puzzle）益智小游戏

HTML5 GSAP很有趣的射箭小游戏

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：