javascript+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 为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开发打气球小游戏完整代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • JavaScript实现打地鼠小游戏

    JavaScript实现打地鼠小游戏

    在写这个打地鼠的游戏开始首先要清楚每一步该做什么 然后再一步一步搭好框架再完善功能. 1.创建table三行三列,用来存放坑(图片) 2.获得所有的图片标签 3.老鼠的动作有①.冒出来 4.②. 老鼠跑了 5.③.老鼠被打死了 6.完善功能 一.首先实现第一步,用table创建一个三行三列的坑 <div id = "content"> <h2>打地鼠</h2><br/> <table id = "background&qu

  • js实现打地鼠小游戏

    话不多说,请看代码: <!doctype html> <html> <head> <meta charset="utf-8"> <title>打地鼠</title> <style type="text/css"> #content { width:960px; margin:0 auto; text-align:center; margin-top:40px; } #form1 {

  • 纯JavaScript 实现flappy bird小游戏实例代码

    纯JavaScript 实现flappy bird小游戏实例代码

    前言: <flappy bird>是一款由来自越南的独立游戏开发者Dong Nguyen所开发的作品,游戏于2013年5月24日上线,并在2014年2月突然暴红.2014年2月,<Flappy Bird>被开发者本人从苹果及谷歌应用商店撤下.2014年8月份正式回归APP STORE,正式加入Flappy迷们期待已久的多人对战模式.游戏中玩家必须控制一只小鸟,跨越由各种不同长度水管所组成的障碍. 正文: 接下来就是一步一步来实现它 步骤1:页面布局,这儿就不多说了,页面内容如下:

  • js实现贪吃蛇小游戏（容易理解）

    js实现贪吃蛇小游戏（容易理解）

    话不多说,请看代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>贪吃蛇</title> <link rel="stylesheet" href="style.css"> <script src="style.js" >

  • js实现九宫格拼图小游戏

    js实现九宫格拼图小游戏

    效果如下: 代码如下: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>九宫格拼图</title> <style> *{ padding: 0; margin: 0; border: 0; } /* *是通配符,给所有的元素去掉默认样式,因为有的浏览器会默认加上一些样式,这可能会给布局带来问题 */ body{ width: 100

  • javascript+css3开发打气球小游戏完整代码

    javascript+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; 圆角: 左上 右

  • C语言实现飞机大战小游戏完整代码

    C语言实现飞机大战小游戏完整代码

    大一课设做的飞机大战,可以进行登入和注册,这个是利用单链表做的,源代码已经给出,这个是最基本的飞机大战模式,我设置了几个功能,比如排行榜之类的.排行榜是用结构体数组做的,已及冒泡排序,并且在文件里保存信息.比较简单. 这个是注册页面规范: 这个是登入页面: 游戏菜单:  飞机大战页面:  话不多说,直接上代码 以下是源代码  #include"stdio.h" #include"windows.h" //用于获取窗口的句柄与屏幕控制 #include"co

  • javascript实现的猜数小游戏完整实例代码

    本文实例讲述了javascript实现的猜数小游戏.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <

  • pygame开发:马赛逻辑小游戏的代码实现

    pygame开发:马赛逻辑小游戏的代码实现

    目录 一.游戏简介 二.核心代码解析 三.pygame开发流程 1.从创建窗口到棋盘绘制 2.点击方格改变颜色 2.1.点击事件 2.2.碰撞检测 2.3.方格变色 2.4.阵列转换 2.5.效果初见 3.显示提示信息 四.游戏演示视频 一.游戏简介 马赛逻辑,是一个类似数独和扫雷的逻辑小游戏,根据棋盘周围的数据提示点亮方格,因外形像马赛克而得名.在手机游戏中有多款 APP 可以体验该游戏,如 Peak.Nonogram.Crossme 等.但在 PC 端,笔者暂时还未发现复刻版,于是打算自己动

  • C语言实现经典扫雷小游戏完整代码（递归展开 + 选择标记）

    C语言实现经典扫雷小游戏完整代码（递归展开 + 选择标记）

    目录 游戏介绍 游戏整体框架 游戏具体功能及实现 1.雷盘的定义 2.雷盘的初始化 3.布置雷 4.排查雷 5.递归式展开一片 6.获取周围雷的个数 7.标记特定位置 8.打印雷盘 游戏完整代码 1.test.c 2.game.h 3.game.c 游戏效果展示 大家好,今天我们将一起用C语言实现一个经典小游戏 – 扫雷,Let is go ! 游戏介绍 扫雷游戏相信大家都玩过,上图就是一个网页版的扫雷,它的规则是玩家选择一个方格,若此方格没有地雷,那么该方格会显示与它相邻的八个方格中雷的个数,

  • Java实现天天酷跑小游戏完整代码(附源码)

    Java实现天天酷跑小游戏完整代码(附源码)

    目录 首先,写一个需求文档: 一.登录界面 1.界面 2.登录 3.退出 二.开始游戏界面 三.缓冲加载游戏界面 四.游戏主界面 五.结束界面 上代码 首先,写一个需求文档: 一.项目名称:<天天酷跑>(RunDay) 二.功能介绍: 闯关类游戏,玩家登录后,选择进入游戏,通过键盘控制玩家的上下左右移动,来躲避 障碍物和吃金币,玩家躲避的障碍物越多跑酷距离越远,玩家吃的金币越多,得分越高. 三.功能模块: 1.登录界面 用户名(输入框,明文) 密码(输入框,密文) 登录.取消按钮 2.菜单选择

  • Unity游戏开发之射击小游戏的实现

    Unity游戏开发之射击小游戏的实现

    目录 前言 游戏画面展示 游戏代码解析 游戏打包 总结 前言 人们一直都说学习和玩游戏不能兼顾,那我们就来边学习怎样制作游戏,边玩游戏 不就兼得了嘛~ 我可真是一个小天才呢~ 所以本篇文章为大家带来一个 横版2D射击小游戏,游戏制作超级简单,玩法一学就会, 一起来看看吧! 游戏画面展示 这款小游戏只用了两个UI界面,一个是菜单界面,另一个是战斗界面 菜单界面有三种模式,分别是一般.困难和地狱 战斗界面就是很简单的从两边刷野怪,然后主角开枪打死他们 UI搭建很简单,只有一张背景图使用Image,加

  • 纯javascript模仿微信打飞机小游戏

    纯javascript模仿微信打飞机小游戏

    七夕情人节也不要忘了打游戏喔喔-,下面小编为大家准备的情人节礼物之纯javascript模仿微信打飞机小游戏分享给天下的情人们. 首先给大家展示效果图: 查看演示      源码下载 纯JavaScript模仿微信打飞机游戏,做网页小游戏的借鉴下,界面设计是竖长形仿手机屏幕风格,游戏效果流畅.具有分数统计,里面的JS封装类中包括有创建飞机类.飞机移动行为控制,创建子弹类,产生min到max之间的随机数,判断本方飞机是否移出边界,如果移出边界,则取消mousemove事件,反之加上mousemov

  • Javascript别踩白块儿（钢琴块儿）小游戏实现代码

    Javascript别踩白块儿（钢琴块儿）小游戏实现代码

    游戏唯一的一个规则,我们只需要不断踩着黑色方块前进即可,这里根据方向键来踩白块 在规定时间内,每走一次分数加100 游戏内的每一排都是一个有四个元素的数组,当正确的踩到黑块前进后,前一个数组内所有的对象样式属性(backgroundColor)赋值给其后一个数组内的对应位置处的对象,便实现了前进的功能,很简单的思想 <!DOCTYPE html><html> <head lang="en"> <meta charset="UTF-8&

随机推荐