用 Vue3+Canvas 开发了个塔防小游戏,感兴趣可以玩一玩

本文主要是介绍用 Vue3+Canvas 开发了个塔防小游戏,感兴趣可以玩一玩,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

LegendTD

项目地址: http://codeape.site:16666

源码: https://github.com/ApeWhoLovesCode/LegendTD

基本介绍

开发技术: Vue3 + Canvas + Ts

这是一款支持 pc端移动端 的网页塔防小游戏。

其他功能:

  • 选择关卡
  • 选择塔防
  • 排行榜

要是整个项目都放到这篇文章来讲解的话会比较复杂,我这里简单复现几个小demo来作为展示。

具体看源码可能会更清晰。

实现技术分享

圆形滚动组件

td-scrollCircle-4.gif

这个组件我也是根据之前实现的 react 版本改写成 vue 版本的,并根据项目需要进行了一些完善。从项目中也可以看到我用在了好几个地方。

由于篇幅问题,具体可以看源码: https://github.com/ApeWhoLovesCode/LegendTD/tree/master/src/components/scrollCircle

感兴趣的话也可以看这篇文章:https://juejin.cn/post/7174959812084498488

悬浮球

td-floating-ball-2.gif

这个也是根据之前的一个 react 的版本写成 vue 的版本的。然后这个组件我继续沿用了 jsx 的写法。就当练习一下 vue3 中的 jsx 写法了。

由于篇幅问题,具体可以看源码: https://github.com/ApeWhoLovesCode/LegendTD/tree/master/src/components/floating-ball

感兴趣的话也可以看这篇文章:https://juejin.cn/post/7186658143563644985

用 canvas 简单模拟一个塔防小游戏功能

jcode

requestAnimationFrame 绘制

借助 requestAnimationFrame 即可不断绘制,效果类似于 setInterval ,不过不同点是前者大致能达到每秒60帧的刷新,而且是稳定的(具体效果还是不同机型会不太相同)。这里就不细说,具体可以看其他专门讲解的文章。

const draw = () => {if(timer) cancelAnimationFrame(timer);(function go() {startDraw()timer = requestAnimationFrame(go)})()
}
draw()
绘画主函数

每一次的绘画都需要先清空之前的画布内容

function startDraw() {ctx.clearRect(0, 0, w, h)drawTower()drawEnemy()moveEnemy()shootFun()moveBullet()
}
定义变量

定义好敌人,塔防和子弹的存储对象和数组。

const enemy = {x: 50,y: 50,// xy表示: 1:左 2:下 3:右 4:上xy: 3,// 速度speed: 2,
}
const tower = {x: 200,y: 200,// 子弹速度bulletSpeed: 8,
}
const bulletArr = []

用来控制敌人转弯的

const xyArr = [{x: 350, y: 350},{x: 50, y: 350},{x: 50, y: 50},{x: 350,y: 50},
]
绘制塔防和敌人

这里为了简便,直接绘画一个文字作为代表了。

function drawTower() {ctx.font = '50px 宋体'ctx.fillText('塔', tower.x, tower.y)
}
function drawEnemy() {ctx.font = '50px 宋体'ctx.fillText('敌', enemy.x, enemy.y)
}
使敌人移动

这里就是每次触发都判断敌人当前的方向,对 xy 进行增减即可。

function moveEnemy() {const {speed, xy, x, y} = enemyfor(let i = 0; i < xyArr.length; i++) {if(x >= xyArr[i].x && x <= xyArr[i].x + speed && y >= xyArr[i].y && y <= xyArr[i].y + speed) {if(i + 1 !== enemy.xy) {enemy.xy = i + 1break}}}switch (enemy.xy) {case 1: enemy.x -= speed; break;case 2: enemy.y -= speed; break;case 3: enemy.x += speed; break;case 4: enemy.y += speed; break;}
}

这时就能产生大致如下的效果

Kapture 2023-03-17 at 15.23.31.gif
发射子弹
  • 触发子弹射击的防抖函数
const shootFun = throttle(() => {shootBullet()
})
function throttle(fn) {let timer = null;return () => {if(timer) returntimer = setTimeout(() => {fn()clearTimeout(timer)timer = null}, 500);}
}
  • 发射子弹的函数

根据敌人和塔防的中心,然后计算距离,并得出接下来子弹 xy 应该增加和减少的值即可。

