Code complet pour développer un jeu de ballon avec javascript et css3

Cet article présente principalement le code complet pour développer un jeu de ballon avec javascript et css3. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

C'est un. simple Mais l'impressionnant mini-jeu, le code d'implémentation du mini-jeu de jeu de ballons, est principalement basé sur js et css3, et dessine des ballons basés sur css3. Pour le code d'implémentation spécifique, veuillez vous référer à cet article

<.>

Points de connaissance des effets :

peinture de ballons CSS3, application d'attributs personnalisés, tableau aléatoire, fonctionnement des éléments DOM, fonction de rappel avancée et retransmission des paramètres, dynamique mise en page, événements de souris, application de minuterie, nouveaux styles d'ajout CSS3, etc.

Le code CSS est le suivant :

<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;

Parce que le ballon tourne, le bas droit est en fait, le coin inférieur droit */

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>

le code javascript est le suivant :

<script>
  var num = 10; // 声明遍历num 为p的数量
  //var oBody = document.querySelector(&#39;body&#39;); //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(&#39;p&#39;); //用js生成标签
      balloon.className=&#39;balloon&#39;; //给创建的p元素设置类名
      balloon.style.left=randomL+&#39;px&#39;; //改变元素的样式中的left的值
      balloon.style.top=wH+&#39;px&#39;;
      balloon.speed=Math.random()*5+1; //自定义属性 创建元素的时候添加
      oBody.appendChild(balloon); //body中添加 元素对象
    }
  }
  timer=setInterval(function(){
    var oBall=document.querySelectorAll(&#39;.balloon&#39;);//获取页面所有的气球
    for(var i=0,len=oBall.length;i<len;i++){
      oBall[i].style.top = oBall[i].offsetTop-oBall[i].speed+&#39;px&#39;;
      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+&#39;px&#39;; //加速逃离
      ele.style.width=ele.offsetWidth-10+&#39;px&#39;; //宽度减少
      ele.style.height=ele.offsetHeight-10+&#39;px&#39;; //高度减少
    },30)
  }
</script>

Ce qui précède est L'ensemble du contenu de cet article devrait être utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Introduction à l'utilisation de CSS pour créer des styles d'arrière-plan à rayures pour les pages Web

À propos des filtres dans CSS3 Introduction aux attributs

Utilisation du dégradé radial CSS3 pour créer un coupon

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!