用JS寫一個丐版《2048》小游戲

效果圖

在這里插入圖片描述

放馬過來

<!DOCTYPE HTML>
<html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/><title>2048</title><style type="text/css">.basic{height:80px;width:80px;background-color:#DBDBDB;float:left;margin:2px;}.row{height:80px;clear:both;}</style></head><body><div id="pool"></div><div id="sample" class="basic" style='opacity: 0;'></div><div>score:<span id='score' style="font-size:200%;font-weight:bold;"></span></div><script type="text/javascript" >//對象內使用，要加thisvar container={rowNum:4,colNum:4,score:0,//靠弄個Cookie記錄下游戲記錄isMoved:false,//Block 有沒有移動過content:[],//{x:col,y:row,v:value}colour:['#DBDBDB','#56A36C','#EFCEE8','#81C2D6','#8192D6','#D9B3E6','#DCF7A1','#83FCD8','#E8F2FF','#91C6FF','#B8F788','#58D2E8','#F2B6B6','#E8ED51','#FFE3FB','#E8FF8C','#FFDEC9','#F5A433','#E6109B','#96C4E6','#E560CD'],colourObject:{},//初始化 背景loadBackground:function(){var pool = document.getElementById("pool");var sample = document.getElementById("sample")var margin = 2;var dotWidth = parseFloat(sample.offsetWidth) + margin;//基本方塊寬度 + marginfor(var i = 0; i != this.rowNum; i++){//創建行var rDiv = document.createElement("div");rDiv.setAttribute('id','r' + i);rDiv.setAttribute('class','row');for(var j = 0; j != this.colNum; j++){var cDiv = document.createElement("div");cDiv.setAttribute('id','c'+j + '_r' + i);cDiv.setAttribute('class','basic');rDiv.appendChild(cDiv);}rDiv.setAttribute('width',(this.colNum * (dotWidth + margin)) + 'px')pool.appendChild(rDiv);}},findBlock:function(colx, rowy){return this.content.find(function(value){return value.x == colx && value.y == rowy;});},addBlockToMine:function(){//開局或移動后,添加新塊var zeroBlockArray = this.content.filter(function(value){return value.v == 0;});if(zeroBlockArray.length != 0){zeroBlockArray[this.makeRandomInteger(zeroBlockArray.length)].v = (this.makeRandomInteger(2) + 1) * 2;}},makeRandomInteger:function(scope){return Math.floor(Math.random() * scope);},checkDeath:function(){if(this.content.filter(function(value){return value.v == 0;}).length != 0){return false;//有零塊就表示沒有死}else{//滿格時，檢測相鄰之間可合并的可能性//Jallen Kwong//再沒有合并的可能，沒有的話，游戲就結束//窮舉法(不聰明的方法)for(var i = 0; i < this.rowNum; i++){if(i != this.rowNum - 1){for(var j = 0;j < this.colNum; j++){var mainBlock = this.findBlock(j, i);var downBlock = this.findBlock(j, i + 1);if(j != this.colNum - 1){var rightBlock = this.findBlock(j + 1,i);if(mainBlock.v == rightBlock.v || mainBlock.v == downBlock.v){return false;}}else{if(mainBlock.v == downBlock.v){return false;}}}}else{for(var j = 0;j < this.colNum - 1; j++){var mainBlock = this.findBlock(j, i);var rightBlock = this.findBlock(j + 1, i);if(mainBlock.v == rightBlock.v){return false;}}}							}return true;//真的Game Over}},refresh:function(){//刷新顯示頁面for(var row = 0;row < this.rowNum;row++){for(var col = 0;col < this.colNum;col++){var value = this.findBlock(col,row).v;var elem = document.getElementById('c'+col+'_r'+row);elem.style.backgroundColor = this.colourObject[value] == undefined?this.colourObject[0]:this.colourObject[value];elem.innerHTML = (value == 0 ? "" : "<span style='font-size:200%;font-weight:bold;'>"+value+"</span>");}}document.getElementById('score').innerHTML = this.score;},addKeyListener:function(event){var keycode = event.keyCode;if(keycode >= 37 && keycode <= 40){//alert(keycode);event.preventDefault();var changeCount = 0;//記住塊有沒真正得移動過switch(keycode){case 37://左//console.log(keycode);for(var i = 0; i < this.rowNum; i++){var queue = [];var flag = false;//入棧for(var j = 0 ; j < this.colNum; j++){var block = this.findBlock(j, i);if(block.v == 0){continue;}flag = this.coreCalculate(block, queue, flag);}//出隊列for(var k = 0 ;k < this.colNum; k++){changeCount += this.outOfQueue(k, i, queue, k);}}break;case 38://上for(var i = 0; i < this.colNum; i++){var queue = [];var flag = false;for(var j = 0 ;j < this.rowNum; j++){var block = this.findBlock(i, j);if(block.v == 0){continue;}flag = this.coreCalculate(block, queue, flag);}//出隊列for(var k = 0 ;k < this.rowNum; k++){changeCount += this.outOfQueue(i, k, queue, k);}}break;case 39://右for(var i = 0; i < this.rowNum; i++){var queue = [];var flag = false;//入棧for(var j = this.colNum - 1 ; j >= 0; j--){var block = this.findBlock(j, i);if(block.v == 0){continue;}flag = this.coreCalculate(block, queue, flag);}//console.log(queue);//出隊列for(var k = this.colNum - 1 ,l = 0;k >= 0; k--,l++){changeCount += this.outOfQueue(k, i, queue, l);}}break;case 40://下for(var i = 0; i < this.colNum; i++){var queue = [];var flag = false;for(var j = this.rowNum - 1 ;j >= 0; j--){var block = this.findBlock(i, j);if(block.v == 0){continue;}flag = this.coreCalculate(block, queue, flag);}//出隊列for(var k = this.rowNum - 1 ,l = 0;k >= 0; k--,l++){changeCount += this.outOfQueue(i, k, queue, l);}}break;default:break;}//要檢查content的v們有沒有改變過//1.入棧操作前，要來個數組拷貝，然后在做比對，這做法并不聰明//2.出隊列的時候，跟原來的值進行比較，有改變 changCount++//console.log('changeCount:' + changeCount);if(changeCount != 0){this.addBlockToMine();this.refresh();//刷新顯示頁面if(this.checkDeath()){alert("Game Over!");document.onkeydown = function(event){var keycode = event.keyCode;if(keycode >= 37 && keycode <= 40){event.preventDefault();alert("Game Over!");}};}}}},init:function(){for(var row = 0; row < this.rowNum; row++){for(var col = 0; col < this.colNum; col++){this.content[this.content.length] = {x:col,y:row,v:0};}}for(var i = 0;i <= 20;i++){if(i == 0){this.colourObject[i] = this.colour[i];continue;}this.colourObject[Math.pow(2,i)] = this.colour[i];}//console.log(this.colourObject[7]);},coreCalculate:function(block, queue, flag){ flag的作用，入棧方式有問題，譬如2,2,4  應得 4,4 但結果 得8if(queue.length == 0 ){queue[queue.length] = block.v;return flag;}else{var tailOfQueue = queue[queue.length - 1];if((tailOfQueue == block.v) && !flag){this.score += (queue[queue.length - 1] = tailOfQueue * 2);return true;}else{queue[queue.length] = block.v;return false;}}},outOfQueue:function(colx, rowy, queue, index){var block = this.findBlock(colx, rowy);var oldValue = block.v;block.v = queue[index] == undefined ? 0 : queue[index];return oldValue != block.v? 1 : 0;}};//mainwindow.onload = function(){container.loadBackground();container.init();//alert(container.findBlock(1,1).v);container.addBlockToMine();container.addBlockToMine();container.refresh();document.addEventListener('keydown', function(event){container.addKeyListener(event);});};</script></body>
</html>

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/445553.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/445553.shtml
英文地址，請注明出處：http://en.pswp.cn/news/445553.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

如何有效申請TI的免費樣片

如何有效申請TI的免費樣片

轉自如何有效申請TI的免費樣片 TI公司愿意為支持中國大學的師生們的教學、實驗、創新實踐、競賽和科研項目&#xff0c;提供有限數量的免費樣片。首先需要指出的是&#xff1a;所有的樣片申請應該是誠實正當的&#xff0c;所有不恰當的申請&#xff08;包括不必要或多余的&…
閱讀更多...
python學習實例（4）

python學習實例（4）

# #第四章的python程序 ## #4.1 簡潔的Python ##<程序&#xff1a;Python數組各元素加1> arr [0,1,2,3,4] for e in arr:tmpe1print (tmp)## #4.2 Python內置數據結構 ## #4.2.1 Python基本數據類型 ##<程序&#xff1a;產生10-20的隨機浮點數> import random f …
閱讀更多...
用Python批量生成字幕圖片用于視頻剪輯

用Python批量生成字幕圖片用于視頻剪輯

說明 視頻剪輯時需要為視頻添加字幕&#xff0c;添加字幕方法之一&#xff1a;根據字幕文本文件批量生成透明底只有字幕內容的圖片文件&#xff0c;如下圖&#xff0c;然后將這些圖片文件添加到視頻剪輯軟件軌道中。 于是用pillow這Python圖片工具庫執行本次批量生成工作。 …
閱讀更多...
關于接地：數字地、模擬地、信號地、交流地、直流地、屏蔽地、浮

關于接地：數字地、模擬地、信號地、交流地、直流地、屏蔽地、浮

除了正確進行接地設計、安裝,還要正確進行各種不同信號的接地處理。控制系統中&#xff0c;大致有以下幾種地線&#xff1a; &#xff08;1&#xff09;數字地&#xff1a;也叫邏輯地&#xff0c;是各種開關量&#xff08;數字量&#xff09;信號的零電位。 &#xff08;2&…
閱讀更多...
python學習實例（5）

python學習實例（5）

# #5.1 計算思維是什么 ##<程序: 找假幣的第一種方法> by Edwin Sha def findcoin_1(L):if len(L) <1:print("Error: coins are too few"); quit()i0while i<len(L):if L[i] < L[i1]: return (i)elif L[i] > L[i1]: return (i1)ii1print("All…
閱讀更多...
一個用LaTeX寫長除法計算過程的示例

一個用LaTeX寫長除法計算過程的示例

源碼 \begin{array}{lr} & x1 \\ x1 \!\!\!\!\!\! & \overline{)x^2 2x 1} \\ & \underline{x^2\ \ x\ \ \ \ \ \ \ } \\ & x 1 \\ & \underline{x1} \\ & 0 \end{array}效果 x1x1???????????)x22x1￣x2x￣x1x1￣0\begin{array}…
閱讀更多...
AltiumDesigner中PCB如何添加 Logo

