在javascript+css3中如何实现打气球小游戏
这是一个简单但是印象深刻的小游戏,打气球小游戏的实现代码,主要基于js和css3,基于css3画气球,具体实现代码大家参考下本文
效果知识点:
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 为p的数量 //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('p'); //用js生成标签 balloon.className='balloon'; //给创建的p元素设置类名 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中如何实现打气球小游戏的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

如何使用JS和百度地图实现地图平移功能百度地图是一款广泛使用的地图服务平台,在Web开发中经常用于展示地理信息、定位等功能。本文将介绍如何使用JS和百度地图API实现地图平移功能,并提供具体的代码示例。一、准备工作使用百度地图API前,首先需要在百度地图开放平台(http://lbsyun.baidu.com/)上申请一个开发者账号,并创建一个应用。创建完成

股票分析必备工具:学习PHP和JS绘制蜡烛图的步骤,需要具体代码示例随着互联网和科技的快速发展,股票交易已经成为许多投资者的重要途径之一。而股票分析是投资者决策的重要一环,其中蜡烛图被广泛应用于技术分析中。学习如何使用PHP和JS绘制蜡烛图将为投资者提供更多直观的信息,帮助他们更好地做出决策。蜡烛图是一种以蜡烛形状来展示股票价格的技术图表。它展示了股票价格的

人脸检测识别技术已经是一个比较成熟且应用广泛的技术。而目前最为广泛的互联网应用语言非JS莫属,在Web前端实现人脸检测识别相比后端的人脸识别有优势也有弱势。优势包括减少网络交互、实时识别,大大缩短了用户等待时间,提高了用户体验;弱势是:受到模型大小限制,其中准确率也有限。如何在web端使用js实现人脸检测呢?为了实现Web端人脸识别,需要熟悉相关的编程语言和技术,如JavaScript、HTML、CSS、WebRTC等。同时还需要掌握相关的计算机视觉和人工智能技术。值得注意的是,由于Web端的计

如何使用PHP和JS创建股票蜡烛图股票蜡烛图是股票市场中常见的一种技术分析图形,通过绘制股票的开盘价、收盘价、最高价和最低价等数据,帮助投资者更直观地了解股票的价格波动情况。本文将教你如何使用PHP和JS创建股票蜡烛图,并附上具体的代码示例。一、准备工作在开始之前,我们需要准备以下环境:1.一台运行PHP的服务器2.一个支持HTML5和Canvas的浏览器3

随着互联网金融的迅速发展,股票投资已经成为了越来越多人的选择。而在股票交易中,蜡烛图是一种常用的技术分析方法,它能够显示股票价格的变化趋势,帮助投资者做出更加精准的决策。本文将通过介绍PHP和JS的开发技巧,带领读者了解如何绘制股票蜡烛图,并提供具体的代码示例。一、了解股票蜡烛图在介绍如何绘制股票蜡烛图之前,我们首先需要了解一下什么是蜡烛图。蜡烛图是由日本人

如何使用JS和百度地图实现地图多边形绘制功能在现代网页开发中,地图应用已经成为常见的功能之一。而地图上绘制多边形,可以帮助我们将特定区域进行标记,方便用户进行查看和分析。本文将介绍如何使用JS和百度地图API实现地图多边形绘制功能,并提供具体的代码示例。首先,我们需要引入百度地图API。可以利用以下代码在HTML文件中导入百度地图API的JavaScript

如何使用JS和百度地图实现地图点击事件处理功能概述:在Web开发中,经常需要使用地图功能来展示地理位置和地理信息。而地图上的点击事件处理是地图功能中常用且重要的一部分。本文将介绍如何使用JS和百度地图API来实现地图的点击事件处理功能,并给出具体的代码示例。步骤:导入百度地图的API文件首先,要在HTML文件中导入百度地图API的文件,可以通过以下代码实现:

如何使用JS和百度地图实现地图热力图功能简介:随着互联网和移动设备的迅速发展,地图成为了一种普遍的应用场景。而热力图作为一种可视化的展示方式,能够帮助我们更直观地了解数据的分布情况。本文将介绍如何使用JS和百度地图API来实现地图热力图的功能,并提供具体的代码示例。准备工作:在开始之前,你需要准备以下事项:一个百度开发者账号,并创建一个应用,获取到相应的AP
