当前位置： 首页 > news >正文

网页单机版五子棋小游戏项目练习-初学前端可用于练习~

news 2026/2/9 5:26:58

今天给大家分享一个 前端练习的项目，技术使用的是 html css 和javascrpit 。希望能对于 刚刚学习前端的小伙伴一些帮助。
先看一下 实现的效果图
在这里插入图片描述
1. HTML（HyperText Markup Language）
HTML 是构建网页的基础语言，它的主要作用是定义网页的结构和内容。通过 HTML，可以描述网页上的文本、图片、链接、表格等元素，让页面内容具有明确的层次结构。
特点：

提供网页的骨架。

使用标签（如 <div>、<p>、<img>）来描述内容和布局。

易学易用，是前端开发的起点。
2. CSS（Cascading Style Sheets）
CSS 用于控制网页的样式和外观，它可以使网页更加美观和富有设计感。通过 CSS，可以设置字体、颜色、布局、动画等，提升用户体验。
特点：

提供网页的“皮肤”和美化功能。
支持响应式设计，适配不同设备和屏幕尺寸。
灵活强大，可与 HTML 无缝结合。
3. JavaScript
JavaScript 是一种动态编程语言，用于为网页添加交互功能。它可以实现用户与网页的实时互动，如表单验证、动画效果、游戏逻辑等，是前端开发的核心技术之一。
特点：

提供网页的“灵魂”，使页面动态化。
支持事件处理（如点击、滑动）和数据交互（如 AJAX 请求）。
能与 HTML 和 CSS 无缝配合，打造功能丰富的网页和应用。
HTML + CSS + JavaScript 的结合
HTML 提供结构，CSS 负责美化，JavaScript 添加交互逻辑。三者的有机结合构成了现代网页的三大支柱，是前端开发中必不可少的技术栈。

五子棋项目中，这三种技术被用来：
HTML：构建棋盘和游戏界面。
CSS：美化棋盘、按钮等 UI 元素。
JavaScript：实现游戏逻辑、机器 对战功能。
通过这三种技术，操作流畅且功能完整的五子棋游戏体验！

下面是 html 的部分代码

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>五子棋游戏</title>
</head>
<body><div class="container"><h1>五子棋</h1><div class="game-controls"><div class="control-group"><label><input type="checkbox" id="timerSwitch"> 开启计时</label><div class="ai-control"><label><input type="checkbox" id="aiSwitch"> 人机模式</label><select id="aiLevel" class="ai-select"><option value="easy">简单</option><option value="medium" selected>中等</option><option value="hard">困难</option></select></div></div><div id="timer" class="hidden">时间：00:00</div></div><div class="game-info"><div id="status">当前回合：黑子</div><div class="buttons"><button id="undo">悔棋</button><button id="restart">重新开始</button></div></div><div class="game-container"><div id="board"></div><div id="history"><h3>历史记录</h3><div id="movesList"></div></div></div></div>
</body>
</html>

css 的部分
在这里插入图片描述
js 部分截图
在这里插入图片描述

在这里插入图片描述

具体代码 已经打包好了。有兴趣想研究的小伙伴可以 通过下面方式获取。

https://www.wwwoop.com/home/Index/projectInfo?goodsId=40&typeParam=2

相关文章：

网页单机版五子棋小游戏项目练习-初学前端可用于练习~

今天给大家分享一个 前端练习的项目&#xff0c;技术使用的是 html css 和javascrpit 。希望能对于 刚刚学习前端的小伙伴一些帮助。 先看一下 实现的效果图 1. HTML&#xff08;HyperText Markup Language&#xff09; HTML 是构建网页的基础语言&#xff0c;它的主要作用是定…...

编程日记 2025/1/2 17:47:37

【玩转23种Java设计模式】行为型模式篇：命令模式

软件设计模式&#xff08;Design pattern&#xff09;&#xff0c;又称设计模式&#xff0c;是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性、程序的重用性。 汇总目录链接&…...

编程日记 2025/1/2 17:42:30

【Spring MVC 常用注解】注解驱动开发的魔法

