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/19642.html" title="《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)">《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)</a> </h5> </li> <li> <h5> <a href="https://www.qianduange.cn//article/20178.html" title="文本，wangEditor5展示HTML无样式，wangEditor5如何看源码，Ctrl U看CSS文件，代码高亮，Prism.js可以实现，解决方法，参考网页源代码的写法">文本，wangEditor5展示HTML无样式，wangEditor5如何看源码，Ctrl U看CSS文件，代码高亮，Prism.js可以实现，解决方法，参考网页源代码的写法</a> </h5> </li> <li> <h5> <a href="https://www.qianduange.cn//article/20177.html" title="HTML/SSM-实验室预约管理系统-99299（免费领源码开发文档）可做计算机毕业设计JAVA、PHP、爬虫、APP、小程序、C#、C 、python、数据可视化、大数据、全套文案">HTML/SSM-实验室预约管理系统-99299（免费领源码开发文档）可做计算机毕业设计JAVA、PHP、爬虫、APP、小程序、C#、C 、python、数据可视化、大数据、全套文案</a> </h5> </li> <li> <h5> <a href="https://www.qianduange.cn//article/20176.html" title="【简单html静态网页代码】制作一个简单HTML宠物网页（HTML CSS）">【简单html静态网页代码】制作一个简单HTML宠物网页（HTML CSS）</a> </h5> </li> <li> <h5> <a href="https://www.qianduange.cn//article/20175.html" title="模仿电影中黑客电脑界面，html装逼代码">模仿电影中黑客电脑界面，html装逼代码</a> </h5> </li> <li> <h5> <a href="https://www.qianduange.cn//article/20174.html" title="【html】新建一个html并且在浏览器运行">【html】新建一个html并且在浏览器运行</a> </h5> </li> <li> <h5> <a href="https://www.qianduange.cn//article/20173.html" title="SSM基于html的网上购物系统2nluo 在线充值">SSM基于html的网上购物系统2nluo 在线充值</a> </h5> </li> <li> <h5> <a href="https://www.qianduange.cn//article/20171.html" title="在IntelliJ IDEA中创建一个HTML项目">在IntelliJ IDEA中创建一个HTML项目</a> </h5> </li> <li> <h5> <a href="https://www.qianduange.cn//article/20170.html" title="CSS字体、行高等其他样式">CSS字体、行高等其他样式</a> </h5> </li> <li> <h5> <a href="https://www.qianduange.cn//article/20168.html" title="CSS3新增属性(15个案例代码效果图素材)">CSS3新增属性(15个案例代码效果图素材)</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/17004.html" title="运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac">运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac</a> </h4> <p class="promote-titme">2024-08-27 09:08:17</p> </div> <div class="blog"> <h4 class="arts"> <a href="https://www.qianduange.cn//article/7722.html" title="前端提高篇（102）：jQuery高级方法callbacks、deferred">前端提高篇（102）：jQuery高级方法callbacks、deferred</a> </h4> <p class="promote-titme">2024-05-09 11:05:34</p> </div> <div class="blog"> <h4 class="arts"> <a href="https://www.qianduange.cn//article/11098.html" title="解决npm install 报错 “npm err code 1“">解决npm install 报错 “npm err code 1“</a> </h4> <p class="promote-titme">2024-06-06 10:06:47</p> </div> <div class="blog"> <h4 class="arts"> <a href="https://www.qianduange.cn//article/5725.html" title="【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED">【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED</a> </h4> <p class="promote-titme">2024-04-22 09:04:34</p> </div> <div class="blog"> <h4 class="arts"> <a href="https://www.qianduange.cn//article/4265.html" title="vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack">vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack</a> </h4> <p class="promote-titme">2024-03-29 15:03:20</p> </div> <div class="blog"> <h4 class="arts"> <a href="https://www.qianduange.cn//article/5495.html" title="npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.">npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.</a> </h4> <p class="promote-titme">2024-04-20 17:04:38</p> </div> <div class="blog"> <h4 class="arts"> <a href="https://www.qianduange.cn//article/7845.html" title="JQuery中的load()、$">JQuery中的load()、$</a> </h4> <p class="promote-titme">2024-05-10 08:05:15</p> </div> <div class="blog"> <h4 class="arts"> <a href="https://www.qianduange.cn//article/19642.html" title="《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)">《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)</a> </h4> <p class="promote-titme">2024-10-30 21:10:12</p> </div> <div class="blog"> <h4 class="arts"> <a href="https://www.qianduange.cn//article/20181.html" title="基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统">基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统</a> </h4> <p class="promote-titme">2024-11-10 09:11:04</p> </div> <div class="blog"> <h4 class="arts"> <a href="https://www.qianduange.cn//article/20180.html" title="基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务">基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务</a> </h4> <p class="promote-titme">2024-11-10 09:11:50</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/3152.html" title="【Echarts系列】—— 实现电池图、3D立体圆形柱状图"> <span class="hot-index">1</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>1001</span></p> </a> </h5> </div> <div class="list"> <h5 class="hot"> <a href="https://www.qianduange.cn//article/19842.html" title="CSS常用属性（文本属性）"> <span class="hot-index">2</span> <p class="article-title">CSS常用属性（文本属性）</p> <p class="updateTime">2024-11-04 09:11:11<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/18844.html" title="TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项"> <span class="hot-index">3</span> <p class="article-title">TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项</p> <p class="updateTime">2024-09-30 23:09:06<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/17986.html" title="CSS写代码使页面划分为左右两个区域"> <span class="hot-index">4</span> <p class="article-title">CSS写代码使页面划分为左右两个区域</p> <p class="updateTime">2024-09-09 00:09:07<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/17797.html" title="vue使用datav echarts"> <span class="hot-index">5</span> <p class="article-title">vue使用datav echarts</p> <p class="updateTime">2024-09-06 00:09:38<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/17623.html" title="使用TweenMax.js和CSS3创建冰球运动员动画效果教程"> <span class="hot-index">6</span> <p class="article-title">使用TweenMax.js和CSS3创建冰球运动员动画效果教程</p> <p class="updateTime">2024-09-04 23:09:41<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/16825.html" title="使用CDN提高jQuery加载速度"> <span class="hot-index">7</span> <p class="article-title">使用CDN提高jQuery加载速度</p> <p class="updateTime">2024-08-24 23:08: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/16224.html" title="小兔鲜儿网页首页制作黑马程序员前端基础项目自学笔记"> <span class="hot-index">8</span> <p class="article-title">小兔鲜儿网页首页制作黑马程序员前端基础项目自学笔记</p> <p class="updateTime">2024-08-19 22:08:16<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/16190.html" title="《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗"> <span class="hot-index">9</span> <p class="article-title">《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗</p> <p class="updateTime">2024-08-19 22:08:12<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/15937.html" title="npm的使用"> <span class="hot-index">10</span> <p class="article-title">npm的使用</p> <p class="updateTime">2024-08-18 00:08:13<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>