在《JavaScript高级编程》这本书中说道一个模块模式，但是这种模式是单例模式，也就是闭包最后返回一个字面量的对象。但是我需要在一个页面中能够同时开启两个贪吃蛇的窗口，两个游戏通过设置配置不同的方向键和按钮操作，实现两个人同时一起玩。所以，在实现SnakeGame组件时，没有采用道格拉斯所说的模块模式。下面演示一下，如何在一个页面中，让两个人同时一起玩游戏。代码如下：
示例4
首先建立一个html文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Jaume's贪吃蛇</title> <link href="https://www.jb51.net/css/gameStyle.css" > </head> <body> <div> <canvas> </canvas> <canvas> </canvas> <div> <div> <h3>游戏控制</h3> <p>方向键：上,下,左,右</p> <p>开始/暂停：空格</p> </div> <div> <h3>游戏状态</h3> <p>当前用户1得分：<span>0</span></p> <p>当前用户2得分：<span>0</span></p> <input type="button" value="开始游戏"/> </div> <div> <h3>游戏记录</h3> <a href="#" >查看历史记录</a> </div> </div> </div> <script src="https://www.jb51.net/js/SnakeGame.js"></script> <script src="https://www.jb51.net/js/UIScript.js"></script> </body> </html>
样式文件如下：
*{ margin:0px; padding:0px; } #gamebd{ /*width:850px;*/ /*margin:50px auto;*/ width:100%; } #gameScense{ background-color:green; float:left; } #gameSet{ margin-left:10px; float:left; } .gameBoxStyle{ margin-bottom:7px; padding:5px 10px; } .gameBoxStyle h3{ margin-bottom:7px; } .gameBoxStyle p{ line-height: 1.7em; } .gameBoxStyle input{ margin-top:7px; background-color: white; border:1px gray solid; padding:3px 9px; margin-right:9px; } .gameBoxStyle input[type=text]{ width:90px; } .gameBoxStyle input:hover{ background-color: #e2fff2; } .gameBoxStyle #txtValue{ color:red; }
在html中拖入了两个文件，一个是贪吃蛇组件，另一个是UIScript.js，其中的代码如下：
/** * Created by tjm on 8/16/2017. */ var btnStart=document.getElementById("btnStart"); var gameSnake = new SnakeGame("gameScense",{ snakeColor:"red", directionKey:[68,83,65,87], pauseKey:81, onCountChange:function(count){ var txtScore=document.getElementById("txtValue"); txtScore.innerText=count.toString( ); txtScore=null; }, onGameOver:function (status) { alert("游戏结束"); } }); var gameSnake1 = new SnakeGame("gameScense1",{ snakeColor:"green", size:20, onCountChange:function(count){ var txtScore=document.getElementById("txtValue1"); txtScore.innerText=count.toString(); txtScore=null; }, onGameOver:function (status) { alert("游戏结束"); } }); btnStart.onclick=function(event){ gameSnake.startGame(); gameSnake1.startGame(); btnStart.blur(); }