在 Spring MVC 中&#xff0c;注解可以说是开发者的“魔法棒”&#xff0c;通过简单的注解配置&#xff0c;开发者能够实现请求处理、参数绑定、响应返回等复杂功能&#xff0c;真正做到“少写代码多干活”。 我们接下来就来一起看看 Spring MVC 中常用的注解&#xff0c;它们的…...

编程日记 2025/1/2 17:40:28

jmeter分布式启动

https://www.cnblogs.com/qtclm/p/11082081.html 1、代理机&#xff1a;输入“ipconfig”&#xff0c;找到IP地址&#xff0c;在Jmeter/bin/jmeter.properties设置remote host 启动jmeter server 1、控制机&#xff1a;输入“ipconfig”&#xff0c;找到IP地址&#xff0c;在J…...

编程日记 2025/1/2 17:39:27

数据仓库中的指标体系模型介绍

数据仓库中的指标体系介绍 文章目录 数据仓库中的指标体系介绍前言什么是指标体系指标体系设计有哪些模型?1. 指标分层模型2. 维度模型3. 指标树模型4. KPI&#xff08;关键绩效指标&#xff09;模型5. 主题域模型6.平衡计分卡&#xff08;BSC&#xff09;模型7.数据指标框架模…...

编程日记 2025/1/2 17:35:22

混合合并两个pdf文件

混合两个pdf 1、在线免费交替和混合奇数和偶数PDF页面2、有什么软件把两个 PDF 交叉合并&#xff1f;3、pdfsam本地合并 如何Google翻译的原文和译文合并&#xff0c;&#xff08;沉浸式翻译效果相对较好&#xff09; 1、在线免费交替和混合奇数和偶数PDF页面 https://deftpd…...

编程日记 2025/1/2 17:31:17

aws(学习笔记第二十一课) 开发lambda应用程序

aws(学习笔记第二十一课) 开发lambda应用程序 学习内容&#xff1a; lambda的整体概念开发lambda应用程序 1. lambda的整体概念 借助AWS Lambda&#xff0c;无需预置或管理服务器即可运行代码。只需为使用的计算时间付费。借助 Lambda&#xff0c;可以为几乎任何类型的应用进…...

编程日记 2025/1/2 17:30:16

JavaWeb Servlet的getInitParameter、业务层、控制反转IOC和依赖注入DI

目录 1. Servlet的getInitParameter2. 业务层3. 控制反转IOC和依赖注入DI3.1 背景3.2 实现如下3.3 原理 1. Servlet的getInitParameter Servlet有两个getInitParameter 一个是servletContext.getInitParameter&#xff0c;获取context-param的全局参数一个是servletConfig.ge…...

编程日记 2025/1/2 17:28:11

免费开源跨平台SSH工具 WindTerm：媲美 xshell 的最佳平替（含详细使用教程）

免费开源跨平台SSH工具 WindTerm WindTerm概述免费开源、免费开源、免费开源下载、安装WindTerm 屏幕截图WindTerm 主窗口 &#xff08;zsh&#xff09;&#xff1a;WindTerm 拆分视图&#xff1a;WindTerm DigeWhite 主题&#xff1a; WindTerm 基本设置使用WindTerm连接到服务…...

编程日记 2025/1/2 17:25:07

洛谷 P1075 [NOIP2012 普及组] 质因数分解 C语言

题目&#xff1a; P1075 [NOIP2012 普及组] 质因数分解 - 洛谷 | 计算机科学教育新生态 题目描述 已知正整数 n 是两个不同的质数的乘积&#xff0c;试求出两者中较大的那个质数。 输入格式 输入一个正整数 n。 输出格式 输出一个正整数 p&#xff0c;即较大的那个质数。…...

编程日记 2025/1/2 17:23:05

Apache Hive常见问题

入门问题 什么是Apache Hive&#xff1f; 解释Hive的用途。Hive作为基于Hadoop的数据仓库工具是如何工作的&#xff1f;与传统关系型数据库相比&#xff0c;使用Hive有什么优势&#xff1f; Hive和关系型数据库管理系统&#xff08;RDBMS&#xff09;之间的区别是什么&#…...

