html，做一个游戏网页

button> html> Game Website</> <style> body { font-family: Arial, sans-serif; text-align: center; } h1 { color: #333; } .game-container { margin: 0 auto; width: 80%; } button { padding: 10px 20px; background-color: #007bff; color: #fff; : none; cursor: pointer; } button:hover { background-color: #00563; } </style> </head> <body> <h1>Welcome to the Game!</h1> <div class="game-container"> <h2>Choose a Game:</h2> <button onclick="Game1()">Game 1</button> <button onclick="playGame2()">Game 2</button> <button onclick="Game3()">Game 3</button> <div id="game-results"></div> </div> <script> function play1() { document.getElementById("game-results").innerHTML = "You are playing Game 1!"; } function playGame2() { document.getElementById("game-results").innerHTML = "You are playing Game 2!"; } function playGame3() { document.getElementById("-results").innerHTML = "You are playing Game 3!"; } </script> </body> </html> </div> </div> </div> <div class="article-declare"> 转载请注明出处或者链接地址：<a href="https://www.qianduange.cn//article/9747.html">https://www.qianduange.cn//article/9747.html</a> </div> <div class="share"> <div class="share-box"> <div class="share-text">分享到：</div> <div class="share-content" id="share-content"></div> </div> <div class="zan" class="zan"> <span class="zan-btn"> <i class="fa fa-thumbs-o-up"></i> <a class="dianzanshu digg_link" data-id="9747" data-mid="2" data-type="up" href="javascript:;"> <em class="digg_num icon-num">336</em> </a>  </span> </div> </div> <div class="tags"> <div class="tags-name">标签</div> </div> <div class="next-up"> <div class="btn-box up">  <div class="contents up-content"> <a href="https://www.qianduange.cn//article/1.html" >上一篇：HTML基本结构及基本标签</a> </div> </div> <div class="btn-box next">  <div class="contents next-content"> <a href="https://www.qianduange.cn//article/9748.html" >下一篇：html，做一个像小霸王的网页源代码</a> </div> </div> </div> </div>  <div class="block message" id="pinglun"> <div class="block-name"> <i class="fa fa-pencil-square-o"></i> 评论 </div> <div class="message-content"> <div class="mac_comment" data-id="9747" data-mid="2" ></div> <script> $(function(){ MAC.Comment.Login = 1; MAC.Comment.Verify = 0; MAC.Comment.Init(); MAC.Comment.Show(1); }); </script> </div> </div>  <div class="block relevant"> <div class="block-name">相关文章</div> <ul class="relevant-list"> <li> <h5> <a href="https://www.qianduange.cn//article/10661.html" title="【ES6】模块化语法(默认、按需导入import导出export的操作)">【ES6】模块化语法(默认、按需导入import导出export的操作)</a> </h5> </li> <li> <h5> <a href="https://www.qianduange.cn//article/10660.html" title="Js 和 Jq 添加类、删除类和切换类">Js 和 Jq 添加类、删除类和切换类</a> </h5> </li> <li> <h5> <a href="https://www.qianduange.cn//article/10659.html" title="js-判断输入值是不是数字、字符串">js-判断输入值是不是数字、字符串</a> </h5> </li> <li> <h5> <a href="https://www.qianduange.cn//article/10656.html" title="惊艳，这个html5播放器支持视频切换、倍速切换、视频预览">惊艳，这个html5播放器支持视频切换、倍速切换、视频预览</a> </h5> </li> <li> <h5> <a href="https://www.qianduange.cn//article/10655.html" title="HTML5中自定义数据属性(2)data-*自定义数据">HTML5中自定义数据属性(2)data-*自定义数据</a> </h5> </li> <li> <h5> <a href="https://www.qianduange.cn//article/5800.html" title="2024前端发展方向(1)，html5移动web开发实战">2024前端发展方向(1)，html5移动web开发实战</a> </h5> </li> <li> <h5> <a href="https://www.qianduange.cn//article/10654.html" title="Webppt开源在线演示文稿PPT（幻灯片）">Webppt开源在线演示文稿PPT（幻灯片）</a> </h5> </li> <li> <h5> <a href="https://www.qianduange.cn//article/10653.html" title="HTML5原生拖拽/拖放 Drag & Drop 详解">HTML5原生拖拽/拖放 Drag & Drop 详解</a> </h5> </li> <li> <h5> <a href="https://www.qianduange.cn//article/10651.html" title="溢出文字显示省略号方法（多行有坑，记得避）">溢出文字显示省略号方法（多行有坑，记得避）</a> </h5> </li> <li> <h5> <a href="https://www.qianduange.cn//article/10649.html" title="HTML5基础----盒子模型_h5 盒子模型计算(1)">HTML5基础----盒子模型_h5 盒子模型计算(1)</a> </h5> </li> </ul> </div> </div> <div class="main-right"> <div class="block user"> <div class="user-name"> <h3> <a href="https://www.qianduange.cn//index.php/cover/info/id/1" title="前端哥"> <img src="https://www.qianduange.cn///static/images/touxiang.png" alt="前端哥"> <p class="name">前端哥</p> </a> </h3> <div class="user-info"></div> </div> </div> <div class="block mytui" style="margin-top: 24px;"> <div class="tui tui-index-1"> <script src="/template/bolg/ads/detail_1.js"></script> </div> </div> <div class="block user-article"> <div class="block-name">发布的文章</div> <div class="blog-article"> <div class="blog"> <h4 class="arts"> <a href="https://www.qianduange.cn//article/10679.html" title="Fastjson 1.2.24 反序列化漏洞研究">Fastjson 1.2.24 反序列化漏洞研究</a> </h4> <p class="promote-titme">2024-06-03 12:06:08</p> </div> <div class="blog"> <h4 class="arts"> <a href="https://www.qianduange.cn//article/10678.html" title="Jsonpath - 数据中快速查找和提取的强大工具">Jsonpath - 数据中快速查找和提取的强大工具</a> </h4> <p class="promote-titme">2024-06-03 12:06:05</p> </div> <div class="blog"> <h4 class="arts"> <a href="https://www.qianduange.cn//article/10677.html" title="@JsonAlias和@JsonProperty的使用和区别">@JsonAlias和@JsonProperty的使用和区别</a> </h4> <p class="promote-titme">2024-06-03 12:06:04</p> </div> <div class="blog"> <h4 class="arts"> <a href="https://www.qianduange.cn//article/10676.html" title="将 JSON 字符串转换为 Map 集合的方法">将 JSON 字符串转换为 Map 集合的方法</a> </h4> <p class="promote-titme">2024-06-03 12:06:04</p> </div> <div class="blog"> <h4 class="arts"> <a href="https://www.qianduange.cn//article/10675.html" title="PLC通过智能网关采用HTTP协议JSON文件对接MES等服务系统平台">PLC通过智能网关采用HTTP协议JSON文件对接MES等服务系统平台</a> </h4> <p class="promote-titme">2024-06-03 12:06:59</p> </div> <div class="blog"> <h4 class="arts"> <a href="https://www.qianduange.cn//article/10674.html" title="【PHP】 json_encode 函数各个参数的解释">【PHP】 json_encode 函数各个参数的解释</a> </h4> <p class="promote-titme">2024-06-03 12:06:59</p> </div> <div class="blog"> <h4 class="arts"> <a href="https://www.qianduange.cn//article/10673.html" title="labelme、labelimg的安装及使用（含格式转换：json转png）">labelme、labelimg的安装及使用（含格式转换：json转png）</a> </h4> <p class="promote-titme">2024-06-03 12:06:49</p> </div> <div class="blog"> <h4 class="arts"> <a href="https://www.qianduange.cn//article/10672.html" title="（17-3-04）检索增强生成（RAG）：JSON文本分割器语义相似性分割器">（17-3-04）检索增强生成（RAG）：JSON文本分割器语义相似性分割器</a> </h4> <p class="promote-titme">2024-06-03 12:06:49</p> </div> <div class="blog"> <h4 class="arts"> <a href="https://www.qianduange.cn//article/10671.html" title="安装nvm（node版本管理器）以及nvm常用命令">安装nvm（node版本管理器）以及nvm常用命令</a> </h4> <p class="promote-titme">2024-06-03 12:06:48</p> </div> <div class="blog"> <h4 class="arts"> <a href="https://www.qianduange.cn//article/10669.html" title="npm install：深入理解与应用">npm install：深入理解与应用</a> </h4> <p class="promote-titme">2024-06-03 12:06:48</p> </div> </div> </div> <div class="block mytui" style="margin-top: 24px;"> <div class="tui tui-index-1"> <script src="/template/bolg/ads/detail_2.js"></script> </div> </div> <div class="block user-article"> <div class="block-name">大家推荐的文章</div> <div class="paihang-list"> <div class="list"> <h5 class="hot"> <a href="https://www.qianduange.cn//article/10010.html" title="基于Echarts的高校就业数据可视化管理系统设计与实现（计算机毕业设计源码81461）"> <span class="hot-index">1</span> <p class="article-title">基于Echarts的高校就业数据可视化管理系统设计与实现（计算机毕业设计源码81461）</p> <p class="updateTime">2024-05-29 10:05:30<span class="zan"><i class="fa fa-thumbs-o-up"></i>1000</span></p> </a> </h5> </div> <div class="list"> <h5 class="hot"> <a href="https://www.qianduange.cn//article/8979.html" title="VUE3 Vite Pinia TypeScript项目笔记"> <span class="hot-index">2</span> <p class="article-title">VUE3 Vite Pinia TypeScript项目笔记</p> <p class="updateTime">2024-05-20 14:05:19<span class="zan"><i class="fa fa-thumbs-o-up"></i>1000</span></p> </a> </h5> </div> <div class="list"> <h5 class="hot"> <a href="https://www.qianduange.cn//article/7781.html" title="轻松掌握数据库中JSON数据提取：json_extract函数用法详解"> <span class="hot-index">3</span> <p class="article-title">轻松掌握数据库中JSON数据提取：json_extract函数用法详解</p> <p class="updateTime">2024-05-09 11:05:01<span class="zan"><i class="fa fa-thumbs-o-up"></i>1000</span></p> </a> </h5> </div> <div class="list"> <h5 class="hot"> <a href="https://www.qianduange.cn//article/7646.html" title="HTML5(六)——Canvas 高级操作"> <span class="hot-index">4</span> <p class="article-title">HTML5(六)——Canvas 高级操作</p> <p class="updateTime">2024-05-09 10:05:19<span class="zan"><i class="fa fa-thumbs-o-up"></i>1000</span></p> </a> </h5> </div> <div class="list"> <h5 class="hot"> <a href="https://www.qianduange.cn//article/7341.html" title="UE4.27支持HTML5"> <span class="hot-index">5</span> <p class="article-title">UE4.27支持HTML5</p> <p class="updateTime">2024-05-07 13:05:26<span class="zan"><i class="fa fa-thumbs-o-up"></i>1000</span></p> </a> </h5> </div> <div class="list"> <h5 class="hot"> <a href="https://www.qianduange.cn//article/5820.html" title="前端vue项目使用Decimal.js做加减乘除求余运算"> <span class="hot-index">6</span> <p class="article-title">前端vue项目使用Decimal.js做加减乘除求余运算</p> <p class="updateTime">2024-04-23 21:04:40<span class="zan"><i class="fa fa-thumbs-o-up"></i>1000</span></p> </a> </h5> </div> <div class="list"> <h5 class="hot"> <a href="https://www.qianduange.cn//article/4565.html" title="js数组常用方法（19种）|你会的到底有多少呢？"> <span class="hot-index">7</span> <p class="article-title">js数组常用方法（19种）|你会的到底有多少呢？</p> <p class="updateTime">2024-04-08 11:04:21<span class="zan"><i class="fa fa-thumbs-o-up"></i>1000</span></p> </a> </h5> </div> <div class="list"> <h5 class="hot"> <a href="https://www.qianduange.cn//article/3693.html" title="jQuery事件处理"> <span class="hot-index">8</span> <p class="article-title">jQuery事件处理</p> <p class="updateTime">2024-03-12 01:03:32<span class="zan"><i class="fa fa-thumbs-o-up"></i>1000</span></p> </a> </h5> </div> <div class="list"> <h5 class="hot"> <a href="https://www.qianduange.cn//article/3152.html" title="【Echarts系列】—— 实现电池图、3D立体圆形柱状图"> <span class="hot-index">9</span> <p class="article-title">【Echarts系列】—— 实现电池图、3D立体圆形柱状图</p> <p class="updateTime">2024-03-03 11:03:01<span class="zan"><i class="fa fa-thumbs-o-up"></i>1000</span></p> </a> </h5> </div> <div class="list"> <h5 class="hot"> <a href="https://www.qianduange.cn//article/2173.html" title="ECharts 饼状图颜色设置"> <span class="hot-index">10</span> <p class="article-title">ECharts 饼状图颜色设置</p> <p class="updateTime">2024-02-16 14:02:00<span class="zan"><i class="fa fa-thumbs-o-up"></i>1000</span></p> </a> </h5> </div> </div> </div> </div> </div> </div>   <div class="footer"> <div class="foot"> <p class="items"> <span><a href="https://www.qianduange.cn//rss/index.xml" title="rss订阅">rss订阅</a></span> <span><a href="https://www.qianduange.cn//rss/baidu.xml" title="百度xml">百度xml</a></span> <span><a href="https://www.qianduange.cn//rss/google.xml" title="谷歌xml">谷歌xml</a></span> <span><a href="https://www.qianduange.cn//rss/sogou.xml" title="搜狗xml">搜狗xml</a></span> <span><a href="https://www.qianduange.cn//rss/so.xml" title="soxml">soxml</a></span> <span><a href="https://www.qianduange.cn//rss/sm.xml" title="神马搜索xml">神马搜索xml</a></span> <span><a href="https://www.qianduange.cn//map.html" title="网站地图">网站地图</a></span> </p> <p class="items"> <span>Copyright © 2018-2022 前端哥</span> <span><script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?fd8cbb00c569d2289ab4b9572746ebeb"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script></span> <span><a href="https://beian.miit.gov.cn/" target="_blank">陕ICP备2023000550号-1</a></span> <span> <a href="https://www.qianduange.cn//" title="前端哥">前端哥</a> </span> </p> <p class="suibi">讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！</p> </div> <div class="mobile-footr"> <p class="items"> 前端技术交流源码工具分享网站 </p> </div> </div> <div class="guide"> <div class="guide-wrap"> <a href="javascript:;" class="nav-link edit mac_user" id="user" title="会员中心"><span>会员中心</span></a> <a href="https://www.qianduange.cn//label/contactMe.html" class="find" title="联系我"><span>联系我</span></a> <a href="https://www.qianduange.cn//index.php/gbook/index.html" class="report" title="留言建议"><span>留言建议</span></a> <a href="javascript:window.scrollTo(0,0)" class="top" title="回顶部"><span>回顶部</span></a> </div> </div> <span style="display: none;" class="mac_timming" data-file="" ></span> <script> var userAgent = IEVersion(); if (userAgent <= 11) { location.href = "/browser.html"; } function IEVersion() { var userAgent = navigator.userAgent; var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1; if (isIE) { var reIE = new RegExp("MSIE (\\d+\\.\\d+);"); reIE.test(userAgent); var fIEVersion = parseFloat(RegExp["$1"]); if (fIEVersion == 7) { return 7; } else if (fIEVersion == 8) { return 8; } else if (fIEVersion == 9) { return 9; } else if (fIEVersion == 10) { return 10; } else { return 6; } } else if (isEdge) { return 100; } else if (isIE11) { return 11; } else { return 1000; } } </script>   <div class="mask"> <div class="close"></div> </div>  <div class="tips"> <div class="tips-text">复制成功！</div> </div> <span style="display:none" class="mac_ulog_set" alt="设置内容页浏览记录" data-type="1" data-mid="2" data-id="9747" data-sid="0" data-nid="0"></span> <span style="display:none" class="mac_history_set" alt="设置History历史记录" data-name="[前端知识]html，做一个游戏网页" data-pic="/"></span> <script> hljs.highlightAll(); hljs.initLineNumbersOnLoad({ singleLine:true, startFrom: 5, }); </script> <script> $("#messages").find(".markdown-body").each(function(i) { let message = $("#messages").find(".markdown-body").html(); document.getElementById('messages').innerHTML = marked.parse(message); }); </script> <script> $(function (){ $('#share-content').share({sites: ['qzone', 'qq', 'weibo','wechat']}); setTimeout(function () { setSizeEvent(); },500) }); $.fn.serializeObject = function() { var o = {}; var a = this.serializeArray(); $.each(a, function() { if (o[this.name]) { if (!o[this.name].push) { o[this.name] = [ o[this.name] ]; } o[this.name].push(this.value || ''); } else { o[this.name] = this.value || ''; } }); return o; }; function setSizeEvent(){ let pagew = $(".pagelist").width(); let width = $(".page").width(); let left = (width - pagew) / 2; $(".pagelist").css({"left":left}); let lheight = $(".main-let").height(); let rheight = $(".main-right").height(); if(lheight > rheight){ $(".main-right").height(lheight); } else if(rheight > lheight){ $(".main-let").height(rheight); } let bodyWidth = document.body.offsetWidth; if(bodyWidth < 1080){ $(".main-let").css({"height":"auto"}); } } $(".page").resize(function(){ setSizeEvent(); }); var viewer = new Viewer(document.getElementById('article-content'), { url: 'src' }); </script> <script> let code = []; $(".article-content").find("pre").each(function (){ code.push($(this).find("code").html()); }); </script> </body> </html>