慕课网2048私人订制_技术笔记

pinzaghi 2019-11-19

阻止touchmove的默认行为以防止bug

截图
0赞 · 0采集
pinzaghi 2019-11-19

event.preventDefault()可以阻止按键的默认行为

截图
0赞 · 1采集
梦想还是要有的万一实现了呢 2017-03-25

360浏览器测试时，大屏幕也自适应了？？？Chrome没问题代码以及逻辑后续可以再看看，花了一天的时间phonegap的问题还是没有弄好，网上的教程和官网的都不一致，按照官网上面的下载了APP，但是连接总是失败，慢慢找方法吧

0赞 · 0采集
majoege 2016-11-27

利用addEventListener可以实现更加精确的控制，在用户点击按钮时触发监听事件： document.getElementById("myBtn").addEventListener("click", displayDate);

截图
1赞 · 1采集
majoege 2016-11-27

解决点击过程中，滚动条也会触发的BUG,用event.preventDefault（）

截图
0赞 · 0采集
majoege 2016-11-27

还发现造成，点击newgame时候，出现了三个数字，是因为程序以为你进行了一个滑动操作，所以要把点击操作给去掉

截图
0赞 · 0采集
majoege 2016-11-27

1.为了防止点击操作也能造成游戏的响应，加一个判断，绝对值的小于某个量时，直接return来跳出。

0赞 · 0采集
皮皮时光机 2016-06-30

解决event.preventDefault这个bug

截图
0赞 · 0采集
微蓝lran 2016-04-17

touch事件不怎么管用的原因

截图
0赞 · 0采集
longming 2015-09-02

不要把event.preventDefault()放在外面，只为需要重新定义的按键添加默认事件

截图
0赞 · 3采集
longming 2015-09-02

阻止安卓的默认bug

截图
0赞 · 0采集
longming 2015-09-02

event.preventDefault(),可以阻止默认事件，在这用来阻止键盘的默认事件

截图
0赞 · 2采集
Innocence617 2015-05-04

19728 bug

0赞 · 0采集
风雪夜归魂 2015-02-02

function showNumWithAnimation(i, j, num){ var numberCell = $("#number-cell-" + i + '-' + j); numberCell.css({ background: getNumberBackgroundColor(num), color: getNumberColor(num), "font-size": getFontSize(num) }); numberCell.text(num); numberCell.animate({ width: cellWidth, height: cellWidth, top: getPosTop(i, j), left: getPosLeft(i,j) }, 200); } function showMoveAnimation(startI, startJ, endI, endJ){ var numberCell = $("#number-cell-" + startI + '-' + startJ); numberCell.animate({ left: getPosLeft(endI, endJ), top: getPosTop(endI, endJ) }, 200); } </script> </body> </html>

0赞 · 0采集
风雪夜归魂 2015-02-02

function getNumberBackgroundColor(num){ switch(num){ case 2: return "#eee4da";break; case 4: return "#ede0c8";break; case 8: return "#f2b179";break; case 16: return "#f59563";break; case 32: return "#f67c5f";break; case 64: return "#f65e3b";break; case 128: return "#edcf72";break; case 256: return "#edcc61";break; case 512: return "#9c0";break; case 1024: return "#33b5e5";break; case 2048: return "#09c";break; case 4096: return "#a6c";break; case 8192: return "#93c";break; default: return "#000";break; } } function getNumberColor(num){ if(num <= 4){ return "#776e65"; } else{ return "#fff"; } }

0赞 · 0采集
风雪夜归魂 2015-02-02

function getFontSize(num){ var len = (num + "").length; switch(len){ case 1: return "150%";break; case 2: return "120%";break; case 3: return "90%";break; case 4: return "70%";break; default: return "50%"; } } function getPosTop(i, j){ return (0.04 + i * 0.22) * winWidth + "px"; } function getPosLeft(i, j){ return (0.04 + j * 0.22) * winWidth + "px"; } function getPosTopCenter(i, j){ return (0.04 + i * 0.22 + 0.09) * winWidth + "px"; } function getPosLeftCenter(i, j){ return (0.04 + j * 0.22 + 0.09) * winWidth + "px"; }

0赞 · 0采集
风雪夜归魂 2015-02-02

numberCell.text(num); } hasConflicted[i][j] = false; } } }

0赞 · 0采集
风雪夜归魂 2015-02-02

