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

🕗 发布于 2024-11-06 11:53 inscode 游戏 html 游戏程序

小编的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>

运行截图。。。

原文地址：https://blog.csdn.net/2301_81482480/article/details/143456626

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：《MySQL 8 DBA基础教程》第一章习题
下一篇：微服务day03

【青牛科技】GC4931P替代A4931/Allegro在水泵、筋膜枪、吸尘器和电动工具中的应用
随着电动设备技术的不断发展，对电机驱动控制器的需求也在不断增加。GC4931P作为一种新型的电机驱动控制器，逐渐被视为A4931/Allegro的替代品。本文将探讨GC4931P在水泵、筋膜枪、吸尘器
阅读更多2024-11-06
软件测试：测试用例详解
一般是数字和字符组合成的字符串，可以包括（下划线、单词缩写、数字等等），但是需要注意的是，尽量不要写汉语拼音，因为拼音的意义可能有好几种，有可能会导致乱码；
阅读更多2024-11-06
通过自然语言表达你的想法。GitHub Spark让任何人都能使用人工智能，为自己创建软件...
我们能否让任何人都能使用人工智能，为自己创建软件？尽管开发者喜欢定制自己的开发环境以提高效率和趣味性，但创建个性化应用程序的复杂性常常阻止他们这样做。如何使个性化软件的创建变得像定制开发环境一样简单?
阅读更多2024-11-06
好看的超清4K视频素材去哪儿找？下载素材资源网站推荐
这个网站的视频素材有详细介绍，包括4K和1080P的标识，且许多素材都可以通过网盘直接下载，特别适合新手创作者。在这个高清、4K视频盛行的时代，要制作出让人眼前一亮的视频内容，超清4K视频素材必不可少
阅读更多2024-11-06
QML项目实战：自定义TextField
1.activeFocusOnPress ：当用户点击 TextField 时，自动将焦点设置到该控件上。2.antialiasing：启用抗锯齿功能，使文本显示更加平滑。3.readOnly：将
阅读更多2024-11-06
架构学习第四周--高可用与NoSQL数据库
负载均衡（），简称LB，是一种服务或基于硬件设备等实现的高可用反向代理技术，负载均衡将特定的业务(web服务、网络流量等分担给指定的一个或多个后端特定的服务器或设备，从而提高了公司业务的并发处理能力、
阅读更多2024-11-06
函数对象笔记
将函数指针传入compare时，编译器并不知道函数是什么。代码中使用C++中的模板，调用使用函数指针调用函数。指向一个函数的指针，可以动态调用不同的函数。，可以如同函数一样被调用。
阅读更多2024-11-06
【Unity基础】粒子系统与VFX Graph的区别
本文介绍了Unity中粒子系统与VFX Graph之间的区别
阅读更多2024-11-06
动态ip如何自动更换ip
在探讨如何自动更换动态IP地址时，我们首先需要理解动态IP的基本概念。IP地址，即互联网协议地址，分配给每台连接到互联网的设备的唯一标识符。与传统静态IP地址不同，动态IP地址是由网络服务提供商（IS
阅读更多2024-11-06
知识课堂——高匿ip在不同业务中的重要作用
高匿IP在网络数据采集、网络营销与推广、在线游戏以及隐私保护与安全等业务中都有着重要的作用。
阅读更多2024-11-06