当前位置：首页 > article >正文

自制inscode项目推荐:色块小游戏

article 2024/12/25 14:23:12

小编的inscode部署项目：割绳子游戏。

更多精彩内容见InsCode - 让你的灵感立刻落地~

介绍一下项目及玩法。

游戏概述

颜色匹配小游戏是一款基于HTML、CSS和JavaScript开发的简单而有趣的网页游戏。游戏的目标是通过点击颜色块，将整个游戏板上的所有方块变成同一种颜色。玩家需要在有限的步数内完成任务，否则游戏将结束。游戏的设计简洁明了，适合所有年龄段的玩家。

游戏界面

游戏的界面设计非常直观，主要由以下几个部分组成：

控制面板：位于游戏界面的顶部，包含“New Game”按钮和当前步数显示。玩家可以通过点击“New Game”按钮重新开始游戏。
游戏板：位于游戏界面的中央，是一个10x10的方格矩阵，每个方格代表一个颜色块。
颜色选择区：位于游戏板的下方，显示当前可用的颜色块，玩家可以通过点击这些颜色块来改变游戏板上的颜色。
游戏结束提示：当游戏结束时，会显示“You Win!”或“Oops! Try Again...”的提示信息。

游戏规则

初始状态：游戏开始时，游戏板上的所有方块都是随机分配的颜色。
目标：玩家需要通过点击颜色选择区中的颜色块，将整个游戏板上的所有方块变成同一种颜色。
步数限制：玩家在游戏中只有有限的步数（默认为20步），如果在步数用完之前未能完成任务，游戏将结束。
胜利条件：当游戏板上的所有方块都变成同一种颜色时，玩家获胜。
失败条件：如果玩家在步数用完之前未能完成任务，游戏将结束并提示“Oops! Try Again...”。

游戏实现细节

HTML结构

游戏的HTML结构非常简单，主要由以下几个部分组成：

<main>元素：包含游戏的控制面板、游戏板、颜色选择区和游戏结束提示。
<div class="controls">：包含“New Game”按钮和当前步数显示。
<div id="board">：游戏板，包含100个方块。
<div id="colors">：颜色选择区，包含当前可用的颜色块。
<div id="game-over">：游戏结束提示，当游戏结束时显示相应的提示信息。

CSS样式

游戏的CSS样式主要用于定义游戏的外观和布局，包括：

字体和颜色：使用了Google Fonts中的“Bubblegum Sans”字体，并定义了多种颜色用于游戏板和颜色块。
布局：使用Flexbox布局来确保游戏板和颜色选择区在页面中居中显示。
动画效果：为颜色块的背景颜色变化添加了平滑的过渡效果，增强了游戏的视觉效果。

JavaScript逻辑

游戏的JavaScript逻辑主要用于处理游戏的逻辑和交互，包括：

初始化游戏：在页面加载完成后，调用newGame()函数初始化游戏。
生成游戏板和颜色选择区：使用builder()函数生成游戏板和颜色选择区的方块。
颜色匹配逻辑：当玩家点击颜色选择区中的颜色块时，调用checkColor()函数将游戏板上的方块变成相应的颜色，并检查是否满足胜利条件。
胜利和失败检查：在每次玩家点击颜色块后，调用checkWin()函数检查是否满足胜利或失败条件，并更新游戏结束提示。

游戏体验

颜色匹配小游戏的设计旨在提供一种简单而有趣的体验。游戏的规则简单易懂，但挑战性适中，适合休闲娱乐。玩家可以通过不断尝试和调整策略来提高自己的成绩，增加游戏的可玩性。

总结

颜色匹配小游戏是一款基于HTML、CSS和JavaScript开发的简单而有趣的网页游戏。通过点击颜色块，玩家需要在有限的步数内将整个游戏板上的所有方块变成同一种颜色。游戏的设计简洁明了，适合所有年龄段的玩家。通过不断尝试和调整策略，玩家可以提高自己的成绩，增加游戏的可玩性。

希望你喜欢这款游戏，并享受其中的乐趣！

大部分代码展示。。。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>颜色匹配小游戏</title>

<style>
@import url("https://fonts.googleapis.com/css?family=Bubblegum+Sans");
/* colors */
.a, .a-x {
  background: #573659;
}

.b, .b-x {
  background: #ad4375;
}

.c, .c-x {
  background: #fa7370;
}

.d, .d-x {
  background: #f59231;
}

.e, .e-x {
  background: #fecd5f;
}

.f, .f-x {
  background: #9ccf5e;
}

.g, .g-x {
  background: #3cad5b;
}

.h, .h-x {
  background: #36cbbf;
}

.i, .i-x {
  background: #1d839c;
}

.j, .j-x {
  background: #2f506c;
}

.k, .k-x {
  background: #4b4b4b;
}

.l, .l-x {
  background: #000;
}

.m, .m-x {
  background: #fff;
}

