北京十大室内设计工作室,企业seo优化方案,网络代运营推广,衡阳seo服务【界面效果图】 【代码结构】 【代码结构解释】 1、使用html语言实现数据 2、使用css3语言实现样式 3、使用JS语言实现路基控制 【注意是想】 1、如需查看效果#xff0c;请使用手机浏览器#xff0c;或者使用appcan打包查看 2、如果使用浏览器#xff0c;请选择google的Chr… 【界面效果图】 【代码结构】 【代码结构解释】 1、使用html语言实现数据 2、使用css3语言实现样式 3、使用JS语言实现路基控制 【注意是想】 1、如需查看效果请使用手机浏览器或者使用appcan打包查看 2、如果使用浏览器请选择google的Chrome浏览器并使用组合键【Ctrlshifti】进入开发者模式的手机模式 否则看不到效果 【AppCan打包封装】 《《《相关细节请点击右侧图标连接》》》 【已打包app】 【点击下载】 【代码详细】 【index.html】 !DOCTYPE html
html
headmeta charsetUTF-8titleJust Do 8/title!--禁止浏览器缓存--meta http-equivpragma contentno-cach / meta http-equivcache-control contentno-cache / meta http-equivexpires content0 /!--宽度为设备的最大宽度禁止用户放大和缩小--meta nameviewport contentwidthdevice-width, initial-scale1.0, minimum-scale1.0, maximum-scale1.0, user-scalableno!--让网页内容以应用程序风格显示并使状态栏透明--!--删除默认的苹果工具栏和菜单栏--meta nameapple-mobile-web-app-capable contentyes!--指定的iphone中浏览器顶端的状态条的样式为黑色透明--meta contentblack-translucent nameapple-mobile-web-app-status-bar-style /!--告诉设备忽略将页面中的数字识别为电话号码--meta contenttelephoneno nameformat-detection /!--CSS文件--link relstylesheet typetext/css idindex_css hrefcss/index.css!--JS文件--script srcjs/jquery-1.11.2.min.js/scriptscript srcjs/index.js/script
/head
bodydiv idcontainerdiv idtltJust Do 8/divdiv idscore0/divdiv idlose_blockp classtltYOUR SCORE:/pp classscore0/pp classh_scoreHIGH SCORE : span0/span/pspan classrestartRESTART/span/divdiv idwin_blockp classtltYOUR WIN !!/pp classscore0/pp classh_scoreHIGH SCORE : span0/span/pspan classrestartRESTART/span/divdiv idbox!--div classitem item11/divdiv classitem item22/divdiv classitem item33/divdiv classitem item44/divdiv classitem item55/divdiv classitem item66/divdiv classitem item77/divdiv classitem item88/divdiv classitem item2 item_p2/div--/div/div
/body
/html
script
document.ontouchmove function(e){ e.preventDefault(); }
window.onselectstartfunction() {return false;} //禁用选择
window.οncοpyfunction() {return false;} //禁止复制
//禁止查看源代码
function stop(){
return false;
}
document.οncοntextmenustop;
document.οnkeydοwnfunction(){
if(window.event window.event.keyCode 113window.event.keyCode123window.event.keyCode!116) {
return false;
};
}/script 【index.css】 /* CSS Document */
*{margin:0 auto;padding:0; font-family: Helvetica Neue, Helvetica,华文新魏;}
#container{ position:relative; width:100%; height:300px; background:#000;}
#lose_block{display:none; position:fixed; z-index:1000; width:100%; height:100%; background:rgb(0,0,0); opacity:0.92;}
#lose_block .tlt{font-size:10vw; color:#fff; width:100%; text-align:center; margin-top:3em;}
#lose_block .score{font-size:20vw; color:#0F0; width:100%; text-align:center; margin-top:1em;}
#lose_block .h_score{font-size:6vw; color:#FF0; width:100%; text-align:center; margin-top:2em;}
#lose_block .restart{ display:inline-block;float:right;font-size:7vw; color:#fff; width:50%; height:2em; line-height:2em; text-align:center; margin-top:4em;}
#lose_block .restart:hover{background:#666;}#win_block{display:none; position:fixed; z-index:1000; width:100%; height:100%; background:rgb(0,0,0); opacity:0.92;}
#win_block .tlt{font-size:10vw; color:#fff; width:100%; text-align:center; margin-top:3em;}
#win_block .score{font-size:20vw; color:#0F0; width:100%; text-align:center; margin-top:1em;}
#win_block .h_score{font-size:6vw; color:#FF0; width:100%; text-align:center; margin-top:2em;}
#win_block .restart{ display:inline-block;float:right;font-size:7vw; color:#fff; width:50%; height:2em; line-height:2em; text-align:center; margin-top:4em;}
#win_block .restart:hover{background:#666;}#tlt{ position:fixed; top:5%; left:0.3em; color:#7FFF00; font-size:12vw;}
#score{ position:fixed; top:6.5%; right:1em; color:#fff; font-size:8.5vw;}
#box{ position:fixed; bottom:0;width:100%; font-size:15vw; height:8.88em; }
.item{position:fixed; width:16.666%; font-size:14vw; text-align:center; height:1.09em; border-bottom:solid 0.12em rgba(0,0,0,.2); overflow:hidden;
-webkit-transition:all .15s ease;
}
.item1{background:rgba(255,255,255,.8);color:rgba(0,0,0,0.6);}
.item2{background:rgba(155,155,155,0.8);color:rgba(255,255,255,1);}
.item3{background:rgba(0,204,255,.8);color:rgba(255,255,255,0.7);}
.item4{background:rgba(0,255,0,0.7);color:rgba(255,255,0,0.7);}
.item5{background:rgba(0,0,255,0.8);color:rgba(0,204,255,1);}
.item6{background:rgba(153,0,153,0.6);color:rgba(255,255,0,.8);}
.item7{background:rgba(255,51,0,0.9);color:rgba(255,255,255,.5);}
.item8{background:rgba(255,255,255,1);color:rgba(153,0,255,1);}.item_p{bottom:8.4em;}
.item_p0{ width:0;height:0;}
.item_l_0{left:0;}
.item_l_1{left:16.666%;}
.item_l_2{left:33.333%;}
.item_l_3{left:50%;}
.item_l_4{left:66.666%;}
.item_l_5{left:83.333%;}.item_b_0{bottom:0;}
.item_b_1{bottom:1.2em;}
.item_b_2{bottom:2.4em;}
.item_b_3{bottom:3.6em;}
.item_b_4{bottom:4.8em;}
.item_b_5{bottom:6em;}
.item_b_6{bottom:7.2em;} 【index.js】 // JavaScript Document//全局参数
var w_wwindow.innerWidth;
var w_hwindow.innerHeight;
var item_ww_w/10;
var indexMath.floor(Math.random()*4);//上层添加子例的index
var cantouch1;//是否可以触摸
var move1;//检测是否可以滑动
var move21;//可滑动两格
var move31;//可滑动三格
var p_pos[];//待处理项
var d_pos[];//待删除项
var posnew Array(new Array(0,0,0,0,0,0),new Array(0,0,0,0,0,0),new Array(0,0,0,0,0,0),new Array(0,0,0,0,0,0),new Array(0,0,0,0,0,0),new Array(0,0,0,0,0,0),new Array(0,0,0,0,0,0),new Array(0,0,0,0,0,0));//音频文件var audio_down,audio_over,audio_change;
//dom树构造完毕后运行
$(document).ready(function(e) {load_audio_down();load_audio_over();load_audio_change();//窗口改变大小时$(window).resize(function(e) {rfWin_bacpic();//背景适配});rfWin_bacpic();//背景适配listen_gesture();//手势监听add_new_items();//按钮监听restart();
});
/**
*load_audio
*author zhangwei
*/
function load_audio_down(){audio_down document.createElement(audio);if (audio_down ! null audio_down.canPlayType){audio_down.src resource/down.wav;//audio_down.play();}
}
function load_audio_over(){audio_over document.createElement(audio);if (audio_over ! null audio_over.canPlayType){audio_over.src resource/over.wav;//audio_over.play();}
}
function load_audio_change(){audio_change document.createElement(audio);if (audio_change ! null audio_change.canPlayType){audio_change.src resource/change.wav;//audio_change.play();}
}/**
*重新开始
*author zhangwei
*/
function restart(){$(.restart).click(function(){//location.reload();//数据还原indexMath.floor(Math.random()*4);//上层添加子例的indexcantouch1;//是否可以触摸move1;//检测是否可以滑动move21;//可滑动两格move31;//可滑动三格p_pos[];//待处理项d_pos[];//待删除项posnew Array(new Array(0,0,0,0,0,0),new Array(0,0,0,0,0,0),new Array(0,0,0,0,0,0),new Array(0,0,0,0,0,0),new Array(0,0,0,0,0,0),new Array(0,0,0,0,0,0),new Array(0,0,0,0,0,0),new Array(0,0,0,0,0,0));$(#win_block).css(display,none);$(#lose_block).css(display,none);$(#box).html();$(#score).text(0);//重新开始add_new_items();});//restart
}
/**
*手势监听
*author zhangwei
*/
function listen_gesture(){var s_x;var s_y;var e_x;var e_y;$(document).on(touchstart,function(e) {if(!move !cantouch)return;var touch e.originalEvent.targetTouches[0]; s_xtouch.pageX;s_ytouch.pageY;$(document).on(touchmove,function(e) {var touch e.originalEvent.changedTouches[0];e_xtouch.pageX;e_ytouch.pageY;var c_x(e_x-s_x);var c_y(e_y-s_y);//c_yc_y0?c_y:-c_y;if(movec_x*c_xc_y*c_yitem_w*item_wc_x!0){if((c_y/c_x1) (c_y/c_x-1)){if(c_x0){//alert(R);move_right();move0;}else{//alert(L);move_left();move0;}}else{if(c_y0){//alert(D);move_down();audio_down.play();move0;cantouch0;//禁止再触摸发出指令}else{//alert(U);item_p_change();move0;}}}if(move2c_x*c_xc_y*c_yitem_w*item_w*4c_x!0){if((c_y/c_x1) (c_y/c_x-1)){if(c_x0){//alert(R);move_right();move20;}else{//alert(L);move_left();move20;}}}if(move3c_x*c_xc_y*c_yitem_w*item_w*9c_x!0){if((c_y/c_x1) (c_y/c_x-1)){if(c_x0){//alert(R);move_right();move30;}else{//alert(L);move_left();move30;}}}});});$(document).on(touchend,function(e) {if(!cantouch)return;var touch e.originalEvent.changedTouches[0];e_xtouch.pageX;e_ytouch.pageY;var c_x(e_x-s_x);var c_y(e_y-s_y);//c_yc_y0?c_y:-c_y;if(movec_x*c_xc_y*c_y2500){//alert(item_p_change);item_p_change();audio_down.play();}move1;move21;move31;});}/**
*is_win 是否赢得游戏
*author zhangwei
*/
function is_win(){if($(.item:contains(8)).length){var scoreparseInt($(#score).text());if(!localStorage.high_score)localStorage.high_score0;var high_scoreparseInt(localStorage.high_score);if(high_scorescore){localStorage.high_scorescore;high_scorescore;}var k0;var interval8 setInterval(function(){$(.item_p).css(display,none);var stylek%21?block:none;$(.item:contains(8)).css(display,style);console.log(k%2);k;},300);setTimeout(function(){clearInterval(interval8);$(#win_block .score).text(score);$(#win_block .h_score span).text(high_score);$(#win_block).slideDown();audio_over.play();cantouch0;//禁止再触摸发出指令},3000);}
}
/**
*is_lose 是否输掉游戏
*author zhangwei
*/
function is_lose(){for(var i0;ipos[0].length;i){if(pos[pos.length-1][i]!0){var iii;var scoreparseInt($(#score).text());if(!localStorage.high_score)localStorage.high_score0;var high_scoreparseInt(localStorage.high_score);if(high_scorescore){localStorage.high_scorescore;high_scorescore;}var k0;var interval0 setInterval(function(){$(.item_p).css(display,none);var stylek%21?block:none;$(.item[i(pos.length-1)ii]).css(display,style);console.log(k%2);k;},300);setTimeout(function(){clearInterval(interval0);$(#lose_block .score).text(score);$(#lose_block .h_score span).text(high_score);$(#lose_block).slideDown();audio_over.play();cantouch0;//禁止再触摸发出指令},3000);break;}}
}
/**
*加入新元素
*author zhangwei
*/
function add_new_items(){is_lose();is_win();//定分数值 var item01Math.floor(Math.random()*2)1;var item02Math.floor(Math.random()*2)1;var item03Math.floor(Math.random()*2)1;var items_htmldiv pip1 i change0 del0 classitem itemitem01 item_l_index item_p item_p0item01/divdiv pip2 i change0 del0 classitem itemitem02 item_l_(index1) item_p item_p0item02/divdiv pip3 i change0 del0 classitem itemitem03 item_l_(index2) item_p item_p0item03/div;$(#box).append(items_html);setTimeout(function(){$(#box .item_p).removeClass(item_p0);cantouch1;//恢复触摸发出指令},100);}
/**
*move_down 向下加载的方法
*author zhangwei
*/
function move_down(){//位定位置var ti1,ti2,ti3;for(var i0;ipos.length;i){if(pos[i][index]0){ti1i;pos[i][index]$(.item_p[pip1]).text();break;}}for(var i0;ipos.length;i){if(pos[i][index1]0){ti2i;pos[i][index1]$(.item_p[pip2]).text();break;}}for(var i0;ipos.length;i){if(pos[i][index2]0){ti3i;pos[i][index2]$(.item_p[pip3]).text();break;}}$(.item_p[pip1]).addClass(item_b_ti1);$(.item_p[pip2]).addClass(item_b_ti2);$(.item_p[pip3]).addClass(item_b_ti3);//增加编号i$(.item_p[pip1]).attr(i,ti1index);$(.item_p[pip2]).attr(i,ti2(index1));$(.item_p[pip3]).attr(i,ti3(index2));$(.item_p).removeAttr(pi);$(.item_p).removeClass(item_p);check_items();//检查合并项//if(is_ready1)// add_new_items();}
/**
*check_items 检查合并项
*author zhangwei
*/
function check_items(){p_pos[];for(var i0;ipos.length;i){for(var j0;jpos[i].length;j){var tvpos[i][j];if(tv0)continue;//四个角if(i0j0||i0jpos[0].length-1||ipos.length-1j0||ipos.length-1jpos[0].length-1){continue;}if(i0||ipos.length-1){var tv_lpos[i][j-1];var tv_rpos[i][j1];if(tv_ltvtv_rtv){//alert(i,j);var positionij;var direction0;p_pos.push([position,direction,tv]);}}else if(j0||jpos[0].length-1){var tv_bpos[i-1][j];var tv_tpos[i1][j];if(tv_btvtv_ttv){//alert(i,j);var positionij;var direction2;p_pos.push([position,direction,tv]);//alert(p_pos.length,,p_pos[0][0]);}}else{//水平方向var tv_lpos[i][j-1];var tv_rpos[i][j1];if(tv_ltvtv_rtv){//alert(i,j);var positionij;var direction0;p_pos.push([position,direction,tv]);}//垂直方向var tv_bpos[i-1][j];var tv_tpos[i1][j];if(tv_btvtv_ttv){//alert(i,j);var positionij;var direction2;p_pos.push([position,direction,tv]);}//斜率为1的对角线var tv_lbpos[i-1][j-1];var tv_rtpos[i1][j1];if(tv_lbtvtv_rttv){//alert(i,j);var positionij;var direction1;p_pos.push([position,direction,tv]);}//斜率为-1的对角线var tv_ltpos[i1][j-1];var tv_rbpos[i-1][j1];if(tv_lttvtv_rbtv){//alert(i,j);var positionij;var direction3;p_pos.push([position,direction,tv]);}}}}if(p_pos.length0){//cantouch1;//恢复触摸发出指令add_new_items();cantouch1;//恢复触摸发出指令}else{cantouch0;//禁止触摸发出指令merge_items();//合并操作}
}/**
*merge_items 合并操作
*author zhangwei
*/
function merge_items(){//恢复change值$(.item[change1]).attr(change,0);var pp;for(var i0;ppp_pos[i];i){var p_rowparseInt(pp[0].substring(0,1));var p_colparseInt(pp[0].substring(1,2));var directionpp[1];var tvparseInt(pp[2]);//alert(p_row,p_col,direction,tv);change_style(p_row,p_col,tv);//删除需要删除的项var d_i1_row,d_i1_col,d_i2_row,d_i2_col;if(direction0){d_i1_rowp_row;d_i1_colp_col-1;d_i2_rowp_row;d_i2_colp_col1;}else if(direction1){d_i1_rowp_row-1;d_i1_colp_col-1;d_i2_rowp_row1;d_i2_colp_col1;}else if(direction2){d_i1_rowp_row-1;d_i1_colp_col;d_i2_rowp_row1;d_i2_colp_col;}else if(direction3){d_i1_rowp_row-1;d_i1_colp_col1;d_i2_rowp_row1;d_i2_colp_col-1;}pos[d_i1_row][d_i1_col]0;pos[d_i2_row][d_i2_col]0;if($(.item[id_i1_rowd_i1_col]).attr(change)!1)$(.item[id_i1_rowd_i1_col]).attr(del,parseInt($(.item[id_i1_rowd_i1_col]).attr(del))1);if($(.item[id_i2_rowd_i2_col]).attr(change)!1)$(.item[id_i2_rowd_i2_col]).attr(del,parseInt($(.item[id_i2_rowd_i2_col]).attr(del))1);}setTimeout(function(){audio_change.play();clear_items();//清理},250);//return check_items();//检查合并项
}
/**
*score 计算分数
*author zhangwei
*/
function score(){var sum0;$(.item[change1]).each(function() {var sparseInt($(this).text());sum(s-1)*3;//alert($(.item:contains(s)).length)if($(.item:contains(s)).length2){if(s3)sum50;else if(s4)sum100;else if(s5)sum300;else if(s6)sum500;else if(s7)sum1000;}else{sums;}});var o_scoreparseInt($(#score).text());$(#score).text(o_scoresum);
}
/**
*clear_items 清理
*author zhangwei
*/
function clear_items(){$(.item[del!0]).addClass(item_p0);setTimeout(function(){score();$(.item[del!0]).remove();setTimeout(function(){check_items();},100);},100);//消除pos库记录for(var col0;colpos[0].length;col){for(var row0;rowpos.length;row){if(pos[row][col]0){for(var jrow1;jpos.length;j){if(pos[j][col]!0){var o_rowj;var o_colcol;var p_rowrow;var p_colcol;move_to(o_row,o_col,p_row,p_col);pos[row][col]pos[j][col];pos[j][col]0;break;}}}}}//cantouch1;//恢复触摸发出指令
}/**
*change_style 单元块改变样式
*author zhangwei
*/
function change_style(p_row,p_col,tv){setTimeout(function(){$(.item[ip_rowp_col]).addClass(item(tv1));//增加新样式$(.item[ip_rowp_col]).removeClass(item(tv));//删除旧样式$(.item[ip_rowp_col]).text(tv1);//改变数字pos[p_row][p_col]tv1;//更改库标记号$(.item[ip_rowp_col]).attr(change,1);$(.item[ip_rowp_col]).attr(del,0);},250);
}
/**
*move_to 单元块移动的方法
*author zhangwei
*/
function move_to(o_row,o_col,p_row,p_col){setTimeout(function(){ //图形界面调整位置下降//$(.item[io_rowo_col]).addClass(item_l_p_col);$(.item[io_rowo_col]).addClass(item_b_p_row);//$(.item[io_rowo_col]).removeClass(item_l_o_col);$(.item[io_rowo_col]).removeClass(item_b_o_row);$(.item[io_rowo_col]).attr(i,p_rowp_col);},100);
}
/**
*move_left 向左加载的方法
*author zhangwei
*/
function move_left(){if(index0)index--;$(.item_p[pip1]).addClass(item_l_index);$(.item_p[pip2]).addClass(item_l_(index1));$(.item_p[pip3]).addClass(item_l_(index2));$(.item_p[pip1]).removeClass(item_l_(index1));$(.item_p[pip2]).removeClass(item_l_(index2));$(.item_p[pip3]).removeClass(item_l_(index3));
}/**
*move_right 向左加载的方法
*author zhangwei
*/
function move_right(){if(index3)index;$(.item_p[pip1]).addClass(item_l_index);$(.item_p[pip2]).addClass(item_l_(index1));$(.item_p[pip3]).addClass(item_l_(index2));$(.item_p[pip1]).removeClass(item_l_(index-1));$(.item_p[pip2]).removeClass(item_l_index);$(.item_p[pip3]).removeClass(item_l_(index1));
}
/**
*item_p_change 欲加入items交换位置
*author zhangwei
*/
function item_p_change(){$(.item_p[pip1]).addClass(item_l_(index1));$(.item_p[pip2]).addClass(item_l_(index2));$(.item_p[pip3]).addClass(item_l_(index));$(.item_p[pip1]).removeClass(item_l_(index));$(.item_p[pip2]).removeClass(item_l_(index1));$(.item_p[pip3]).removeClass(item_l_(index2));$(.item_p[pip3]).attr(pi,p4);$(.item_p[pip2]).attr(pi,p3);$(.item_p[pip1]).attr(pi,p2);$(.item_p[pip4]).attr(pi,p1);
}/**
*背景适配
*author zhangwei
*/
function rfWin_bacpic(){var w_hwindow.innerHeight;$(#container).css(height,w_h);} 转载于:https://www.cnblogs.com/zwwill/p/7391396.html