AltiumDesigner中PCB如何添加 Logo

AltiumDesigner中PCB如何添加 Logo 轉載2015-10-29 00:07:55標簽&#xff1a;it文化教育首先用到的畫圖軟件&#xff0c;當然是大家熟悉的Altium Designer了&#xff0c;呵呵&#xff0c;相信很多人都用過這款畫圖軟件吧&#xff08;現在電路設計一直在用&#xff09;&#xff…
閱讀更多...
python學習實例（6）

python學習實例（6）

# #6.6 文件系統&#xff08;File System&#xff09; ## #6.6.3 Python中的文件操作 ##<程序&#xff1a;讀取文件os.py> f open("./Task1.txt",r); fls f.readlines() for line in fls:line line.strip(); print (line) f.close()#<程序&#xff1a;讀…
閱讀更多...
網絡視頻ts格式文件下載及將其合成單一視頻文件

網絡視頻ts格式文件下載及將其合成單一視頻文件

一些網站會將視頻分割成n個ts文件。 用貓抓chrome插件&#xff0c;抓取index.m3u8&#xff0c;可得到眾多ts文件下載地址。 可用迅雷打包下載ts文件以及index.m3u8文件&#xff0c;但有時會出現下載不了的情況&#xff0c;懷疑是請求報頭的問題上。 若迅雷下載不了&#xff…
閱讀更多...
PCB布局，布線技巧總結

