web前端之五子棋网页版小游戏

最新推荐文章于 2024-05-13 16:07:00 发布
最新推荐文章于 2024-05-13 16:07:00 发布
阅读量8.6k 收藏 62
点赞数 8
分类专栏： 前端 文章标签： javascript jquery css3 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/FemaleHacker/article/details/107145133
版权

五子棋小游戏

这个五子棋小游戏，没有写成人机模式。

但大家可以尝试下自己饰演两个角色的五子棋，嘻嘻嘻

效果图片

在这里插入图片描述
在这里插入图片描述

效果

在这里插入图片描述
在这里插入图片描述

代码

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>简易五子棋游戏</title>
  <link rel="stylesheet" href="css/main.css">
  <script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<h1>简易版五子棋小游戏</h1>
<h6>说明：体验下自己饰演两个角色的五子棋吧，嘻嘻。</h6>

<!--canvas是个画布，需要修改的是尺寸，不是修改样式-->
  <canvas id="canvas" width="450" height="450"></canvas>
  <div class="mol-main">
    <div class="mol-header">
      <h2>五子棋小游戏</h2>
    </div>
    <div class="mol-success white">
      白棋获胜
    </div>
    <div class="mol-success black">
      黑棋获胜
    </div>
    <br>
    <div>
      <button class="btn">关闭</button>
    </div>
  </div>
</body>
<script type="text/javascript" src="js/main.js"></script>
<script>
  $('.btn').click(function () {
    $('.mol-main').css('display','none');

  });
</script>
</html>

main.css

body{
    margin:0;
    background: #ccc;
}
h1{
    text-align: center;
}

h6{
    text-align: center;
    color: darkslategray;
}

/*------------棋盘-------------------------*/
#canvas{
    display: block;
    margin: 20px auto;

    background:#fff;
}
.mol-main{
    width:180px;
    height: 160px;
    margin: 0 auto;
    padding: 10px;

    background:#eee;
    border-radius: 10px;
    opacity: 0.9;

    position: absolute;
    top:25%;
    left: 40%;

    display: none;
}
.mol-header h2{
    text-align: left;
    font-weight: bold;
}
.mol-success{
    color: firebrick;
    font-weight: bold;
}

.white{
    display: none;
}
.black{
    display: none;
}

.btn{
    cursor: pointer;
    width: 70px;
    height: 30px;
    border-radius: 5px;
    text-align: center;
    font-weight: bold;;
    background: cadetblue;
    color: #000;
}
.btn:hover{
    background: lightseagreen;
    color: #fff;
}

main,js

/*
*1、绘制棋盘
    *1.1绘制棋盘中直线
* 2、绘制棋子
    *2.1绘制棋子
    * 2.2实现交互,点击下棋
    * 2.3黑白子棋交替操作
    * 2.4棋子落在棋盘交叉点上
    * 2.5设置已下棋处不得再进行操作
* 3、游戏胜负判断
    *当前所下的棋子参与到胜负判断中，此时下棋的人要么赢，要么不赢（输/继续进行）
    * 此时所下棋子的位置应当作为判断点
    * 一条线上左右颜色连续累加超过5，那么这个颜色就获胜
 */
//----------------------------------------------------

//获取到html的canvas标签
var canvas=document.querySelector('#canvas');
//获取绘制环境
var ctx =canvas.getContext('2d');

//创建棋子颜色数组
var chessColor=['#000','#fff'];

//棋盘数组
var maparr=[];

//判断哪方赢
var mode=[
    [1,0],//水平方向
    [0,1],//垂直方向
    [1,1],//右下 左上
    [1,-1]//右上 左下
];

//----------------------------------
//将棋盘上所有交叉点创建全为0的数组
//如果当数组为1时，说明已经有棋子了
for(var i=0;i<14;i++){
    maparr[i]=[];
    for(var j=0;j<14;j++){
        maparr[i][j]=0;
    }
}


//---设置游戏进行的步数-----为了实现黑白棋子交替进行操作--
var step=0;
/*----------绘制棋盘中直线--------------
*描述绘制路径
* 开始绘制
*/
function init() {
    //----------绘制15条垂直和水平直线---------------------
    for(var i=1;i<15;i++){
        //----绘制15条垂直直线------
        //在格子（30，30）处开始画线
        ctx.moveTo(30*i,30);
        //线画到（30，420）的位置
        ctx.lineTo(30*i,420);

        //----绘制15条水平直线-----
        //在格子（30，30）处开始画线
        ctx.moveTo(30,30*i);
        //线画到（420,30）的位置
        ctx.lineTo(420,30*i);
    }
    //-----开始绘制线--------------
    ctx.stroke();
}

