<！doctype html> < html > < 头 >     < meta  charset = “ UTF-8” />     < 标题 > Snake </ 标题 >     < 脚本 src = “ assets / js / phaser.min.js” ></ script >     < script  src = “ assets / js / menu.js” ></ script >     < script  src = “ assets / js / game.js” ></ script >     < script  src = “ assets / js / game_over.js” ></ script >     < script  src = “ assets / js / main.js” ></ 脚本 > </ 头 > < 正文 ></ body > </ html >

var game;//创建一个新的游戏实例，宽600像素，高450像素： game = new Phaser.Game（600，450，Phaser.AUTO，''）;//第一个参数是如何调用我们的状态。//第二个参数是一个对象，其中包含状态功能 game.state 所需的方法。添加（'Menu'，Menu）;game.state.start（'Menu'）;

var Menu = {    预载：功能（} {         //需要加载图片，以便以后我们可以基于它们创建精灵。        //第一个参数是图像的引用方式，        //第二个参数是文件的路径。        game.load.image（'menu'，'./assets/images/menu.png'）;    }，    创建：功能（） {         //添加一个精灵到你的游戏，这里的精灵将是游戏的标志        //参数为：X，Y，图像名称（见上文）        这个 .add.sprite（0，0，“菜单”）;    }};

var game;游戏= 新 Phaser.Game（600，450，Phaser.AUTO，''）;game.state。添加（'Menu'，Menu）;//添加游戏状态。game.state。添加（'Game'，Game）;game.state.start（'Menu'）;

var Menu = {    预载：功能（} {         //加载菜单所需的所有资源。        game.load.image（'menu'，'./assets/images/menu.png'）;    }，    创建：功能（） {        //添加菜单屏幕。        //它将作为开始游戏的按钮。        此 .add.button（0，0，'菜单'，这 .startGame，此）;    }，    startGame：函数（） {        //将状态更改为实际游戏。        这个 .state.start（'Game'）;    }};

var蛇，苹果，squareSize，得分，速度，    updateDelay，方向，new_direction，    addNew，游标，scoreTextValue，speedTextValue，     textStyle_Key，textStyle_Value;var Game = {    preload：function （）  {         //这里，我们加载了关卡所需的所有资源。        //在我们的例子中，只有两个正方形-一个用于蛇形，另一个用于苹果。        game.load.image（'snake'，'./assets/images/snake.png'）;        game.load.image（'apple'，'./assets/images/apple.png'）;    }，    create：function （）  {        //通过在create函数中设置全局变量，我们在游戏开始时对其进行初始化。        //我们需要它们在全球范围内可用，以便更新功能可以更改它们。        蛇= [];                     //这将作为一个堆栈工作，其中包含我们的蛇         苹果的各个部分 = {};                     //苹果的对象；        squareSize = 15 ;                //正方形边的长度。我们的图像是15x15像素。        分数= 0 ;                      //游戏得分。        速度= 0 ;                      // 游戏速度。        updateDelay = 0 ;                //用于控制更新率的变量。        方向= '正确' ;            //我们的蛇的方向。        new_direction = null ;           //用来存储新方向的缓冲区。        addNew = false ;                 //食用苹果后使用的变量。        //设置用于键盘输入的Phaser控制器。        游标= game.input.keyboard.createCursorKeys（）;        game.stage.backgroundColor = '＃061f27' ;        //生成初始的蛇形堆栈。我们的蛇将长10个元素。        //从X = 150 Y = 150开始，并在每次迭代中增加X。        对于（var i = 0 ; i < 10 ; i ++）{            snake [i] = game.add.sprite（150 + i * squareSize，150，'snake'）;  //参数是（X坐标，Y坐标，图像）        }        //生成第一个苹果。        this.generateApple（）;        //将文字添加到游戏顶部。        textStyle_Key = {字体：“ bold 14px sans-serif”，填充：“＃46c0f9”，align：“ center” };        textStyle_Value = {字体：“粗体18px sans-serif”，填充：“＃fff”，对齐：“居中” };        // 得分。        game.add.text（30，20，“SCORE”，textStyle_Key）;        scoreTextValue = game.add.text（90，18，score.toString（），textStyle_Value）;        //速度。        game.add.text（500，20，“SPEED”，textStyle_Key）;        speedTextValue = game.add.text（558，18，speed.toString（），textStyle_Value）;    }，    update：function （）  {         //更新函数不断被高速率调用（大约60fps），        //每次都更新游戏场。        //我们现在暂时将其留空。    }，    generateApple：function （） {        //在网格上选择一个随机位置。        // X在0到585（39 * 15）        之间// Y在0到435（29 * 15）之间        var randomX = Math.floor（Math.random（）* 40）* squareSize，            randomY = Math.floor（Math.random（）* 30）* squareSize;        //添加一个新苹果。        苹果= game.add.sprite（randomX，randomY，'apple'）;    }};

更新：function （）  {    //按下箭头键，同时不允许非法改变方向，这会杀死玩家。    如果（cursors.right.isDown && direction！= 'left'）    {        new_direction = '正确' ;    }    否则 if（cursors.left.isDown && direction！= 'right'）    {        new_direction = '左' ;    }    否则 if（cursors.up.isDown && direction！= 'down'）    {        new_direction = '向上' ;    }    否则 if（cursors.down.isDown && direction！= 'up'）    {        new_direction = '向下' ;    }    //根据得分计算游戏速度的公式。    //得分越高，游戏速度越高，最高为10；    速度= Math.min（10，Math.floor（score / 5））;    //在游戏屏幕上更新速度值。    speedTextValue.text = '' +速度;    //由于Phaser的更新功能的更新速率约为60 FPS，    //我们需要放慢速度以使游戏可玩。    //在每次更新调用时增加一个计数器。    updateDelay ++;    //仅当计数器等于（10-游戏速度）时才进行游戏。    //速度越高，执行的频率就越高，    //使蛇移动得更快。    如果（updateDelay％（10 -speed）== 0）{        //蛇的运动        var firstCell = snake [snake.length- 1 ]，            lastCell = snake.shift（），            oldLastCellx = lastCell.x，            oldLastCelly = lastCell.y;        //如果已从键盘选择了新的方向，请立即使其成为蛇的方向。        如果（new_direction）{            方向= new_direction;            new_direction = null ;        }        //根据方向更改相对于蛇头的最后一个单元格的坐标。        如果（方向== '正确'）{            lastCell.x = firstCell.x + 15 ;            lastCell.y = firstCell.y;        }        否则 如果（方向== “左”）{            lastCell.x = firstCell.x- 15 ;            lastCell.y = firstCell.y;        }        否则， 如果（direction == 'up'）{            lastCell.x = firstCell.x;            lastCell.y = firstCell.y- 15 ;        }        否则， 如果（direction == 'down'）{            lastCell.x = firstCell.x;            lastCell.y = firstCell.y + 15 ;        }        //将最后一个单元格放在堆栈的前面。        //将其标记为第一个单元格。        snake.push（lastCell）;        firstCell = lastCell;    }}

更新：功能（） {        //蛇移动        // ...         //蛇移动结束        //如果吃了苹果，则增加蛇的长度。        //在蛇的后面创建一个块，并使用上一个最后一个块的旧位置        //（它与蛇的其余部分一起移动了）。        如果（addNew）{            snake.unshift（game.add.sprite（oldLastCellx，oldLastCelly，'snake'））;            addNew = false ;        }        //检查苹果是否碰撞。        这个 .appleCollision（）;        //检查是否与自身冲突。参数是蛇的头。        这个 .selfCollision（firstCell）;        //检查是否与墙壁碰撞。参数是蛇的头。        这个 .wallCollision（firstCell）;    }}，appleCollision：函数（） {    //检查蛇的任何部分是否与苹果重叠。    //如果苹果在蛇的内部产卵，则需要这样做。    for（var i = 0 ; i <snake.length; i ++）{         if（snake [i] .x == apple.x && snake [i] .y == apple.y）{            //下次蛇移动时，将在其长度上添加一个新块。            addNew = true ;            //销毁旧苹果。            apple.destroy（）;            //制作一个新的。            这个 .generateApple（）;            //增加分数。            分数++;            //刷新记分板。            scoreTextValue.text = score.toString（）;        }    }}，selfCollision：函数（头） {    //检查蛇的头部是否与蛇的任何部分重叠。    for（var i = 0 ; i <snake.length- 1 ; i ++）{         if（head.x == snake [i] .x && head.y == snake [i] .y）{            //如果是这样，请通过屏幕进入游戏。            game.state.start（'Game_Over'）;        }    }}，wallCollision：函数（头） {    //检查蛇的头部是否在游戏区域的边界内。    如果（head.x> = 600 || head.x < 0 || head.y> = 450 || head.y < 0）{        //如果不在，我们碰到了墙。通过屏幕转到游戏。        game.state.start（'Game_Over'）;    }}

game.state。添加（'Game_Over'，Game_Over）;

var Game_Over = {    预载：功能（） {         //加载此游戏屏幕所需的图像。        game.load.image（'gameover'，'./assets/images/gameover.png'）;    }，    创建：功能（） {        //创建按钮以像在菜单中一样开始游戏。        此 .add.button（0，0，'GAMEOVER' ，这 .startGame，此）;        //添加有关上一场比赛得分信息的文本。        game.add.text（235，350，“LAST SCORE”，{ 字体：“粗体16px的无衬线”，填充：“＃46c0f9” ，对齐：“中心” }）;        game.add.text（350，348，score.toString（），{ 字体：“粗体20像素无衬线”，填充：“#FFF” ，对齐：“中心” }）;    }，    startGame：函数（） {        //将状态更改回游戏。        这个 .state.start（'Game'）;    }};