=======【界面效果圖】=========
========【代碼結構】=========
========【代碼結構解釋】=========
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.οncοpy=function() {return false;} //禁止複製
//禁止查看源代碼
function stop(){
return false;
}
document.οncοntextmenu=stop;
document.οnkeydοwn=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);//上層添加子例的index
var 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);//上層添加子例的index
cantouch=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);
}
