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

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

news 2025/11/9 12:01:16

今天给大家分享一个 前端练习的项目，技术使用的是 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

synchronized 学习

学习源&#xff1a; https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖&#xff0c;也要考虑性能问题&#xff08;场景&#xff09; 2.常见面试问题&#xff1a; sync出…...

编程新知 2025/10/23 14:31:06

使用VSCode开发Django指南

使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架&#xff0c;专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用&#xff0c;其中包含三个使用通用基本模板的页面。在此…...

编程新知 2025/11/7 10:17:39

《Playwright：微软的自动化测试工具详解》

Playwright 简介:声明内容来自网络&#xff0c;将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具&#xff0c;支持 Chrome、Firefox、Safari 等主流浏览器&#xff0c;提供多语言 API&#xff08;Python、JavaScript、Java、.NET&#xff09;。它的特点包括&a…...

编程新知 2025/7/23 15:00:00

连锁超市冷库节能解决方案：如何实现超市降本增效

在连锁超市冷库运营中&#xff0c;高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术&#xff0c;实现年省电费15%-60%&#xff0c;且不改动原有装备、安装快捷、…...

编程新知 2025/9/18 22:35:44

什么是库存周转？如何用进销存系统提高库存周转率？

你可能听说过这样一句话&#xff1a; “利润不是赚出来的&#xff0c;是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业&#xff0c;很多企业看着销售不错&#xff0c;账上却没钱、利润也不见了&#xff0c;一翻库存才发现&#xff1a; 一堆卖不动的旧货…...

编程新知 2025/11/8 4:08:36

江苏艾立泰跨国资源接力：废料变黄金的绿色供应链革命

在华东塑料包装行业面临限塑令深度调整的背景下&#xff0c;江苏艾立泰以一场跨国资源接力的创新实践&#xff0c;重新定义了绿色供应链的边界。 跨国回收网络&#xff1a;废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点&#xff0c;将海外废弃包装箱通过标准…...

编程新知 2025/11/8 5:09:38

Keil 中设置 STM32 Flash 和 RAM 地址详解

文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面（Target 选项卡）1. IROM1（用于配置 Flash）2. IRAM1（用于配置 RAM）二、链接器设置界面（Linker 选项卡）1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数（如果没有勾选上面…...

编程新知 2025/11/8 6:13:15

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流&#xff0c;定义在 <sstream> 中&#xff1a; std::istringstream&#xff1a;输入流&#xff0c;从已有字符串中读取并解析。std::ostringstream&#xff1a;输出流&#xff0c;向内部缓冲区写入内容&#xff0c;最终取…...

编程新知 2025/10/18 0:50:34

NFT模式：数字资产确权与链游经济系统构建

NFT模式&#xff1a;数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新&#xff1a;构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议&#xff1a;基于LayerZero协议实现以太坊、Solana等公链资产互通&#xff0c;通过零知…...

编程新知 2025/11/8 9:43:55

汇编常见指令

汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX&#xff08;不访问内存&#xff09;XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...

编程新知 2025/11/4 20:56:54