APP
HTML5響應式手機模板：H5游戲網頁設計——html5手機微信氣泡碰撞游戲源碼 HTML+CSS+JavaScript
四、web前端入門到高級(視頻+源碼+資料+面試)一整套 (教程)
五、源碼獲取
手機網站模板 手機模板 響應式手機網站 html5手機網站模板 企業手機網站模板 公司手機網站模板
作品介紹1.網頁作品簡介方面 ：原始HTML+CSS+JS頁面設計,HTML5響應式手機模板，這是一個不錯的網頁制作，畫面精明，非常適合初學者學習使用。
2.網頁作品編輯方面：此作品為html5響應式手機模板， html+css 布局制作，作品下載后可使用任意HTML編輯軟件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有編輯器均可使用）
?
文章目錄
?
一、作品演示
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>泡泡</title>
<link href="../css/main.css" rel="stylesheet" type="text/css" />
<link href="../css/all.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../js/play.js"></script>
</head>
<body onload="go()">
<audio src="music.mp3" controls="controls" autoplay="autoplay" loop="loop"></audio>
<audio id ="sound" src="" controls="controls" autoplay="autoplay" ></audio>
<div class="con-play" id="imgdiv">
<!--計數 -->
<div class="jishu">
<img alt="" src="../images/sidai.png" width="100%">
<div id="time" class="time">00:00</div>
</div>
<!--愛的泡泡 -->
<!-- <div class="lovepao">-->
<!-- <img alt="" src="../images/loveren02.png" width="95%" style="margin-top: 10px; margin-left: 10px;"> -->
<!-- <span class="writepao"></span>-->
<!-- </div>-->
<!--按鈕 -->
<a class="returnbtn" href="chooselove.html"></a>
<a class="whatbtn" onclick="helptan()" href="javascript:void(0);"></a>
<!--破壞性泡泡
<a class="hidpao hid01" href="javascript:void(0);"></a>
<a class="hidpao hid02" href="javascript:void(0);"></a>
<a class="hidpao hid03" href="javascript:void(0);"></a>
<a class="hidpao hid04" href="javascript:void(0);"></a>-->
<!--成功彈出層 -->
<div class="tan ok" id="success">
<a class="btn-share" href="#" onclick="sharetan()"></a>
<a class="btn-play" href="#" onclick="replay()"></a>
<div class="tantime" id="tantime-okid">01:22</div>
<div class="tanlovepao">
<img alt="" src="../images/loveren02.png" width="100%">
<span class="writepaotan"></span>
</div>
</div>
<!--失敗彈出層 -->
<div class="tan fos" id="fail">
<a class="btn-share" href="#" onclick="sharetan()"></a>
<a class="btn-play" href="#" onclick="replay()"></a>
<div class="tantime" id="tantime-fosid">01:22</div>
<div class="tanlovepao">
<img alt="" src="../images/loveren02.png" width="100%">
<span class="tanflspao"></span>
</div>
</div>
<!--蒙層 -->
<div class="greybg" id="greybg"></div>
<!-- 分享彈出層 -->
<div class="sharetan" id="sharetan-id"><img alt="" src="../images/07-22.png" width="100%"> </div>
<!-- 幫助彈出層 -->
<div onclick="palypage()" class="sharetan" id="helptan-id"><img alt="" src="../images/02.jpg" width="100%"></div>
</div>
<SCRIPT language=JavaScript>
function helptan(){
document.getElementById('helptan-id').style.display = "block";
}
function palypage(){
window.location.href="play.html";
}
function replay(){
window.location.reload();
}
function sharetan(){
document.getElementById('sharetan-id').style.display = "block";
}
//計時器
var c=0
var time;
var hourxs="00";
var minxs="00";
var secxs="00";
function timedCount()
{
var temptextmin=document.getElementById('time');
var tantimeokid=document.getElementById('tantime-okid');
var tantimefosid=document.getElementById('tantime-fosid');
var hour = parseInt(c / 3600);// 小時數
var min = parseInt(c / 60);// 分鐘數
var lastsecs = c % 60;
if(hour<10){
hourxs="0"+hour;
}else{
hourxs=hour;
}
if(min<10){
minxs="0"+min;
}else{
minxs=min;
}
if(lastsecs<10){
secxs="0"+lastsecs;
}else{
secxs=lastsecs;
}
temptextmin.innerHTML = minxs + ":" + secxs;
tantimeokid.innerHTML = minxs + ":" + secxs;
tantimefosid.innerHTML = minxs + ":" + secxs;
c=c+1;
time=setTimeout("timedCount()",1000);
//document.getElementById('start').style.display = "none";
//document.getElementById('end').style.display = "";
}
var xqsd=100;//小球速度
var dqsd=1500;//大球速度
var size=35;//小球的大小
var jgsd=0;
function deletePao(id){
//document.getElementById("img"+id).style.display = "none";
//document.getElementById("img"+id).firstChild.
//document.getElementById("img"+id).className= "hidpao hid01po";
document.getElementById("img"+id).style.display = "none";
document.all.sound.src = "water.mp3";
setTimeout("showPao("+id+")",0);
}
var countId;
function showPao(id){
imgn++;
getPao(countId++);
}
function showfail(){
document.getElementById("fail").style.display = "block";
document.getElementById("greybg").style.display = "block";
}
function showsuccess(){
document.getElementById("success").style.display = "block";
document.getElementById("greybg").style.display = "block";
}
var $=function(obj){return typeof(obj)=="string"?document.getElementById(obj):obj;};
function go(){
moveTo(0,0);focus();
resizeTo(2000,2000);
w=document.body.clientWidth;
h=document.body.clientHeight;
$("imgdiv").style.width =w+"px";
$("imgdiv").style.height=h+"px";
var d='';
x=[];
y=[];
mr=[];
xs=[];
ys=[];
fm=[];
fr=[];
fn=[];
var wr=w-100;
var hr=h-100;
imgn=8;//小球個數
countId=imgn;
for(var i=0;i<imgn;i++){
var xr=Math.round(Math.random()*wr);
var yr=Math.round(Math.random()*hr);
mr[i]=Math.round(Math.random()*2*Math.PI);
xs[i]=Math.round(Math.random()*5);
ys[i]=Math.round(Math.random()*5);
if(i==0){
x[i]=90;
y[i]=350;
}else if(i%4==1){
x[i]=40;
y[i]=40;
}else if(i%4==2){
x[i]=10;
y[i]=20;
}else if(i%4==3){
x[i]=200;
y[i]=50;
}else if(i%4==0){
x[i]=200;
y[i]=10;
}
if(i==0){
fm[i]=dqsd;
fr[i]=70;
fn[i]=fr[i]*2;
d+="<div class='tanlovepao' id='img"+i+"' style='position:absolute;width:0px;height:0px; left:"+x[i]+"px;top:"+y[i]+"px;z-index:10;' ><img alt='' src='../images/loveren02.png' width='95%' style='margin-top: 10px; margin-left: 10px;'> <span class='writepao'></span></div>";
}else{
fm[i]=xqsd;
fr[i]=size;
fn[i]=fr[i]*2;
d+="<a id='img"+i+"' class='hidpao hid01' href='javascript:void(0);' style='position:absolute;width:0px;height:0px; left:"+x[i]+"px;top:"+y[i]+"px;z-index:10;' οnclick=deletePao('"+i+"')></a>";
}
}
$("imgdiv").innerHTML+=d;
runi=0;
setInterval("changxqsd()",3000);
runInterval();
timedCount();
}
function changxqsd(){
jgsd+=30;
}
function getPao(i){
w=document.body.clientWidth;
h=document.body.clientHeight;
var d='';
var wr=w-100;
var hr=h-100;
var xr=Math.round(Math.random()*wr);
var yr=Math.round(Math.random()*hr);
mr[i]=Math.round(Math.random()*2*Math.PI);
xs[i]=Math.round(Math.random()*5);
ys[i]=Math.round(Math.random()*5);
if(i==0){
x[i]=150;
y[i]=200;
}else if(i%4==1){
x[i]=10;
y[i]=10;
}else if(i%4==2){
x[i]=10;
y[i]=150;
}else if(i%4==3){
x[i]=250;
y[i]=150;
}else if(i%4==0){
x[i]=250;
y[i]=10;
}
fm[i]=xqsd-jgsd;
//調節難度 設定最快速度為20（值越小，速度越大）
if(fm[i]<20){
fm[i]=20;
}
fr[i]=size;
fn[i]=fr[i]*2;
d+="<a id='img"+i+"' class='hidpao hid01' href='javascript:void(0);' style='position:absolute;width:0px;height:0px; left:"+x[i]+"px;top:"+y[i]+"px;z-index:10;' οnclick=deletePao('"+i+"')></a>";
$("imgdiv").innerHTML+=d;
runInterval();
}
var goon=1;
function runInterval(){
if(goon==1){
$("img"+runi).src="1.jpg";
$("img"+runi).style.width =(fr[runi]*2)+"px";
$("img"+runi).style.height=(fr[runi]*2)+"px";
setInterval("runmove('"+runi+"');",fm[runi]);
runi++;
var timer=setTimeout("runInterval()",0);
if(runi>imgn-1){clearTimeout(timer);}
}
}
onresize=function(){
w=document.body.clientWidth;
h=document.body.clientHeight;
$("imgdiv").style.width =w+"px";
$("imgdiv").style.height=h+"px";
};
function runmove(n){
if(goon==1){
x[n]+=xs[n];
y[n]+=ys[n];
$("img"+n).style.left=x[n];
$("img"+n).style.top =y[n];
for(var i=0;i<imgn;i++){
if(i!=n){
var RR=fr[n]+fr[i];
if(Math.abs(x[n]+fr[n]-x[i]-fr[i])<RR){
if(Math.abs(y[n]+fr[n]-y[i]-fr[i])<RR){
var dx=(x[n]-x[i]);
var dy=(y[n]-y[i]);
//坐標 圓1
//x[n]+fr[n];
//y[n]+fr[n];
//坐標 圓
//x[i]+fr[i];
//y[i]+fr[i];
var R=Math.sqrt((x[n]+fr[n]-x[i]-fr[i])*(x[n]+fr[n]-x[i]-fr[i])+(y[n]+fr[n]-y[i]-fr[i])*(y[n]+fr[n]-y[i]-fr[i]))
var displayI = document.getElementById("img"+i).style.display;
var displayN = document.getElementById("img"+n).style.display;
if(displayI!="none"&&displayN!="none"){
if(R<RR){
x[n]+=(RR-R)*dx/R;
y[n]+=(RR-R)*dy/R;
$("img"+n).style.left=x[n];
$("img"+n).style.top =y[n];
if(dx==0){
var dvx=0;
}else{
if(i==0||n==0){
//alert("愛情泡泡被撞死了!");
goon=0;
if(c>=60){
showsuccess();
}else{
showfail();
}
clearTimeout(time);
break;
}
var dvx=(fm[i]*(2*xs[i]*dx*dx+2*ys[i]*dx*dy)-fm[n]*(2*xs[n]*dx*dx+2*ys[n]*dy*dx))/(fm[n]+fm[i])/(dx*dx+dy*dy);
}
if(dy==0){
var dvy=0;
}else{
if(i==0||n==0){
//alert("愛情泡泡被撞死了!");
goon=0;
if(c>=60){
showsuccess();
}else{
showfail();
}
clearTimeout(time);
break;
}
var dvy=(fm[i]*(2*xs[i]*dx*dy+2*ys[i]*dy*dy)-fm[n]*(2*xs[n]*dx*dy+2*ys[n]*dy*dy))/(fm[n]+fm[i])/(dx*dx+dy*dy);
}
xs[n]+=dvx;
ys[n]+=dvy;
xs[i]-=dvx;
ys[i]-=dvy;
break;
}
}
}
}
}
}
switch(true){
case ((x[n]<0&&xs[n]<0)||(x[n]+fn[n]>w&&xs[n]>0)):xs[n]*=-1;break;
case ((y[n]<0&&ys[n]<0)||(y[n]+fn[n]>h&&ys[n]>0)):ys[n]*=-1;break;
}
}else{
return false;
//window.location.reload();重新開始
}
}
</SCRIPT>
</body>
</html>
四、web前端入門到高級(視頻+源碼+資料+面試)一整套 (教程)
web前端 零基礎-入門到高級 (視頻+源碼+開發軟件+學習資料+面試題) 一整套 (教程)
適合入門到高級的童鞋們入手~送1000套HTML+CSS+JavaScript模板網站
五、源碼獲取
? ~ 關注我，點贊博文~ 每天帶你漲知識!
?1.看到這里了就 [點贊+好評+收藏] 三連 支持下吧，你的「點贊，好評，收藏」是我創作的動力。
? 2.關注我 ~ 每天帶你學習 :各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學生畢業HTML模板 、期末大作業模板 、等! 「在這里有好多 前端 開發者，一起探討 前端 Node 知識，互相學習」！
?3.以上內容技術相關問題可以相互學習，可關注↓公Z號 獲取更多源碼 !
?
?
本文摘自 ：https://blog.51cto.com/u