PCB布局，布線技巧總結

PCB布局 在設計中&#xff0c;布局是一個重要的環節。布局結果的好壞將直接影響布線的效果&#xff0c;因此可以這樣認為&#xff0c;合理的布局是PCB設計成功的第一步。 布局的方式分兩種&#xff0c;一種是交互式布局&#xff0c;另一種是自動布局&#xff0c;一般是在自動布…
閱讀更多...
python學習實例（7）

python學習實例（7）

# #第8章 信息安全&#xff08;Information Security&#xff09;的python程序 ## #8.3 措施和技術 ## #8.3.1 密碼學 ##非對稱加密#<程序&#xff1a;把n分解成p*q> import math n 221 m int(math.ceil(math.sqrt(n))) flag 0 for i in range(2,m1,1):if n % i 0:pr…
閱讀更多...
什么是TTL電平、CMOS電平、RS232電平

什么是TTL電平、CMOS電平、RS232電平

工作中遇到一個關于電平選擇的問題,居然給忘記RS232電平的定義了,當時無法反應上來,回來之后查找資料才了解兩者之間的區別,視乎兩年多的時間,之前非常熟悉的一些常識也開始淡忘,這個可不是一個好的現象.:-),還是把關于三種常見的電平的區別copy到這里.做加深記憶的效果之用.. …
閱讀更多...
RFI濾波器電路

