【教你做一个小游戏】用177行代码写一个超有经验的五子棋
时间：2023-04-05 16:52:06
HTML5
我是公众号线下派对游戏的作者HullQin（欢迎关注公众号，发送加微信，还有交朋友），转载本文需获得作者HullQin授权。我独立开发了《联机桌游合集》，这是一个网页，在这里你可以轻松地和朋友一起玩网络游戏，五子棋等游戏，不收费，也没有广告。还为GameJam2022开发了《Dice Crush》，喜欢的话可以关注我HullQin哦~有空我会分享制作游戏的相关技术。一、需求说明支持本地双人对战的五子棋游戏。刚刚下的这招，应该是有记号的。应该有个提示：五连珠后，会提示谁赢了。支持重启。适配各种分辨率的屏幕。面对这样一款五子棋游戏的需求，你会怎么做？2.技术选择参考掘金文章《H5小游戏技术选型分析，低代码?小游戏框架?canvas或SVG?还能用React？》，我们使用文章的决策树进行技术选择：我们不需要使用现有的游戏模板。我们不需要资产管理，不涉及物理学。我们不需要动画，我们不需要渲染每一帧。结论：手五子棋。另外，因为需要适应不同的分辨率，所以我们使用SVG来绘制棋盘和棋子而不是画布。3.画出棋盘的背景。为棋盘的背景选择木质棕色。身体{高度：100vh;保证金：0；background:bisque;}15*15行，我们先通过路径画出15条横线和15条竖线，每个格子的宽度设置为10，然后从-70到70绘制。另外，我们还需要适配多种分辨率，参考《2行代码，让你的UI适配移动端、PC端，快来收藏》，就2行代码！5个标记点五子棋棋盘通常有5个标记点，我们通过rect绘制5个黑色矩形。因为可以复用，所以我们使用defs来定义它，这样以后可以通过use复用。使用defs就像封装了一个可重用的标记组件。<使用xlink:href="#mark"/>目前效果如图：4.提示函数为了实现提示功能，我们可以参考编写这个函数antd的Message:
#message{-webkit-box-sizing:border-box;框大小：边框框；保证金：0；填充：0；颜色：rgba(0,0,0,.85);字体大小：14px；字体变体：表格数字；行高：1.5715；列表样式：无；-webkit-font-feature-settings：“tnum”；字体功能设置：“tnum”位置：固定；顶部：8px；左：0；z-指数：1010；宽度：100%；指针事件：无；text-align:center;}#message>div{padding:6px;}#message>div>div{display:inline-block;填充：12px18px；背景：#fff；边界半径：2px；-webkit-box-shadow:03px6px-4pxrgba(0,0,0,.12),06px16px0rgba(0,0,0,.08),09px28px8pxrgba(0,0,0,.05);框阴影：03px6px-4pxrgba(0,0,0,.12),06px16px0rgba(0,0,0,.08),09px28px8pxrgba(0,0,0,.05);指针事件：全部；}constmessageDiv=document.getElementById('message');constMessage=(content)=>{constdiv=document.createElement('div');div.innerHTML=`
${content}
`;messageDiv.appendChild(div);setTimeout(()=>messageDiv.removeChild(div),3000);};调用Message('游戏结束，黑方获胜！')的效果如下：5.绘制棋子封装棋子组件棋子也是组件，这里给出的defs定义定义了2种渐变色，分别是用于填充碎片。棋子是一个简单的圆，半径为4.2，直径为8.4。
绘制新棋子的标记constmark=document.createElementNS("http://www.w3.org/2000/svg",'rect');mark.setAttribute('fill','red');mark.setAttribute('width','2');mark.setAttribute('height','2');标记。setAttribute('不透明度','0');svg.appendChild（标记）；渲染所有未下棋的棋子，设置为透明。一次性提前渲染15*15个棋子。顺便增加了悬停事件：当鼠标进入时，如果当前位置可以下棋，则变为半透明。当鼠标离开时，如果当前位置可以下棋，则变为全透明。顺便添加一个点击事件：如果该位置当前可以下棋，则将棋子变为黑色或白色。下棋后，如果棋局还没有结束，就到了对方下棋的时间了。否则提示gameover。这里需要给出游戏定义：constgame={black:true,//黑棋下棋的时间到了吗？winner:null,//游戏有赢家吗？是“黑色”或“白色”或空}；constsvg=document.getElementById('svg');const件=[];for(letx=0;x<15;x++){pieces.push([]);for(lety=0;y<15;y++){constpiece=document.createElementNS('http://www.w3.org/2000/svg','use');件[x].推（件）；piece.setAttribute('x',(x*10-70).toString());piece.setAttribute('y',(y*10-70).toString());piece.setAttribute('填充不透明度','0');piece.setAttributeNS('http://www.w3.org/1999/xlink','xlink:href','#piece');piece.addEventListener('mouseenter',()=>{if(game.winner||piece.getAttribute('fill-opacity')==='1')return;piece.setAttribute('fill',game.black?'url(#black)':'url(#white)');piece.setAttribute('fill-opacity','0.5');});piece.addEventListener('mouseleave',()=>{if(game.winner||piece.getAttribute('fill-opacity')==='1')返回；piece.setAttribute('填充不透明度','0');});piece.addEventListener('click',()=>{if(game.winner||piece.getAttribute('fill-opacity')==='1')return;piece.setAttribute('fill',game.black?'url(#black)':'url(#white)');piece.setAttribute('fill-opacity','1');dropPiece(x,y);game.black=!game.black;});svg.appendChild（件）；}}下棋函数设置最新棋子的标记；并设置相应位置的棋子为opaqueconstdropPiece=(x,y)=>{mark.setAttribute('x',(x*10-71).toString());mark.setAttribute('y',(y*10-71).toString());mark.setAttribute('不透明度','0.7');game.winner=checkWinner(x,y);if(game.winner){Message(`Gameover,${game.winner==='black'?'Black':'white'}Chesswins!`);}};6。判断你赢不赢，只需要判断最新的棋子有没有五连珠，你就知道赢了没有起来。参考文章《五子棋》如何判断输赢？你能在5分钟内交出代码吗？》，这里不列出代码。7.有一个重启功能的按钮，点击它可以重置游戏数据：所有棋子变为透明。隐藏最新棋子的标记。重置游戏变量。
Restartconstgame={black:true,winner:null,};window.initializeGame=()=>{game.black=true;game.winner=null;mark.setAttribute('不透明度','0');for(letx=0;x<15;x++){for(lety=0;y<15;y++){pieces[x][y].setAttribute('fill-opacity','0');}}};window.initializeGame();9.最后我是公众号线下派对游戏的作者HullQin（欢迎关注公众号，发加微信，交个朋友），转载本文需作者HullQin授权。我独立开发了《联机桌游合集》，这是一个网页，在这里你可以轻松地和朋友一起玩网络游戏，五子棋等游戏，不收费，也没有广告。还为GameJam2022开发了《Dice Crush》，喜欢的话可以关注我HullQin哦~有空我会分享制作游戏的相关技术。