编程日记 2025/1/2 17:20:57

活动报名系统源码:JAVA同城服务系统活动报名同城圈子商家商城城市代理躲猫猫

JAVA同城服务系统&#xff1a;打造多元化社交与娱乐新体验 在数字化时代&#xff0c;同城服务系统已成为连接城市生活的重要桥梁。我们精心打造的JAVA同城服务系统&#xff0c;不仅融合了活动报名、同城圈子、商家商城、城市代理等多重功能&#xff0c;还特别加入了创新的“躲…...

编程日记 2025/1/2 17:19:54

迈向Z级计算：Cloud4Science范式加速科学发现进程

传统超级计算机作为科学计算的核心支柱&#xff0c;在推动技术进步方面发挥了不可替代的作用&#xff0c;但随着科学智能时代下需求的多样化和复杂化&#xff0c;其扩展性和能效的局限逐渐显现。 针对这一挑战&#xff0c; 微软亚洲研究院 的研究员提出了 Cloud4Science 的新范…...

编程日记 2025/1/2 17:17:52

ES IK分词字典热更新

前言 在使用IK分词器的时候&#xff0c;发现官方默认的分词不满足我们的需求&#xff0c;那么有没有方法可以自定义字典呢&#xff1f; 官方提供了三种方式 一、ik本地文件读取方式 k插件本来已为用户提供自定义词典扩展功能&#xff0c;只要修改配给文件即可&#xff1a; …...

编程日记 2025/1/2 17:14:49

Mac连接云服务器工具推荐

文章目录 前言步骤1. 下载2. 安装3. 常用插件安装4. 连接ssh测试5. 连接sftp测试注意&#xff1a;ssh和sftp的区别注意&#xff1a;不同文件传输的区别解决SSL自动退出 前言 Royal TSX是什么&#xff1a; Royal TSX 是一款跨平台的远程桌面和连接管理工具&#xff0c;专为 mac…...

编程日记 2025/1/2 17:12:45

从零开始：如何在 .NET Core 中优雅地读取和管理配置文件

在.net中的配置文件系统支持丰富的配置源&#xff0c;包括文件(json、xml、ini等)、注册表、环境变量、命令行、Azure Key Vault等&#xff0c;还可以配置自定义配置源并跟踪配置的改变&#xff0c;然后按照优先级进行覆盖&#xff0c;总之对文件的配置有很多方法&#xff0c;这…...

编程日记 2025/1/2 17:07:39

JVM学习：CMS和G1收集器浅析

总框架 一、Java自动内存管理基础 1、运行时数据区 运行时数据区可分为线程隔离和线程共享两个维度&#xff0c;垃圾回收主要是针对堆内存进行回收 &#xff08;1&#xff09;线程隔离 程序计数器 虚拟机多线程是通过线程轮流切换、分配处理器执行时间来实现的。为了线程切换…...

编程日记 2025/1/2 17:03:35

Science Robotics让软机器人“活”得更久的3D打印！

软机器人硬件在医疗、探索无结构环境等领域有广泛应用&#xff0c;但其生命周期有限&#xff0c;导致资源浪费和可持续性差。软机器人结合软硬组件&#xff0c;复杂组装和拆卸流程使其难以维修和升级。因此&#xff0c;如何延长软机器人的生命周期并提高其可持续性成为亟待解决…...

编程日记 2025/1/2 17:02:34

模电面试——设计题及综合分析题0x01（含答案）

1、已知某温控系统的部分电路如下图&#xff08;EDP070252&#xff09;&#xff0c;晶体管VT导通时&#xff0c;继电器J吸合&#xff0c;压缩机M运转制冷&#xff0c;VT截止时&#xff0c;J释放&#xff0c;M停止运转。 &#xff08;1&#xff09;电源刚接通时&#xff0c;晶体…...

编程日记 2025/1/2 17:01:33

二层交换机和三层交换机

一、交换机简述 交换机的主要功能包括物理编址、网络拓扑结构、错误校验、帧序列以及流控。交换机还具备了一些新的功能&#xff0c;如对VLAN&#xff08;虚拟局域网&#xff09;的支持、对链路汇聚的支持&#xff0c;甚至有的还具有防火墙的功能。 交换机除了能够连接同种类型…...

