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

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

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

<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>

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

html页面文字随机效果,教你用javascript实现随机标签云效果_附代码
标签云是一套相关的标签以及与此相应的权重.典型的标签云有30至150个标签.权重影响使用的字体大小或其他视觉效果.同时,直方图或饼图表是最常用的代表约12种不同的权数.因此,标签云彩能代表更多的权,尽 ...
JavaScript:实现Sudoku数独游戏算法（附完整源码）
JavaScript:实现Sudoku数独游戏算法 class Sudoku {constructor (board) {this.board = board}findEmptyCell () {// ...
JavaScript实现垃圾分类小游戏教程，附源码！
JavaScript语言是让网页能够动起来非常重要的一环,今天小千就来给大家分享一个利用JavaScript开发一个垃圾分类小游戏的教程,学完之后别忘记自己动手试一试哦. JavaScript其实主要 ...
java swing 大球吃小球游戏功能完善完整代码下载即可以运行
今天天气不错,利用一段时间给大家分享一个大球吃小球的游戏,该游戏也属于一个比较优秀的作品.整个系统界面漂亮,有完整得源码,希望大家可以喜欢.喜欢的帮忙点赞和关注.一起编程.一起进步!! 开发环境开发 ...
应用zip压缩的javascript以及Egret H5游戏实战
代码地址如下: http://www.demodashi.com/demo/11039.html 主要起因是策划对最快进入登录界面有硬性要求(3秒),那么最开始加载的文件越小越好.对H5的游戏程序进行 ...
从零开始实现放置游戏（十一）——实现战斗挂机（2）注册登陆和游戏主界面
本章主要实现注册登陆功能和游戏的主界面.有了游戏的界面,大家能有更直观的认识. 本章我们主要开发的是idlewow-game模块,其实就是游戏的客户端展示层.因为是放置游戏,为了方便,主要使用spri ...
javascript实现2048小游戏
最近打算系统的学习一下javascript,想做点项目练手,就选择用javascript实现我比较喜欢玩的2048游戏,大体完成以后还是蛮有成就感的.(文末给出相关代码) 游戏相关截图: ...
使用红孩儿工具箱完成基于Cocos2d-x的简单游戏动画界面
[Cocos2d-x相关教程来源于红孩儿的游戏编程之路CSDN博客地址:http://blog.csdn.net/honghaier 红孩儿Cocos2d-X学习园地QQ3群:205100149,47 ...
用html5和js制作一个游戏启动界面（html5游戏开发一）、
制作一个游戏启动界面,用户点击屏幕进入游戏主界面首先建立一个html文档,在body里面添加一个游戏容器,再将主菜单界面元素添加到添加到游戏容器里面. <div id="game&q ...

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

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

最新文章

热门文章