纸牌接龙游戏

下载代码

html

css

分享到微信朋友圈

html

css

@import url("https://fonts.googleapis.com/css?family=Lato:900");
html {
  background-color: #12355B;
  font-family: 'Lato', sans-serif;
}

.heart, .tile {
  fill: red;
}

.clover, .pike {
  fill: black;
}

#app {
  position: absolute;
  width: 100%;
}

#container {
  position: relative;
  width: 770px;
  margin: 0 auto;
}

.congratulation {
  color: white;
  font-size: 2em;
  text-align: center;
}

.header {
  margin: 10px;
  height: 126px;
}

.stock, .rest, .flop, .foundation {
  vertical-align: top;
  display: inline-block;
}

.rest {
  margin-right: 95px;
}
.rest .cardContainer {
  position: relative;
  width: 3px;
  -webkit-perspective: 500px;
          perspective: 500px;
  display: inline-block;
}
.rest .cardContainer card {
  display: inline-block;
}

.flop .cardContainer {
  position: relative;
  width: 30px;
  -webkit-perspective: 500px;
          perspective: 500px;
  display: inline-block;
}
.flop .cardContainer card {
  display: inline-block;
}

.foundation {
  position: absolute;
  right: 10px;
}
.foundation .pile {
  box-sizing: border-box;
  display: inline-block;
  margin-left: 20px;
}
.foundation .pile .cardContainer {
  position: absolute;
}

.tableau {
  white-space: nowrap;
}
.tableau .pile {
  display: inline-block;
  margin: 10px;
  vertical-align: top;
  width: 90px;
}
.tableau .pile .cardContainer {
  position: relative;
  height: 40px;
  -webkit-perspective: 500px;
          perspective: 500px;
}

.cardFace, .dropTarget, .foundation > .pile {
  width: 90px;
  height: 126px;
  border-radius: 10px;
  box-shadow: 0px 0px 4px 0px #c4c4c4;
}

.cardFace {
  background-color: white;
  padding: 10px;
  box-sizing: border-box;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.cardFace.frontFace[draggable="true"] {
  cursor: -webkit-grab;
  cursor: grab;
}
.cardFace.backFace {
  background-color: lightgray;
  position: absolute;
  top: 0;
}
.cardFace.pointer {
  cursor: pointer;
}
.cardFace h1 {
  font-size: 25px;
  display: inline-block;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  margin: 0;
  margin-right: 5px;
}
.cardFace h1.HEART, .cardFace h1.TILE {
  color: red;
}
.cardFace h1.CLOVER, .cardFace h1.PIKE {
  color: black;
}
.cardFace .suitIcon {
  padding-left: 5px;
}

.dropTarget {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.3);
}
.dropTarget h1 {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  margin: 0;
  color: #11937C;
  font-size: 25px;
  text-align: center;
  line-height: 126px;
  vertical-align: middle;
}

JavaScript

'use strict';

var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

/* Import { createStore, combineReducers } from 'redux' */
var _Redux = Redux;
var createStore = _Redux.createStore;
var combineReducers = _Redux.combineReducers;

/* Import { connect, Provider } from 'react-redux' */

var _ReactRedux = ReactRedux;
var connect = _ReactRedux.connect;
var Provider = _ReactRedux.Provider;

/*********
* Constatants
**********/

var consts = {
  FOUNDATION: 'FOUNDATION',
  TABLEAU: 'TABLEAU',

HEART: 'HEART',
  CLOVER: 'CLOVER',
  TILE: 'TILE',
  PIKE: 'PIKE'
};

/*********
* REACT
**********/
var Game = function () {
  var UnconnectedGame = function UnconnectedGame(_ref) {
    var congratulation = _ref.congratulation;
    return React.createElement(
      'div',
      { id: 'container' },
      React.createElement(
        'div',
        { className: 'header' },
        React.createElement(Stock, null),
        React.createElement(Foundation, null)
      ),
      React.createElement(Tableau, null),
      React.createElement(
        'div',
        { className: 'congratulation',
          style: { visibility: congratulation ? 'visible' : 'hidden' } },
        React.createElement(
          'h1',
          null,
          'Congratulation, you did it!'
        )
      )
    );
  };
  var mapStateToProps = function mapStateToProps(state, ownProps) {
    return {
      congratulation: state.foundation[0].cards.length === 13 && state.foundation[1].cards.length === 13 && state.foundation[2].cards.length === 13 && state.foundation[3].cards.length === 13
    };
  };

return connect(mapStateToProps)(UnconnectedGame);
}();

var mapStateToProps = function mapStateToProps(state, ownProps) {
    return {
      rest: state.stock.rest,
      flopped: state.stock.flopped
    };
  };

