前端作品集(三皇牌天下投注网)小游戏开发-

来源:http://www.prospettivedarte.com 作者:计算机教程 人气:135 发布时间:2019-05-10
摘要:arrayHelper.js 有一款名为2048的游戏,设计简单,操作容易,上手快且经久不衰,那么它背后实现的原理又是什么呢?这篇文章是在慕课网学习 慕课网2048私人订制 的产物。 一年来一直做

arrayHelper.js

有一款名为2048的游戏,设计简单,操作容易,上手快且经久不衰,那么它背后实现的原理又是什么呢?这篇文章是在慕课网学习慕课网2048私人订制的产物。

一年来一直做得是后端的东西,没有写前端代码,忘干净了,之前也只用jQuery,好歹还能做点效果。想着捡起来一点,要不然枉费了师傅的栽培。

四、一些细节

  1. 游戏结束的判断,当四个方向都不能移动,且没有空格子时游戏结束
  2. 得分的处理,设置一个全局的变量score,在执行移动时,一旦发生相加操作,将相加的数值作为分数加入score中
  3. 动画的处理,通过jQuery的aninate函数完成

5.2 js代码关系--没什么关系,忘了前端是怎么组织的了;

一、游戏架构

皇牌天下投注网 1

游戏架构

有上图可知,整个2048游戏共由五部分组成,分别是HTML和CSS负责页面的展示效果,JS控制游戏运行的逻辑,动画效果增加游戏的可玩性,还有一些底层的函数封装,提供个逻辑层调用,数据较为简单并入逻辑中。所以有以下的文件列表:

皇牌天下投注网 2

文件列表

4.3 随机数的生成:

二、页面UI的书写

1-1. HTML代码
游戏界面设计的较为简单,只要一个标题,使用h1标签,一个新游戏,使用a标签,一个得分使用p标签,剩下的就是游戏的小方格了,具体代码如下:

<header>
        <h1>2048</h1>
        <a href="javascript:newgame();" id="newgamebutton" class="newgamebutton">New game</a>
        <p>score: 0</p>
    </header>

    <div id="grid-container" class="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>

1-2. CSS部分
该部分主要写页面的样式,头部很简单,让宽度为100%,然后是头部中的每一个元素都居中,由于头部元素的宽度都不大,可以直接写死,如100px,然后采用margin: 0 auto进行居中即可
游戏的操作界面的话随意写一个固定宽度,让该样式在自己的浏览器里面看起来舒服就行,后面需要使用js重新计算并渲染宽度。详细的CSS代码

5.4 看看别人实现思路如何 

三、游戏逻辑开发

3-1. 页面加载完成后执行两个函数,如下

$(document).ready(function(){
    prepareForMobile();
    newgame();
});

其中prepareForMobile()是用来重置整个游戏操作界面的宽高的,代码如下:

function prepareForMobile(){
    if(documentWidth > 410){
        gridcontainerWidth = 410;
        cellSpace = 10;
        cellSlideLength = 90;
    }
    $('#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', cellSlideLength);
    $('.grid-cell').css('height', cellSlideLength);
    $('.grid-cell').css('border-radius', 0.02 * cellSlideLength);
}

newgame()则是游戏的入口程序,每次点击新游戏的时候也会执行该函数。

function newgame(){
    init();
    generateOneNumber();
    generateOneNumber();
}

该函数内容包含两个模块,一个是初始化模块,初始化模块里面做了3件事:

  1. 通过jQuery让每一个数字的背景归位。
  2. 将所有数字初始化为零。
  3. 重新渲染页面

另一个是生成随机数字的模块,核心是通过Math.random生成随机数字。

3-2. 游戏循环

皇牌天下投注网 3

image.png

毫无疑问,2048是属于基于玩家响应的游戏循环(图中文字错误),所以该有对用的操作,以及操作对应的响应。这一部分主要有js的时间监听完成

  1. 键盘事件监听
    主要针对键盘上面的上下左右四个按键进行监听,当按键按下时,执行响应的函数,并且生成新的随机数,随后判断游戏界面中是否还存在空格,如果满了,是否可以进行移动,确定游戏是继续循环还是结束。下面以左按钮事件为例:
