用html5和js制作一个游戏启动界面(html5游戏开发一)、_html5怎么设置开始界面-程序员宅基地

技术标签: interested topic  web  html5  游戏  html5游戏开发  javascript  

制作一个游戏启动界面,用户点击屏幕进入游戏主界面

首先建立一个html文档,在body里面添加一个游戏容器,再将主菜单界面元素添加到添加到游戏容器里面。

    <div id="game">
        <div class="screen" id="splash-screen">
        <div class="screen" id="main-menu"></div>
        <div class="screen" id="game-screen"></div>
        <div class="screen" id="high-scores"></div>
    </div>

添加Modernizr和加载脚本

<head>
    ...
    <script src="scripts/modernizr.js"></script>
    <script src="scripts/loader.js"></script>
</head>

在近几年,大家越来越关注效率,所以加载脚本越来越流行。

yepnope是一个非常流行的高速按条件异步的加载器,允许你只加载使用到的资源。我们利用基于yepnope开发的Modernizr就足够了。

如果你想使用Modernizr最新的版本,在www.modernizr.com下载即可。

对于此例子只需要选择Modernizr.load()和 Modernizr.addTest( )特征就足够了。


建立一个加载脚本loader.js

此例子还用了sizzle一个高效的样式选择引擎,使用sizzle可以让Dom变得简单。

同样的,sizzle最新版本可以在sizzlejs.com下载。

加载器的脚本会通过调用Modernizr.load( )来加载其他需要的内容。开始他需要加载sizzle加载器和game.js和dom.js脚本。

同时加载器脚本会在游戏全局创建一个jewel命名空间类。

/**
 * Created by Huangpingyi on 2016/8/10.
 */
var jewel = {};