function shootBullet() {const size = 50// 敌人中心const ex = enemy.x + size / 2, ey = enemy.y - size / 2// 塔防中心,也是子弹初始坐标const begin = {x: tower.x + size / 2, y: tower.y - size / 2}const diff = {x: ex - begin.x, y: ey - begin.y}// 子弹和敌人的距离const distance = powAndSqrt(diff.x, diff.y)const addX = tower.bulletSpeed * diff.x / distanceconst addY = tower.bulletSpeed * diff.y / distancebulletArr.push({x: begin.x, y: begin.y, addX, addY, xy: 0, distance})
}
  • 移动子弹

遍历子弹数组,如果子弹到达了该到达的距离就清除该子弹,否则继续向前移动。(想进一步完善的话,可以在遍历的时候,重新计算子弹 xy 应该移动的值)

function moveBullet() {for(let i = bulletArr.length - 1; i >= 0; i--) {const {addX, addY, distance} = bulletArr[i]if(bulletArr[i].xy >= distance) {bulletArr.splice(i, 1)} else {bulletArr[i].x += addXbulletArr[i].y += addYbulletArr[i].xy += tower.bulletSpeeddrawBullet(bulletArr[i])}}
}
  • 画子弹

简单画一个圆

function drawBullet(bullet) {ctx.save()ctx.beginPath()ctx.arc(bullet.x, bullet.y, 5, 0, 2 * Math.PI, false)ctx.fillStyle = 'skyblue'ctx.fill()ctx.restore()
}

最后就实现了大致如下效果了。

Kapture 2023-03-17 at 15.25.15.gif

塔防部分子弹效果

缩放子弹旋转子弹持续变粗的火焰柱
td-canvas-scale.giftd-canvas-rotate.giftd-canvas-fire2.gif

具体代码放到码上掘金了,有需要可以自提

缩放子弹

jcode

旋转子弹

jcode

持续变粗的火焰柱

jcode

pc端和移动端的兼容处理

pinia 全局保存一个状态代表当前是pc端还是移动端。

// 判断是移动端还是pc端的方法
function isMobile() {return navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
}

我这里的 canvas 在pc端定义了一个 size50px 的一个基准。当来到了移动端我这里是根据之前定义好的一个 canvas 宽高和手机的宽高来转化成一个我需要的 size 大小。

// canvas 的默认宽高 {w: 1050, h: 600}
const {w, h} = gameConfigState.defaultCanvas
const wp = document.documentElement.clientWidth / (h + 80)
const hp = document.documentElement.clientHeight / (w + 80)
const p = Math.floor(Math.min(wp, hp) * 10) / 10
// 将 50px 进行比例转化
gameConfigState.size *= p

再通过 style 将这个变量传递到 css 中即可使用了。

<template><div class="game-wrap" :style="{'--size': size + 'px'}"></div>
</template>
<style lang='less' scoped>
.game-wrap {@size: var(--size); // 这个就是50px的一个变量了.title {width: calc(@size * 0.5); // 使用}
}
</style>

移动端下将游戏区域横屏处理,旋转90度 canvas 画板即可。

@media screen and (orientation: portrait) {.game-wrap {-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);-ms-transform: rotate(90deg);transform: rotate(90deg);}
}

项目体会和收获

由于 vue2 之前就掌握了,而公司的技术栈是 react ;一直没什么机会接触到 vue3 方面的技术,然后就想着做个 vue3 项目。而现在的这个项目也是根据之前写的 vue2 简陋版本,来进行改写成 vue3 的,同时也做了很多完善。

之前的简陋 vue2 版本:https://juejin.cn/post/7087764218673365023

整个项目下来,在游戏实现方面其实涉及 vue3 的东西不多,主要是 js 的处理;主要是组件的封装和其他一些功能对 vue3 涉及较多。顺带说一句我将之前的 js 改写成 ts 后感觉是真的香,之前 js 写起来和改起来都很麻烦。还有就是 vitepinia 使用起来是真的香。

总体来说,整个项目开发下来,对 vue3 的一些使用基本了解掌握, canvas 的使用熟悉了不少,js 基本功也提升不少。

从 react 到 vue3 的使用体验。

这不是什么对比文章,这里就简单说下我在这个项目中的开发体会。

  1. vue3jsx 组件对 ts 的支持不太友好。不管是 props 属性的类型定义,还是 emits 事件的定义。

  2. 还有就是 props 不能用解构写法,因为 vue 中不是每次 render 都能重新触发 props 的解构的,所以就丢失了响应式。

不过也可能是我写得不熟吧。为此我也看了 element-plus的源码,它们也是采用 jsx 写法,我改写起来感觉的确没 react 优雅。

不过 vue 中也有使用起来令我觉得比 react 舒服的地方

