基于jquery的五子棋单机版

最新推荐文章于 2019-12-21 16:14:28 发布

hello_java_

最新推荐文章于 2019-12-21 16:14:28 发布

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： java学习之路文章标签： jquery 五子棋算法五子棋单机版

本文链接：https://blog.youkuaiyun.com/hello_java_/article/details/8745610

本文介绍了一位前端新手使用jQuery和CSS创建五子棋单机版的过程，包括棋盘布局、棋子绘制、游戏逻辑和重置功能。通过循环和事件绑定实现了棋盘、棋子的交互，并提供了简单的胜利检测算法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本人只是前台的新手，看到一个五子棋的游戏，突然想能不能用前台的css+jQuery做一个呢。虽然是做出来了，可是度娘一下看到有用css3做的。瞬间就感觉虚了。对css3有兴趣的同学的可以看看http://blog.sina.com.cn/s/blog_74d6cedd0100ywhv.html。

废话不多说，下面写一下需求吧

1、有一个棋盘，能下两种颜色的棋子。

2、程序能判定是否有赢家。能重新开局。

3、尽量的美化一下效果。

就这么简单的需求。

这是我做的效果

一、页面布局

首先开始给页面布局，我的想法是最上面有个重新开始的按钮，然后下面就是棋盘。

其中样式为space是用来占位的div，让棋盘能够居中。plate就是棋盘。

css样式：

二、导入jquery包，画出棋子。

棋子用一个div代替，（正常的五子棋是下在相交线上，但是我不知道怎么不用图片做出这个效果。如果有高手知道，求教育。。）有红蓝两种颜色，有hover效果，如果是对应的棋子hover对应的颜色

一般的五子棋都是15 * 15的棋盘。所以用循环画出对应的没有颜色的div。

导包：<script language="javascript" src="js/jquery-1.7.2.min.js"></script>

//定义一个boolean变量来判断是那种颜色咋下棋
var person = true;
$(function(){
//行数
var rows = 15;

//列数
var columns = 15;
for(var i = 0; i < rows; i++){
for(var j = 0; j < columns; j++){
var unit = $('<div class=

200万优质内容无限畅学