我做了一个网页小游戏

sudezhao

  最近闲着没事，总是刷到什么AI一键生成应用，然后我也没用那些高大上的，借助gpt和claude完成了下面这个在线小游戏的开发，不过总体来说自己还是优化了很多，de了很多bug，也迎合了网友需求做了各种花里胡哨的功能，而且前期由于不理解ai的代码，存在重复变量和重复代码和逻辑不清之类的问题，不过后来解决了一部分，稍微好点。
  下面直接给出游戏网址和前端仓库地址：希望大家游玩后提出修改意见，希望有niubi的大佬能fork和提交pr
   游戏网址：http://sue.sparkflare.cn/tools
   github地址：https://github.com/buptsdz/myweb-vue-tools

   架构：前端vue，后端django，数据库mysql


游戏运行图：








部分前端代码（前端一共一千多行)：

[HTML] 纯文本查看 复制代码

<template>
  <div class="color-game">
    <!-- 模式切换按钮 -->
    <div class="mode-selector">
      <button @click="confirmSwitchMode('normal')" :class="{ active: gameMode === 'normal' }">无尽模式</button>
      <button @click="confirmSwitchMode('timed')" :class="{ active: gameMode === 'timed' }">竞速模式</button>
    </div>

    <!-- 计时器 -->
    <div v-if="gameMode === 'timed'" class="timer timer-display">
      {{ remainingTime.toFixed(2) }}s
    </div>

    <!-- 分数和成就显示 -->
    <div class="game-header">
      <div class="score">分数: {{ score }}</div>
      <div v-if="currentAchievement" class="achievement-notification">
        <el-alert :title="`解锁成就：${currentAchievement}`" type="success" :closable="false" show-icon />
      </div>
    </div>
    <!-- <h1 style="color: white;font-size: 35px;">当前游戏正在进行较大更新，排行榜可能存在bug，请勿上传分数</h1>
    <h1 style="color: white;font-size: 35px;">竞速模式为测试版</h1> -->

    <!-- 游戏网格 -->
    <div class="game-container" :style="gridStyle">
      <div v-for="(color, index) in colors" :key="index" class="color-block" :style="{ backgroundColor: color }"
        @click="handleColorClick(index)"></div>
    </div>

    <!-- 控制按钮 -->
    <div class="game-controls">
      <el-button type="primary" @click="showAchievements = true">查看成就</el-button>
      <el-button type="danger" @click="restartGame">重新开始</el-button>
    </div>

    <!-- 成就对话框 -->
    <el-dialog title="游戏成就" :visible.sync="showAchievements" customClass="reward-width">
      <div class="achievements-list">
        <el-tag v-for="(achieved, title) in currentAchievements" :key="title" :type="achieved ? 'success' : 'info'"
          class="achievement-tag">
          {{ title }}
        </el-tag>
      </div>
    </el-dialog>

    <!-- 修改后的游戏结束对话框 -->
    <el-dialog title="游戏结束" :visible.sync="showGameOver" customClass="gameover-width" @close="restartGame"
      :close-on-click-modal="false">
      <div class="game-over-content">
        <p class="final-score">你到达了第<span style="color: rgb(232, 101, 39)"> {{ level }} </span>关 </p>
        <p class="final-score">获得了<span style="color: rgb(50,225,50)"> {{ score }} </span>分！</p>
        <span style="text-align: right; display: block;">
          <el-button type="primary" @click="showUploadScore">上传分数</el-button>
          <el-button @click="restartGame">重新开始</el-button>
        </span>
      </div>
      <div class="achievements-earned">
        <h3>已获得成就：</h3>
        <el-tag :style="{ display: achieved ? 'inline-block' : 'none' }"
          v-for="(achieved, title) in currentAchievements" :key="title" type="success" class="achievement-tag">
          {{ title }}
        </el-tag>
      </div>
    </el-dialog>

    <!-- 上传分数对话框 -->
    <el-dialog title="上传分数" :visible.sync="showUploadDialog" customClass="gameover-width" :close-on-click-modal="false">
      <el-form :model="uploadForm" :rules="uploadRules" ref="uploadForm" @submit.native.prevent>
        <el-form-item label="留下您的大名，为您获取排名" prop="username">
          <el-input v-model="uploadForm.username" placeholder="请输入昵称"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showUploadDialog = false">取消</el-button>
        <el-button type="primary" @click="submitScore">确定</el-button>
      </span>
    </el-dialog>

    <!-- 排名结果对话框 -->
    <el-dialog title="排名结果" :visible.sync="showRankResult" customClass="gameover-width">
      <div class="rank-result">
        <p>恭喜！您的最好成绩排名第 <span class="highlight">{{ currentRank }}</span> 名</p>
        <p v-if="isBreakRecord" class="break-record">新纪录！</p>
      </div>
    </el-dialog>

    <!-- 显示最大轮数 -->
    <div class="max-level-display">
      <!-- 显示最大轮数和最高分 -->
      <div class="max-level-display">
        <p v-if="gameMode == 'normal'">最大轮数: {{ maxLevel }}</p>
        <p v-if="gameMode == 'normal'">最高分: {{ maxScore }}</p>

        <p v-if="gameMode == 'timed'">最大轮数（计时模式）: {{ maxLevelTimed }}</p>
        <p v-if="gameMode == 'timed'">最高分（计时模式）: {{ maxScoreTimed }}</p>
      </div>
    </div>

    <!-- 排行榜 -->
    <div class="leaderboard">
      <div class="leaderboard-header" style="position: relative;">
        <el-button type="text" class="refresh-btn" @click="refreshLeaderboard"
          style="position: absolute; left: 0; top: 22px;">
          <i class="el-icon-refresh"></i> 刷新排行榜
        </el-button>
        <h2 class="leaderboard-title" style="margin: 0;">
          排行榜（{{ gameMode === 'normal' ? '无尽' : '竞速' }}）
        </h2>
      </div>

      <!-- 数据表格 -->
      <el-table :data="leaderboardData" style="width: 100%"
        :header-cell-style="{ background: '#4527A0', color: 'white' }" :row-class-name="setRowClassName"
        :empty-text="leaderboardError ? '获取排行数据失败' : '暂时无人挑战，快来留下你的战绩吧'">

        <el-table-column prop="rank" label="排名" width="80" align="center">
          <template #default="scope">
            <div class="rank-number" :class="getRankClass(scope.row.rank)">
              {{ scope.row.rank }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="username" label="用户名"></el-table-column>
        <el-table-column prop="achievement" label="头衔"></el-table-column>
        <el-table-column prop="max_score" label="分数" width="100"></el-table-column>
        <el-table-column prop="record_broken_at" label="破纪录时间" width="180"></el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container" style="margin-top: 20px; text-align: center;">
        <el-pagination :current-page="currentPage" :page-size="pageSize" :total="totalUsers" layout="prev, pager, next"
          @current-change="handlePageChange" class="custom-pagination" />
      </div>
    </div>
  </div>
</template>

<script>
import axiosRequest from '@/utils/request';
export default {
  name: 'ColorGame',
  data() {
    return {
      score: 0,
      level: 1,
      gridSize: 2,
      colors: [],
      targetIndex: 0,
      clickedIndex: -1,
      showAchievements: false,
      showGameOver: false,
      currentAchievement: '',
      achievements: {
        '色盲': false,
        '色弱': false,
        '肉眼凡胎': false,
        '一眼丁真': false,
        '目光犀利': false,
        '初出茅庐': false,
        '火眼初成': false,
        '锋芒毕露': false,
        '成绩斐然': false,
        '得心应手': false,
        '游刃有余': false,
        '炉火纯青': false,
        '登峰造极': false,
        '出神入化': false,
        '绝世无双': false,
        '绝世无双-Pro': false,
        '绝世无双-Ultra': false,
        '绝世无双-Plus': false,
        '绝世无双-Max': false,
        '绝世无双-Pro-Max': false,
        '绝世无双-Ultra-Pro-Max': false,
        '绝世无双-Plus-Ultra-Pro-Max': false,
        '淬体境': false,
        '聚气境': false,
        '蜕凡境': false,
        '人元境': false,
        '真阳境': false,
        '灵武境': false,
        '天罡境': false,
        '玄冥境': false,
        '化宗境': false,
        '虚空境': false,
        '洞虚境': false,
        '阴阳境': false,
        '四极境': false,
        '轮回境': false,
        '大武境': false,
        '王者境': false,
        '元尊境': false,
        '至尊境': false,
        '主宰境': false,
        '皇者境': false,
        '天王境': false,
        '界王境': false,
        '破天境': false,
        '合天境': false,
        '融天境': false,
        '原神启动境': false
      },
      achievements_timed: {
        '太慢了': false,
        '慢': false,
        '差点意思': false,
        '还行': false,
        '有点意思': false,
        '哎哟不错哦': false,
        '渐入佳境': false,
        '眼感火热': false,
        '电眼逼人': false,
        '唯快不破': false,
        '人肉3090': false,
        '人肉4060': false,
        '人肉4090': false,
        '人肉A100': false
      },
      maxLevel: 1,
      maxScore: 0,
      maxLevelTimed: 1,
      maxScoreTimed: 0,
      showUploadDialog: false,
      showRankResult: false,
      leaderboardData: [],
      leaderboardError: false, // 排行榜获取状态
      currentPage: 1,      // 当前页数
      pageSize: 20,        // 每页显示条数
      uploadForm: {
        username: localStorage.getItem('username') || ''
      },
      uploadRules: {
        username: [
          { required: true, message: '请输入昵称', trigger: 'blur' },
          { min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur' }
        ]
      },
      currentRank: 0,
      isBreakRecord: false,
      totalUsers: 0,
      gameMode: 'normal', // 当前模式，默认无尽模式
      remainingTime: 60.00,  // 限时模式下的剩余时间
      timer: null,        // 定时器句柄
      timed_playing: false, // 是否正在限时模式下游戏
    };
  },

sudezhao

xdm给我点时间，真的压力爆大

xiaofei263

游戏都有了，再整个挂不过分吧

[JavaScript] 纯文本查看 复制代码

// ==UserScript==
// [url=home.php?mod=space&uid=170990]@name[/url]         色块游戏
// [url=home.php?mod=space&uid=467642]@namespace[/url]    http
// [url=home.php?mod=space&uid=1248337]@version[/url]      2024-11-26
// @description  try to take over the world!
// [url=home.php?mod=space&uid=686208]@AuThor[/url]       You
// [url=home.php?mod=space&uid=195849]@match[/url]        //自己加游戏链接
// [url=home.php?mod=space&uid=609072]@grant[/url]        none
// ==/UserScript==

(function() {
    'use strict';

    function clickUniqueColorBlock() {
        // 获取 game-container 内的所有 div
        const container = document.querySelector('.game-container');
        if (!container) {
            console.log('游戏容器未找到');
            return;
        }

        const colorBlocks = container.querySelectorAll('.color-block');
        if (colorBlocks.length === 0) {
            console.log('在游戏容器内未发现颜色块');
            return;
        }

        // 创建一个对象来存储颜色及其出现次数
        const colorCount = {};

        // 遍历所有 color-block，统计颜色
        colorBlocks.forEach(block => {
            const bgColor = block.style.backgroundColor;
            if (colorCount[bgColor]) {
                colorCount[bgColor]++;
            } else {
                colorCount[bgColor] = 1;
            }
        });

        // 找出出现次数为 1 的颜色
        let uniqueColorBlock = null;
        for (const [color, count] of Object.entries(colorCount)) {
            if (count === 1) {
                // 找到与其他不同的颜色块
                uniqueColorBlock = Array.from(colorBlocks).find(block => block.style.backgroundColor === color);
                break;
            }
        }

        // 点击唯一的颜色块
        if (uniqueColorBlock) {
            uniqueColorBlock.click();
            console.log('点击了颜色块:', uniqueColorBlock.style.backgroundColor);
        } else {
            console.log('未找到独特的颜色块');
        }
    }

    // 每 500 毫秒执行一次
    setInterval(clickUniqueColorBlock, 500);
})();

MAXINGXING

首先，得有一块好的屏幕

geminiqi

谢谢大佬分享！做的棒棒哒！

changyufeichang

眼睛看花了，哈哈哈哈，，，不错

tyroneding

我去，第一次测才760
不知道跟屏幕有没有关系

sxlh2311

是不是屏幕好，得分就高

lovelinessmoe

像这种是不是改下对比度就能降低难度哇

schoolclub

这个和屏幕显示也有关系吧~垃圾屏幕不配

guqiaozhao

太废眼啦

calithemission

玩到18关就看不出来了

Aaron-x

眼睛都看花了，300多分