今天分享一个 前后端结合 的网页游戏 开发项目源码技术。 这也是我第一次写游戏类的程序,虽然不是特别复杂的游戏,但是是第一次写,肯定要记录一下了,哈哈。
游戏的内容 就是 我们显示中玩的那个 拼图碎片的 游戏,类似下方这种的。
然后我就想通过程序来实现这种 拼图游戏 ,左边是所有的游戏碎片,右边是拼图的 地方,然后通过鼠标拖拽完成拼图。
先跟大家介绍一下我使用的技术:
一、技术架构
编程语言: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