return connect(mapStateToProps)(UnconnectedStock);
}();

var mapStateToProps = function mapStateToProps(state, ownProps) {
    return {
      piles: state.foundation
    };
  };

return connect(mapStateToProps)(UnconnectedFoundation);
}();

var mapStateToProps = function mapStateToProps(state, ownProps) {
    return {
      piles: state.tableau
    };
  };

return connect(mapStateToProps)(UnconnectedTableau);
}();

/*********
 * React: Card
 *********/
var Card = function () {
  var UnconnectedCard = function (_React$Component) {
    _inherits(UnconnectedCard, _React$Component);

function UnconnectedCard(_ref5) {
      var suit = _ref5.suit;
      var number = _ref5.number;
      var stack = _ref5.stack;
      var turned = _ref5.turned;
      var locked = _ref5.locked;
      var last = _ref5.last;

_classCallCheck(this, UnconnectedCard);

var _this = _possibleConstructorReturn(this, _React$Component.call(this, { suit: suit, number: number, stack: stack, turned: turned, locked: locked, last: last }));

_this.state = {
        rotation: turned ? 0 : -180
      };

_this.turn = _this.turn.bind(_this);
      _this.dragStart = _this.dragStart.bind(_this);
      _this.dragEnd = _this.dragEnd.bind(_this);
      return _this;
    }

UnconnectedCard.prototype.turn = function turn() {
      var _this2 = this;

if (this.props.stack === true) {
        this.props.flop();
      } else {
        var _ret = function () {
          if (_this2.props.turned === true || _this2.props.locked) {
            return {
              v: undefined
            };
          }

var lastTime = null;

requestAnimationFrame(slideBackAnimation);
        }();

if ((typeof _ret === 'undefined' ? 'undefined' : _typeof(_ret)) === "object") return _ret.v;
      }
    };

UnconnectedCard.prototype.dragStart = function dragStart(ev) {
      ev.dataTransfer.setData('text/plain', JSON.stringify({
        suit: this.props.suit,
        number: this.props.number
      }));
      this.props.dragStart();
    };

UnconnectedCard.prototype.dragEnd = function dragEnd(ev) {
      this.props.dragEnd();
    };

UnconnectedCard.prototype.render = function render() {
      var suit = undefined;
      switch (this.props.suit) {
        case consts.HEART:
          suit = React.createElement(Heart, null);
          break;
        case consts.TILE:
          suit = React.createElement(Tile, null);
          break;
        case consts.CLOVER:
          suit = React.createElement(Clover, null);
          break;
        case consts.PIKE:
          suit = React.createElement(Pike, null);
          break;
      }
      return React.createElement(
        'div',
        { className: 'card' },
        React.createElement(
          'div',
          { className: 'cardFace frontFace',
            style: { transform: 'rotateY(' + this.state.rotation + 'deg)' },
            draggable: this.props.locked === false,
            onDragStart: this.dragStart,
            onDragEnd: this.dragEnd },
          React.createElement(
            'div',
            null,
            React.createElement(
              'h1',
              { className: this.props.suit },
              this.props.number
            ),
            suit
          )
        ),
        React.createElement('div', { className: 'cardFace backFace' + (this.props.locked === false ? ' pointer' : ''),
          style: { transform: 'rotateY(' + (this.state.rotation + 180) + 'deg)' },
          onClick: this.turn })
      );
    };

return UnconnectedCard;
  }(React.Component);

/*********
 * React: Drop
 *********/
var Drop = function () {
  var UnconnectedDrop = function (_React$Component2) {
    _inherits(UnconnectedDrop, _React$Component2);

function UnconnectedDrop(_ref10) {
      var pileType = _ref10.pileType;
      var pileIndex = _ref10.pileIndex;
      var visible = _ref10.visible;
      var drop = _ref10.drop;

_classCallCheck(this, UnconnectedDrop);

var _this3 = _possibleConstructorReturn(this, _React$Component2.call(this, { pileType: pileType, pileIndex: pileIndex, visible: visible, drop: drop }));

_this3.allowDrop = _this3.allowDrop.bind(_this3);
      _this3.drop = _this3.drop.bind(_this3);
      return _this3;
    }

UnconnectedDrop.prototype.allowDrop = function allowDrop(ev) {
      ev.preventDefault();
    };

UnconnectedDrop.prototype.drop = function drop(ev) {
      ev.preventDefault();
      var data = JSON.parse(ev.dataTransfer.getData("text"));
      this.props.drop(data.suit, data.number);
    };

UnconnectedDrop.prototype.render = function render() {
      return React.createElement(
        'div',
        { className: 'dropTarget',
          style: { visibility: this.props.visible ? 'visible' : 'hidden' },
          onDrop: this.drop, onDragOver: this.allowDrop },
        React.createElement(
          'h1',
          null,
          '+'
        )
      );
    };

return UnconnectedDrop;
  }(React.Component);

/*********
* REDUX: Store
**********/
var store = function () {
  var cards = function () {
    function deck() {
      var cards = [];
      for (var i = 2; i <= 14; i++) {
        var number = i;
        if (i === 11) number = 'J';
        if (i === 12) number = 'Q';
        if (i === 13) number = 'K';
        if (i === 14) number = 'A';
        cards.push({ suit: consts.HEART, number: number });
        cards.push({ suit: consts.TILE, number: number });
        cards.push({ suit: consts.CLOVER, number: number });
        cards.push({ suit: consts.PIKE, number: number });
      }
      return cards;
    }

function shuffle(a) {
      for (var i = a.length; i; i--) {
        var j = Math.floor(Math.random() * i);
        var _ref11 = [a[j], a[i - 1]];
        a[i - 1] = _ref11[0];
        a[j] = _ref11[1];
      }
    }

var cards = deck();
    shuffle(cards);
    return cards;
  }();

function pop(cards) {
    var turned = arguments.length <= 1 || arguments[1] === undefined ? false : arguments[1];

if (turned) {
      return _extends({}, cards.shift(), { turned: true, locked: false, last: true });
    } else {
      return _extends({}, cards.shift(), { turned: false, locked: true, last: false });
    }
  }

var initialState = {
    tableau: [{ drop: false, cards: [pop(cards, true)] }, { drop: false, cards: [pop(cards), pop(cards, true)] }, { drop: false, cards: [pop(cards), pop(cards), pop(cards, true)] }, { drop: false, cards: [pop(cards), pop(cards), pop(cards), pop(cards, true)] }, { drop: false, cards: [pop(cards), pop(cards), pop(cards), pop(cards), pop(cards, true)] }, { drop: false, cards: [pop(cards), pop(cards), pop(cards), pop(cards), pop(cards), pop(cards, true)] }, { drop: false, cards: [pop(cards), pop(cards), pop(cards), pop(cards), pop(cards), pop(cards), pop(cards, true)] }],
    stock: {
      rest: [].concat(cards.map(function (card) {
        return {
          suit: card.suit,
          number: card.number,
          turned: false,
          locked: false,
          last: false
        };
      })),
      flopped: []
    },
    foundation: [{ drop: false, cards: [] }, { drop: false, cards: [] }, { drop: false, cards: [] }, { drop: false, cards: [] }]
  };

var stockReducer = function stockReducer() {
    var state = arguments.length <= 0 || arguments[0] === undefined ? initialState.stock : arguments[0];
    var action = arguments[1];

switch (action.type) {
      case 'FLOP':
        {
          var rest = [].concat(state.flopped.map(function (card) {
            return {
              suit: card.suit,
              number: card.number,
              turned: false,
              locked: false
            };
          }), state.rest);

return {
            rest: rest,
            flopped: flopped
          };
        }
      case 'DROP':
        {
          var topFlop = state.flopped[state.flopped.length - 1];
          if (topFlop !== undefined && topFlop.suit === action.suit && topFlop.number === action.number) {
            // The top of the flopped cards has been moved
            var flopped = [];
            if (state.flopped.length > 2) {
              flopped = flopped.concat(state.flopped.slice(0, -2));
            }
            if (state.flopped.length > 1) {
              flopped.push(Object.assign({}, state.flopped[state.flopped.length - 2], {
                locked: false,
                last: true
              }));
            }
            return {
              rest: state.rest,
              flopped: flopped
            };
          }
          return state;
        }
      default:
        {
          return state;
        }
    }
  };

var foundationReducer = function foundationReducer() {
    var state = arguments.length <= 0 || arguments[0] === undefined ? initialState.foundation : arguments[0];
    var action = arguments[1];

switch (action.type) {
      case 'DRAG_START':
        {
          var _ret2 = function () {
            var match = function match(targetCard, draggedCard) {
              if (targetCard === undefined && draggedCard.number === 'A') {
                return true;
              }
              if (targetCard === undefined) {
                return false;
              }
              return targetCard.suit === draggedCard.suit && (targetCard.number === 'A' && draggedCard.number === 2 || targetCard.number === 10 && draggedCard.number === 'J' || targetCard.number === 'J' && draggedCard.number === 'Q' || targetCard.number === 'Q' && draggedCard.number === 'K' || targetCard.number + 1 === draggedCard.number);
            };

if (action.last !== true) {
              return {
                v: state
              };
            }

if ((typeof _ret2 === 'undefined' ? 'undefined' : _typeof(_ret2)) === "object") return _ret2.v;
        }
      case 'DRAG_END':
        {
          return state.map(function (pile) {
            return {
              drop: false,
              cards: [].concat(pile.cards)
            };
          });
        }
      case 'DROP':
        {
          var _ret3 = function () {
            var match = function match(card, suit, number) {
              return card !== undefined && card.suit === suit && card.number === number;
            };

// Check if the moved card belonged to the foundation piles

var sourcePileIndex = state.findIndex(function (pile) {
              return match(pile.cards[pile.cards.length - 1], action.suit, action.number);
            });

return {
              v: state.map(function (pile, pileIndex) {
                // Add the card to the corresponding pile if the target is a foundation pile
                if (action.targetPileType === consts.FOUNDATION && action.targetPileIndex === pileIndex) {
                  return {
                    drop: false,
                    cards: [].concat(pile.cards.map(function (card) {
                      return {
                        suit: card.suit,
                        number: card.number,
                        turned: true,
                        locked: true,
                        last: false
                      };
                    }), [{
                      suit: action.suit,
                      number: action.number,
                      turned: true,
                      locked: false,
                      last: true
                    }])
                  };
                }
                // Remove the card from if it has been part of a foundation pile
                if (sourcePileIndex !== undefined && sourcePileIndex === pileIndex) {
                  var _cards = [];
                  if (pile.cards.length > 2) {
                    _cards = _cards.concat(pile.cards.slice(0, -2));
                  }
                  if (pile.cards.length > 1) {
                    _cards.push(Object.assign({}, pile.cards[pile.cards.length - 2], { locked: false, last: true }));
                  }
                  return {
                    drop: false,
                    cards: _cards
                  };
                }
                // Return the pile unchanged if it has not been affected by the drop
                return pile;
              })
            };
          }();

if ((typeof _ret3 === 'undefined' ? 'undefined' : _typeof(_ret3)) === "object") return _ret3.v;
        }
      default:
        {
          return state;
        }
    }
  };

var tableauReducer = function tableauReducer() {
    var state = arguments.length <= 0 || arguments[0] === undefined ? initialState.tableau : arguments[0];
    var action = arguments[1];

switch (action.type) {
      case 'DRAG_START':
        {
          var _ret4 = function () {
            var match = function match(targetCard, draggedCard) {
              if (targetCard === undefined && draggedCard.number === 'K') {
                return true;
              }
              if (targetCard === undefined) {
                return false;
              }
              return (targetCard.number === 'K' && draggedCard.number === 'Q' || targetCard.number === 'Q' && draggedCard.number === 'J' || targetCard.number === 'J' && draggedCard.number === 10 || targetCard.number === draggedCard.number + 1) && ((targetCard.suit === consts.HEART || targetCard.suit === consts.TILE) && (draggedCard.suit === consts.CLOVER || draggedCard.suit === consts.PIKE) || (targetCard.suit === consts.CLOVER || targetCard.suit === consts.PIKE) && (draggedCard.suit === consts.HEART || draggedCard.suit === consts.TILE));
            };

if ((typeof _ret4 === 'undefined' ? 'undefined' : _typeof(_ret4)) === "object") return _ret4.v;
        }
      case 'DRAG_END':
        {
          return state.map(function (pile) {
            return {
              drop: false,
              cards: [].concat(pile.cards)
            };
          });
        }
      case 'DROP':
        {
          var _ret5 = function () {
            var match = function match(card, suit, number) {
              return card !== undefined && card.suit === suit && card.number === number;
            };

var tableauWithoutMovingCards = _state$reduce[0];
            var movingCards = _state$reduce[1];

if (action.targetPileType === consts.TABLEAU) {
              tableauWithoutMovingCards[action.targetPileIndex] = {
                drop: false,
                cards: tableauWithoutMovingCards[action.targetPileIndex].cards.map(function (card) {
                  return {
                    suit: card.suit,
                    number: card.number,
                    turned: card.turned,
                    locked: card.locked,
                    last: false
                  };
                }).concat(movingCards)
              };
              return {
                v: tableauWithoutMovingCards
              };
            }
            return {
              v: tableauWithoutMovingCards
            };
          }();

if ((typeof _ret5 === 'undefined' ? 'undefined' : _typeof(_ret5)) === "object") return _ret5.v;
        }
      default:
        {
          return state;
        }
    }
  };

var mainReducer = combineReducers({
    stock: stockReducer,
    foundation: foundationReducer,
    tableau: tableauReducer
  });

return createStore(mainReducer);
}();

/*********
 * React DOM
 *********/
ReactDOM.render(React.createElement(
  Provider,
  { store: store },
  React.createElement(Game, null)
), document.getElementById('app'));

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg