当前位置: 首页 > article >正文

SpringBoot 和vue前后端配合开发网页拼图10关游戏源码技术分享

今天分享一个 前后端结合 的网页游戏 开发项目源码技术。 这也是我第一次写游戏类的程序,虽然不是特别复杂的游戏,但是是第一次写,肯定要记录一下了,哈哈。
游戏的内容 就是 我们显示中玩的那个 拼图碎片的 游戏,类似下方这种的。
在这里插入图片描述

然后我就想通过程序来实现这种 拼图游戏 ,左边是所有的游戏碎片,右边是拼图的 地方,然后通过鼠标拖拽完成拼图。

先跟大家介绍一下我使用的技术:
一、技术架构
编程语言:Java
后端框架:Spring Boot
数据库:MySQL 8.0
前端技术:Vue 2
前端组件:Element UI
接下来分享一下 主要实现的页面效果
1、前台功能:
10关拼图游戏、登录注册功能、排行榜
2、 后台功能:
用户管理、关卡管理、管理员管理、过关记录
首页:
在这里插入图片描述
排行榜
在这里插入图片描述
游戏中:
在这里插入图片描述
后台系统:
在这里插入图片描述
java后端目录结构:
在这里插入图片描述

package com.pintu.base.controller;


import com.pintu.base.aop.noLogin.NoLogin;
import com.pintu.base.entities.CloseTitleConfig;
import com.pintu.base.out.R;
import com.pintu.base.request.BaseRequest;
import com.pintu.base.service.inteface.ICloseTitleConfigService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;


/**
 * <p>
 * 关卡称号配置表 前端控制器
 * </p>
 *
 * @author Json
 * @since 2025-03-05
 */
@RestController
@RequestMapping("/close-title-config")
public class CloseTitleConfigController extends BaseController {
    @Autowired
    ICloseTitleConfigService iCloseTitleConfigService;

    //获取所有关卡
    @GetMapping("all")
    @NoLogin
    public R all() {
        return iCloseTitleConfigService.all();
    }


    //列表
    @GetMapping("pageList")
    public R pageList(BaseRequest baseRequest) {
        return iCloseTitleConfigService.pageList(baseRequest);
    }

    @GetMapping("getInfo")
    public R getInfo(Integer id) {
        return iCloseTitleConfigService.getInfo(id);
    }

    //编辑
    @PostMapping("edit")
    public R edit(@RequestBody CloseTitleConfig closeTitleConfig) {
        return iCloseTitleConfigService.edit(closeTitleConfig);
    }


}


package com.pintu.base.controller;


import com.pintu.base.aop.noLogin.NoLogin;
import com.pintu.base.entities.PinUserClose;
import com.pintu.base.out.R;
import com.pintu.base.request.BaseRequest;
import com.pintu.base.service.inteface.IPinUserCloseService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;


/**
 * <p>
 * 用户过关记录表 前端控制器
 * </p>
 *
 * @author Json
 * @since 2025-03-05
 */
@RestController
@RequestMapping("/pin-user-close")
public class PinUserCloseController extends BaseController {
    @Autowired
    IPinUserCloseService iPinUserCloseService;

    //排行榜
    @GetMapping("theCharts")
    @NoLogin
    public R theCharts(){
        return iPinUserCloseService.theCharts();
    }

    //列表
    @GetMapping("pageList")
    public R pageList(BaseRequest baseRequest){
        return iPinUserCloseService.pageList(baseRequest);
    }

    //添加
    @PostMapping("add")
    public R add(@RequestBody PinUserClose pinUserClose){
        return iPinUserCloseService.add(pinUserClose);
    }

    //我的关卡
    @GetMapping("myUserClose")
    public R myUserClose(){
        return iPinUserCloseService.myUserClose();
    }
}


在这里插入图片描述
虽然游戏实现起来不是很难,但是代码量还是有一些的,有兴趣学习的小伙伴可以 参考一下。

这个网页游戏 部署了一个预览版本,摸鱼的小伙伴可以去体验一下,看看能不能通关。
我在开发设计这个游戏的时候,发现这个游戏还是有一定难度的,虽然只有10关,我最多只过到第6关。
注意:只适用于电脑端-h5手机端不能体验~
https://test.wwwoop.com/?s=dongpintu&no=pintushiguan002


http://www.kler.cn/a/588483.html

相关文章:

  • Linux操作系统6- 线程3(线程的取消,分离与独立存储)
  • 反射(第三篇)、代理模式、静态代理和动态代理、InvocationHandler实际应用
  • 第十六届蓝桥杯康复训练--2
  • 新手村:数据预处理-缺失值补充策略
  • 【RabbitMQ】事务机制、限流、负载均衡
  • 玩转python:通俗易懂掌握高级数据结构-collections模块之Counter
  • 零基础掌握分布式ID生成:从理论到实战的完整指南 [特殊字符]
  • 563采药
  • NocoBase 本周更新汇总:双因素身份认证(2FA)
  • 蓝桥杯学习-08序列二分
  • 【动手学深度学习】#2线性神经网络
  • 火焰图分析Java程序瓶颈
  • 第15章:ConvNeXt图像分类实战:遥感场景分类【包含本地网页部署、迁移学习】
  • git subtree在本地合并子仓库到主仓库
  • KY-038 声音传感器如何工作以及如何将其与 ESP32 连接
  • java 线程池Executor框架
  • 深入解析 Vue 3 Teleport:原理、应用与最佳实践
  • 使用Inno Setup将Unity程序打成一个安装包
  • Native层逆向:ARM汇编与JNI调用分析
  • node.js-WebScoket心跳机制(服务器定时发送数据,检测连接状态,重连)