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>
<!-- <b class="dianzanshu">{news:digg}</b> -->
</span>
</div>
</div>
<div class="tags">
<div class="tags-name">标签</div>
</div>
<div class="next-up">
<div class="btn-box up">
<!-- <div class="up-title">上一篇</div> -->
<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="up-title">下一篇</div> -->
<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>
<!-- main结束 -->
<!-- footer -->
<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>
<!-- footer结束 -->
<!-- 遮罩层 -->
<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>