蝙蝠岛资源网 Design By www.hbtsch.com
本文实例为大家分享了js实现双人五子棋小游戏的具体代码,供大家参考,具体内容如下
这是自己自学js的时候,在网上找的js源码,由于是自学,花了数小时才把这个源码大致弄明白。
大致算法 自定义棋盘规格,直接在棋盘建新div就可以,长度宽度用计算就可以了。下棋,在div里再建class,这里要给每个class标一个site值,由site值写出该棋子竖直方向和横向的坐标,由坐标可以写出棋子胜利的条件。而棋子的黑白走是用标识符,偶的标识符则是白棋子的class。奇的标识符则是黑棋子的class。
ps 我遇到的一些问题在代码中有注释
<!DOCTYPE html> <html> <head> <title>五子棋</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/> <style> /* 简单初始化 */ html,body,section,div,p{ padding: 0; margin: 0; font-size: 12px; } body{ width: 100%; height: 100%; position: fixed; } /* 棋盘 */ #chessboard{ width: 90vmin; min-height: 89vmin; margin: calc(50vh - 46vmin + 2px) auto; background: #f5ca69; border: 2px solid #000; border-radius: 7px; -webkit-box-shadow: .1rem .1rem .05rem rgba(0,0,0,.5), -.1rem -.1rem .05rem rgba(0,0,0,.5) ; box-shadow: .1rem .1rem .05rem rgba(0,0,0,.5), -.1rem -.1rem .05rem rgba(0,0,0,.5) ; } /* after伪元素,载入chessboard后发生 */ #chessboard::after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } #chessboard div{ width: calc(9vmin - 2px); height: calc(9vmin - 2px); float: left; border: 1px solid #000; border-radius: 5px; } #chessboard div p{ width: 97%; height: 97%; margin: 1.5% auto; border-radius: 100%; } /* 白棋子 */ .white{ background: -webkit-radial-gradient(at 35% 35%,#FFF,#CCC,#FFF); background: -o-radial-gradient(at 35% 35%,#FFF,#CCC,#FFF); background: -moz-radial-gradient(at 35% 35%,#FFF,#CCC,#FFF); background: radial-gradient(at 35% 35%,#FFF,#CCC,#FFF); box-shadow: .1rem .1rem .05rem rgba(0,0,0,.5); } /* 黑棋子 */ .black{ background: -webkit-radial-gradient(at 30% 30%,#999 -13%,#000 35%,#999 200%); background: -o-radial-gradient(at 30% 30%,#999 -13%,#000 35%,#999 200%); background: -moz-radial-gradient(at 30% 30%,#999 -13%,#000 35%,#999 200%); background: radial-gradient(at 30% 30%,#999 -13%,#000 35%,#999 200%); box-shadow: .1rem .1rem .05rem rgba(0,0,0,.5); } #mask{ width: 100%; height: 100vh; position: fixed; top: 0; left: 0; background-color: rgba(0,0,0,.7); } .conBox{ display: block; width: 300px; height: 200px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; background-color: #fff; border-radius: 3px; box-shadow: .1rem .1rem .05rem rgba(0,0,0,.5); } .conBox h1{ width: 100%; float: left; margin: 0; line-height: 45px; text-align: center; } .conBox p{ display: block; width: 40px; height: 40px; float: left; margin-top: 40px; font-size: 32px; text-align: center; line-height: 40px; cursor: pointer; } .conBox p:nth-child(2){ margin-left: 60px; } .conBox p:nth-child(3){ width: 100px; font-size: 20px; cursor: initial; } .conBox button{ width: 80px; float: left; margin-top: 30px; margin-left: 110px; color: #fff; font-size: 14px; text-align: center; line-height: 28px; background-color: #f60; border: none; outline: none; } .clear::after{ content: ""; display: block; height: 0; clear: both; visibility: hidden; } .border, .borderTop, .borderBot { position: relative; } .border:after{ content: " "; width: 200%; height: 200%; position: absolute; top: 0; left: 0; border: 1px solid rgba(0, 0, 0, 0.2); -webkit-transform: scale(0.5); transform: scale(0.5); -webkit-transform-origin: 0 0; transform-origin: 0 0; box-sizing: border-box; } .borderBot:after{ content: " "; position: absolute; left: 0; bottom: 0; right: 0; height: 1px; border-bottom: 1px solid rgba(0, 0, 0, 0.2); -webkit-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); } .borderTop:before{ content: " "; position: absolute; left: 0; top: 0; right: 0; height: 1px; border-top: 1px solid rgba(0, 0, 0, 0.2); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); } </style> <script> // onload为浏览器对象中的事件,页面载入时触发 window.function(){ var grid; var chessArr = []; var timer = 0; var lineNum = parseInt(gridNum.innerHTML); // 获取元素 var box = document.getElementById('chessboard'); var chessBox = box.getElementsByTagName('div'); var submitBtn = document.getElementById('submitBtn'); // 减去规格 subBtn.onclick = function(){ if ( lineNum > 8 ) { lineNum--; } // innerHTML为gridNum的全元素 gridNum.innerHTML = lineNum; } // 加上规格 addBtn.onclick = function(){ if ( lineNum < 14 ) { lineNum++; } gridNum.innerHTML = lineNum; } //棋盘初始化 submitBtn.onclick = function(){ var chessMaxNum = lineNum * lineNum; var chessWH = 90/lineNum; for (var i = 0; i < chessMaxNum; i++) { // 设置棋盘里小格子div元素 grid = document.createElement('div'); grid.style.width = 'calc(' + chessWH + 'vmin - 2px)'; grid.style.height = 'calc(' + chessWH + 'vmin - 2px)'; grid.id=i; box.appendChild(grid); chessArr[i] = 0; grid.onclick = function(x){ // target 事件属性可返回事件的目标节点(触发该事件的节点),如生成事件的元素、文档或窗口。 var index = x.target.id||x.target.parentNode.id; return playChess(index); }; }; mask.style.display = 'none'; } //棋子对象 function Chess(){ this.color = 'white'; this.site = 0; // 创建一个class this.chessDom = function(){ // 创造新节点 var dom = document.createElement('p'); // 将这个名字给class dom.setAttribute('class',this.color); return dom; } this.ligature = function(arr){ // map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。 //是就返回这个site // 给白棋一个标识号,方便在下列judge中判断 var whiteChess = arr.map(function(s){ // parseInt() 函数可解析一个字符串,并返回一个整数。 return (s.color == 'white')"chessboard" class="clear"> </section> <section id="mask"> <aside class="conBox"> <h1 class="borderBot">小依,选择棋盘规格哇。</h1> <p id="subBtn" class="border">-</p> <p id="gridNum" value="10" class="borderTop borderBot">10</p> <p id="addBtn" class="border">+</p> <button id="submitBtn">确认</button> </aside> </section> <div style="text-align:center;"> </div> </body> </html>
更多有趣的经典小游戏实现专题,分享给大家:
C++经典小游戏汇总
python经典小游戏汇总
python俄罗斯方块游戏集合
JavaScript经典游戏 玩不停
javascript经典小游戏汇总
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
蝙蝠岛资源网 Design By www.hbtsch.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
蝙蝠岛资源网 Design By www.hbtsch.com
暂无js实现双人五子棋小游戏的评论...
更新日志
2024年12月23日
2024年12月23日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]