tailwind+js实现五彩连珠小游戏代码-html代码-BFW代码库

tailwind+js实现五彩连珠小游戏代码

代码语言：html

所属分类：游戏

代码描述：tailwind+js实现五彩连珠小游戏代码，选择一个位置放置珠子，尝试将5个或以上相同颜色的珠子连成一線横向、纵向或斜向连线均可消除连线越长，获得的分数越高达到目标分数即可升级棋盘填满前未达到目标分数，游戏结束

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>五彩连珠</title>
  <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.16.js"></script>
  <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.7.0.css"/>

  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#4F46E5',
            secondary: '#EC4899',
            accent: '#06B6D4',
            neutral: '#1F2937',
            'neutral-light': '#F3F4F6'
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          }
        }
      }
    };
  </script>

  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto { content-visibility: auto; }
      .game-shadow { box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); }
      .btn-hover { transition: all 0.3s ease; }
      .btn-hover:hover { transform: translateY(-2px); }
      .bead-transition { transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
      .grid-cell { aspect-ratio: 1/1; }
    }
  </style>
</head>
<body class="bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen font-sans text-neutral">

  <!-- 页面容器 -->
  <div class="container mx-auto px-4 py-8 max-w-5xl">
    <!-- 标题 -->
    <header class="text-center mb-8">
      <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-transparent bg-clip-text bg-gradient-to-r from-primary to-secondary mb-2">五彩连珠</h1>
      <p class="text-lg text-neutral-600 max-w-2xl mx-auto">将相同颜色的珠子连成一线，达到5个或以上即可消除得分</p>
    </header>

    <!-- 游戏区域 -->
    <div class="flex flex-col md:flex-row gap-6">
      <!-- 左侧信息栏 -->
      <div class="w-full md:w-1/4 flex flex-col gap-4">
        <div class="bg-white rounded-xl p-6 shadow-lg">
          <h2 class="text-xl font-bold mb-4 flex items-center"><i class="fa fa-trophy text-yellow-500 mr-2"></i>游戏数据</h2>
          <div class="space-y-4">
            <div><p class="text-sm text-neutral-500">分数</p><p id="score" class="text-3xl font-bold text-primary">0</p></div>
            <div><p class="text-sm text-neutral-500">等级</p><p id="level" class="text-3xl font-bold text-secondary">1</p></div>
            <div><p class="text-sm text-neutral-500">目标分数</p><p id="target" class="text-xl font-semibold text-neutral">1000</p></div>
            <div>
              <div class="flex items-center justify-between mb-1">
                <span class="text-sm text-neutral-500">进度</span>
                <span id="progress-text" class="text-sm font-medium">0%</span>
              </div>
              <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
                <div.........完整代码请登录后点击上方下载按钮下载查看