javascript+css3开发打气球小游戏完整代码
作者:急速奔跑中的蜗牛 发布时间:2024-05-02 16:15:54
标签:js,打气球,小游戏
效果知识点:
css3画气球, 自定义属性运用,随机阵列, DOM元素操作,高级回调函数与参数复传,动态布局,鼠标事件,定时器运用,CSS3新增样式等。
css代码如下:
<style>
{margin:0;padding:0;}
body{background:#434343;overflow:hidden}
.balloon{
position:absolute;
left:0;
top:0;
margin:auto;
width:160px;
height:160px;
圆角: 左上 右上 右下 左下
/
css3旋转 顺时针旋转45度
/
background:#faf9f9;
x轴的位置 y轴的位置 影子扩散程度 模糊度 颜色
/
}
.balloon:after{
伪元素的内容
/
display:block;
position:absolute;
因为气球是旋转的 现在的正下方其实是右下角*/
right:0px;
width:0px;
height:0px;
border:8px solid #dbbdbd;
border-top-color:transparent;
border-bottom-color:transparent;
border-left-color:transparent;
transform:rotate(45deg);
border-radius:16px;
}
#wrap{
width:200px;
height:200px;
background:red;
}
</style>
javascript代码如下:
<script>
var num = 10; // 声明遍历num 为div的数量
//var oBody = document.querySelector('body'); //h5 api 获取元素的方法
var oBody=document.documentElement || document.body; //body获取兼容性写法
var wW=window.innerWidth; //获取浏览器窗口的宽度
var wH=window.innerHeight; //获取浏览器窗口高度
var timer=null; //初始化定时器变量
init(num);
function init(num){
for(var i=0;i<num;i++){ //for循环 循环加工厂
var randomL=Math.random()*wW; // 随机left范围
randomL=Math.min(wW-160,randomL); //规范left位置
var balloon = document.createElement('div'); //用js生成标签
balloon.className='balloon'; //给创建的div元素设置类名
balloon.style.left=randomL+'px'; //改变元素的样式中的left的值
balloon.style.top=wH+'px';
balloon.speed=Math.random()*5+1; //自定义属性 创建元素的时候添加
oBody.appendChild(balloon); //body中添加 元素对象
}
}
timer=setInterval(function(){
var oBall=document.querySelectorAll('.balloon');//获取页面所有的气球
for(var i=0,len=oBall.length;i<len;i++){
oBall[i].style.top = oBall[i].offsetTop-oBall[i].speed+'px';
oBall[i].onclick=function(){ //谁 触发了什么 谁做了什么事情
crash(this,function(xxx){
clearInterval(xxx.timer); //清除动画定时器
xxx.parentNode.removeChild(xxx);
});
//this.parentNode.removeChild(this);
init(1);
}
}
},30);
function crash(ele,cb){ //被点击之后撒气效果
ele.timeouter=setTimeout(function(){
cb&&cb(ele);
},500)
ele.timer=setInterval(function(){
ele.speed++; //加速度自增
ele.style.top=ele.offsetTop-ele.speed+'px'; //加速逃离
ele.style.width=ele.offsetWidth-10+'px'; //宽度减少
ele.style.height=ele.offsetHeight-10+'px'; //高度减少
},30)
}
</script>
总结
以上所述是小编给大家介绍的javascript+css3开发打气球小游戏完整代码网站的支持!
来源:http://www.jianshu.com/p/8bb6a45ae57a?utm_source=tuicool&utm_medium=referral


猜你喜欢
- 日志文件对于一个服务器来说是非常重要的,它记录着服务器的运行信息,许多操作都会写日到日志文件,通过日志文件可以监视服务器的运行状态及查看服务
- 最近跟着OpenCV2-Python-Tutorials在学习python_opencv中直方图的反向投影时,第一种方法是使用numpy实现
- 1 创建JupyterLab运行脚本首先找到jupyter-lab命令的位置,一般在~/.local/bin/下,可以创建shell脚本au
- 存在的问题: 合并、压缩文件主要有2方面的问题: 1. 每次发布的时候需要运行一下自己写的bat文件或者其他程序把文件按照自己的配置合并和压
- 本文实例讲述了PHP函数shuffle()取数组若干个随机元素的方法。分享给大家供大家参考,具体如下:有时候我们需要取数组中若干个随机元素(
- 项目中需要从Windows系统传输ISO文件到Linux测试系统,然后再Linux测试系统里安装这个ISO文件。所以就需要实现如何把文件从W
- 前言日常生活中,手残党们经常会把一些照片拍歪,比如拍个证件、试卷、PPT什么的,比如下面这本书的封面原本是个矩形,随手一拍就成了不规则四边形
- QCheckBox 是具有两种状态的控件:开和关。它是一个带有标签的复选框。复选框通常用于表示应用程序可以启用或禁用的功能。#!/usr/b
- 创建测试dataframe:>>> import pandas as pd>>> df = pd.Dat
- 1. 生命游戏是什么生命游戏是英国数学家约翰·何顿·康威在1970年发明的细胞自动机。它包括一个二维矩形世界,这个世界中的每个方格居住着一个
- 使用Python加载最新的Excel读取类库xlwings可以说是Excel数据处理的利器,但使用起来还是有一些注意事项,否则高大上的Pyt
- 方法一:// 禁用右键菜单、复制、选择$(document).bind("contextmenu copy selectstart
- 搜狗(目前好用,免费)def textToAudio_Sougou(message, filePath): &n
- 数据库操作类的优点优点可以说是非常多了,常见的优点就是便于维护、复用、高效、安全、易扩展。例如PDO支持的数据库类型是非常多的,与mysql
- 创建py文件总是为txt格式问题记录写代码过程中创建.py文件时,一直正常,但创建名称为train.py文件时总是为txt格式,即使选择了p
- etcd组件作为一个高可用强一致性的服务发现存储仓库.etcd作为一个受到ZooKeeper与doozer启发而催生的项目,除了拥有与之类似
- 什么是计算属性概念计算属性是vue里面为了简化在模板语法中对响应式属性做计算而存在的什么时候应该使用计算属性根据现有响应式的值得到一个新的值
- photoshop快捷键大全: 工具箱(多种工具共用一个快捷键的可同时按【Shift】加此快捷键选取)相关文章:网页设计软件FrontPag
- phpMyAdmin可以管理整个MySQL服务器(需要超级用户),也可以管理单个数据库。为了实现后一种,你将需要合理设置MySQL用户,他只
- 本文实例讲述了Python django框架应用中实现获取访问者ip地址。分享给大家供大家参考,具体如下:在django官方文档中有一段对r