init();

//--------绘制棋子---------------------
function drawChess(x,y,color){
    //修改填充颜色
    ctx.fillStyle=color;
    //画圆---圆心坐标轴（x,y）--半径15--起始点角度0--终点角度为2派---
    ctx.beginPath();
    ctx.arc(x,y,15,0,Math.PI*2,false);

    //ctx.fill()填充
    ctx.fill();
    ctx.stroke();
}


//-----下棋----并使棋子都在起哦安交叉线上-----------------------------
canvas.addEventListener('click',function(e){
    // console.log('点击棋盘');


    //--------------------------------------

    //e.offsetX和offsetY可以获取到点击时的坐标
    // console.log(e.offsetX,e.offsetY);

//--------实现所有棋子都在棋盘的交叉线上---------
    //math.floor()向下取整
    //+15---点下去的位置向右偏移15-----
    //----即使得在一个小正方形象限内位置任意点棋子都在那个交叉点出
    var dx =Math.floor((e.offsetX+15)/30)*30;
    var dy =Math.floor((e.offsetY+15)/30)*30;

    //点击落下棋子
    if(dx == 0 || dy == 0 || dx == 450 || dy == 450){
        return false;
    }

    //避免已有棋子的点再下一次
    if(maparr[dx/30-1][dy/30-1]==0){
        drawChess(dx,dy,chessColor[step%2]);
        maparr[dx/30-1][dy/30-1]=chessColor[step%2];

        checkSuccess(dx/30-1,dy/30-1,chessColor[step%2],mode[0]);
        checkSuccess(dx/30-1,dy/30-1,chessColor[step%2],mode[1]);
        checkSuccess(dx/30-1,dy/30-1,chessColor[step%2],mode[2]);
        checkSuccess(dx/30-1,dy/30-1,chessColor[step%2],mode[3]);

        step++;
    }
});

//-----------判断哪方赢------要么黑赢要么白赢--------------------
// var mode=[
//     [1,0],//水平方向
//     [0,1],//垂直方向
//     [1,1],//右下 左上
//     [1,-1]//右上 左下
// ];

//------根据mode数组检测不用方向-------------
function checkSuccess(x,y,color,mode) {
    // console.log(x,y,color);
    var count=0;
    for(var i=1;i<5;i++){
        if(maparr[x+i]*mode[0]){
            if(maparr[x+i*mode[0]][y+i*mode[1]]==color){
                count++;
            }else{
                break;
            }
        }
    }
    for(var i=1;i<5;i++){
        if(maparr[x-i]){
            if(maparr[x-i*mode[0]][y-i*mode[1]]==color){
                count++;
            }else{
                break;
            }
        }
    }
    // console.log('水平方向有',count+1,'个',color);
    if(count>=4){
        if(color=='#000'){
            //显示黑棋获胜框
            $('.mol-main').css('display','block');
            $('.black').css('display','block');

            // alert('黑棋获胜');
        }else{
            //显示白棋获胜框
            $('.mol-main').css('display','block');
            $('.white').css('display','block');

            // alert('白棋获胜');
        }
    }
}

引用

b站教程