$(document).keydown(function(event){
    switch(event.keyCode){
        case 37://left
            event.preventDefault();
            if(moveLeft()){
                setTimeout(generateOneNumber, 210);
                setTimeout(isgameover, 300);
            }
            break;
        default:
            break;
    }
});
function moveLeft(){
    if(!canMoveLeft(board)){
        return false;
    }
    //move left
    for(var i = 0; i < 4; i  ){
        for(var j = 1; j < 4; j  ){
            if(board[i][j] != 0){
                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]){
                        //move
                        showMoveAnimation(i, j, i, k);
                        //add
                        board[i][k]  = board[i][j];
                        board[i][j] = 0;
                        //add score
                        score  = board[i][k];
                        updateScore(score);
                        hasConflicted[i][k] = true;
                        continue;
                    }
                }
            }
        }
    }
    setTimeout(updateBoardView, 200);
    return true;
}

当左按钮按下后,首先判断能否进行左移动,不行的话,直接退出函数,可以的话,往下执行,使用双层for循环,判断
(1). 当前格子是否为空且往左边移动的过程中没有别的数字挡着道路,成立的话,执行左移
(2). 当前格子与其左边格子的数字是否相同,且中间无别的内容,使得话,左移并且执行加法操作,合并数字
当函数执行结束后,重新渲染页面
2.触摸事件监听
触摸事件的监听主要是针对移动端而添加的
主要是通过touch事件完成,在touchstart中记录触摸的起点坐标event.touches[0].pageX和event.touches[0].pageY;在touchend中记录触摸结束点的坐标:event.changedTouches[0].pageX和event.changedTouches[皇牌天下投注网,0].pageY,然后进行运算,比较差值,得到deltaX和deltaY,可以分为以下四种情况:

if(Math.abs(delatX) >= Math.abs(delatY)){
        //x
        if(delatX > 0){
            //move right
        }else{
            //move left
        }
    }else{
        //y
        if(delatY > 0){
            //move down
        }else{
            //move up
        }
    }

即,通过比较x和y的大小确定在哪个州上面移动,然后根据值得正负判断具体的方向。动作执行后的响应与PC端是一致的。

index.html

五、总结

游戏开发的过程中,首要的事情就是搞懂游戏的逻辑以及核心是什么,在2048中,逻辑就是响应用户的操作,进行不同的反馈,核心为,键盘按下和手指滑动时的处理,是否能够移动,移动的方向,移动后是否需要对数字进行操作。在将移动的过程展示出来即可。
最后,附上项目源码:GitHub项目仓库
项目预览:点击我

合并完成之后,将合并后的数字和其他数字移动,贴边。

开始做的是生成一个随机数,16个位置的任意一个,如果这个位置已经有人了,就放弃,重新生成一个,直到找到空位为止。

// 通用方法
// 所有移动都转换成一个方向上的移动:例如,都想象成向左移动,只需要倒转数组即可,完成移动再倒转回来!
function move(direction){
    if (flagSuccess){
        if (confirm("You've got your 2048! Start Another One?n已经通关!开始新游戏?")){
            gameRestart();
        }
        return;
    }

    // 移动之前,记录上一步的内容,移动失败之后可以恢复
    var lastStepUnchange = createNewArray();
    updateFrontArray(lastStepUnchange,lastStepArray);
    // 将上一步状态设置为当前的
    updateFrontArray(lastStepArray,arrayInit);

    // 将当前的去更新,更新失败则回滚上一步的状态
    // 1. 数组倒转复制
    var arrayCopy = new Array();
    if (direction == 'left'){
        arrayCopy = copyArrayLeft();
    }else if (direction == 'right'){
        arrayCopy = copyArrayRight();
    }else if (direction == 'up'){
        arrayCopy = copyArrayUp();
    }else if (direction == 'down'){
        arrayCopy = copyArrayDown();
    }

    // 2. 都向一个方向移动
    var moveResult = moveLeft(arrayCopy);
    if ('fail' == moveResult){

        updateFrontArray(lastStepArray,lastStepUnchange);
        // 移动失败,没有任何改变
        if (confirm('Game Over! Try again?n游戏结束,再来一次?')){
            gameRestart();
            return;
        }else{
            // 最后一步了,允许回退
            clickedLastStep = false;
            return;
        }
        return;
    }
    if ('unmoved' == moveResult){
        return;
    }

    // 3. 从倒转的数组更新原数组
    if (direction == 'left'){
        restoreArrayLeft(arrayCopy);
    }else if (direction == 'right'){
        restoreArrayRight(arrayCopy);
    }else if (direction == 'up'){
        restoreArrayUp(arrayCopy);
    }else if (direction == 'down'){
        restoreArrayDown(arrayCopy);
    }

    // 4. 根据数字更新页面元素
    updatePageByArray();
    updateColor();

    if ('success' == moveResult){
        // 因为操作DOM不是实时的,所以要等一段事件操作完成之后再弹出确认框
        setTimeout(function(){
            // 游戏通关,是否重新开始
            if (confirm('Congragulations! Start Another Game?n恭喜通关!是否再来一把?')){
                gameRestart();
            }else{
                flagSuccess = true;
            }
        },200);
        return;
    }

    // 移动完成
    clickedLastStep = false;
}

 

