HTML/Javascript game start menu:游戏开始界面（附代码）

最新推荐文章于 2024-09-22 05:46:55 发布

北京维多

最新推荐文章于 2024-09-22 05:46:55 发布

阅读量6.4k

点赞数 2

文章标签： html javascript 游戏

本文链接：https://blog.csdn.net/m0_60558800/article/details/122507918

版权

网页游戏的开始界面，可以很复杂，比如带上游戏动画的背景图，也可以很简单。下面就分享一个简单的开始界面。如下图（上传图好像有问题）;

点击开始游戏选项，就接入游戏主程序(同时也可以激发游戏音乐，网页游戏的音乐必须由用户动作积分，不然不会自动播放音乐），如果点击离开游戏，则游戏结束。代码如下：

<html>
   <head>
      <title> start menu</title>
      
      <style>
      #StartScreen,#GameCanvas{
		height: 200px;
		width: 400px;
		background: gray;
		position: fixed;
		top: 50%;
		left: 50%;
		margin-top: -100px;
		margin-left: -200px;
		text-align:center;
	  }
	  
  
	  #StartButton:hover {
		  cursor:pointer;
		  background:blue;
	  }	      
	  
	  #QuitButton:hover {
		  cursor:pointer;
		  background:blue;
	  }		        
      </style>
   </head>

<body>
	<div id="StartScreen">
		<h1>游戏开始界面</h1>
		<input id="StartButton" type="button" value="StartGame" onclick="startgame()"/> <br> <br>
		<input id="QuitButton" type="button" value="QuitGame" onclick="quitgame()"/>
	</div>

	<canvas id="GameCanvas" style="display: none;background:black;">Game Canvas </canvas>

	<script>
    function startgame() {
        document.getElementById("StartScreen").style.display='none';
        document.getElementById("GameCanvas").style.display = 'inline';
    };
    
    function quitgame() {
		document.getElementById("StartScreen").style.display='none'
		alert("Quit Game"); 
	}
</script>
</body>