比如就是 state 的修改,直接修改就完了,不用搞什么 setState ,然后这个 state 改变后,也不用搞什么 useEffect 。 这点在我项目中使用起来我感觉尤为关键。

说明

这是我在掘金写的一篇文章,有不清楚的地方可以看原文。

https://juejin.cn/post/7214517573584601144

这篇关于用 Vue3+Canvas 开发了个塔防小游戏,感兴趣可以玩一玩的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/364767

相关文章

Java 与 LibreOffice 集成开发指南(环境搭建及代码示例)

《Java与LibreOffice集成开发指南(环境搭建及代码示例)》本文介绍Java与LibreOffice的集成方法,涵盖环境配置、API调用、文档转换、UNO桥接及REST接口等技术,提供... 目录1. 引言2. 环境搭建2.1 安装 LibreOffice2.2 配置 Java 开发环境2.3 配

基于Python Playwright进行前端性能测试的脚本实现

《基于PythonPlaywright进行前端性能测试的脚本实现》在当今Web应用开发中,性能优化是提升用户体验的关键因素之一,本文将介绍如何使用Playwright构建一个自动化性能测试工具,希望... 目录引言工具概述整体架构核心实现解析1. 浏览器初始化2. 性能数据收集3. 资源分析4. 关键性能指

Python38个游戏开发库整理汇总

《Python38个游戏开发库整理汇总》文章介绍了多种Python游戏开发库,涵盖2D/3D游戏开发、多人游戏框架及视觉小说引擎,适合不同需求的开发者入门,强调跨平台支持与易用性,并鼓励读者交流反馈以... 目录PyGameCocos2dPySoyPyOgrepygletPanda3DBlenderFife

使用Python开发一个Ditto剪贴板数据导出工具

《使用Python开发一个Ditto剪贴板数据导出工具》在日常工作中,我们经常需要处理大量的剪贴板数据,下面将介绍如何使用Python的wxPython库开发一个图形化工具,实现从Ditto数据库中读... 目录前言运行结果项目需求分析技术选型核心功能实现1. Ditto数据库结构分析2. 数据库自动定位3

Django开发时如何避免频繁发送短信验证码(python图文代码)

《Django开发时如何避免频繁发送短信验证码(python图文代码)》Django开发时,为防止频繁发送验证码,后端需用Redis限制请求频率,结合管道技术提升效率,通过生产者消费者模式解耦业务逻辑... 目录避免频繁发送 验证码1. www.chinasem.cn避免频繁发送 验证码逻辑分析2. 避免频繁

Spring Boot集成/输出/日志级别控制/持久化开发实践

《SpringBoot集成/输出/日志级别控制/持久化开发实践》SpringBoot默认集成Logback,支持灵活日志级别配置(INFO/DEBUG等),输出包含时间戳、级别、类名等信息,并可通过... 目录一、日志概述1.1、Spring Boot日志简介1.2、日志框架与默认配置1.3、日志的核心作用

PyQt5 GUI 开发的基础知识

《PyQt5GUI开发的基础知识》Qt是一个跨平台的C++图形用户界面开发框架,支持GUI和非GUI程序开发,本文介绍了使用PyQt5进行界面开发的基础知识,包括创建简单窗口、常用控件、窗口属性设... 目录简介第一个PyQt程序最常用的三个功能模块控件QPushButton(按钮)控件QLable(纯文本

从入门到精通详解LangChain加载HTML内容的全攻略

《从入门到精通详解LangChain加载HTML内容的全攻略》这篇文章主要为大家详细介绍了如何用LangChain优雅地处理HTML内容,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录引言:当大语言模型遇见html一、HTML加载器为什么需要专门的HTML加载器核心加载器对比表二

基于Python开发一个图像水印批量添加工具

《基于Python开发一个图像水印批量添加工具》在当今数字化内容爆炸式增长的时代,图像版权保护已成为创作者和企业的核心需求,本方案将详细介绍一个基于PythonPIL库的工业级图像水印解决方案,有需要... 目录一、系统架构设计1.1 整体处理流程1.2 类结构设计(扩展版本)二、核心算法深入解析2.1 自

SpringBoot开发中十大常见陷阱深度解析与避坑指南

《SpringBoot开发中十大常见陷阱深度解析与避坑指南》在SpringBoot的开发过程中,即使是经验丰富的开发者也难免会遇到各种棘手的问题,本文将针对SpringBoot开发中十大常见的“坑... 目录引言一、配置总出错?是不是同时用了.properties和.yml?二、换个位置配置就失效?搞清楚加