js区分:

domOperation顾文思意,操作dom;

(这种想法不太面向对象。要是将每个格子都理解为一个对象,不知道好不好做,等以后研究--TODO)

 

一直在看博客,但没有属于自己的东西。this has to change.

2.2 简单css:不同的数字设置不同颜色

arrayHelper是操作数组的;

 

// 拼成了2048,冻结操作,不允许移动了
var flagSuccess = false;
// 刚才点击了回退,不允许重复点击,要移动之后再点击
var clickedLastStep = false;

// 记录上一步,用于回退
var lastStepArray = [
                       [0,0,0,0],
                       [0,0,0,0],
                       [0,0,0,0],
                       [0,0,0,0]
                     ];

// 数组初始化--正常初始化
var arrayInit = 
    [
     [0,0,0,0],
     [0,0,0,0],
     [0,0,0,0],
     [0,0,0,0]
   ];
//[//调试--将要success
// [0,0,0,0],
// [0,128,0,0],
// [0,0,512,1024],
// [0,0,0,1024]
//];
//[//调试--将要fail
// [1,2,3,4],
// [5,128,6,7],
// [8,9,512,1024],
// [13,22,11,11]
//];



// 页面加载初始化
function pageInit()
{
    addHelper();

//    initArray();
    // 页面元素初始化(单元格)
    initElements();

    // 初始数据
    initTwoPositions();

    // 根据初始数据给单元格填充值
    updatePageByArray();

    // 根据单元格的值给单元格设置样式
    updateColor();
}

// 重新开始
function gameRestart(){
    initArray();
    pageInit();
}

function initArray(){
    flagSuccess = false;
    arrayInit = createNewArray();
    clickedLastStep = false;
    lastStepArray = createNewArray();
}


// 给两个位置设置数字2
function initTwoPositions()
{
    initOnePosition(arrayInit);
    initOnePosition(arrayInit);
}
// 给一个位置设置数字2
function initOnePosition(array){
    // 取随机数方式1
//    var num = getRamdom(16);
//    var line = Math.floor(num/4);
//    var col = num % 4;
//    var curNum = array[line][col];
//    if (curNum == 0)
//    {
//        // 成功找到空闲位置
//        array[line][col] = 2;
//        return true;
//    }
//    else{
//        // 递归调用,必须找到一个可用位置才算完
//        return initOnePosition(array);
//    }

    // 取随机数方式2
    var coordinate = getOneEmptyCoordinate(array);
    array[coordinate[0]][coordinate[1]] = 2; 
}

function isEmptyCell(arrayCopy)
{
    for (var i=0;i<4;i  )
    {
        for (var j=0;j<4;j  )
        {
            if (arrayCopy[i][j] == 0)
            {
                return true;
            }
        }
    }
    return false;
}

// 生成随机数,转化成0-15的整数;
function getRamdom(count)
{
    // 0-1
    var r0 = Math.random();
    // 0-16
    var r1 = r0 * count;
    // 只取整数位数的数
    return Math.floor(r1);
}

// 改进:只在当前可用位置中随机找,不用找不可用的位置 
function getOneEmptyCoordinate(array)
{
    // 1. 得到当前数组
    var countEmptyCells = 0;
    var mapIndex2Coordinate = {};
    var coordinates = null;
    for (var i=0;i<4;i  ){
        for (var j=0;j<4;j  ){
            if (array[i][j] == 0){
                countEmptyCells  ;
                coordinates = new Array();
                coordinates.push(i);
                coordinates.push(j);
                mapIndex2Coordinate[countEmptyCells] = coordinates;
            }
        }
    }
    // 取可用位置的随机位置
    var random = getRamdom(countEmptyCells);
    return mapIndex2Coordinate[random];
}