编程日记 2025/1/2 16:54:22

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

编程新知 2026/2/8 4:37:29

学习STC51单片机32（芯片为STC89C52RCRC）OLED显示屏2

每日一言 今天的每一份坚持&#xff0c;都是在为未来积攒底气。 案例&#xff1a;OLED显示一个A 这边观察到一个点&#xff0c;怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 &#xff1a; 如果代码里信号切换太快&#xff08;比如 SDA 刚变&#xff0c;SCL 立刻变&#…...

编程新知 2026/2/6 0:50:24

【生成模型】视频生成论文调研

工作清单 上游应用方向&#xff1a;控制、速度、时长、高动态、多主体驱动 类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...

编程新知 2025/9/9 8:40:47

QT3D学习笔记——圆台、圆锥

类名作用Qt3DWindow3D渲染窗口容器QEntity场景中的实体&#xff08;对象或容器&#xff09;QCamera控制观察视角QPointLight点光源QConeMesh圆锥几何网格QTransform控制实体的位置/旋转/缩放QPhongMaterialPhong光照材质&#xff08;定义颜色、反光等&#xff09;QFirstPersonC…...

编程新知 2026/1/29 5:26:37

现有的 Redis 分布式锁库（如 Redisson）提供了哪些便利？

现有的 Redis 分布式锁库&#xff08;如 Redisson&#xff09;相比于开发者自己基于 Redis 命令&#xff08;如 SETNX, EXPIRE, DEL&#xff09;手动实现分布式锁&#xff0c;提供了巨大的便利性和健壮性。主要体现在以下几个方面&#xff1a; 原子性保证 (Atomicity)&#xff…...

编程新知 2025/9/23 11:26:04

DAY 26 函数专题1

函数定义与参数知识点回顾&#xff1a;1. 函数的定义2. 变量作用域&#xff1a;局部变量和全局变量3. 函数的参数类型&#xff1a;位置参数、默认参数、不定参数4. 传递参数的手段&#xff1a;关键词参数5 题目1&#xff1a;计算圆的面积 任务&#xff1a; 编写一…...

编程新知 2025/11/28 7:53:17

Java详解LeetCode 热题 100(26):LeetCode 142. 环形链表 II（Linked List Cycle II）详解

文章目录 1. 题目描述1.1 链表节点定义 2. 理解题目2.1 问题可视化2.2 核心挑战 3. 解法一&#xff1a;HashSet 标记访问法3.1 算法思路3.2 Java代码实现3.3 详细执行过程演示3.4 执行结果示例3.5 复杂度分析3.6 优缺点分析 4. 解法二&#xff1a;Floyd 快慢指针法&#xff08;…...

编程新知 2025/8/25 19:51:15

AD学习（3）

1 PCB封装元素组成及简单的PCB封装创建 封装的组成部分&#xff1a; &#xff08;1&#xff09;PCB焊盘&#xff1a;表层的铜 &#xff0c;top层的铜 &#xff08;2&#xff09;管脚序号&#xff1a;用来关联原理图中的管脚的序号&#xff0c;原理图的序号需要和PCB封装一一…...

编程新知 2026/2/8 10:47:16

Qt的学习(一)

1.什么是Qt Qt特指用来进行桌面应用开发&#xff08;电脑上写的程序&#xff09;涉及到的一套技术Qt无法开发网页前端&#xff0c;也不能开发移动应用。 客户端开发的重要任务&#xff1a;编写和用户交互的界面。一般来说和用户交互的界面&#xff0c;有两种典型风格&…...

编程新知 2026/2/8 18:10:17

怎么开发一个网络协议模块（C语言框架）之(六) ——通用对象池总结(核心)

+---------------------------+ | operEntryTbl[] | ← 操作对象池 (对象数组) +---------------------------+ | 0 | 1 | 2 | ... | N-1 | +---------------------------+↓ 初始化时全部加入 +------------------------+ +-------------------------+ | …...

编程新知 2025/8/28 4:17:05