body {
  margin: 0;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: calc(1em + 1vmin);
  font-family: 'Bubblegum Sans', Helvetica, FontAwesome, sans-serif;
  background: #212429;
  color: #fffced;
}

.controls {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  padding: 1em 0;
}

#board {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  height: 70vmin;
  width: 70vmin;
  border: 1ch solid;
  border-radius: .3em;
}

#board > * {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 7vmin;
          flex: 0 1 7vmin;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 7vmin;
  -webkit-transition: background 300ms linear;
  transition: background 300ms linear;
}

#board:not(.started) > *:first-of-type::after {
  content: '\f006';
}

#colors {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: 1ch;
}

#colors > * {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 7vmin;
          flex: 0 1 7vmin;
  height: 7vmin;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  cursor: pointer;
  border-radius: .3em;
}

.new-game {
  pointer-events: auto;
  cursor: pointer;
  text-decoration: underline;
  color: #00bcd4;
}

#game-over {
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-size: 3em;
}
</style>
</head>
<body>

<main>
  <div class="controls">
    <div class="new-game">New Game</div>
    <div>Moves <span class="moves">0</span> / <span>20</span></div>
  </div>
  <div id="board"></div>
  <div id="colors"></div>
  <div id="game-over"></div>
</main>


<script>
((document) => {
  // parts of the game board
  let moves = document.querySelector('.moves')
  // ?
  let board = document.querySelector('#board')
  let colors = document.querySelector('#colors')
  let gameover = document.querySelector('#game-over')

  // control variables 
  let colorArray = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm']

  let running = false

  let cell = '-x'
  let skill = 5
  let tally = 0
  let cap = 15    //zuiyyyyy
  let color

  //  game play methods
  // ----------------------------
  let shuffle = (collection) => {
    for (let i = collection.length; i; i--) {
      let j = Math.floor(Math.random() * i);
      [collection[i - 1], collection[j]] = [collection[j], collection[i - 1]]
    }
    return collection
  }

  let setColors = (collection, n) => {
    return n < 10 ? shuffle(collection).slice(0, n) : collection
  }

  let checkWin = (moves) => {
    let n = 0
    let msg = ''
    if (moves <= cap) {
      if (board.childNodes[99].className.indexOf(cell) > -1) {
        for (var i = 0; i < 100; i++) {
          if (board.childNodes[i].className.indexOf(cell) > -1) {
            n++
          }
        }
      }

      if (n === 100) {
        msg = '<span class="new-game">You Win!</span>'
        running = false
      } else if (n < 100 && moves >= cap) {
        msg = '<span class="new-game">Oops! Try Again...</span>'
        running = false
      }
    }
    if(!running) {
      gameover.innerHTML = msg
    }
  }

  let checkColor = (color) => {
    let tiles = board.childNodes
    for(var x = 0; x < 100; x++) {
      if(tiles[x].className.indexOf(cell) > -1) {
        tiles[x].className = color + cell
        if (x + 1 < 100 && tiles[x + 1].className === color) {
          tiles[x + 1].className += cell
        }
        if (x + 10 < 100 && tiles[x + 10].className === color) {
          tiles[x + 10].className += cell
        }
        if (x - 1 >= 0 && x % 10 > 0 && tiles[x - 1].className === color) {
          tiles[x - 1].className += cell
        }
        if (x - 10 >= 0 && x % 10 > 0 && tiles[x - 10].className === color) {
          tiles[x - 10].className += cell
        }
      }
    }
  }

  let builder = (container, element, collection, count, randomize) => {
    container.innerHTML = ''
    count = count || collection.length
    randomize = randomize || false
    for (let i = 0; i < count; i++) {
      let child = document.createElement(element)
      child.className = randomize ? collection[Math.floor((Math.random() * collection.length))] : collection[i]
      container.appendChild(child)
    }
  }

  let newGame = () => {
    let options = setColors(colorArray.slice(), skill)
    tally = 0
    moves.innerText = tally
    //?
    gameover.innerHTML = ''
    running = true
    builder(colors, 'chip', options)
    builder(board, 'tile', options, 100, true)
    color = board.childNodes[0].className
    board.className = ''
    board.childNodes[0].className = color + cell
    checkColor(color)
  }

  let play = (chip) => {
    if (running && color !== chip){
      color = chip
      if(board.className !== 'started') {
        board.className = 'started'
      }
      tally++
      //?
      checkColor(chip)
      checkWin(tally)
    }
  }

  document.addEventListener("DOMContentLoaded", () => {
    newGame()
  }, false)

  document.addEventListener('click', (event) => {
    let css = Array.from(event.target.classList)
    if(event.target.tagName === 'CHIP') {
      play(event.target.className)
    }
    else if(css.includes('new-game')) {
      newGame()
    }
  })
})(document)
</script>

</body>
</html>

运行截图。。。