5.1 分数的叠加
续上一小节，不知道大家有没有注意到，我们还没有分数统计功能呀
在游戏初始化 init() 函数里，我们应该加上对分数的初始化
score = 0;
我们什么时候会产生分数的变化？
在两个数合在一起产生一个叠加效果的时候。
具体发生在用户按下 “上下左右” 键的时候
我们以 moveLeft() 为例，我们能向左移动有两种情况
- 左边有空位
- 左边的数与本身相同，可以叠加
很明显，第二种情况才会产生分数的叠加
比如：2和2叠加为4, 4和4叠加为8
此时 score变量发生改变，但是前台还没有改变
所以我们还需要把这个分数的变化通知前台，我们新建一个函数updateScore(score)
5.11 updateScore()函数
我们将函数放在showanimation2048.js里
我们不做过多的动画效果，只是让在html里的 score 显示新的 text
function updateScore(score){
$("#score").text(score) ;
}
如果大家有兴趣可以思考一下，如何让分数改变有动画效果
同理，我们把moveRight等另外三个函数里加上
score += board[i][k];
updateScore(score);
现在我们运行一下，发现分数可以叠加啦
到这里别高兴得太早，以为自己成功啦
其实我们这里还有一个小bug
不知道你们有没有发现
例如，我们某一行数从左到右一次是 2 2 4 8 ，此时如果按下 “左键”
会发生什么呢？
在原版游戏里，会发生 两个2叠加变成4
其余不变，只发生一次碰撞
但是在我们写的代码里，会叠加多次后变成最后的“16”
这是为什么呢？
2和2叠加变成4, 4和4叠加变成8, 8和8叠加最后变成了16
但这并不是我们想要的
为什么会产生这样不同的效果？
这是因为原版2048游戏里
在一次操作中，一个方格只能产生一次叠加
比如：红色格子的“2“ 一旦与右边的“2”发生一次碰撞产生“4”
就不能再和4发生碰撞了
为了解决这个问题，我们在main2048.js 的开头声明一个新的变量
var hasConflicted = new Array();
我们也把它转换为二维数组，对应每个小格子
记录每个小格子是否已发生过一次碰撞行为
我们在 init() 函数里像循环遍历把 board 变成二维数组一样
把 hasConflicted() 放进去遍历
并把 hasConflicted [ i ] [ j ] 初始化为 false
也就是初始时每个小格子都没有发生过碰撞
相应的，我们在 updateBoardView() 函数里
对 i j 的number-cell进行设置后也要对响应 i j 加上
hasConflicted [ i ] [ j ] = false;
5.12 hasConflicted（）函数
以 moveLeft() 为例，发生碰撞的条件还要加上一个
hasConflicted(board) = false
[ i ] [ k ] 是我们将要移动到的位置，没有发生过碰撞，
一旦发生变化后，要变为 true，那么下一次这个位置就不能发生碰撞了
hasConflicted(board) = true!
同理其他三个方向，注意 i j k 的位置
这样，我们的2048小游戏基本就算完成了！
但大家还记得我们当时在生成随机数时
使用了一个死循环吗？
function generateOneNumber(){
if(nospace(board))
return false;
//随机一个位置
var randx = parseInt(Math.floor(Math.random()*4));
var randy = parseInt(Math.floor(Math.random()*4));
while(true){
if(board[randx][randy]==0)
break;
randx = parseInt(Math.floor(Math.random()*4));
randy = parseInt(Math.floor(Math.random()*4));
}
//随机一个数字
var randNumber = Math.random() > 0.5?2:4;
//在随机位置显示随机数字
board[randx][randy] = randNumber;
showNumberWithAnimation(randx,randy,randNumber);
}
我们让计算机不断随机产生一个新的位置
如果这个位置被占用了，则继续生成
在最坏的情况下，如果整个局面只剩下1个格子
计算机需要花很长的时间才能找到这个格子
那么我们如何优化呢？
先把所有可以生成的位置放到一个数组temporaty里去
然后在这个数组里进行随机选择
选择出的位置即为生成位置
相比于原函数，生成速度更快，随机性也更强
var count = 0;
var temporary = new Array();
for(var i = 0; i < 4; i++)
for(var j = 0; j < 4; j++){
if(board[i][j]==0){
temporary[count] = i*4 + j;
count++;
}
}
var pos = parseInt(Math.floor(Math.random()*count));
randx = Math.floor(temporary[pos]/4);
randy = Math.floor(temporary[pos]%4);
完结撒花~~~~~~~~~~~~~~~
最后放上我们终极版代码：
2048.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2048</title>
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="main2048.js"></script>
<script type="text/javascript" src="showanimation2048.js"></script>
<script type="text/javascript" src="support2048.js"></script>
<link rel="stylesheet" type="text/css" href="2048.css">
</head>
<body>
<header>
<h1>2048</h1>
<a href="javascript:newgame();" id="newgamebutton">New Game</a>
<p>score：<span id="score">0</span></p>
</header>
<div id="grid-container">
<div class="grid-cell" id="grid-cell-0-0"></div>
<div class="grid-cell" id="grid-cell-0-1"></div>
<div class="grid-cell" id="grid-cell-0-2"></div>
<div class="grid-cell" id="grid-cell-0-3"></div>
<div class="grid-cell" id="grid-cell-1-0"></div>
<div class="grid-cell" id="grid-cell-1-1"></div>
<div class="grid-cell" id="grid-cell-1-2"></div>
<div class="grid-cell" id="grid-cell-1-3"></div>
<div class="grid-cell" id="grid-cell-2-0"></div>
<div class="grid-cell" id="grid-cell-2-1"></div>
<div class="grid-cell" id="grid-cell-2-2"></div>
<div class="grid-cell" id="grid-cell-2-3"></div>
<div class="grid-cell" id="grid-cell-3-0"></div>
<div class="grid-cell" id="grid-cell-3-1"></div>
<div class="grid-cell" id="grid-cell-3-2"></div>
<div class="grid-cell" id="grid-cell-3-3"></div>
</div>
</body>
</html>
2048.css
body{
font-family: Arial;
}
/* header 头部 */
header{
display: block;
margin: 0 auto;
width: 100%;
text-align: center;
}
header h1{
font-size: 40px;
font-weight: bold;
}
header #newgamebutton {
display: block;
margin: 10px auto;
width: 100px;
padding: 10px 10px;
background-color: #b9bbdf;
color: #fff;
border-radius: 10px;
text-decoration: none;
}
header #newgamebutton:hover{
background-color: #d6cdeb;
}
header p{
font-size: 25px;
margin: 20px auto;
}
/* grid-container 格子区域*/
#grid-container{
width: 460px;
height: 460px;
padding: 20px;
margin: 50px auto;
background-color: #ffc7c7;
border-radius: 10px;
position: relative; /*16个格子位置各不相同，小格子需要用绝对定位*/
}
/* grid-cell 每个格子 */
.grid-cell{
width: 100px;
height: 100px;
border-radius: 6px;
background-color: #ffe2e2;
position: absolute;
}
/* number-cell */
.number-cell{
border-radius: 6px;
font-weight: bold;
font-size: 60px;
line-height: 100px;
text-align: center;
position: absolute;
}
main2048.js
var board = new Array();
var scroe = 0;
var hasConflicted = new Array(); //为了解决重复叠加的问题，一次移动只能叠加一次
var startx = 0;
var starty = 0;
var endx = 0;
var endy = 0;
$(document).ready(function(){
// 这个游戏的主函数只做一件事
// 开启一个新游戏
prepareForMobile(); //调用js设置的宽度等
newgame();
});
function prepareForMobile(){
if( documentWidth > 500 ){
gridContainerWidth = 500;
cellSpace = 20;
cellSideLength = 100;
}
$('#grid-container').css('width', gridContainerWidth - 2 * cellSpace);
$('#grid-container').css('height', gridContainerWidth - 2 * cellSpace);
$('#grid-container').css('padding', cellSpace);
$('#grid-container').css('border-radius', 0.02*gridContainerWidth);
$('.grid-cell').css('width', cellSideLength);
$('.grid-cell').css('height', cellSideLength);
$('.grid-cell').css('border-radius', 0.02 * cellSideLength);
}
function newgame(){
// 初始化棋盘格
init();
// 随机两个格子生成数字
generateOneNumber();
generateOneNumber();
//生成2个随机数所以调用2次
}
function init(){
for( var i = 0 ; i < 4 ; i ++)
for( var j = 0 ; j < 4 ; j ++){
//对于每个i和j坐标值，首先找到坐标值对应的小格子的元素
var gridCell = $("#grid-cell-"+i+"-"+j);
//对每个小格子的top值和left值进行计算
gridCell.css('top', getPosTop( i , j ));
gridCell.css('left', getPosLeft( i , j ));
}
// 将board数组变成二维数组
// 把hasConflicted变成二维数组
for(var i = 0 ; i < 4 ;i ++){
board[i] = new Array();
hasConflicted[i] = new Array();
for( var j = 0 ; j < 4 ; j ++){
board[i][j] = 0;
hasConflicted[i][j] = false;
}
//每个数初始化都没有碰撞过
//初始化Borad里的值
}
updateBoardView();
//调用此函数通知前端我们需要对number-cell里的元素进行显示上的设定
score = 0;
}
function updateBoardView(){
//如果当前游戏里有number-cell元素，则需要清除这些元素
//再根据当前borad的值添加新的number-cell元素
$(".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 theNumberCell = $('#number-cell-'+i+'-'+j);
if( board[i][j]==0){
theNumberCell.css('width','0px');
theNumberCell.css('height','0px');
theNumberCell.css('top',getPosTop(i,j) + cellSideLength/2);
theNumberCell.css('height',getPosLeft(i,j) + cellSideLength/2);
}
else{
theNumberCell.css('width',cellSideLength);
theNumberCell.css('height',cellSideLength);
theNumberCell.css('top',getPosTop(i,j));
theNumberCell.css('left',getPosLeft(i,j));
theNumberCell.css('background-color',getNumberBackgroundColor( board[i][j] ) );
theNumberCell.css('color',getNumberColor( board[i][j] ) );
theNumberCell.text( board[i][j] );
}
hasConflicted[i][j] = false;
//每次刷新都要让其初始化碰撞为0
}
$('.number-cell').css('line-height', cellSideLength + 'px');
$('.number-cell').css('font-size', 0.6 * cellSideLength + 'px');
}
}
function generateOneNumber() {
//先判断当前还能不能生成随机数（还有剩余空间）
if( nospace( board ) )
return false;
//随机一个位置(0/1/2/3)
/*
Math.radom 生成0~1之间的一个随机浮点数
Math.floor 返回小于等于x的最大整数
*/
var randx = parseInt(Math.floor(Math.random() * 4) );
var randy = parseInt(Math.floor(Math.random() * 4) );
var times = 0; //如果计算机猜50次还猜不出放在哪里，则人工生成一个位置
// 如果这个数上原来有数字，则不能生成，需要判断
while( times < 50 ){
if( board[randx][randy] == 0 )//如果位置为0，则这个位置是可用的
break; //如果该位置是空的，则走出该死循环
randx = parseInt(Math.floor(Math.random() * 4)); //如果该位置不是空的，则还需要生成随机位置
randy = parseInt(Math.floor(Math.random() * 4));
times ++;
}
if( times == 50 ){
for( var i = 0; i < 4; i++ )
for( var j = 0; j<4; j++){
if( board[i][j] == 0){
randx = i;
randy = j;
}
}
}
//随机生成 2或4
// 让random随机生成数，比0.5大就生成2，比0.5小就生成4，比例相同
var randNumber = Math.random() < 0.5 ? 2 : 4;
//在随机位置显示随机数字
board[randx][randy] = randNumber;
showNumberWithAnimation( randx, randy, randNumber );
return true;
}
//获取玩家按键信息
$(document).keydown( function ( event ) {
switch( event.keyCode ){
case 37://left
if ( moveLeft() ){ //如果真的可以左移
setTimeout("generateOneNumber()",210) ; //生成一个新的数
setTimeout("isgameover()",300); //判断游戏是否结束
}
//还需要判断是否能向左（因为当左边满了不能左移）
break;
case 38://up
if ( moveUp() ){ //如果真的可以左移
setTimeout("generateOneNumber()",210) ; //生成一个新的数
setTimeout("isgameover()",300); //判断游戏是否结束
}
break;
case 39://right
if ( moveRight() ){ //如果真的可以左移
setTimeout("generateOneNumber()",210) ; //生成一个新的数
setTimeout("isgameover()",300); //判断游戏是否结束
}
break;
case 40://down
if ( moveDown() ){ //如果真的可以左移
setTimeout("generateOneNumber()",210) ; //生成一个新的数
setTimeout("isgameover()",300); //判断游戏是否结束
}
break;
default:
break;
}
});
document.addEventListener('touchstart',function (event) {
//事件监听器
//监听touchstart事件，当捕捉到则相应一个匿名函数
startx = event.touches[0].pageX; //touches数组记录几个手机触摸的数据
starty = event.touches[0].pageY;
});
document.addEventListener('touchend',function (event) {
//事件监听器
//监听touchend事件，当捕捉到则相应一个匿名函数
endx = event.changedTouches[0].pageX;
endy = event.changedTouches[0].pageY;
// 这里的y轴方向是向下的，x轴方向向右
var deltax = endx - startx;
var deltay = endy - starty;
// 判断一下用户是点击还是滑动
// 同时小于某个阈值，则判断为点击
if( Math.abs( deltax ) < 0.3 * documentWidth && Math.abs( deltay ) < 0.3 * documentWidth )
return;
//如果x轴位移距离大于y轴位移距离，则判断在x轴移动
if( Math.abs( deltax ) >= Math.abs( deltay )){
if( deltax > 0 ){
// move right
if ( moveRight() ){ //如果真的可以左移
setTimeout("generateOneNumber()",210) ; //生成一个新的数
setTimeout("isgameover()",300); //判断游戏是否结束
}
}
else{ // move left
if ( moveLeft() ){ //如果真的可以左移
setTimeout("generateOneNumber()",210) ; //生成一个新的数
setTimeout("isgameover()",300); //判断游戏是否结束
}
}
}
//否则在y轴进行
else{
if( deltay > 0 ){
// move down
if ( moveDown() ){ //如果真的可以左移
setTimeout("generateOneNumber()",210) ; //生成一个新的数
setTimeout("isgameover()",300); //判断游戏是否结束
}
}
else{ // move up
if ( moveUp() ){ //如果真的可以左移
setTimeout("generateOneNumber()",210) ; //生成一个新的数
setTimeout("isgameover()",300); //判断游戏是否结束
}
}
}
});
function isgameover() {
//没有空间且相邻没有相等的数
if( nospace( board ) && nomove( board ) )
gameover();
}
function gameover(){
}
// moveLeft() 对每一个数字的左侧位置进行判断，看是否可能为落脚点
// 落脚位置是否为空？
// 落脚位置数字和待判定元素数字相等？
// 移动路径中是否有障碍物？
function moveLeft() {
if( !canMoveLeft( board ))
// 左边是否没有数字？
// 左边数字是否和自己相等？
return false;
// moveLeft
for(var i = 0 ; i < 4 ;i ++)
for( var j = 1 ; j < 4 ; j ++){
if ( board[i][j] !=0 ){
//遍历(i,j)左侧的所有元素 k
for( var k = 0; k < j; k++ ){
if( board[i][k] == 0 && noBlockHorizontal( i, k, j, board )){
// 如果没有障碍物的话，就可以产生移动
// move
showMoveAnimation( i, j, i, k );
board[i][k] = board[i][j];
board[i][j] = 0;
continue;
}
else if( board[i][k] == board[i][j] && noBlockHorizontal( i, k, j, board ) && !hasConflicted[i][k] ){
// 有障碍物，但障碍物k与j相同，则产生叠加
// move
// add
showMoveAnimation( i, j, i, k );
board[i][k] *= 2;
board[i][j] = 0;
score += board[i][k];
updateScore( score ); //把新的数通知前台
hasConflicted[i][k] = true; //把碰撞的值设置成true，已碰撞
continue;
}
}
}
}
setTimeout("updateBoardView()",200) ; //等待200ms等动画效果再每次进行一次刷新
return true;
}
function moveRight() {
if( !canMoveRight( board ))
// 右边是否没有数字？
// 右边数字是否和自己相等？
return false;
// moveRight
for(var i = 0 ; i < 4 ;i ++)
for( var j = 2 ; j >=0 ; j --){
if ( board[i][j] !=0 ){
//遍历(i,j)右侧的所有元素 k
for( var k = 3; k > j; k-- ){
if( board[i][k] == 0 && noBlockHorizontal( i, j, k, board )){
// 如果没有障碍物的话，就可以产生移动
// move
showMoveAnimation( i, j, i, k );
board[i][k] = board[i][j];
board[i][j] = 0;
continue;
}
else if( board[i][k] == board[i][j] && noBlockHorizontal( i, j, k, board ) && !hasConflicted[i][k]){
// 有障碍物，但障碍物k与j相同，则产生叠加
// move
// add
showMoveAnimation( i, j, i, k );
board[i][k] *= 2;
board[i][j] = 0;
score += board[i][k];
updateScore(score);
hasConflicted[i][k] = true;
continue;
}
}
}
}
setTimeout("updateBoardView()",200) ; //等待200ms等动画效果再每次进行一次刷新
return true;
}
function moveUp() {
if( !canMoveUp( board ))
// 上边是否没有数字？
// 上边数字是否和自己相等？
return false;
// moveRight
for(var j = 0 ; j < 4 ;j ++)
for( var i = 1 ; i < 4 ; i ++){
if ( board[i][j] !=0 ){
//遍历(i,j)右侧的所有元素 k
for( var k = 0; k < i; k++ ){
if( board[k][j] == 0 && noBlockVertical( j, k, i, board )){
// 如果没有障碍物的话，就可以产生移动
// move
showMoveAnimation( i, j, k, j );
board[k][j] = board[i][j];
board[i][j] = 0;
continue;
}
else if( board[k][j] == board[i][j] && noBlockVertical( j, k, i, board ) && !hasConflicted[k][j]){
// 有障碍物，但障碍物k与j相同，则产生叠加
// move
// add
showMoveAnimation( i, j, k, j );
board[k][j] *= 2;
board[i][j] = 0;
score += board[k][j];
updateScore(score);
hasConflicted[k][j] = true;
continue;
}
}
}
}
setTimeout("updateBoardView()",200) ; //等待200ms等动画效果再每次进行一次刷新
return true;
}
function moveDown() {
if( !canMoveDown( board ))
// 下边是否没有数字？
// 下边数字是否和自己相等？
return false;
// moveRight
for(var j = 0 ; j < 4 ;j ++)
for( var i = 2 ; i >=0 ; i --){
if ( board[i][j] !=0 ){
//遍历(i,j)下侧的所有元素 k
for( var k = 3; k > i; k-- ){
if( board[k][j] == 0 && noBlockVertical( j, i, k, board )){
// 如果没有障碍物的话，就可以产生移动
// move
showMoveAnimation( i, j, k, j );
board[k][j] = board[i][j];
board[i][j] = 0;
continue;
}
else if( board[k][j] == board[i][j] && noBlockVertical( j, i, k, board ) && !hasConflicted[k][j]){
// 有障碍物，但障碍物k与j相同，则产生叠加
// move
// add
showMoveAnimation( i, j, k, j );
board[k][j] *= 2;
board[i][j] = 0;
score += board[k][j];
updateScore(score);
hasConflicted[k][j] = true;
continue;
}
}
}
}
setTimeout("updateBoardView()",200) ; //等待200ms等动画效果再每次进行一次刷新
return true;
}
support2048.js
documentWidth = window.screen.availWidth;
gridContainerWidth = 0.92 * documentWidth;
cellSideLength = 0.18 * documentWidth;
cellSpace = 0.04 * documentWidth;
function getPosTop( i, j ){
return (cellSpace + i*(cellSpace + cellSideLength));
}
function getPosLeft( i ,j ){
return (cellSpace + j*(cellSpace + cellSideLength));
}
function getNumberBackgroundColor( number) {
switch(number){
case 2:return "#ffefe0";break;
case 4:return "#ffe3ed";break;
case 8:return "#ffb6b6";break;
case 16:return "#fddd8a";break;
case 32:return "#f8a987";break;
case 64:return "#f37d7a";break;
case 128:return "#a7d7c5";break;
case 256:return "#74b49b";break;
case 512:return "#72a39f";break;
case 1024:return "#9ee9da";break;
case 2048:return "#a7c1de";break;
case 4096:return "#d6cdeb";break;
case 8192:return "#d8b8e9";break;
}
return "black";
}
function getNumberColor( number ) {
if( number <= 4)
return "#a69d95";
return "white";
}
function nospace( board ){
for(var i = 0 ; i < 4 ;i ++)
for( var j = 0 ; j < 4 ; j ++)
if( board[i][j] == 0 )
return false;
return true; rue;
}
function canMoveLeft( board ){
// 只需要遍历12个元素，因为最左边的元素不能向左移了
// 左边是否没有数字？
// 左边数字是否和自己相等？
for(var i = 0 ; i < 4 ;i ++)
for( var j = 1 ; j < 4 ; j ++) //第0列不需要遍历
if( board[i][j] !=0 )
if( board[i][j-1] == 0 || board[i][j-1] == board[i][j] )
return true;
return false;
}
function canMoveRight( board ){
// 只需要遍历12个元素，因为最右边的元素不能向左移了
// 右边是否没有数字？
// 右边数字是否和自己相等？
for(var i = 0 ; i < 4 ;i ++)
for( var j = 2 ; j >= 0 ; j --) //第0列不需要遍历
if( board[i][j] !=0 )
if( board[i][j+1] == 0 || board[i][j+1] == board[i][j] )
return true;
return false;
}
function canMoveUp( board ){
// 只需要遍历12个元素，因为最上边的元素不能向上移了
// 上边是否没有数字？
// 上边数字是否和自己相等？
for(var j = 0 ; j < 4 ;j ++)
for( var i = 1 ; i < 4 ; i ++) //第0行不需要遍历
if( board[i][j] !=0 )
if( board[i-1][j] == 0 || board[i-1][j] == board[i][j] )
return true;
return false;
}
function canMoveDown( board ){
// 只需要遍历12个元素，因为最下边的元素不能向下移了
// 下边是否没有数字？
// 下边数字是否和自己相等？
for(var j = 0 ; j < 4 ;j ++)
for( var i = 2 ; i >= 0 ; i --) //第0行不需要遍历
if( board[i][j] !=0 )
if( board[i+1][j] == 0 || board[i+1][j] == board[i][j] )
return true;
return false;
}
function noBlockHorizontal( row, col1, col2, board ){
for( var i = col1 + 1 ; i < col2 ; i ++)
if( board[row][i] != 0 )
return false;
return true;
}
function noBlockVertical( col, row1, row2, board ){
for( var i = row1 + 1 ; i < row2 ; i ++)
if( board[i][col] != 0 )
return false;
return true;
}
function nomove( board ){
if( canMoveLeft( board )||canMoveRight( board )||canMoveUp( board )||canMoveDown( board ) )
return false;
return true;
}
showanimation2048.js
function showNumberWithAnimation( i, j, randNumber ){
var numberCell = $('#number-cell-' + i + "-" + j );
numberCell.css('background-color', getNumberBackgroundColor( randNumber ));
numberCell.css('color', getNumberColor( randNumber ));
numberCell.text( randNumber );
numberCell.animate({
width:cellSideLength,
height:cellSideLength,
top: getPosTop(i, j),
left: getPosLeft(i, j)
},50);
}
function showMoveAnimation( fromx, fromy, tox, toy ){
var numberCell = $('#number-cell-' + fromx + "-" + fromy );
numberCell.animate({
top: getPosTop( tox, toy),
left: getPosLeft( tox, toy)
},200);
}
function updateScore( score ){
$('#score').text( score );
}
玩自己设计的2048就是爽歪歪
你觉得呢？
4093
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
