H5+JS实现《Just Do 8》游戏源码分享
来源：互联网 发布：小小猪网络 编辑：程序博客网 时间：2024/06/14 15:13
=======【界面效果图】=========
========【代码结构】=========
========【代码结构解释】=========
1、使用html语言实现数据
2、使用css3语言实现样式
3、使用JS语言实现路基控制
=========【注意是想】============
1、如需查看效果，请使用手机浏览器，或者使用appcan打包查看
2、如果使用浏览器，请选择google的Chrome浏览器，并使用组合键【Ctrl+shift+i】进入开发者模式的手机模式
否则看不到效果
=======【AppCan打包封装】========
《《《相关细节请点击右侧图标连接》》》
【已打包app】
【点击下载】
=========【代码详细】=============
【index.html】
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Just Do 8</title> <!--禁止浏览器缓存--> <meta http-equiv="pragma" content="no-cach" /> <meta http-equiv="cache-control" content="no-cache" /> <meta http-equiv="expires" content="0" /> <!--宽度为设备的最大宽度，禁止用户放大和缩小--> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <!--让网页内容以应用程序风格显示，并使状态栏透明--> <!--删除默认的苹果工具栏和菜单栏--> <meta name="apple-mobile-web-app-capable" content="yes"> <!--指定的iphone中浏览器顶端的状态条的样式为：黑色透明--> <meta content="black-translucent" name="apple-mobile-web-app-status-bar-style" /> <!--告诉设备忽略将页面中的数字识别为电话号码--> <meta content="telephone=no" name="format-detection" /> <!--CSS文件--> <link rel="stylesheet" type="text/css" id="index_css" href="css/index.css"> <!--JS文件--> <script src="js/jquery-1.11.2.min.js"></script> <script src="js/index.js"></script></head><body><div id="container"> <div id="tlt">Just Do 8</div> <div id="score">0</div> <div id="lose_block"> <p class="tlt">YOUR SCORE:</p> <p class="score">0</p> <p class="h_score">HIGH SCORE : <span>0</span></p> <span class="restart">RESTART</span> </div> <div id="win_block"> <p class="tlt">YOUR WIN !!</p> <p class="score">0</p> <p class="h_score">HIGH SCORE : <span>0</span></p> <span class="restart">RESTART</span> </div> <div id="box"> <!-- <div class="item item1">1</div> <div class="item item2">2</div> <div class="item item3">3</div> <div class="item item4">4</div> <div class="item item5">5</div> <div class="item item6">6</div> <div class="item item7">7</div> <div class="item item8">8</div> <div class="item item2 item_p">2</div> --> </div> </div></body></html><script>document.ontouchmove = function(e){ e.preventDefault(); }window.onselectstart=function() {return false;} //禁用选择window.oncopy=function() {return false;} //禁止复制//禁止查看源代码function stop(){return false;}document.oncontextmenu=stop;document.onkeydown=function(){ if(window.event && window.event.keyCode >= 113&&window.event.keyCode<=123&&window.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_w=window.innerWidth;var w_h=window.innerHeight;var item_w=w_w/10;var index=Math.floor(Math.random()*4);//上层添加子例的indexvar cantouch=1;//是否可以触摸var move=1;//检测是否可以滑动var move2=1;//可滑动两格var move3=1;//可滑动三格var p_pos=[];//待处理项var d_pos=[];//待删除项var pos=new 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();//数据还原index=Math.floor(Math.random()*4);//上层添加子例的indexcantouch=1;//是否可以触摸move=1;//检测是否可以滑动move2=1;//可滑动两格move3=1;//可滑动三格p_pos=[];//待处理项d_pos=[];//待删除项pos=new 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_x=touch.pageX;s_y=touch.pageY;$(document).on('touchmove',function(e) {var touch = e.originalEvent.changedTouches[0];e_x=touch.pageX;e_y=touch.pageY;var c_x=(e_x-s_x);var c_y=(e_y-s_y);//c_y=c_y>0?c_y:-c_y;if(move&&c_x*c_x+c_y*c_y>=item_w*item_w&&c_x!=0){if((c_y/c_x<=1) && (c_y/c_x>=-1)){if(c_x>0){//alert("R");move_right();move=0;}else{//alert("L");move_left();move=0;}}else{if(c_y>0){//alert("D");move_down();audio_down.play();move=0;cantouch=0;//禁止再触摸发出指令}else{//alert("U");item_p_change();move=0;}}}if(move2&&c_x*c_x+c_y*c_y>=item_w*item_w*4&&c_x!=0){if((c_y/c_x<=1) && (c_y/c_x>=-1)){if(c_x>0){//alert("R");move_right();move2=0;}else{//alert("L");move_left();move2=0;}}}if(move3&&c_x*c_x+c_y*c_y>=item_w*item_w*9&&c_x!=0){if((c_y/c_x<=1) && (c_y/c_x>=-1)){if(c_x>0){//alert("R");move_right();move3=0;}else{//alert("L");move_left();move3=0;}}}});});$(document).on('touchend',function(e) {if(!cantouch)return;var touch = e.originalEvent.changedTouches[0];e_x=touch.pageX;e_y=touch.pageY;var c_x=(e_x-s_x);var c_y=(e_y-s_y);//c_y=c_y>0?c_y:-c_y;if(move&&c_x*c_x+c_y*c_y<2500){//alert("item_p_change");item_p_change();audio_down.play();}move=1;move2=1;move3=1;});}/***is_win 是否赢得游戏*@author zhangwei*/function is_win(){if($(".item:contains('8')").length){var score=parseInt($("#score").text());if(!localStorage.high_score)localStorage.high_score=0;var high_score=parseInt(localStorage.high_score);if(high_score<score){localStorage.high_score=score;high_score=score;}var k=0;var interval8 = setInterval(function(){$(".item_p").css("display","none");var style=k%2==1?"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();cantouch=0;//禁止再触摸发出指令},3000);}}/***is_lose 是否输掉游戏*@author zhangwei*/function is_lose(){for(var i=0;i<pos[0].length;i++){if(pos[pos.length-1][i]!=0){var ii=i;var score=parseInt($("#score").text());if(!localStorage.high_score)localStorage.high_score=0;var high_score=parseInt(localStorage.high_score);if(high_score<score){localStorage.high_score=score;high_score=score;}var k=0;var interval0 = setInterval(function(){$(".item_p").css("display","none");var style=k%2==1?"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();cantouch=0;//禁止再触摸发出指令},3000);break;}}}/***加入新元素*@author zhangwei*/function add_new_items(){is_lose();is_win();//定分数值var item01=Math.floor(Math.random()*2)+1;var item02=Math.floor(Math.random()*2)+1;var item03=Math.floor(Math.random()*2)+1;var items_html='<div pi="p1" i="" change="0" del="0" class="item item'+item01+' item_l_'+index+' item_p item_p0">'+item01+'</div>' +'<div pi="p2" i="" change="0" del="0" class="item item'+item02+' item_l_'+(index+1)+' item_p item_p0">'+item02+'</div>' +'<div pi="p3" i="" change="0" del="0" class="item item'+item03+' item_l_'+(index+2)+' item_p item_p0">'+item03+'</div>';$("#box").append(items_html);setTimeout(function(){$("#box .item_p").removeClass("item_p0");cantouch=1;//恢复触摸发出指令},100);}/***move_down 向下加载的方法*@author zhangwei*/function move_down(){//位定位置var ti1,ti2,ti3;for(var i=0;i<pos.length;i++){if(pos[i][index]==0){ti1=i;pos[i][index]=$(".item_p[pi=p1]").text();break;}}for(var i=0;i<pos.length;i++){if(pos[i][index+1]==0){ti2=i;pos[i][index+1]=$(".item_p[pi=p2]").text();break;}}for(var i=0;i<pos.length;i++){if(pos[i][index+2]==0){ti3=i;pos[i][index+2]=$(".item_p[pi=p3]").text();break;}}$(".item_p[pi=p1]").addClass("item_b_"+ti1);$(".item_p[pi=p2]").addClass("item_b_"+ti2);$(".item_p[pi=p3]").addClass("item_b_"+ti3);//增加编号i$(".item_p[pi=p1]").attr("i",""+ti1+index);$(".item_p[pi=p2]").attr("i",""+ti2+(index+1));$(".item_p[pi=p3]").attr("i",""+ti3+(index+2));$(".item_p").removeAttr("pi");$(".item_p").removeClass("item_p");check_items();//检查合并项//if(is_ready==1)//add_new_items();}/***check_items 检查合并项*@author zhangwei*/function check_items(){p_pos=[];for(var i=0;i<pos.length;i++){for(var j=0;j<pos[i].length;j++){var tv=pos[i][j];if(tv==0)continue;//四个角if(i==0&&j==0||i==0&&j==pos[0].length-1||i==pos.length-1&&j==0||i==pos.length-1&&j==pos[0].length-1){continue;}if(i==0||i==pos.length-1){var tv_l=pos[i][j-1];var tv_r=pos[i][j+1];if(tv_l==tv&&tv_r==tv){//alert(i+","+j);var position=""+i+j;var direction=0;p_pos.push([position,direction,tv]);}}else if(j==0||j==pos[0].length-1){var tv_b=pos[i-1][j];var tv_t=pos[i+1][j];if(tv_b==tv&&tv_t==tv){//alert(i+","+j);var position=""+i+j;var direction=2;p_pos.push([position,direction,tv]);//alert(p_pos.length+",,"+p_pos[0][0]);}}else{//水平方向var tv_l=pos[i][j-1];var tv_r=pos[i][j+1];if(tv_l==tv&&tv_r==tv){//alert(i+","+j);var position=""+i+j;var direction=0;p_pos.push([position,direction,tv]);}//垂直方向var tv_b=pos[i-1][j];var tv_t=pos[i+1][j];if(tv_b==tv&&tv_t==tv){//alert(i+","+j);var position=""+i+j;var direction=2;p_pos.push([position,direction,tv]);}//斜率为1的对角线var tv_lb=pos[i-1][j-1];var tv_rt=pos[i+1][j+1];if(tv_lb==tv&&tv_rt==tv){//alert(i+","+j);var position=""+i+j;var direction=1;p_pos.push([position,direction,tv]);}//斜率为-1的对角线var tv_lt=pos[i+1][j-1];var tv_rb=pos[i-1][j+1];if(tv_lt==tv&&tv_rb==tv){//alert(i+","+j);var position=""+i+j;var direction=3;p_pos.push([position,direction,tv]);}}}}if(p_pos.length==0){//cantouch=1;//恢复触摸发出指令add_new_items();cantouch=1;//恢复触摸发出指令}else{cantouch=0;//禁止触摸发出指令merge_items();//合并操作}}/***merge_items 合并操作*@author zhangwei*/function merge_items(){//恢复change值$(".item[change=1]").attr("change",0);var pp;for(var i=0;pp=p_pos[i];i++){var p_row=parseInt(pp[0].substring(0,1));var p_col=parseInt(pp[0].substring(1,2));var direction=pp[1];var tv=parseInt(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(direction==0){d_i1_row=p_row;d_i1_col=p_col-1;d_i2_row=p_row;d_i2_col=p_col+1;}else if(direction==1){d_i1_row=p_row-1;d_i1_col=p_col-1;d_i2_row=p_row+1;d_i2_col=p_col+1;}else if(direction==2){d_i1_row=p_row-1;d_i1_col=p_col;d_i2_row=p_row+1;d_i2_col=p_col;}else if(direction==3){d_i1_row=p_row-1;d_i1_col=p_col+1;d_i2_row=p_row+1;d_i2_col=p_col-1;}pos[d_i1_row][d_i1_col]=0;pos[d_i2_row][d_i2_col]=0;if($(".item[i="+d_i1_row+d_i1_col+"]").attr("change")!=1)$(".item[i="+d_i1_row+d_i1_col+"]").attr("del",parseInt($(".item[i="+d_i1_row+d_i1_col+"]").attr("del"))+1);if($(".item[i="+d_i2_row+d_i2_col+"]").attr("change")!=1)$(".item[i="+d_i2_row+d_i2_col+"]").attr("del",parseInt($(".item[i="+d_i2_row+d_i2_col+"]").attr("del"))+1);}setTimeout(function(){audio_change.play();clear_items();//清理},250);//return check_items();//检查合并项}/***score 计算分数*@author zhangwei*/function score(){var sum=0;$(".item[change=1]").each(function() { var s=parseInt($(this).text());sum+=(s-1)*3;//alert($(".item:contains('"+s+"')").length)if($(".item:contains('"+s+"')").length<2){if(s==3)sum+=50;else if(s==4)sum+=100;else if(s==5)sum+=300;else if(s==6)sum+=500;else if(s==7)sum+=1000;}else{sum+=s;} });var o_score=parseInt($("#score").text());$("#score").text(o_score+sum);}/***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 col=0;col<pos[0].length;col++){for(var row=0;row<pos.length;row++){if(pos[row][col]==0){for(var j=row+1;j<pos.length;j++){if(pos[j][col]!=0){var o_row=j;var o_col=col;var p_row=row;var p_col=col;move_to(o_row,o_col,p_row,p_col);pos[row][col]=pos[j][col];pos[j][col]=0;break;}}}}}//cantouch=1;//恢复触摸发出指令}/***change_style 单元块改变样式*@author zhangwei*/function change_style(p_row,p_col,tv){setTimeout(function(){$(".item[i="+p_row+p_col+"]").addClass("item"+(tv+1));//增加新样式$(".item[i="+p_row+p_col+"]").removeClass("item"+(tv));//删除旧样式$(".item[i="+p_row+p_col+"]").text(tv+1);//改变数字pos[p_row][p_col]=tv+1;//更改库标记号$(".item[i="+p_row+p_col+"]").attr("change","1");$(".item[i="+p_row+p_col+"]").attr("del","0");},250);}/***move_to 单元块移动的方法*@author zhangwei*/function move_to(o_row,o_col,p_row,p_col){setTimeout(function(){//图形界面调整位置，下降//$(".item[i="+o_row+o_col+"]").addClass("item_l_"+p_col);$(".item[i="+o_row+o_col+"]").addClass("item_b_"+p_row);//$(".item[i="+o_row+o_col+"]").removeClass("item_l_"+o_col);$(".item[i="+o_row+o_col+"]").removeClass("item_b_"+o_row);$(".item[i="+o_row+o_col+"]").attr("i",""+p_row+p_col);},100);}/***move_left 向左加载的方法*@author zhangwei*/function move_left(){if(index>0)index--;$(".item_p[pi=p1]").addClass("item_l_"+index);$(".item_p[pi=p2]").addClass("item_l_"+(index+1));$(".item_p[pi=p3]").addClass("item_l_"+(index+2));$(".item_p[pi=p1]").removeClass("item_l_"+(index+1));$(".item_p[pi=p2]").removeClass("item_l_"+(index+2));$(".item_p[pi=p3]").removeClass("item_l_"+(index+3));}/***move_right 向左加载的方法*@author zhangwei*/function move_right(){if(index<3)index++;$(".item_p[pi=p1]").addClass("item_l_"+index);$(".item_p[pi=p2]").addClass("item_l_"+(index+1));$(".item_p[pi=p3]").addClass("item_l_"+(index+2));$(".item_p[pi=p1]").removeClass("item_l_"+(index-1));$(".item_p[pi=p2]").removeClass("item_l_"+index);$(".item_p[pi=p3]").removeClass("item_l_"+(index+1));}/***item_p_change 欲加入items交换位置*@author zhangwei*/function item_p_change(){$(".item_p[pi=p1]").addClass("item_l_"+(index+1));$(".item_p[pi=p2]").addClass("item_l_"+(index+2));$(".item_p[pi=p3]").addClass("item_l_"+(index));$(".item_p[pi=p1]").removeClass("item_l_"+(index));$(".item_p[pi=p2]").removeClass("item_l_"+(index+1));$(".item_p[pi=p3]").removeClass("item_l_"+(index+2));$(".item_p[pi=p3]").attr("pi","p4");$(".item_p[pi=p2]").attr("pi","p3");$(".item_p[pi=p1]").attr("pi","p2");$(".item_p[pi=p4]").attr("pi","p1");}/***背景适配*@author zhangwei*/function rfWin_bacpic(){var w_h=window.innerHeight;$("#container").css("height",w_h);} 0 0
- H5+JS实现《Just Do 8》游戏源码分享
- 网页(H5/JS)游戏
- html(h5)页面实现微信js分享
- just do
- H5游戏的实时分享性
- js、html实现2048游戏源码
- 分享几个游戏源码
- 游戏源码分享
- cocos2d-JS 进阶主题 - H5游戏开发 实现实时更新游戏数据技巧
- 完整的H5牛牛 教程分享 源码
- do sth, just do sth
- Just do it
- Just do it!
- Just do it!
- Just do it!
- blog start & do just
- just do it!
- Just do it!
- Cannot load JDBC driver class 'oracle.jdbc.OracleDriver'
- gcc连接静态库的时候的出现错误/usr/bin/ld: cannot find -lc
- 多台center服务器相互免密码登陆
- 【.Net码农】asp.net 类型“System.Web.UI.ScriptManager”不具有名为“UpdatePanel”的公共属性。
- Hadoop入门进阶课程11--Sqoop介绍、安装与操作
- H5+JS实现《Just Do 8》游戏源码分享
- 黑马程序员_Java概述笔记
- MVC 实现的小实例
- 未捕获异常的处理
- Hadoop入门进阶课程12--Flume介绍与安装
- Android中的动态加载机制
- fiddler的使用
- MSSQL 的 PIVOT 和 UNPIVOT 函数
- 算法 归并排序
