如何用JavaScript编写一个简易的2048游戏来练习长尾词编程技巧？

2026-04-02 22:061阅读0评论SEO教程

内容介绍
文章标签
相关推荐

本文共计640个文字，预计阅读时间需要3分钟。

效果图实现代码2048 .basic { height: 80px; width: 80px; background-color: }

效果图

实现代码

<!DOCTYPE HTML> <html> <head> <meta 左 //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 但结果得8 if(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; } }; //main window.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>

到此这篇关于基于JS制作一个简易的2048游戏的文章就介绍到这了,更多相关JS 2048游戏内容请搜索自由互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持自由互联！

标签：2048 游戏效果图