//在加载主文件前等待
window.addEventListener("load" , function(){

    //开始动态加载
    Modernizr.load([
        {
        //这些文件一直被加载
        load : [
        "scripts/sizzle.js",
        "scripts/dom.js",
        "scripts/game.js"
    ],
        //所有文件已
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_23948283/article/details/52184462

智能推荐

使用C++编写STM32软件IIC_stm32 c++-程序员宅基地

文章浏览阅读1.8k次,点赞5次,收藏9次。最近在重构自己的平衡车代码,里面需要用到MPU6050的DMP,从中读取四元数进行欧拉角解算,但是看着软件IIC的代码实在是很变扭,因为之前不会C++,所以如果需要调用多个IIC设备,那么使用的时候就需要重复的去进行软件IIC底层代码的初始化,非常的麻烦,而且需要调整各个引脚,在学习过C++之后,发现类实在是太好用了,那么我就在想能不能通过类把软件IIC的底层进行封装,实现和arduino一样的编程效果,使用的时候只需要放入软件IIC的SCL和SDA对应的GPIO即可。_stm32 c++

如何成为一个更好的程序员,应重视哪些方面?-程序员宅基地

文章浏览阅读183次。点击蓝色“架构文摘”关注我哟加个“星标”,每天上午 09:25,干货推送!来源:www.cnblogs.com/xiaozhi_5638/p/10186940.html作者:周见智撤离一..._程序员要仔细很重要

CVE-2019-0708(BlueKeep)漏洞分析与复现_cve20190708漏洞复现-程序员宅基地

文章浏览阅读1.4w次,点赞8次,收藏87次。文章目录一、 漏洞简介1、漏洞介绍:2、漏洞原理:3、影响版本:二、 漏洞复现复现环境:复现过程:1、主机发现:2、使用MSF的漏洞模块:3、对靶机进行漏洞扫描:4、使用攻击模块,对靶机进行攻击5、使用POC,进行蓝屏攻击一、 漏洞简介1、漏洞介绍:2019年5月14日微软官方发布安全补丁,修复了 Windows 远程桌面服务的远程代码执行漏洞,该漏洞影响了某些旧版本的 Windows 系统。此漏洞是预身份验证,无需用户交互,这就意味着这个漏洞可以通过网络蠕虫的方式被利用,与2017年 WannaCr_cve20190708漏洞复现

winform中坐标系转换的问题_winform 变换坐标原点-程序员宅基地

文章浏览阅读1k次。winform中坐标系转换的问题,获取某点在屏幕中的绝对位置等编辑删除坐标系转换的问题,控件有控件的坐标系,屏幕有屏幕的坐标系。当然这两者是可以非常简便的进行转换的。如果要将Control1(例如Label1或者Button1)上的点(x,y)转换成屏幕上的点(x1,y1),那么就调用Control1.PointToScreen。反之,如果要将屏幕的(x1,y1)变成控_winform 变换坐标原点

自适应图片高度轮播_自适应高度轮播js-程序员宅基地

文章浏览阅读485次。TweenMax结合Swiper实现根据图片高度动画过渡切换轮播前言:需求是轮播不限制图片高度,平缓自然过渡与切换;1 . 使用(可以到官网自行下载)://引入文件<link rel="stylesheet" href="/static/ctrip/swiper-bundle.min.css"><script src="/static/js/jquery-3.5.1.min.js"></script><script src="/static/ctrip/_自适应高度轮播js

mybatis动态标签if传参问题_mybatis的if标签可以传参吗-程序员宅基地

文章浏览阅读1.3k次,点赞2次,收藏3次。最近在项目使用mybatis中碰到个问题 Xml代码 <if test="type=='y'"> and status = 0 </if> 当传入的type的值为y的时候,..._mybatis的if标签可以传参吗

随便推点

python自动化测试 | 接口自动化测试脚本如何写好?_测试自动化脚本怎么写-程序员宅基地

文章浏览阅读1.4k次,点赞9次,收藏17次。接口测试可以在没有前端界面下进行测试后端的功能校验在前端很难进行测试,因为前端已经有初步校验控制,所以接口测试可以发现很多在前端无法发现的问题提升测试效率,降低人工回归测试的人力成本与时间成本,缩短测试周期。真正的业务逻辑核心是后端。例子说明:有个登录页面,你要登上网站,就需要输入你的账号密码,把账号密码作为请求参数打登录接口,这时客户端会给服务器发个登录请求,服务器鉴权和校验通过之后,就登上去了。到这里就完成了一次接口的请求,或者说跑完了一条接口测试用例。_测试自动化脚本怎么写

cdh oozie 无法启动问题Could not load service classes, Cannot create PoolableConnectionFactory_e0103: could not load service classes, cannot crea-程序员宅基地

文章浏览阅读1.1k次。问题描述:在安装cdh元数据myslq高可用时,使用的是myslq主主复制+keepalived实现。期间发现切换时,出现如下异常信息!花了很长时间寻找问题的原因。因为切换的时候,使用本机命令行是可以连接的,但是夸服务器就无法连接,没有去这方面的尝试,后来使用navicate无法连接后,就推测是mysql高可用切换的问题导致的。问题分析:如果不重启keepalived,是无法实现切换和连接..._e0103: could not load service classes, cannot create poolableconnectionfacto

Federated Machine Learning学习笔记(一):综述:概念与模型-程序员宅基地

文章浏览阅读2.2k次,点赞4次,收藏10次。开始将mobile与AI进行靠拢了,RL,FL,DL一网打尽,先多看看survey再说。本文主要来自于Federated Machine Learning: Concept and Applications,主要介绍了使用Federated Machine Learning的原因,常用的一些概念,以及目前存在的一些应用。为了鼓励自己好好学习,决定提炼核心思想,以备不时之需。一、Why we ne..._federated machine learning

如何在CentOS上将salt-minion部署到python2虚拟环境_venv-salt-minion-程序员宅基地

文章浏览阅读361次。如何在CentOS上将salt-minion部署到python2虚拟环境Salt Minion需要python2.x(python2.x于2020年1日退役)或python3.x和一组模块,这些模块在操作系统附带的默认python上不可用。WHY?通过在Python2.x venv(虚拟环境)中运行Salt Minion,这个venv中安装的所有包都不会干扰环境外的包,而只包含在这个虚拟环境中。简单地说,这个venv中的python sitepackages不会和系统内python sitepack_venv-salt-minion

android webview拍照,让 Android 的 WebView 支持 type 为 file 的 input,同时支持拍照-程序员宅基地

文章浏览阅读337次。Android 的 WebView 组件默认是不启用 type 为 file 的 input 的,需要在代码中做一些类似 hack 的编码(因为解决问题的目标对象的方法都是加了@hide注解的)才能召唤神龙。目标对象:WebChromeClient实例化一个目标对象,并重写它的几个隐藏方法(针对不同的Android系统版本,方法名和入参都不一样,所以方法有多个),然后将目标对象作为参数传递给 We..._android webview 支持input 前置摄像头

深度学习技巧应用7-K折交叉验证的实践操作_k折交叉验证应用在训练模型中-程序员宅基地

文章浏览阅读1k次,点赞4次,收藏4次。大家好,我是微学AI,今天给大家介绍一下深度学习技巧应用7-K折交叉验证的实践操作。K折交叉验证是一种机器学习中常用的模型验证和选择方式,它可以将数据集分为K个互斥的子集,其中K-1个子集作为训练集,剩下1个子集作为验证集,重复K次,每次使用不同的验证集,最终平均所有结果作为模型的性能度量。针对数据量较少的时候,我们可以采取K折交叉验证提升模型的性能。_k折交叉验证应用在训练模型中