RFI濾波器電路

RFI濾波器電路 最實用解決方案是通過使用一個差分低通濾波器在儀表放大器前提供 RF 衰減濾波器。該濾波器需要完成三項工作&#xff1a;盡可能多地從輸入端去除 RF能量&#xff0c;保持每個輸入端和地之間的 AC 信號平衡&#xff0c;以及在測量帶寬內保持足夠高的輸入阻抗以避免…
閱讀更多...
使用Ultra Librarian 生成PCB庫文件

使用Ultra Librarian 生成PCB庫文件

第一步&#xff1a;找到對應芯片的CAD文件&#xff0c;以OPA350為例&#xff1a; http://www.ti.com/product/opa350 第二步&#xff1a; 下載上圖右邊連接的 Ultra Librarian.zip &#xff0c; 然后根據提示&#xff0c;安裝。 安裝好后打開Ultra Librarian&#xff0c;會出現…
閱讀更多...
借漢諾塔理解棧與遞歸

借漢諾塔理解棧與遞歸

我們先說&#xff0c;在一個函數中&#xff0c;調用另一個函數。 首先&#xff0c;要意識到&#xff0c;函數中的代碼和平常所寫代碼一樣&#xff0c;也都是要執行完的&#xff0c;只有執行完代碼&#xff0c;或者遇到return&#xff0c;才會停止。 那么&#xff0c;我們在函…
閱讀更多...
簡單迷宮問題

簡單迷宮問題

迷宮實驗是取自心理學的一個古典實驗。在該實驗中&#xff0c;把一只老鼠從一個無頂大盒子的門放入&#xff0c;在盒子中設置了許多墻&#xff0c;對行進方向形成了多處阻擋。盒子僅有一個出口&#xff0c;在出口處放置一塊奶酪&#xff0c;吸引老鼠在迷宮中尋找道路以到達出口…
閱讀更多...
qt超強繪圖控件qwt - 安裝及配置

qt超強繪圖控件qwt - 安裝及配置

qwt是一個基于LGPL版權協議的開源項目&#xff0c; 可生成各種統計圖。它為具有技術專業背景的程序提供GUI組件和一組實用類&#xff0c;其目標是以基于2D方式的窗體部件來顯示數據&#xff0c; 數據源以數值&#xff0c;數組或一組浮點數等方式提供&#xff0c; 輸出方式可以是…
閱讀更多...
BFPRT

BFPRT

在一大堆數中求其前k大或前k小的問題&#xff0c;簡稱TOP-K問題。而目前解決TOP-K問題最有效的算法即是BFPRT算法&#xff0c;其又稱為中位數的中位數算法&#xff0c;該算法由Blum、Floyd、Pratt、Rivest、Tarjan提出&#xff0c;最壞時間復雜度為O(n)O(n)。 讀者要會快速排序…
閱讀更多...
180°舵機的使用步驟

180°舵機的使用步驟

一.步驟 1.首先查看舵機的運行參數&#xff0c;包括工作的電壓和電流&#xff0c;轉1&#xff08;60&#xff09;需要的脈寬是多少。 2.根據舵機提供的參數&#xff0c;算出需要的PWM的周期和脈寬的范圍。 3.通過單片機或者其他數字電路產生相應的PWM波&#xff0c;便可以驅…
閱讀更多...
Qt開源項目

Qt開源項目

圖像處理&#xff1a; Krita digikam inkscape 編輯器&#xff1a; LiteIDE QDevelper KDeveloper Monkey Studio TeXstudio 繪圖&#xff1a; ZeGrapher QtiPlot qcustomplot QWT HotShots Inkscape 三維建模&#xff1a; QCAD FreeCAD OpenModelica LibreCAD 音樂&#xff1a…
閱讀更多...
最新文章

Copyright @ 2022~2023