집 >웹 프론트엔드 >CSS 튜토리얼 >자바스크립트와 CSS3를 사용하여 풍선 게임을 개발하기 위한 완전한 코드

자바스크립트와 CSS3를 사용하여 풍선 게임을 개발하기 위한 완전한 코드

不言원래의: 2018-07-02 11:13:572395검색

이 글은 주로 javascript와 css3를 사용하여 풍선 게임을 개발하기 위한 전체 코드를 소개합니다. 이제 필요한 친구들이 참고할 수 있도록 공유하겠습니다.

간단하지만 인상적인 작은 게임입니다. 풍선 게임의 구현 코드는 주로 js와 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(&#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>

위 내용은 모두의 학습에 도움이 되기를 바랍니다. PHP 중국어 웹사이트!

자바스크립트와 CSS3를 사용하여 풍선 게임을 개발하기 위한 완전한 코드

관련 기사