自制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>

运行截图。。。

相关推荐
PandaQue5 小时前
《怪物猎人：荒野》游戏可以键鼠直连吗
游戏
顾菁寒9 小时前
WEB第二次作业
前端·css·html
白狐欧莱雅9 小时前
使用python中的pygame简单实现飞机大战游戏
经验分享·python·游戏·pygame
Qhumaing9 小时前
html第一个网页
网络·html·html5
豆本-豆豆奶10 小时前
用 Python 写了一个天天酷跑(附源码)
开发语言·python·游戏·pygame·零基础教程
Leoysq13 小时前
【UGUI】实现点击注册按钮跳转游戏场景
游戏·unity·游戏引擎·ugui
前端Hardy14 小时前
HTML&CSS：爱上班的猫咪
前端·javascript·css·vue.js·html
前端Hardy17 小时前
超萌！HTML&CSS：打造趣味动画卡通 dog
前端·css·html·css3
Komorebi⁼17 小时前
JavaScript的对象事件监听处理，交互式网页的关键！
开发语言·前端·javascript·css·html
布兰妮甜19 小时前
HTML5：网页开发的新纪元
前端·html·html5
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10红米手机使用google play