盖房子优化3
2016-07-13 08:38
387 查看
<!DOCTYPE html>
<html>
<head>
<meta
charset="utf-8"
/>
<title></title>
<style
type="text/css">
.wrap
{
width:
800px;
height:
500px;
border:
1px solid black;
margin:
0 auto;
position:
relative;
overflow:
hidden;
}
.row
{
position:
absolute;
bottom:
0;
left:
0;
}
.row>div
{
width:
20px;
height:
20px;
border:
1px solid deeppink;
background-color: mediumspringgreen;
float:
left;
box-sizing:
border-box;
}
.row>div.remove
{
transform: translate(0,
100px) rotate(360deg);
transition:
all 3s;
opacity:
0;
}
#score
{
color: deepskyblue;
font-size:
50px;
text-align: center;
}
</style>
</head>
<body>
<div id="score">0</div>
<div
class="wrap"></div>
<script
type="text/javascript">
var
wrap = document.querySelector(".wrap");
var
scoreDiv = document.getElementById("score")
var
bottom = 0;
// 用于定位新生成的row的bottom值
var
time = 300;
var
boxNum = 20;
// 定义一个变量，保存方格数
function
createRow() {
// 使用js创建row和20个小div
var
row = document.createElement("div");
row.className
= "row";
row.style.bottom
= bottom + "px";
// 设置row的left值，应该是上一个row的offseLeft
// 找到新创建的row的上一行
var
preRow = wrap.lastElementChild;
if
(preRow) {
row.style.left
= preRow.offsetLeft + "px";
}
else {
row.style.left
= "0px";
}
row.style.width
= 20 *
boxNum + "px";
// 创建20个小方格
for
(var i = 0; i
< boxNum; i++) {
var
box = document.createElement("div");
row.appendChild(box);
}
// 将row添加为wrap的孩子节点
wrap.appendChild(row);
// 碰壁动画
var
speed = 20;
//做动画，过去的碰壁反弹
row.timer
= setInterval(function() {
var
maxWidth = wrap.clientWidth -
row.offsetWidth;
row.style.left
= row.offsetLeft + speed
+ "px";
//碰壁判断
if
(row.offsetLeft >= maxWidth) {
speed
*= -1;
}
else if (row.offsetLeft <= 0) {
speed
*= -1;
}
}, time);
// 返回新创建row节点
return row;
}
// 调用createRow()函数，页面一加载，就有一行并且有动画了
createRow();
wrap.onclick
= function() {
// 计分
scoreDiv.innerHTML
= Number(scoreDiv.innerHTML) +
1;
// 高度的特殊处理
if(bottom
>= 200){
bottom
-= 20;
// 获取每一行的top+20
for
(var h = 0; h
< wrap.children.length; h++) {
wrap.children[h].style.top
= wrap.children[h].offsetTop +
20 + "px";
}
}
// 点击后动画变快
time
-= 20;
// 时间不能减成负值
if
(time <= 50) {
time
= 50;
}
// bottom每次增加20
bottom
+= 20;
//获取当前停止的一行和上一行，计算offsetLeft差值
var
stopRow = wrap.lastElementChild;
var
qianyigeRow = stopRow.previousSibling;// 或者previouselementSibling
var
leftCha = 0;
// 判断至少有两行，才做减法
if
(qianyigeRow) {
leftCha
= qianyigeRow.offsetLeft - stopRow.offsetLeft;
}
// 需要删除的方格数
var
removeNum = Math.abs(leftCha /
20);
// 更新新的方格数
boxNum
-= removeNum;
if
(boxNum <= 0) {
alert("Game Over!");
// 停止定时器
clearInterval(stopRow.timer);
}
// 删除后面小方格
if
(leftCha < 0) {
// 设置要删除的小块的类为remove，用于动画效果
for
(var i = 0; i
< removeNum; i++) {
var
box = stopRow.children[(stopRow.children.length
- 1) - i];
box.className
= "remove";
}
setTimeout(function() {
for
(var j = 0; j
< removeNum; j++) {
stopRow.removeChild(stopRow.lastElementChild);
}
},
1000);
}else if(leftCha
> 0){
// 从前面删除小方格
// 为了动画处理
for(var
a = 0; a
< removeNum; a++){
stopRow.children[a].className
= "remove";
}
// 从前面删除小方格
setTimeout(function(){
// 处理下新的style.left值
stopRow.style.left
= stopRow.offsetLeft + 20
* removeNum + "px";
for
(var b = 0; b
< removeNum; b++) {
stopRow.removeChild(stopRow.firstElementChild);
}
},1000);
}
// 每点击一次，就创建新的row
var
newRow = createRow();
// 让前一个row停止计时器，找到新添加的row的上一个兄弟节点
clearInterval(newRow.previousSibling.timer);//或者previouselementSibling
}
</script>
</body>
</html>
<html>
<head>
<meta
charset="utf-8"
/>
<title></title>
<style
type="text/css">
.wrap
{
width:
800px;
height:
500px;
border:
1px solid black;
margin:
0 auto;
position:
relative;
overflow:
hidden;
}
.row
{
position:
absolute;
bottom:
0;
left:
0;
}
.row>div
{
width:
20px;
height:
20px;
border:
1px solid deeppink;
background-color: mediumspringgreen;
float:
left;
box-sizing:
border-box;
}
.row>div.remove
{
transform: translate(0,
100px) rotate(360deg);
transition:
all 3s;
opacity:
0;
}
#score
{
color: deepskyblue;
font-size:
50px;
text-align: center;
}
</style>
</head>
<body>
<div id="score">0</div>
<div
class="wrap"></div>
<script
type="text/javascript">
var
wrap = document.querySelector(".wrap");
var
scoreDiv = document.getElementById("score")
var
bottom = 0;
// 用于定位新生成的row的bottom值
var
time = 300;
var
boxNum = 20;
// 定义一个变量，保存方格数
function
createRow() {
// 使用js创建row和20个小div
var
row = document.createElement("div");
row.className
= "row";
row.style.bottom
= bottom + "px";
// 设置row的left值，应该是上一个row的offseLeft
// 找到新创建的row的上一行
var
preRow = wrap.lastElementChild;
if
(preRow) {
row.style.left
= preRow.offsetLeft + "px";
}
else {
row.style.left
= "0px";
}
row.style.width
= 20 *
boxNum + "px";
// 创建20个小方格
for
(var i = 0; i
< boxNum; i++) {
var
box = document.createElement("div");
row.appendChild(box);
}
// 将row添加为wrap的孩子节点
wrap.appendChild(row);
// 碰壁动画
var
speed = 20;
//做动画，过去的碰壁反弹
row.timer
= setInterval(function() {
var
maxWidth = wrap.clientWidth -
row.offsetWidth;
row.style.left
= row.offsetLeft + speed
+ "px";
//碰壁判断
if
(row.offsetLeft >= maxWidth) {
speed
*= -1;
}
else if (row.offsetLeft <= 0) {
speed
*= -1;
}
}, time);
// 返回新创建row节点
return row;
}
// 调用createRow()函数，页面一加载，就有一行并且有动画了
createRow();
wrap.onclick
= function() {
// 计分
scoreDiv.innerHTML
= Number(scoreDiv.innerHTML) +
1;
// 高度的特殊处理
if(bottom
>= 200){
bottom
-= 20;
// 获取每一行的top+20
for
(var h = 0; h
< wrap.children.length; h++) {
wrap.children[h].style.top
= wrap.children[h].offsetTop +
20 + "px";
}
}
// 点击后动画变快
time
-= 20;
// 时间不能减成负值
if
(time <= 50) {
time
= 50;
}
// bottom每次增加20
bottom
+= 20;
//获取当前停止的一行和上一行，计算offsetLeft差值
var
stopRow = wrap.lastElementChild;
var
qianyigeRow = stopRow.previousSibling;// 或者previouselementSibling
var
leftCha = 0;
// 判断至少有两行，才做减法
if
(qianyigeRow) {
leftCha
= qianyigeRow.offsetLeft - stopRow.offsetLeft;
}
// 需要删除的方格数
var
removeNum = Math.abs(leftCha /
20);
// 更新新的方格数
boxNum
-= removeNum;
if
(boxNum <= 0) {
alert("Game Over!");
// 停止定时器
clearInterval(stopRow.timer);
}
// 删除后面小方格
if
(leftCha < 0) {
// 设置要删除的小块的类为remove，用于动画效果
for
(var i = 0; i
< removeNum; i++) {
var
box = stopRow.children[(stopRow.children.length
- 1) - i];
box.className
= "remove";
}
setTimeout(function() {
for
(var j = 0; j
< removeNum; j++) {
stopRow.removeChild(stopRow.lastElementChild);
}
},
1000);
}else if(leftCha
> 0){
// 从前面删除小方格
// 为了动画处理
for(var
a = 0; a
< removeNum; a++){
stopRow.children[a].className
= "remove";
}
// 从前面删除小方格
setTimeout(function(){
// 处理下新的style.left值
stopRow.style.left
= stopRow.offsetLeft + 20
* removeNum + "px";
for
(var b = 0; b
< removeNum; b++) {
stopRow.removeChild(stopRow.firstElementChild);
}
},1000);
}
// 每点击一次，就创建新的row
var
newRow = createRow();
// 让前一个row停止计时器，找到新添加的row的上一个兄弟节点
clearInterval(newRow.previousSibling.timer);//或者previouselementSibling
}
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Extjs4.0 最新最全视频教程
- Javascript中toFixed方法的改进
- 5个常见可用性错误和解决方案
- js数组实现图片轮播
- js可突破windows弹退效果代码
- JSP脚本漏洞面面观
- 使用BAT一句话命令实现快速合并JS、CSS
- js显示当前星期的起止日期的脚本
- 爆炸式的JS圆形浮动菜单特效代码
- js select常用操作控制代码
- JS实现不使用图片仿Windows右键菜单效果代码
- 从jsp发送动态图像
- 原生js结合html5制作小飞龙的简易跳球
- js 页面模块自由拖动实例
- js实现小鱼吐泡泡在页面游动特效
- js 提交和设置表单的值
- PHP VBS JS 函数 对照表
- node.js抓取并分析网页内容有无特殊内容的js文件
- PHP+JS实现大规模数据提交的方法
- 仿51JOB的地区选择效果(可选择多个地区)