html5小游戏基础知识
显示一个DIV和隐藏一个DIV
首先，我们要显示一个DIV和隐藏一个DIV需要使用css里面使用：
.hide{ display:none;}
.show{display:block;}
在需要显示或隐藏的DIV输入：
<div id="title" class="show"></div>
<div id="title" class="hide"></div>
----------------------------------------------------------
还有一种点击显示和隐藏方法：
js里面的：
function fun(){
var div=document.getElementById("div1");
div1.style.display="none";
}
<div id="title" onclick="fun()"></div>
----------------------------------------------------------
另外一种方法：
在js里面需要封装一个函数：
function showDIV(id){
var obj=document.getElementById(id);
obj.setAttribute("class","show");
}
function hideDiv(id){
var obj=document.getElementById(id);
obj.setAttribute("class","hide");
}
只需要在需要显示或隐藏的DIV里面输入：
<div id="stop" onclick="showDIV('end')"></div>
<div id="end">123</div>
需要注意的是：在输入id时，需要加引号。
----------------------------------------------------------
让背景图片动起来：
首先定义1个动画名称：
@keyframes myfirst
{
0% {background-position: 1920px 0px;}
100% {background-position: 0px 0px;}
}
这里需要注意的是：我们要改变的不是背景图片的宽度，而是背景图片的起始位置。所以用到background-position。
再将定义的动画添加到需要实现移动的div上
#div{ animation: myfirst 7s linear infinite;}
就能够实现背景的移动
----------------------------------------------------------
在一个大DIV里面，有个小的div，我们需要移动小的DIV,而不影响大的div有3种方法：
1、设置大的div边框，这样移动小的div,大div就不会跟随移动了。
<div id="div1">
<div id="div2"></div>
</div>
在css里面：
#div1{
width:200px;
height:200px;
border: 1px solid red;}
#div2{
width:100px;
height:100px;
border: 1px solid red;
margin:10px auto; }
2.设置小的div的padding的值，需要注意的是，设置padding想上移动，需要在div的高度上进行相减，不然会改变div 的大小。
#div2{
width:100px;
height:90px;
border: 1px solid red;
padding:10px auto; }
3.在大div和小div之间加上一个空格和div，设置div的高度为0。
<div id="div1">
<div style:"height:opx;"> </div>
<div id="div2"></div>
</div>
----------------------------------------------------------
在js里面，结束动画移动的时候，我们想让等上几秒才显示另外一个div
需要以下几步：
1，给之前定义的时钟器命名一个id
然后再取消时钟器。
2，再调用setTimeout
function gameOver(){
clearInterval(id);
setTimeout(function(){
fun（）；
},2000)
}
这样就能实现结束时钟器时，过2秒，显示fun（）里面的内容。
html5小游戏基础知识的更多相关文章
- HTML5小游戏UI美化版
HTML5小游戏[是男人就下一百层]UI美化版 之前写的小游戏,要么就比较简单,要么就是比较难看,或者人物本身是不会动的. 结合了其它人的经验,研究了一下精灵运动,就写一个简单的小游戏来试一下. 介绍 ...
- 推荐10款超级有趣的HTML5小游戏
HTML5的发展速度比任何人的都想像都要更快.更加强大有效的和专业的解决方案已经被开发......甚至在游戏世界中!这里跟大家分享有10款超级趣味的HTML5游戏,希望大家能够喜欢! Kern Typ ...
- 通通制作Html5小游戏——第二弹（仿flappy bird像素鸟）
亲爱的博友们,我又回来啦~因为我们技术宅的思想只有技术宅懂得,好不容易写了点好玩的东西发QQ空间,结果只有11的UV,0回复....10分钟ps一个女神的素描效果发QQ空间朋友圈,一大堆回复加赞,作为 ...
- HTML5 Canvas（基础知识）
最近笔者在学习HTML5的新元素<canvas>,会分享一些基础知识以及小例子,最终使用<canvas>实现一个绘制简单图表(条形图.线图或者饼图)的js库,会更新一到两篇文章 ...
- HTML5小游戏【是男人就下一百层】UI美化版
之前写的小游戏,要么就比较简单,要么就是比较难看,或者人物本身是不会动的. 结合了其它人的经验,研究了一下精灵运动,就写一个简单的小游戏来试一下. 介绍一下几个主要的类: Frame:帧的定义,主要描 ...
- HTML5小游戏源码收藏
html5魅族创意的贪食蛇游戏源码下载 html5网页版打砖块小游戏源码下载 html5 3D立体魔方小游戏源码下载 html5网页版飞机躲避游戏源码下载 html5三国人物连连看游戏源码下载 js ...
- 菜鸟做HTML5小游戏 - 翻翻乐
记录下开放过程.做小游戏开发,又要跨平台,flash又不支持iPhone,html5是最好的选择. 先看看最后效果: 好了,开始demo. 1.准备工作: 图片素材(省略...最后代码一起打包) 了解 ...
- Html5 小游戏 俄罗斯方块
导言 在一个风和日丽的一天,看完了疯狂HTML 5+CSS 3+JavaScript讲义,跟着做了书里最后一章的俄罗斯方块小游戏,并做了一些改进,作为自己前端学习的第一站. 游戏效果: 制作思路 因为 ...
- HTML5小游戏之见缝插针
今天给大家带来的就是一款叫做<见缝插针>的游戏.有空你就往里插,直到你无处可插!看你能过多少关! 简洁大气 黑白搭配游戏画面非常的简洁,米白色的背景中央,放置着一个不断旋转的太阳状的球体, ...
随机推荐
- 2016/11/17 周四 <javascript的封装简单示例>
这是一个简单的javascript代码封装的示例以及封装后的调用方法: var ticker={ n:0, add:function() { this.n++; }, show:function() ...
- 关于iOS导航控制器隐藏和显示会出现返回键失效,导航栏标题动画异常
最近做的demo bug出现了,我觉得这个bug出现得很经典所以贴出来给大家看看, bug演示就是:点击返回键失效出现如下gif图演示的内容 为啥会出现如此奇葩的bug,系统的返回键居然失效了,尴尬 ...
- 第12条：考虑实现Comparable接口
CompareTo方法没有在Object中声明,它是Comparable接口中的唯一的方法,不但允许进行简单的等同性比较,而且允许执行顺序比较.类实现了Comparable接口,就表明它的实例具有内在 ...
- php5魔术函数、魔术常量
魔术函数 1.__construct() 实例化对象时被调用, 当__construct和以类名为函数名的函数同时存在时,__construct将被调用,另一个不被调用. 2.__destruct ...
- 数据迁移sql
1.把数据库test中的表Table1中的数据插入到数据库test2中的表Table2:insert into test2.Table2(a,c,d) select a,c,5 from test.T ...
- Linux系列教程（十六）——Linux权限管理之ACL权限
通过前面的两篇博客我们介绍了Linux系统的用户管理,Linux用户和用户组管理之相关配置文件 讲解了用户管理的相关配置文件,包括用户信息文件/etc/passwd,用户密码文件/etc/shadow ...
- [转]PuTTY字体颜色设置
转载于 https://blog.csdn.net/cyd_shuihan/article/details/77836290 用putty登录Linux,默认配色方案看不清,我们可以自己设置新的字体大 ...
- leetcode每日刷题计划-简单篇day10
跳题,不熟悉的留到周末再做. 保持冷静,不信画饼. num 100 相同的树 Same Tree 做法可能不是特别简洁,注意一下.最后判断完子树以后,要确定根的数值是一样的 然后在isleaf的判定先 ...
- 命令行添加subl命令
添加了此命令后可以使用subl加文件或路径,就能通过命令行使用sublime text打开相应的文件或目录. 这里我的是MacOS,windows系统换路径就好. 第一步 sudo ln -s /Ap ...
- bracketed-paste-magic:zle:41: not enough arguments for -U
原因是zsh的插件出问题了,解法方法如下: 把 ~/.oh-my-zsh/lib/misc.zsh 文件中的第一段 if 注释掉 OK 啦 # ]]; then # for d in $fpath; ...