이것은 간단하지만 인상적인 작은 게임입니다. 풍선 게임의 구현 코드는 주로 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+css3에서 풍선 게임을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!<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>