用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.mzph.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