【網頁設計】網頁版2048
阿新 • • 發佈：2019-02-09
太忙了，沒時間寫動畫部分了，找天把動畫補上吧
homework.html
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>2048</title>
<link rel="stylesheet" type="text/css" href="test.css" />
<script type="text/javascript" src="jquery-3.1.1.min.js" test.css
body {
background-color: #faf8ef;
}
#header {
text-align: center;
font-size: 1em;
}
#header p {
margin: 5px;
}
h1 {
margin-bottom: 10px;
font-size: 3em;
}
#function {
text-align: center;
font-size: 1em;
}
#function p {
display: inline-block;
margin: 20px 40px;
}
#wrapper {
text-align: center;
vertical-align: middle;
border-radius: 5%;
margin: 0 auto;
height: 460px;
width: 460px;
background-color: #bbada0;
}test.js
var BackgroundColor="#cdc1b4";//遊戲介面中的空元素背景顏色
var score=0;//分數
var map=new Array(20);
var beforer=new Array(20);//debug
var mapNum;//全域性變數，表示物件個數
//在指定位置建立物件
$(document).ready(function(){
});
function construct(number,position)
{
map[position]=number;
var e=$("#note"+position);
if(number!=0)
e.text(number);
switch(number)
{
case 0:
e.css("backgroundColor",BackgroundColor);
break;
case 2: e.css("backgroundColor","#eee4da");
break;
case 4: e.css("backgroundColor","#ede0c8");
break;
case 8: e.css("backgroundColor","#f2b179");
break;
case 16:e.css("backgroundColor","#f59563");
break;
case 32:e.css("backgroundColor","#f67c5f");
break;
case 64:e.css("backgroundColor","#ff4500");
break;
case 128:e.css("backgroundColor","#ffffe0");
break;
case 256:e.css("backgroundColor","#edcc61");
break;
case 512:e.css("backgroundColor","#edc850");
break;
case 1024:e.css("backgroundColor","#ADFF2F");
break;
case 2048: e.css("backgroundColor","#7CFC00");
break;
case 4096: e.css("backgroundColor","#00FF7F");
break;
case 8192: e.css("backgroundColor","#7FFFD4");
break;
case 16384: e.css("backgroundColor","#00CED1");
break;
case 32768: e.css("backgroundColor","#00BFFF");
break;
case 65536: e.css("backgroundColor","#1E90FF");
break;
}
}
//刪除指定位置的物件
function destruct(position)
{
var e=$("#note"+position);
e.text("");
e.css("backgroundColor",BackgroundColor);
map[position]=0;
}
//更新指定位置的資料：即在修改的時候先修改map中的值，再以map中的值為標準來更新介面。
function reconstruct(position)
{
var number=map[position];
var e=document.getElementById("note"+position);
if(number!=0)
e.innerHTML=number;
else if(e.innerHTML!=0&&number==0)//debug
e.innerHTML="";
switch(number)
{
//debug
case 0:
e.style.backgroundColor=BackgroundColor;
break;
case 2: e.style.backgroundColor="#eee4da";
break;
case 4: e.style.backgroundColor="#ede0c8";
break;
case 8: e.style.backgroundColor="#f2b179";
break;
case 16: e.style.backgroundColor="#f59563";
break;
case 32: e.style.backgroundColor="#f67c5f";
break;
case 64: e.style.backgroundColor="#ff4500";
break;
case 128: e.style.backgroundColor="#ffffe0";
break;
case 256: e.style.backgroundColor="#edcc61";
break;
case 512: e.style.backgroundColor="#edc850";
break;
case 1024: e.style.backgroundColor="#ADFF2F";
break;
case 2048: e.style.backgroundColor="#7CFC00";
break;
case 4096: e.style.backgroundColor="#00FF7F";
break;
case 8192: e.style.backgroundColor="#7FFFD4";
break;
case 16384: e.style.backgroundColor="#00CED1";
break;
case 32768: e.style.backgroundColor="#00BFFF";
break;
case 65536: e.style.backgroundColor="#1E90FF";
break;
}
}
//更改分數
function AddScore(number)
{
var e=document.getElementById("score");
score+=number;
e.innerHTML=score;
}
function connect(posa,posb)//將posb與posa合併，posa保留，posb刪除
{
map[posa]*=2;
AddScore(map[posb]);
map[posb]=0;
mapNum--;
}
//return a position based on the given x,y
//x代表列，y代表行（計算機視角）
function CountPosition(x,y)
{
return x+(y-1)*4;
}
var test=0;
//重置
function reset()
{
for(var i=1;i<=16;i++)
{
destruct(i);
//debug
beforer[i]=0;
}
var aim=Math.floor(16*Math.random())+1;
var aim2;
do
{
aim2=Math.floor(16*Math.random())+1;
}while(aim2==aim);
construct(2,aim);
construct(4,aim2);
mapNum=2;
score=0;
var e=document.getElementById("score");
e.innerHTML="0";
}
//在id為wrapper的div中建立
function create()
{
var body=document.getElementById("wrapper");;
for(var i=0;i<4;i++)
{
var line=document.createElement("div");
line.id="line"+(i+1);
body.appendChild(line);
for(var j=1;j<=4;j++)
{
var note=document.createElement("div");
line.appendChild(note);
note.id="note"+(i*4+j);
//css
note.style.height="90px";
note.style.width="90px";
note.style.borderRadius="5%";
note.style.margin="10px";
note.style.backgroundColor=BackgroundColor;
note.style.display="inline-block";
note.style.border="1px solid #cdc1b4";
note.style.verticalAlign="top";//保證不下沉
note.style.textAlign="center";//水平居中
note.style.lineHeight="90px";//垂直居中
note.style.fontSize="2em";
note.style.fontWeight="bolder";
}
}
//clear data
reset();
}
//在其中建立新的塊
function CreateNew()
{
if(mapNum==16)
{
return 1;//滿了，無法建立新的
}
var Empty=new Array();
var point=1;
for(var i=1;i<=16;i++)
{
if(map[i]==0)
{
Empty[point]=i;
point++;
}
}
point--;
//建立集合，元素為map中的空地
var aim=Math.floor(point*Math.random())+1;
var which=Math.floor(2*Math.random())+1;
if(which==1)
which=4;
map[Empty[aim]]=which;
reconstruct(Empty[aim]);
//animation
var e=$("#note"+Empty[aim]);
mapNum++;
}
//debug
function before()
{
for(var i=1;i<=16;i++)
{
map[i]=beforer[i];
reconstruct(i);
}
}
//執行操作
document.onkeyup=function(event){
var e=event.keyCode;
var judgement=0;//判斷是否為移動
var ifconnect=0;
var ifmove=0;
for(var i=1;i<=16;i++)//debug
beforer[i]=map[i];
switch(e)
{
case 38://up
case 87:
judgement=1;
for(var i=1;i<=4;i++)
{
//塊合併
var start=0,end=0;
for(var j=4;j>=1;j--)
{
var position=CountPosition(i,j);
var e=document.getElementById("note"+position);
if(map[position]!=0)
{
if(start==0&&end==0)
start=j,end=j;
else if(start!=0&&end!=0)
start=j;
}
else if(map[position]==0&&start!=0&&end!=0)
{
ifmove=1;
for(var k=start;k<=end;k++)
{
var Pa=CountPosition(i,k),Pb=CountPosition(i,k-1);
map[Pb]=map[Pa];
}
destruct(CountPosition(i,end));
start--,end--;
}
}
//檢查合併
for(var j=start;j<=end-1;j++)
{
var Pa=CountPosition(i,j);
var Pb=CountPosition(i,j+1);
if(map[Pa]==map[Pb])
{
connect(Pa,Pb);//將Pa與Pb合併
ifconnect=1;
//change
for(var k=j+1;k<=end&&k<=3;k++)//整體前移
{
var Pc=CountPosition(i,k);
var Pd=CountPosition(i,k+1);
map[Pc]=map[Pd];
}
map[CountPosition(i,end)]=0;
end--;
}
}
for(var j=1;j<=4;j++)
{
var position=CountPosition(i,j);
reconstruct(position);
}
}
break;
case 40://down
case 83:
judgement=1;
for(var i=1;i<=4;i++)
{
//塊合併
var start=0,end=0;
for(var j=1;j<=4;j++)
{
var position=CountPosition(i,j);
var e=document.getElementById("note"+position);
if(map[position]!=0)
{
if(start==0&&end==0)
start=j,end=j;
else if(start!=0&&end!=0)
end=j;
}
else if(map[position]==0&&start!=0&&end!=0)
{
ifmove=1;
for(var k=end;k>=start;k--)
{
var Pa=CountPosition(i,k),Pb=CountPosition(i,k+1);
map[Pb]=map[Pa];
}
destruct(CountPosition(i,start));
start++,end++;
}
}
//檢查合併
for(var j=end;j>=start+1;j--)
{
var Pa=CountPosition(i,j);
var Pb=CountPosition(i,j-1);
if(map[Pa]==map[Pb])
{
connect(Pa,Pb);//將Pa與Pb合併
ifconnect=1;
for(var k=j-1;k>=start+1;k--)//整體前移
{
var Pc=CountPosition(i,k);
var Pd=CountPosition(i,k-1);
map[Pc]=map[Pd];
}
map[CountPosition(i,start)]=0;
start++;
}
}
for(var j=1;j<=4;j++)
{
var position=CountPosition(i,j);
reconstruct(position);
}
}
break;
case 37://left
case 65:
judgement=1;
for(var j=1;j<=4;j++)
{
//塊合併
var start=0,end=0;
for(var i=4;i>=1;i--)
{
var position=CountPosition(i,j);
var e=document.getElementById("note"+position);
if(map[position]!=0)
{
if(start==0&&end==0)
start=i,end=i;
else if(start!=0&&end!=0)
start=i;
}
else if(map[position]==0&&start!=0&&end!=0)
{
ifmove=1;
for(var k=start;k<=end;k++)
{
var Pa=CountPosition(k,j),Pb=CountPosition(k-1,j);
map[Pb]=map[Pa];
}
destruct(CountPosition(end,j));
start--,end--;
}
}
//檢查合併
for(var i=start;i<=end-1;i++)
{
var Pa=CountPosition(i,j);
var Pb=CountPosition(i+1,j);
if(map[Pa]==map[Pb])
{
connect(Pa,Pb);//將Pa與Pb合併
ifconnect=1;
for(var k=i+1;k<=end-1;k++)//整體前移
{
var Pc=CountPosition(k,j);
var Pd=CountPosition(k+1,j);
map[Pc]=map[Pd];
}
map[CountPosition(end,j)]=0;
end--;
}
}
for(var i=1;i<=4;i++)
{
var position=CountPosition(i,j);
reconstruct(position);
}
}
break;
case 39://right
case 68:
judgement=1;
for(var j=1;j<=4;j++)
{
//塊合併
var start=0,end=0;
for(var i=1;i<=4;i++)
{
var position=CountPosition(i,j);
var e=document.getElementById("note"+position);
if(map[position]!=0)
{
if(start==0&&end==0)
start=i,end=i;
else if(start!=0&&end!=0)
end=i;
}
else if(map[position]==0&&start!=0&&end!=0)
{
ifmove=1;
for(var k=end;k>=start;k--)
{
var Pa=CountPosition(k,j),Pb=CountPosition(k+1,j);
map[Pb]=map[Pa];
}
destruct(CountPosition(start,j));
start++,end++;
}
}
//檢查合併
for(var i=end;i>=start+1;i--)
{
var Pa=CountPosition(i,j);
var Pb=CountPosition(i-1,j);
if(map[Pa]==map[Pb])
{
connect(Pa,Pb);//將Pa與Pb合併
ifconnect=1;
for(var k=i-1;k>=start+1;k--)//整體前移
{
var Pc=CountPosition(k,j);
var Pd=CountPosition(k-1,j);
map[Pc]=map[Pd];
}
map[CountPosition(start,j)]=0;
start++;
}
}
for(var i=1;i<=4;i++)
{
var position=CountPosition(i,j);
reconstruct(position);
}
}
break;
case 27:reset();
break;
}
if(judgement==0||(ifmove==0&&ifconnect==0))
return;
var dead=CreateNew();
if(dead==1)//未完成，驗證死亡。死亡的條件：無法合併
{
var ok=0;
jump:
for(var i=1;i<=4;i++)
{
for(var j=1;j<=4;j++)
{
var up,down,left,right,now;
now=CountPosition(i,j);
if(i!=1)
{
left=CountPosition(i-1,j);
if(map[now]==map[left])
{
ok=1;
break jump;
}
}
if(j!=1)
{
up=CountPosition(i,j-1);
if(map[now]==map[up])
{
ok=1;
break jump;
}
}
if(i!=4)
{
right=CountPosition(i+1,j);
if(map[now]==map[right])
{
ok=1;
break jump;
}
}
if(j!=4)
{
down=CountPosition(i,j+1);
if(map[now]==map[down])
{
ok=1;
break jump;
}
}
}
}
if(ok==0)
{
alert("Game over!Your score is "+score);
}
}
}
function special()
{
reset();
for(var i=1;i<=16;i++)
{
map[i]=0,before[i]=0
reconstruct(i);
}
construct(65536,16);
construct(32768,15);
construct(16384,14);
construct(8192,13);
construct(4096,9);
construct(2048,10);
construct(1024,11);
construct(512,12);
construct(256,8);
construct(128,7);
construct(64,6);
construct(32,5);
construct(16,1);
construct(8,2);
construct(4,3);
construct(2,4);
}用的jquery3.1.1 min
/*! jQuery v3.1.1 | (c) jQuery Foundation | jquery.org/license */
!function(a,b){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=a.document?b(a,!0):function(a){if(!a.document)throw new Error("jQuery requires a window with a document");return b(a)}:b(a)}("undefined"!=typeof window?window:this,function(a,b){"use strict";var c=[],d=a.document,e=Object.getPrototypeOf,f=c.slice,g=c.concat,h=c.push,i=c.indexOf,j={},k=j.toString,l=j.hasOwnProperty,m=l.toString,n=m.call(Object),o={};function p(a,b){b=b||d;var c=b.createElement("script");c.text=a,b.head.appendChild(c).parentNode.removeChild(c)}var q="3.1.1",r=function(a,b){return new r.fn.init(a,b)},s=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,t=/^-ms-/,u=/-([a-z])/g,v=function(a,b){return b.toUpperCase()};r.fn=r.prototype={jquery:q,constructor:r,length:0,toArray:function(){return f.call(this)},get:function(a){return null==a?f.call(this):a<0?this[a+this.length]:this[a]},pushStack:function(a){var b=r.merge(this.constructor(),a);return b.prevObject=this,b},each:function(a){return r.each(this,a)},map:function(a){return this.pushStack(r.map(this,function(b,c){return a.call(b,c,b)}))},slice:function(){return this.pushStack(f.apply(this,arguments))},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},eq:function(a){var b=this.length,c=+a+(a<0?b:0);return this.pushStack(c>=0&&c<b?[this[c]]:[])},end:function(){return this.prevObject||this.constructor()},push:h,sort:c.sort,splice:c.splice},r.extend=r.fn.extend=function(){var a,b,c,d,e,f,g=arguments[0]||{},h=1,i=arguments.length,j=!1;for("boolean"==typeof g&&(j=g,g=arguments[h]||{},h++),"object"==typeof g||r.isFunction(g)||(g={}),h===i&&(g=this,h--);h<i;h++)if(null!=(a=arguments[h]))for(b in a)c=g[b],d=a[b],g!==d&&(j&&d&&(r.isPlainObject(d)||(e=r.isArray(d)))?(e?(e=!1,f=c&&r.isArray(c)?c:[]):f=c&&r.isPlainObject(c)?c:{},g[b]=r.extend(j,f,d)):void 0!==d&&(g[b]=d));return g},r.extend({expando:"jQuery"+(q+Math.random()).replace(/\D/g,""),isReady:!0,error:function(a){throw new Error(a)},noop:function(){},isFunction:function(a){return"function"===r.type(a)},isArray:Array.isArray,isWindow:function(a){return null!=a&&a===a.window},isNumeric:function(a){var b=r.type(a);return("number"===b||"string"===b)&&!isNaN(a-parseFloat(a))},isPlainObject:function(a){var b,c;return!(!a||"[object Object]"!==k.call(a))&&(!(b=e(a))||(c=l.call(b,"constructor")&&b.constructor,"function"==typeof c&&m.call(c)===n))},isEmptyObject:function(a){var b;for(b in a)return!1;return!0},type:function(a){return null==a?a+"":"object"==typeof a||"function"==typeof a?j[k.call(a)]||"object":typeof a},globalEval:function(a){p(a)},camelCase:function(a){return a.replace(t,"ms-").replace(u,v)},nodeName:function(a,b){return a.nodeName&&a.nodeName.toLowerCase()===b.toLowerCase()},each:function(a,b){var c,d=0;if(w(a)){for(c=a.length;d<c;d++)if(b.call(a[d],d,a[d])===!1)break}else for(d in a)if(b.call(a[d],d,a[d])===!1)break;return a},trim:function(a){return null==a?"":(a+"").replace(s,"")},makeArray:function(a,b){var c=b||[];return null!=a&&(w(Object(a))?r.merge(c,
相關推薦
【網頁設計】網頁版2048
太忙了，沒時間寫動畫部分了，找天把動畫補上吧
homework.html
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
【CSS系列】網頁頭部進度條方式一
absolute ati ffffff loading script 進度 header type pro
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UT
【測試點】-網頁登入測試
網頁登入測試屬於常規題目版本一：時間：20180604儲存連線：百度腦圖主要涉及：1.基礎功能性測試：網頁登入也就最基礎的，使用者名稱，文字框，登入按鈕，有些會拓展出驗證碼，註冊，忘記密碼等連線。如果涉及到文字就會有一系列的長度限制，數字字母（大小寫），中英文輸入法，特殊字元
【API設計】RESTful API 設計指南
sys i/o ani sta 所有 com 訪問 指定 名詞 RESTful API
URL定位資源，用HTTP動詞（GET,POST,DELETE,DETC）描述操作。
例如
1. REST描述的是在網絡中client和server的一種交互形式；REST本身不實
【系統設計】會議室預定系統房間預定系統設計
賬號 通過 log 會議室 src 用戶 使用 http bubuko 預定系統三大模塊。
一個是登錄模塊
包括教師登錄和管理員登錄。
二是會議室預定展示模塊
用類似日歷的形式來做，給每一間的會議室設計一個日程日歷表，每天按照半個小時的時間間隔劃分。
三是預定模塊
【系統設計】432. 全 O(1) 的數據結構
++ inf map 核心數 structure 是否為空 節點 tor lse 題目：
使用棧實現隊列的下列操作：
push(x) -- 將一個元素放入隊列的尾部。
pop() -- 從隊列首部移除元素。
peek() -- 返回隊列首部的元素。
empty() --
網頁設計規範 網頁設計稿尺寸
移動端H5設計稿尺寸
移動端H5尺寸 設計移動端 H5 專案的時候，我們一般以使用者量較高的 iPhone6/7/8的尺寸：750x1334px為準，然後我們要在頂部預留出微信或者瀏覽器導航區域。主要內容區域就可以自由設計了。一般H5的操作是上下滑動。字型方面使用蘋方字型，並且字號設定為24PX以上，渲染方
【ASP.NET】——母版頁
MasterPage母版頁
在做web應用的時候，經常會遇到一些頁面之間有很多相同的顯示部分和行為，如果每個頁面都去重複編寫這些程式碼，是一個效率非常低的事情，因為提出了母版頁的概念，我們可以把多個頁面之間相同的行為和顯示部分放到
【Android】【功能設計】儲存帳號密碼，自動登入，離線登入實現方案
勾選【記住密碼】【自動登入】複選框時：
什麼也不做，所有操作放在點選【登入】按鈕時執行
點選【登入】按鈕時：
為了簡化程式碼和實現邏輯，不管密碼對錯，登入資訊統一儲存到【上次登入帳號】【上次登入密碼】【是否儲存密碼】【是否自動登入】配置
登入成功
【資料庫設計】分庫，分表，主從，讀寫分離
Mysql效能優化
一 資料庫設計合理性
1.1正規化
為了建立冗餘較小、結構合理的資料庫，設計資料庫時必須遵循一定的規則。在關係型資料庫中這種規則就稱為正規化。正規化是符合某一種設計要求的
【斑馬體育】NBA版宮心計正在上演！這場戰役或許沒有任何贏家！
吉米·巴特勒、塔伊·吉布森、德里克·羅斯、洛爾·鄧，這不就是芝加哥公牛曾經的一套陣容嗎？只缺諾阿一名中鋒就能組成先發五虎，風城玫瑰沒有遭遇重傷的時候，這套陣容絕對在東部數一數二。他們確實重聚了，但卻是從東部一路向西，集聚在冰冷之地明尼阿波利斯化身群狼。狼群首領當
C++ 實現MyString類【課程設計】
功能實現：
<基本功能>
1> 實現標頭檔案的封裝：MyString.h
2> 預設建構函式對字串的初始化（ MyString() ）
3> 使用建構函式初始化字串的另外兩種方式 * 2（ 動態指標+拷貝建構函式
【課程設計】【資料結構】編制一個演示單鏈表的建立、列印、查詢、插入、刪除等操作的程式。
實驗題目
編制一個演示單鏈表的建立、列印、查詢、插入、刪除等操作的程式。
1．需求分析
要求用TC編寫一個演示程式，首先建立一個帶頭結點的整型單鏈表，然後根據使用者選擇，能夠在單鏈表的任意位置插入、刪除結點，以及確定某一元素在單鏈表中的位置。
1.1 建立單鏈
【QT設計】QT學習心得
1效果 2說明：環境vs2013+QT5.5 小白學QT，ui先畫介面，槽函式放實現功能函式，最後連結槽函式與功能函式。 第一步：設計介面 第二步：.hpp的class中新增槽函式 private slots: 定義槽函式
第三步：.cpp中 實現槽函式，並且連結槽函式與訊號 ui.
ASP.NET Core中的依賴注入（5）: ServiceProvider實現揭祕 【總體設計 】
本系列前面的文章我們主要以程式設計的角度對ASP.NET Core的依賴注入系統進行了詳細的介紹，如果讀者朋友們對這些內容具有深刻的理解，我相信你們已經可以正確是使用這些與依賴注入相關的API了。如果你還對這個依賴注入系統底層的實現原理具有好奇心，可以繼續閱讀這一節的內容。 目錄一、ServiceCall
【產品 & 設計】入門
前言
做產品和設計快 1 年了，積累了一點經驗分享一下 —— 拋磚引玉，歡迎交流。
宣告 歡迎轉載，但請保留文章原始出處:) 部落格園：http://www.cnblogs.com 農民伯伯： http://over140.cnblogs.com
背景
我現在的工作：產品
【matlab程式設計】Matlab版掃雷
我發現有些人平常閒著的時候會玩window自帶的遊戲，其中最常見的就是掃雷和紙牌。本來想用matlab編寫全自動掃雷程式用來作弊，可是後來發現掃雷問題是NP完全問題（正如：旅行商NP難問題一樣不能被解決），便放棄了。於是編寫了類似掃雷遊戲（沒有經過大量測試，可
【CSII-PE】osgi版mweb與mcm後管選單配置
【選單配置】
步驟一：編寫選單指令碼
--一級選單
--活動管理
INSERT INTO PRDSET
(PRDSETID,MODULEID,PRDSETTYPEID,PARENTID,ORDERID,PRDSETNAME)
VALUES
('hdgl', 'b
【效果設計】模擬公交車站站臺顯示
<!DOCTYPE >
<html>
<head>
<script type="text/javascript" src="jquery-1.8.0.js"></script>
&l
【測試設計】效能測試工具選擇：wrk？jmeter？locust？還是LR？
前言
當你想做效能測試的時候，你會選擇什麼樣的測試工具呢？是會選擇wrk？jmeter？locust？還是loadrunner呢？
今天，筆者將根據自己使用經驗，針對jmeter、locust、wrk和loadrunner常用的效能測試工具進行簡單介紹和對比。首先，四者基本對比圖：
.
loadrun