2.3 简单dom操作:取元素,变换显示的数字,改变class

4.2.  通用的移动处理。

核心是4个方向的移动的处理。

common.js

 

  1. 核心代码

因为往一个方向移动,和往其他方向移动处理是一样的,不可能复制以上代码4次吧。

 

较为粗糙,js几乎全部是直接用html引用了,不会其他方式。先实现功能;

-- http://www.cnblogs.com/-lizi/p/8431030.html 这个写的很漂亮

  1. 完整代码粘贴
  1. 代码结构:

4.1 向方向【左】移动的逻辑

考虑采用二维数组存储4*4个格子中的值,如果移动,只需要更新数组,然后用数组的值来更新dom元素即可。

  1. 2048游戏功能分析:

皇牌天下投注网 4

function createNewArray(){
    var newArray = [
                           [0,0,0,0],
                           [0,0,0,0],
                           [0,0,0,0],
                           [0,0,0,0]
                         ];
    return newArray;
}


// 后面的复制给前面
function updateFrontArray(arr1,arr2)
{
    for (var i=0;i<4;i  ){
        for (var j=0;j<4;j  ){
            arr1[i][j] = arr2[i][j];
        }
    }
}

function copyArray(arr){
    var newArray = createNewArray();
    updateFrontArray(newArray,arr);
    return newArray;
}


//左,原方向
function copyArrayLeft(){
    var arrayCopy = copyArray(arrayInit);
    return arrayCopy;
}
function restoreArrayLeft(arrayCopy){
    updateFrontArray(arrayInit,arrayCopy);
}

//右,上下不变,左右颠倒
function copyArrayRight(){
    var arrayCopy = new Array();
    for (var i=0;i<4;i  ){
        var copyOneLine = new Array();
        for (var j=0;j<4;j  ){
            copyOneLine[3-j] = arrayInit[i][j];
        }
        arrayCopy[i] = copyOneLine;
    }
    return arrayCopy;
}
function restoreArrayRight(arrayCopy){
    for (var i=0;i<4;i  ){
        for (var j=0;j<4;j  ){
            arrayInit[i][j] = arrayCopy[i][3-j];
        }
    }
}

//上
//从上往下变成从左往右
//从右往左变成从上往下
//(i,j) 对应:(3-j,i)
function copyArrayUp(){
    var arrayCopy = [
                       [0,0,0,0],
                       [0,0,0,0],
                       [0,0,0,0],
                       [0,0,0,0]
                     ];
    for (var i=0;i<4;i  ){
        for (var j=0;j<4;j  ){
            arrayCopy[3-j][i] = arrayInit[i][j];
        }
    }
    return arrayCopy;
}
function restoreArrayUp(arrayCopy){
    for (var i=0;i<4;i  ){
        for (var j=0;j<4;j  ){
            arrayInit[i][j] = arrayCopy[3-j][i];
        }
    }
}

//下
//从上往下变成从下往上
//从左往右变成从左往右
//(i,j) 对应:(j,3-i)
function copyArrayDown(){
    var arrayCopy = [
                       [0,0,0,0],
                       [0,0,0,0],
                       [0,0,0,0],
                       [0,0,0,0]
                     ];
    for (var i=0;i<4;i  ){
        for (var j=0;j<4;j  ){
            arrayCopy[j][3-i] = arrayInit[i][j];
        }
    }
    return arrayCopy;
}
function restoreArrayDown(arrayCopy){
    for (var i=0;i<4;i  ){
        for (var j=0;j<4;j  ){
            arrayInit[i][j] = arrayCopy[j][3-i];
        }
    }
}

此篇开博,从简单小游戏开始。目的是做出一些可以快点看到效果的东西,捡回一点程序员的信心。

皇牌天下投注网 5

 

common.css

why not start now?俗话说只要代码敲得够快,悲伤就追不上我。

在空白位置随机生成一个数字2,移动结束。

本文由皇牌天下投注网发布于计算机教程,转载请注明出处:前端作品集(三皇牌天下投注网)小游戏开发-

关键词:

最火资讯