办公小技巧:节能又环保 打造PPT版井字棋小游戏
myzbx 2025-05-21 15:18 31 浏览
井字棋是很多人小时候都喜欢玩的一种游戏,玩的时候需要在纸上不停地画出O或×,繁琐不说,关键还浪费纸张。其实,使用Powerpoint就可以制作出互动性极强的井字棋小游戏,这样既能和家人朋友开心地玩游戏,还能节省纸张,节能又环保。
棋盘的设计
运行Powerpoint(本文以2016版为例),创建PPT文档“井字棋.pptx”,插入七张空白幻灯片并保存之。接着切换到幻灯片1中,单击“绘图”工具栏中的“矩形”按钮,在幻灯片中插入九个5×5厘米的正方形。然后分别右击之,选择“设置形状格式”,打开“设置形状格式”面板,勾选“纯色填充”单选框并将透明度设置为“100%”。最后将这9个透明的正方形拼成一个九宫格当棋盘(图1)。
复制九宫格,再分别切换到幻灯片4、5、6中,执行三次粘贴操作。然后将幻灯片4中的九宫格线条颜色设置为浅蓝色,将幻灯片5中的九宫格线条颜色设置为红色。
现在切换到幻灯片4中,在“开始”选项卡的“编辑”工具栏中,依次单击“选择→选择窗格”按钮,打开“选择”面板(图2),由左至右依次选中上数第一行的三个正方形,将“选择”面板中对应的名称修改为“XS11”、“XS12”和“XS13”。接下来将上数第二行的三个正方形的名称,由左至右依次修改为“XS21”、“XS22”、“XS23”。最后再将上数第三行的三个正方形的名称,由左至右分别修改为“XS31”、“XS32”和“XS33”。
依照上述方法,切换到幻灯片5中,将幻灯片中的九个正方形的默认名称分别修改为“OS11”、“OS12”、“OS13”……“OS33”(将上述实例中的XS替换为OS)。切换到幻灯片6中,将九个正方形的名称分别修改为“D11”、“D12”、“D13”……“D33”(XS替换为D)。
棋子的设计
现在我们来制作棋子。首先切换到幻灯片2中,分别绘制两条粗细为5磅的浅蓝色线段,并组合到一起,以制作好一枚棋子X,复制该枚棋子并粘贴八次,并将所有九枚棋子X排成九宫格的样式,最后将其默认名称修改为“X11”、“X12”……X33(图3)
仿照上一步的操作,切换到幻灯片3中,插入九个直径为3.5厘米的红色圆,并排成九宫格的样式,然后将各个棋子O的默认名称分别修改为“O11”、“O12”……“O33”。
小提示:给幻灯片中棋盘组件、棋子组件分别进行重命名,是为了避免在下边的动画添加及触发器设置过程中,因为数量多而出错。
游戏组件动画的添加
我们先来为棋盘添加动画。切换到幻灯片5中,选中左上角的正方形“OS11”,单击“动画”选项卡中的“添加动画→消失”九次,为该正方形添加九个消失动画特效。单击“添加动画→出现”九次,为该正方形添加九个出现动画特效(图4)。
重复上述步骤,为图4中的“OS12”、“OS13”、“OS21”……“OS33”等正方形分别添加消失动画特效、出现动画特效各九个。
上述步骤完成后,切换到幻灯片6中,为每个正方形添加两个出现动画特效备用即可(图5)。
小提示:为棋盘添加的每个“消失”或“出现”动画特效,需要双击打开每个动画特效的“计时”选项卡,将“开始”参数设置为“与上一动画同时”。
接下来为棋子添加动画。分别切换到幻灯片2和3中,并选中幻灯片中的九个棋子,“添加动画→淡入”命令,为每枚棋子各添加一个淡入动画特效。然后打开“淡入”对话框的“计时”选项卡,将“开始”参数设置为“单击时”、“期间”参数设置为“0.2秒”就可以了。
游戏组件拼装及动画触发器设置
最后我们将所有游戏组件拼装到一起。分别复制幻灯片1~6每张幻灯片中的棋盘及棋子,将它们按照先后顺序粘贴到幻灯片7中,使得所有素材一层层地“摞”在一起,并排列整齐(图6)。
接下来设置触发器。双击一个“淡入”动画特效“O11”,打开“淡入”对话框的“计时”选项卡,单击按钮“触发器”,勾选“单击下列对象时启动效果”单选框并选择“OS11”,将该动画特效的触发器设置为“OS11”(图7)。
仿照此步骤,将D11、OS11~OS33等九个“消失”动画特效的触发器设置为“OS11”。
触发器设置完毕,删除幻灯片1~6,然后按下F5快捷键预览,就可以和朋友“厮杀”一番,共同回味儿时的快乐时光了,感兴趣的朋友不妨一试(图8)。
小提示:由于动画特效的设置方法都是雷同的,在此不再赘述,如不熟悉,大家可以从https://pan.baidu.com/s/1qrypyVhShFyzgDvobRRzsg(提取码:lp7l)下载笔者已经制作好的“井字棋.pptx”实例深入了解。
相关推荐
- vue3和web网页直接操作微信小程序云开发数据库
-
我们开发好小程序以后,有时候需要编写一个管理后台网页对数据库进行管理,之前我们只能借助云开发自带的cms网页,但是cms网页设计的比较丑,工作量和代码量也不够,所以我们今天就来带大家实现用vue3编写...
- WebCurl:极致轻量的跨平台 HTTP 请求调试工具
-
在接口开发与测试领域,工具的轻量化、兼容性与安全性往往直接影响工作效率。WebCurl作为一款纯原生、无依赖的网页版API测试与调试工具,凭借极简架构与全场景适配能力,重新定义了接口调试工具的使...
- webapi 全流程_webapi项目
-
C#中的WebAPIMinimalApi没有控制器,普通api有控制器,MinimalApi是直达型,精简了很多中间代码,广泛适用于微服务架构MinimalApi一切都在组控制台应用程序类【Progr...
- Nodejs之MEAN栈开发(四)-- form验证及图片上传
-
这一节增加推荐图书的提交和删除功能,来学习node的form提交以及node的图片上传功能。开始之前需要源码同学可以先在git上fork:https://github.com/stoneniqiu/R...
- CodeSpirit.Amis.AiForm 智能表单使用指南
-
概述AiForm是CodeSpirit.Amis框架的智能表单功能,专为AI驱动的长时间处理任务设计。它自动生成一个多步骤的用户界面,包含表单输入、进度监控、日志显示和结果展示等功能。功能特点...
- 初级、中级、高级前端工程师,对于form表单实现的区别
-
在React项目中使用AntDesign(Antd)的Form组件能快速构建标准化表单,特别适合中后台系统开发。以下是结合Antd的最佳实践和分层实现方案:一、基础用法:快速搭...
- Bun v0.7 大版本发布,与 Vite 牵手来破局?
-
大家好,很高兴又见面了,我是"高级前端进阶",由我带着大家一起关注前端前沿、深入前端底层技术,大家一起进步,也欢迎大家关注、点赞、收藏、转发,您的支持是我不断创作的动力。今天给大家带来...
- 「前端」界面可视化开发框架formio.js
-
简介formio是一个前端可视化开发框架,无需写css/js就可以开发一套前端界面。直接在界面内拖拽就可以完成界面的布局及开发。数据交互也是固定的,表单校验也可以配置,功能非常强大。特性使用ES6...
- 小伙给同事爬取数据竟获取不到,竟要使用这种请求方式才能获取?
-
Http请求中FormData和RequestPayload两种参数的区别?AjaxPost请求中常用的两种的形式:formdata和requestpayload一、默认的表单方式...
- WinForm + Win32 API 自定义无边框窗口实战(工业软件必备)
-
前言随着.NET9.0AOT(Ahead-of-Time)的发布,便萌生了用代码测试AOT编译效果的想法,同时评估未来是否为NanUI开发支持AOT编译的新版本。关于NanUI项目,若大家尚未了...
- DeepSeek从入门到精通(11)——网页版、APP、API使用方式比较
-
DeepSeek提供了三种主要的使用方法:网页版、手机APP和API调用。这三种方式各有特点,适用于不同的使用场景。下面从使用方法和主要特点两方面进行比较:一、网页版使用方法:直接通过浏览器访问De...
- 初略Web API Notification 桌面通知
-
HTML5WebNotificationsAPI通知接口用于向用户配置和显示桌面通知弹窗。例如,Email邮件通知、来电提醒、聊天信息提醒或任务提醒等。关于Web开发技术中Notificat...
- 什么是API网关?——驱动数字化转型的“隐形冠军”
-
什么是API网关API网关(APIGateway)是一个服务器,位于应用程序和后端服务之间,提供了一种集中式的方式来管理API的访问。它是系统的入口点,负责接收并处理来自客户端的请求,然后将请求路由...
- .NET 7使用 Entity Framework Core 制作增删改查(CRUD) Web API 教程
-
在本文中,我们将使用EntityFrameworkCore(EFCore)实现一个.NET7WebAPICRUD示例。WebAPI是一个构建HTTP服务的框架,可以从浏览器、移动设备和...
- C# ASP.NET Core Web Api 与 MVC 模式下 body 参数传递,post 参数方式
-
在ASP.NETCore中,WebAPI和MVC模式在处理HTTP请求时,特别是POST请求,使用body参数来传递数据的方式非常相似。两者都使用模型绑定来自动将请求体中的数据映射到C#对象上。下...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 简介 (30)
- HTML 响应式设计 (31)
- HTML URL 编码 (32)
- HTML Web 服务器 (31)
- HTML 表单属性 (32)
- HTML 音频 (31)
- HTML5 支持 (33)
- HTML API (36)
- HTML 总结 (32)
- HTML 全局属性 (32)
- HTML 事件 (31)
- HTML 画布 (32)
- HTTP 方法 (30)
- 键盘快捷键 (30)
- CSS 语法 (35)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)
- SVG 文本 (32)
- 时钟启动 (33)
- HTML 游戏 (34)
- JS Loop For (32)