react实现一个比眼力小游戏代码-html代码-BFW代码库

代码语言：html
所属分类：游戏
代码描述：react实现一个比眼力小游戏代码,对于四类特征（颜色、数字、形状和底纹）中的每一种，这三个小饰物必须显示为a）要么完全相同，要么b）全部不同。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
  
<style>
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  background-color: #c9daea;
}

a,
a:visited {
  color: inherit;
}

p {
  margin: 10px 0 16px 0;
  color: inherit;
  color: white;
}

b {
  font-weight: normal;
}

svg {
  animation-name: appear;
  animation-duration: 1.5s;
  animation-iteration-count: 1;
}

@keyframes appear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 100vh;
  padding
}

.sidebar {
  display: flex;
  flex-direction: column;
  width: 240px;
  background-color: #626c66;
  color: white;
  padding: 20px;
  border-radius: 10px;
  font-size: 0.8em;
  margin: 20px 20px 20px 0;
}

button {
  padding: 15px;
  font-size: 1em;
  background-color: #ef5169;
  border: none;
  border-radius: 5px;
  color: white;
  cursor: pointer;
}

.score {
  text-align: center;
  font-weight: bold;
  font-size: 1.5em;
}

.grid {
  margin: 20px;
  padding: 15px;
  display: grid;
  grid-template-columns: repeat(4, minmax(auto, 120px));
  grid-template-rows: repeat(3, minmax(auto, 120px));
  gap: 10px;
  background-color: white;
  border-radius: 10px;
  height: 80vh;
}

.bauble {
  border-radius: 10px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

.less-important {
  display: none;
}

@media (min-width: 980px) and (min-height: 480px) {
  .grid {
    height: auto;
  }
  
  .bauble {
    width: 150px;
    height: 150px;
  }

  .sidebar {
    font-size: 1em;
  }
  
  .less-important {
    display: block;
  }
}

.grid.game .bauble:hover {
  background-color: #f0f6ff;
  cursor: pointer;
}

.bauble.selected {
  background-color: #f0f6ff;
  border: 3px solid #c3d9fa;
}

.grid.time-up .bauble.selected {
  background-color: #fffccf;
  border: 3px solid #ede105;
}

.grid.failed .bauble.selected {
  background-color: #ffe6e6;
  border: 3px solid #ff0d0d;
}

.result {
  text-align: center;
}

.twitter {
  text-align: center;
  margin: 20px 0 20px 0;
}

#youtube,
#youtube-card {
  display: none;
}

@media (min-height: 425px) {
  /** Youtube logo by https://codepen.io/alvaromontoro */
  #youtube {
    z-index: 50;
    width: 100px;
    display: block;
    height: 70px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: red;
    border-radius: 50% / 11%;
    transform: scale(0.8);
    transition: transform 0.5s;
  }

  #youtube:hover,
  #youtube:focus {
    transform: scale(0.9);
  }

  #youtube::before {
    content: "";
    display: block;
    position: absolute;
    top: 7.5%;
    left: -6%;
    width: 112%;
    height: 85%;
    background: red;
    border-radius: 9% / 50%;
  }

  #youtube::after {
    content: "";
    display: block;
    position: absolute;
    top: 20px;
    left: 40px;
    width: 45px;
    height: 30px;
    border: 15px solid transparent;
    box-sizing: border-box;
    border-left: 30px solid white;
  }

  #youtube span {
    font-size: 0;
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
  }

  #youtube:hover + #youtube-card {
    z-index: 49;
    display: block;
    position: fixed;
    bottom: 12px;
    right: 10px;
    padding: 25px 130px 25px 25px;
    width: 300px;
    background-color: white;
  }
}
</style>



</head>

<body >
  <div id="app"></div>


<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react.production.16.13.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-dom.production.16.13.js"></script>
      <script >
/*

A video walkthrough of each SVGs source code: https://youtu.be/t8ZG3xlLsOY

Follow me on twitter for more: https://twitter.com/HunorBorbely

*/

// Return a random item from an array
function pick(array) {
  return array[Math.floor(Math.random() * array.length)];
}

// The possible values of each feature
const colors = ["#72C264", "#FAC44C", "#EF5169"];
const shadings = ["solid", "striped", "open"];
const shapes = ["circle", "tree", "star"];
const numbers = [1, 2, 3];

// Generates a random bauble
const generateBauble = () => ({
  color: pick(colors),
  shading: pick(shadings),
  shape: pick(shapes),
  number: pick(numbers),
  selected: false });


// Generates a random bauble that's not in the given array
const generateBaubleNotInArray = array => {
  const bauble = generateBauble();
  if (!baubleIsInArray(array, bauble)) return bauble;
  return generateBaubleNotInArray(array);
};

// Check is bauble is already in array or not
const baubleIsInArray = (baubles, bauble) =>
baubles.find(
(b) =>
b.color == bauble.color &&
b.shading == bauble.shading &&
b.shape == bauble.shape &&
b.number == bauble.number);


const generateBaubles = () => {
  const baubles = [];
  while (baubles.length < 12) {
    const bauble = generateBaubleNotInArray(baubles);
    baubles.push(bauble);
  }
  if (thereIsAtLeastOneSet(baubles)) return baubles;
  return generateBaubles();
};