function updateBoardView(){ $(".number-cell").remove(); for(var i = 0; i < 4; i++){ for(var j = 0; j < 4; j++){ $(".grid-container").append('<div class="number-cell" id="number-cell-' + i + '-' + j + '"></div>'); var numberCell = $("#number-cell-" + i + '-' + j); var num = board[i][j]; if(num == 0){ numberCell.css({ width: 0, height: 0, left: getPosLeftCenter(i, j), top: getPosTopCenter(i, j), "border-radius": radiusSmall, "font-size": getFontSize(num), "line-height": cellWidth }); } else{ numberCell.css({ width: cellWidth, height: cellWidth, left: getPosLeft(i, j), top: getPosTop(i, j), background: getNumberBackgroundColor(num), color: getNumberColor(num), "border-radius": radiusSmall, "font-size": getFontSize(num), "line-height": cellWidth });

0赞 · 0采集
风雪夜归魂 2015-02-02

function generateOneNumber(){ var empty = findEmpty(); var len = empty.length; if(len > 0){ //随机一个位置 var pos = empty[Math.floor(Math.random() * len)]; var i = pos.x; var j = pos.y; //随机一个数字，2或4 var num = Math.random() < 0.5 ? 2 : 4; //在该位置显示该数字 board[i][j] = num; showNumWithAnimation(i, j, num); } } function findEmpty(){ var empty = []; var k = 0; for(var i = 0; i < 4; i++){ for(var j = 0; j < 4; j++){ if(board[i][j] == 0){ empty[k++] = { x: i, y: j } } } } return empty; }

0赞 · 0采集
风雪夜归魂 2015-02-02

function hasNoBlockHorizontal(row, start, end){ for(var j = start + 1; j < end; j++){ if(board[row][j] != 0){ return false; } } return true; } function hasNoBlockVertical(col, start, end){ for(var i = start + 1; i < end; i++){ if(board[i][col] != 0){ return false; } } return true; } function updateScore(score){ $("#score").text(score); } function newGame(){ //初始化 init(); //在随机两个格子上生成数字 generateOneNumber(); generateOneNumber(); } function init(){ for(var i = 0; i < 4; i++){ board[i] = []; hasConflicted[i] = []; for(var j = 0; j < 4; j++){ $("#grid-cell-" + i + '-' + j).css({ left: getPosLeft(i, j), top: getPosTop(i, j) }); board[i][j] = 0; hasConflicted[i][j] = false; } } updateBoardView(); score = 0; }

0赞 · 0采集
风雪夜归魂 2015-02-02

function canMoveLeft(){ for(var i = 0; i < 4; i++){ for(var j = 1; j < 4; j++){ if(board[i][j-1] == 0 || board[i][j-1] == board[i][j]){ return true; } } } return false; } function canMoveRight(){ for(var i = 0; i < 4; i++){ for(var j = 0; j < 3; j++){ if(board[i][j + 1] == 0 || board[i][j + 1] == board[i][j]){ return true; } } } return false; } function canMoveUp(){ for(var j = 0; j < 4; j++){ for(var i = 1; i < 4; i++){ if(board[i - 1][j] == 0 || board[i - 1][j] == board[i][j]){ return true; } } } return false; } function canMoveDown(){ for(var j = 0; j < 4; j++){ for(var i = 0; i < 3; i++){ if(board[i + 1][j] == 0 || board[i + 1][j] == board[i][j]){ return true; } } } return false; }

0赞 · 0采集
风雪夜归魂 2015-02-02

function moveDown(){ if(!canMoveDown()){ return false; } for(var j = 0; j < 4; j++){ for(var i = 2; i >= 0; i--){ if(board[i][j] != 0){ for(var k = 3; k > i; k--){ if(hasNoBlockVertical(j, i, k)){ if(board[k][j] == 0){ showMoveAnimation(i, j, k, j); board[k][j] = board[i][j]; board[i][j] = 0; continue; } else if(board[k][j] == board[i][j] && hasConflicted[k][j] == false){ showMoveAnimation(i, j, k, j); board[k][j] += board[i][j]; board[i][j] = 0; score += board[k][j]; updateScore(score); continue; } } } } } } setTimeout(updateBoardView, 200); return true; }

0赞 · 0采集
风雪夜归魂 2015-02-02

function moveUp(){ if(!canMoveUp()){ return false; } for(var j = 0; j < 4; j++){ for(var i = 1; i < 4; i++){ if(board[i][j] != 0){ for(var k = 0; k < i; k++){ if(hasNoBlockVertical(j, k, i)){ if(board[k][j] == 0){ showMoveAnimation(i, j, k, j); board[k][j] = board[i][j]; board[i][j] = 0; continue; } else if(board[k][j] == board[i][j] && hasConflicted[k][j] == false){ showMoveAnimation(i, j, k, j); board[k][j] += board[i][j]; board[i][j] = 0; score += board[k][j]; updateScore(score); continue; } } } } } } setTimeout(updateBoardView, 200); return true; }

0赞 · 0采集
风雪夜归魂 2015-02-02

function moveRight(){ if(!canMoveRight()){ return false; } for(var i = 0; i < 4; i++){ for(var j = 2; j >= 0; j--){ if(board[i][j] != 0){ for(var k = 3; k > j;k--){ if(hasNoBlockHorizontal(i, j, k)){ if(board[i][k] == 0){ showMoveAnimation(i, j, i, k); board[i][k] = board[i][j]; board[i][j] = 0; continue; } else if(board[i][j] == board[i][k] && hasConflicted[i][k] == false){ showMoveAnimation(i, j, i, k); board[i][k] += board[i][j]; board[i][j] = 0; score += board[i][k]; updateScore(score); continue; } } } } } } setTimeout(updateBoardView, 200); return true; }

0赞 · 0采集
风雪夜归魂 2015-02-02

function moveLeft(){ if(!canMoveLeft()){ return false; } var board_i_j; var board_i_K; for(var i = 0; i < 4; i++){ for(var j = 1; j < 4; j++){ board_i_j = board[i][j]; if(board_i_j != 0){ for(var k = 0; k < j; k++){ board_i_K = board[i][k]; if(hasNoBlockHorizontal(i, k, j)){ if(board_i_K == 0){ showMoveAnimation(i, j, i, k); board[i][k] = board[i][j]; board[i][j] = 0; continue; } else if(board_i_K == board_i_j && hasConflicted[i][k] == false){ showMoveAnimation(i, j, i, k); board[i][k] += board[i][j]; board[i][j] = 0; hasConflicted[i][k] = true; score += board[i][k]; updateScore(score); continue; } } } } } } setTimeout(updateBoardView, 200); return true; }

0赞 · 0采集
风雪夜归魂 2015-02-02

function selfAdaption(){ $(".grid-container").css({ width: containerWidth, height: containerWidth, "border-radius": radiusBig, background: "#bbada0", margin: "0 auto", padding: cellSpace, position: "relative" }); $(".grid-cell").css({ width: cellWidth, height: cellWidth, "border-radius": radiusSmall, background: "#ccc0b3", position: "absolute" }); } function isGameover(){ if(canMoveLeft() || canMoveRight() || canMoveUp() || canMoveDown()){ return; } gameover(); } function gameover(){ alert("Game Over!"); }

0赞 · 0采集
风雪夜归魂 2015-02-02

document.addEventListener("touchend", function(e){ endX = e.changedTouches[0].pageX; endY = e.changedTouches[0].pageY; var x = endX - startX; var y = endY - startY; var absX = Math.abs(x); var absY = Math.abs(y); if(absX > 0.2 * winWidth || absY > 0.2 * winWidth){ if(absX > absY){ if(x < 0){ if(moveLeft()){ setTimeout(generateOneNumber, 210); setTimeout(isGameover, 300); e.preventDefault(); } } else{ if(moveRight()){ setTimeout(generateOneNumber, 210); setTimeout(isGameover, 300); e.preventDefault(); } } } else{ if(y < 0){ if(moveUp()){ setTimeout(generateOneNumber, 210); setTimeout(isGameover, 300); e.preventDefault(); } } else{ if(moveDown()){ setTimeout(generateOneNumber, 210); setTimeout(isGameover, 300); e.preventDefault(); } } } } });

0赞 · 0采集
风雪夜归魂 2015-02-02

document.addEventListener("touchstart", function(e){ startX = e.touches[0].pageX; startY = e.touches[0].pageY; });

0赞 · 0采集
风雪夜归魂 2015-02-02

$(function(){ selfAdaption(); $(document.body).css({ "font-size": 0.1 * winWidth + "px" }); newGame(); $("#newGame").off("click").on("click", newGame); $(document).off("keydown").on("keydown", function(e){ switch(e.which){ case 37: //左 if(moveLeft()){ setTimeout(generateOneNumber, 210); setTimeout(isGameover, 300); e.preventDefault(); } break; case 38: //上 if(moveUp()){ setTimeout(generateOneNumber, 210); setTimeout(isGameover, 300); e.preventDefault(); } break; case 39: //右 if(moveRight()){ setTimeout(generateOneNumber, 210); setTimeout(isGameover, 300); e.preventDefault(); } break; case 40: //下 if(moveDown()){ setTimeout(generateOneNumber, 210); setTimeout(isGameover, 300); e.preventDefault(); } break; defaut: break; } }); });

0赞 · 0采集
风雪夜归魂 2015-02-02

<div class="grid-cell" id="grid-cell-3-2"></div> <div class="grid-cell" id="grid-cell-3-3"></div> </div> <script type="text/javascript"> var score = 0; var board = []; var hasConflicted = []; var winWidth = window.screen.availWidth; winWidth = winWidth > 500 ? 500 : winWidth; var containerWidth = (0.92 - 0.04 * 2) * winWidth + "px"; var cellSpace = 0.04 * winWidth + "px"; var cellWidth = 0.18 * winWidth + "px"; var radiusBig = 0.03 * winWidth + "px"; var radiusSmall = 0.02 * winWidth + "px"; var startX = 0, startY = 0; var endX = 0, endY = 0;

0赞 · 0采集

数据加载中...