Zella Zhang
关注
  • 8
    点赞
  • 踩
  • 62
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
H5双人五子棋小游戏
qq_24892029的博客
03-04 196
双人五子棋、H5小游戏源码、web小游戏
【前端素材】小游戏-五子棋游戏.zip
04-04
【技术分析】 HTML，是一种制作万维网页面的标准语言，它消除了不同计算机之间信息交流的障碍； CSS，可以帮助把网页外观做得更加美观； JavaScript，是一种轻量级的解释型编程语言； jQuery，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互； Bootstrap 是快速开发 Web 应用程序的前端工具包。它是一个 CSS，HTML 和 JS 的集合，它使用了最新的浏览器技术，给你的 Web 开发提供了时尚的版式； AJAX，创建交互式网页应用的网页开发技术。 前端游戏设计是游戏开发中至关重要的一部分，它涉及到游戏的外观、交互和用户体验等方面。以下是一些前端游戏设计的思路和关键点： 用户体验：确保游戏界面简洁直观，易于操作。考虑用户的需求和习惯，设计友好的用户界面，包括按钮、菜单、指引等，以提升用户体验。 视觉设计：选择合适的配色方案、图标和界面元素，保持视觉风格一致性。优秀的视觉设计可以提升游戏的吸引力和品质感。 动画效果：运用动画效果增强游戏的交互性和趣味性。动画可以使游戏更生动，提升用户参与感。 响应式设计：确保游戏在不同设备上都能正常展示和运行，包括PC、平板和手机等。响应式设计可以提高游戏的可访问性和用户覆盖范围。
五子棋对战（网页版）
最新发布
weixin_44985964的博客
05-13 1136
首先需要在数据库中创建一个新的表, 用来表示每个玩家的游戏房间编号，服务器把每一局对局, 玩家轮流落子的位置都记录下来(比如保存到一个文本文件中)，然后玩家可以选定某个曾经的比赛, 在页面上回放出对局的过程.在游戏大厅除了显示匹配按钮之外, 还能显示当前所有的对局房间，玩家可以选中某个房间, 以观众的形式加入到房间中. 同时能实时的看到选手的对局情况.在处理落子响应中要处理胜负手.在 Matcher 的构造方法中, 创建一个线程, 使用该线程扫描每个队列, 把每个队列的头两个元素取出来, 匹配到一组中.
【项目设计】网页版五子棋游戏
在平淡的日子里寻找存在的价值
11-18 1478
一个网页版的在线五子棋对战游戏，主要支持用户数据管理、匹配对战功能与实时聊天功能。
2024年Web前端最全html五子棋游戏（附源码），终于有人把前端程序员必学知识点全整理出来了
2401_84435942的博客
05-04 742
面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】return;if(!me){return;// 悔棋功能可用_nowi = i;_nowj = j;//我，已占位置k < count;k++){ // 将可能赢的情况都加1myWin[k]++;//这个位置对方不可能赢了// window.alert(‘你赢了’);
web前端项目-五子棋【附源码】
qiao_yue的博客
01-27 1120
本项目【五子棋】是一款人机对弈的策略型棋类游戏。可以选择落子方；游戏难度和是否显示落子次序。游戏双方分别使用黑白两色的棋子，在棋盘直线与横线的交叉点上进行对弈。五子棋可以促进大脑发育、提高思维能力和判断力，培养人的耐性。
网页五子棋对战
CSDN_drh的博客
06-10 971
实现一个小项目，进行网页五子棋对战(SSM + WebSocket)
前端五子棋第一版
Rookie
02-14 1006
之前用后端语言实现了一个控制台应用的简化五子棋游戏，效果总是不太好，不能用鼠标操作是硬伤，今儿我们就用最基础的前端语言来实现一个五子棋游戏。先看看实现后的页面效果： 看到页面显示不难分析出： 浏览器页面只有中间一块棋盘区域，很简单，也很单调。但是这个棋盘的绘制很难用一般的前端技术实现，所以这里我使用专门的canvas标签进行操作 给出html与css代码： <!DOCTYPE html&g...
网页五子棋对战——SSM框架
zhaozhuyue的博客
07-08 1241
用户的注册和登录管理用户的天梯分数、比赛场数、获胜场数等信息依据用户的天梯积分，实现匹配机制把两个匹配到的玩家放到一个游戏房间中，双方通过网页的形式来进行对战比赛用到的关键技术点：我们之前学习过的服务器开发，主要是这样的模型：客户端主动向服务器发起请求，服务器收到之后，返回一个响应。如果客户端不主动发起请求，服务器是不能主动联系客户端的我们是否需要，服务器主动给客户端发消息这样的场景呢？需要！！“消息推送”当前已有的知识，主要是HTTP.HTTP自身难以实现这种消息推送效果的。
[教你做小游戏] 用86行代码写一个联机五子棋WebSocket后端
Hull Qin
08-26 5440
如何做一个联机对战的五子棋？这需要个后端服务，我手把手带你编写一下联机五子棋的WebSocket后端代码，只需要86行代码噢。快来学！
五子棋微信网页小游戏源代码
06-02
【五子棋微信网页小游戏源代码】是一款专为手机微信平台设计的HTML5小游戏，它提供了丰富的游戏体验，用户可以直接在微信内置的浏览器中进行游玩，无需下载安装额外的应用程序。这款源代码对于想要学习微信小游戏...
web前端游戏项目-“五子棋”小游戏.zip
12-12
本资源应用HTML，CSS，JavaScript和jQuery库实现一款简单的“五子棋”人机对弈小游戏。该游戏的初始界面包括一个五子棋的棋盘和一个“开始”按钮，五子棋的棋盘是由15条横线和15条竖线垂直交叉而成的。在棋盘上，横...
html-五子棋小游戏-源码
09-07
【HTML五子棋小游戏】是一种基于纯Web技术开发的在线娱乐项目，主要利用HTML、JavaScript（简称JS）以及HTML5的一些特性实现。这个小游戏无需安装任何客户端，只需将压缩包解压后在浏览器中打开，就能立即体验到...
网页版五子棋小游戏HTML5源码.zip
10-15
网页版五子棋小游戏HTML5源码是一款基于Web技术实现的互动娱乐项目，它结合了jQuery特效、CSS特效以及各种网页特效，为用户提供了一个在浏览器上玩五子棋的平台。这款源码不仅可以直接运行，还支持二次开发，方便...
小猿圈前端编写JS五子棋游戏
weixin_34262482的博客
05-07 125
前段时间发的飞机大战的游戏很多小伙伴都私聊让再做个游戏，今天小猿圈web前端讲师为大家分享的是JS五子棋的游戏，想玩的小伙伴记得自己运行一下呦。JS五子棋游戏代码：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>五子棋</...
web前端之城市级联
FemaleHacker的博客
06-27 5865
城市级联 最近看了篇不错的博客，效果实现的也不错，但存在细小问题，所以就原作者博客代码基础上进行了细微修改。 说明 原博主代码实现了选择省份,自动对应出地市. 选择地市可自动对应出区县。 但存在的细小问题在于，自动对应出城市后，县区无法选择。 例如省：北京市，则市会自动对应市辖区，但此时区县无法进行选择。 主要是在每一个列表内添加了一行下段代码： {name:'请选择市',areaList:['请选择区']}, 原博主代码实现展示 效果图 未点击时： 点击“请选择省”： 选择完省份后： 选择完城市
web前端之贪吃蛇网页版小游戏
FemaleHacker的博客
07-04 2254
贪吃蛇游戏 一直喜欢玩贪吃蛇，又想联系前端，感觉用js写网页版小游戏还蛮好的。 因此就去万能的b站找了个视频，就学着写了贪吃蛇的小游戏，自己玩起来感觉还算ok。 效果图片 效果 开始暂停 刷新随机产生食物位置 撞墙 代码实现 index.html <!Doctype html> <html lang="en"> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <head&g
web前端之表单验证（一）
FemaleHacker的博客
06-26 2236
表单验证 效果图 图片: 带尺寸的图片: 居中的图片: 居中并且带尺寸的图片: 当然，我们为了让用户更加便捷，我们增加了图片拖拽功能。 如何插入一段漂亮的代码片 去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片. // An highlighted block var foo = 'bar'; 生成一个适合你的列表 项目 项目 项目 项目1 项目2 项目3 计划任务 完成任务 创建一个表格 一个简单的表格是这么创建的： 项目 Value
web前端开发期末作业五子棋
12-27
以下是一个简单的Web前端开发期末作业五子棋的示例： 1. 创建HTML文件，命名为index.html，并在文件中添加基本的HTML结构和样式。 ```html <!DOCTYPE html> <html> <head> <title>五子棋</title> <style> /* 添加样式 */ </style> </head> <body> <h1>五子棋</h1> <div id="board"> <!-- 棋盘 --> </div> <script src="main.js"></script> </body> </html> ``` 2. 创建CSS文件，命名为style.css，并在文件中添加样式。 ```css /* 添加样式 */ ``` 3. 创建JavaScript文件，命名为main.js，并在文件中编写JavaScript代码来实现五子棋的逻辑。 ```javascript // 添加JavaScript代码 ``` 4. 在index.html文件中引入style.css和main.js文件。 ```html <!DOCTYPE html> <html> <head> <title>五子棋</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>五子棋</h1> <div id="board"> <!-- 棋盘 --> </div> <script src="main.js"></script> </body> </html> ``` 5. 在main.js文件中编写JavaScript代码来实现五子棋的逻辑。 ```javascript // 获取棋盘元素 var board = document.getElementById("board"); // 创建棋盘格子 for (var i = 0; i < 15; i++) { for (var j = 0; j < 15; j++) { var cell = document.createElement("div"); cell.className = "cell"; board.appendChild(cell); } } ``` 这样就创建了一个简单的五子棋棋盘。你可以根据需要进一步完善游戏逻辑和样式。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值