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

w(ﾟДﾟ)w吓洗宝宝了2024-11-03 5:07

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

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

介绍一下项目及玩法。

游戏概述

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

游戏界面

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

  1. 控制面板：位于游戏界面的顶部，包含"New Game"按钮和当前步数显示。玩家可以通过点击"New Game"按钮重新开始游戏。
  2. 游戏板：位于游戏界面的中央，是一个10x10的方格矩阵，每个方格代表一个颜色块。
  3. 颜色选择区：位于游戏板的下方，显示当前可用的颜色块，玩家可以通过点击这些颜色块来改变游戏板上的颜色。
  4. 游戏结束提示：当游戏结束时，会显示"You Win!"或"Oops! Try Again..."的提示信息。
游戏规则
  1. 初始状态：游戏开始时，游戏板上的所有方块都是随机分配的颜色。
  2. 目标：玩家需要通过点击颜色选择区中的颜色块，将整个游戏板上的所有方块变成同一种颜色。
  3. 步数限制：玩家在游戏中只有有限的步数（默认为20步），如果在步数用完之前未能完成任务，游戏将结束。
  4. 胜利条件：当游戏板上的所有方块都变成同一种颜色时，玩家获胜。
  5. 失败条件：如果玩家在步数用完之前未能完成任务，游戏将结束并提示"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开发的简单而有趣的网页游戏。通过点击颜色块，玩家需要在有限的步数内将整个游戏板上的所有方块变成同一种颜色。游戏的设计简洁明了，适合所有年龄段的玩家。通过不断尝试和调整策略，玩家可以提高自己的成绩，增加游戏的可玩性。

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

大部分代码展示。。。

html 复制代码 
<!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>

运行截图。。。

相关推荐
前端Hardy1 小时前
HTML&CSS：数据卡片可以这样设计
前端·javascript·css·3d·html
九州ip动态1 小时前
模拟器多开限制ip，如何设置单窗口单ip，每个窗口ip不同
tcp/ip·游戏·媒体
St_Ludwig2 小时前
C语言 蓝桥杯某例题解决方案（查找完数）
c语言·c++·后端·算法·游戏·蓝桥杯
xiyusec4 小时前
HTML基础
前端·html
好开心334 小时前
javaScript交互案例2
开发语言·前端·javascript·html·ecmascript·交互
前端熊猫7 小时前
transform学习
前端·学习·html
郑祎亦7 小时前
JavaWeb开发：HTML 页面与接口对接
前端·后端·java-ee·html
一秒美工助手10 小时前
鼠标经过遮罩效果 详情页阿里巴巴国际站外贸跨境电商装修运营 详情页装修无线端装修手机装修设计代码证书滚动特效效果代码，自定义内容代码模板模块设计设置装修
前端·javascript·html·计算机外设
qq_4286396117 小时前
植物明星大乱斗15
c++·算法·游戏
vir0219 小时前
好奇怪的游戏（BFS）
数据结构·c++·算法·游戏·深度优先·图论·宽度优先
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04玄机平台应急响应—webshell查杀05Coze扣子平台完整体验和实践（附国内和国际版对比）06RAG 实践- Ollama+RagFlow 部署本地知识库0704 - matlab m_map地学绘图工具基础函数 - 设置网格08Unity中PICO实现 隔空取物 和 接触抓取物体09Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO10【目标跟踪】相机运动补偿