const replaceSet = baubles => {
  const newBaubles = [];
  const remainingBaublesUnordered = baubles.filter(b => !b.selected);
  baubles.forEach(b => {
    if (!b.selected) return newBaubles.push(b);

    const newBauble = generateBaubleNotInArray(remainingBaublesUnordered);
    remainingBaublesUnordered.push(newBauble);
    newBaubles.push(newBauble);
  });

  if (thereIsAtLeastOneSet(newBaubles)) return newBaubles;
  return replaceSet(baubles);
};

const selectBauble = (baubles, index) =>
baubles.map((b, i) => i == index ? { ...b, selected: !b.selected } : b);

const getSet = baubles => {
  for (let i1 = 0; i1 < baubles.length - 2; i1++) {
    for (let i2 = i1 + 1; i2 < baubles.length - 1; i2++) {
      for (let i3 = i2 + 1; i3 < baubles.length; i3++) {
        if (itIsASet(baubles[i1], baubles[i2], baubles[i3])) {
          console.log("Psst! Here's a solution:", i1 + 1, i2 + 1, i3 + 1);
          return [i1, i2, i3];
        }
      }
    }
  }

  return undefined;
};

const thereIsAtLeastOneSet = baubles => {
  return getSet(baubles) != undefined;
};

const highlightSet = baubles => {
  const setIndexes = getSet(baubles);

  const newBaubles = baubles.map((b, i) => {
    if (setIndexes.includes(i))
    return {
      ...b,
      selected: true };

    return b;
  });

  return newBaubles;
};

const itIsASet = (bauble1, bauble2, bauble3) => {
  const {
    colorsFitCriteria,
    shadingsFitCriteria,
    shapesFitCriteria,
    numberFitCriteria } =
  getCriteria(bauble1, bauble2, bauble3);

  return (
    colorsFitCriteria &&
    shadingsFitCriteria &&
    shapesFitCriteria &&
    numberFitCriteria);

};

const getCriteria = (bauble1, bauble2, bauble3) => {
  const selectedColors = [bauble1.color, bauble2.color, bauble3.color];
  const selectedShadings = [bauble1.shading, bauble2.shading, bauble3.shading];
  const selectedShapes = [bauble1.shape, bauble2.shape, bauble3.shape];
  const selectedNumbers = [bauble1.number, bauble2.number, bauble3.number];

  return {
    colorsFitCriteria:
    allTheSame(selectedColors) || allDifferent(selectedColors),
    shadingsFitCriteria:
    allTheSame(selectedShadings) || allDifferent(selectedShadings),
    shapesFitCriteria:
    allTheSame(selectedShapes) || allDifferent(selectedShapes),
    numberFitCriteria:
    allTheSame(selectedNumbers) || allDifferent(selectedNumbers) };

};

const threeBaublesAreSelected = (baubles) =>
baubles.filter(b => b.selected).length == 3;

const allTheSame = values => values[0] == values[1] && values[0] == values[2];

const allDifferent = (values) =>
values[0] != values[1] && values[0] != values[2] && values[1] != values[2];

const demoBaubles = [
{
  color: "#FAC44C",
  shading: "striped",
  shape: "circle",
  number: 2,
  selected: false },

{
  color: "#FAC44C",
  shading: "open",
  shape: "tree",
  number: 2,
  selected: true },

{
  color: "#EF5169",
  shading: "striped",
  shape: "tree",
  number: 3,
  selected: true },

{
  color: "#EF5169",
  shading: "open",
  shape: "tree",
  number: 3,
  selected: false },

{
  color: "#FAC44C",
  shading: "solid",
  shape: "tree",
  number: 1,
  selected: false },

{
  color: "#EF5169",
  shading: "striped",
  shape: "circle",
  number: 1,
  selected: false },

{
  color: "#FAC44C",
  shading: "open",
  shape: "circle",
  number: 2,
  selected: false },

{
  color: "#72C264",
  shading: "striped",
  shape: "star",
  number: 2,
  selected: false },

{
  color: "#EF5169",
  shading: "solid",
  shape: "circle",
  number: 2,
  selected: false },

{
  color: "#72C264",
  shading: "solid",
  shape: "tree",
  number: 2,
  selected: false },

{
  color: "#72C264",
  shading: "solid",
  shape: "tree",
  number: 1,
  selected: true },

{
  color: "#FAC44C",
  shading: "solid",
  shape: "tree",
  number: 3,
  selected: false }];



function App() {
  const [baubles, setBaubles] = React.useState(demoBaubles);
  const [score, setScore] = React.useState(0);
  const [phase, setPhase] = React.useState("demo");

  const select = index => {
    if (phase == "demo") return;
    let newBaubles = selectBauble(baubles, index);

    if (threeBaublesAreSelected(newBaubles)) {
      const selectedBaubles = newBaubles.filter(b => b.selected);

      // If the three selected baubles are a set then replace them
      if (
      itIsASet(selectedBaubles[0], selectedBaubles[1], selectedBaubles[2]))
      {
        setScore(score + 1);
        .........完整代码请登录后点击上方下载按钮下载查看