基于jquery的五子棋单机版

本人只是前台的新手，看到一个五子棋的游戏，突然想能不能用前台的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="unit" row="'+i+'" column="'+j+'"></div>');
$('.plate').append(unit);
}
}
unit_click();
unit_hover();
});

css样式：

.unit{ width:34px; height:34px; border:1px #000000 dotted; background:#FFFFFF; float:left; margin:2px;}.unit:hover{ cursor: pointer;}

js：

//绑定的hover和click事件

function unit_hover(){
$('.unit').hover(

//鼠标移入效果，如果是没有颜色的就显示相应颜色
  function(){
   if($(this).attr("clicked") != "true"){
    if(person == true){
     $(this).css("background-color","blue");
    }else{
     $(this).css("background-color","red");
    }
   }
  },function(){ //鼠标移出事件
   if($(this).attr("clicked") != "true"){
    $(this).css("background-color","white");
   }
  }
);
}

function unit_click(){
$('.unit').click(function(){

//点击之后添加根据相应的person添加颜色
  if($(this).attr("clicked") != "true"){
   $(this).attr("clicked","true");
   if(person == true){
    person = false;
    $(this).css("background-color","blue");
   } else{
    person = true;
    $(this).css("background-color","red");
   }
   var curColor = $(this).css("background-color");

然后每走一步去判断是不是有胜利的玩家。传入相应的行列数和最后一个子的颜色
if(judge($(this).attr("row"),$(this).attr("column"),curColor)){

//如果有人胜出，
    $('.unit').unbind("click");
    $('.unit').unbind("hover");
    if(curColor == "rgb(255, 0, 0)")
    alert("红棋胜利");
    else alert("蓝棋胜利");
       }
  }
});
}
三、实现获取判断是否有赢玩家的算法

思路是：整体分为四组循环，横，竖，45°，-45度。以横向为例子讲解，根据传入的坐标，获取右边第一个div，检查是否和最后一个下的子的颜色一样。如果一样计数器count 加一，再判断右边第二个子，一直到最后一个子的右边4个子都和它一样颜色。或者是遇到颜色不一样的子，就停止向右检查，改为向左判断，count计数并不清零，如果一样那么count加一，同理最多判断到左边第四个，如果count等于4 说明横向出现了5个子相连，那么有人胜出。如果count小于4.那么count清零。进行竖，斜的判断。

四、增加重新开始的功能。

现在所有功能基本上完成了。重新开始需要把所有格子属性去除，然后重新绑定click和hover事件

在载入函数中加入：

$("input").click(function(){
  $(".unit").removeAttr("clicked");
  $(".unit").css("background-color","white");
  unit_click();
  unit_hover();
  person = true;
});

这样一个简单的五子棋游戏就完成了，比较适合新手练习jquery。算法思路也有由一个同学提供的。如果大家有更好的算法，欢迎留言。

ps：用代码那个模式编辑了几次。都是很多不是代码的文字也写入代码中去了。请问代码要选成什么变成语言？

基于jquery的五子棋单机版相关推荐

基于flask的五子棋小游戏
基于flask的五子棋小游戏前言首先说明一下,本人方向是java后端,只因老师布置了一个作业,要用flask来做一个五子棋,没办法被逼上梁山,程序不太美观,但是应付作业还是够了的. 废话不 ...
基于jQuery垂直多级导航菜单代码
基于jQuery垂直多级导航菜单代码是一款黑色风格的jQuery竖直导航菜单特效下载.效果图如下: 在线预览源码下载实现的代码. html代码: <ul class="ce& ...
使用 Sticky-Kit 实现基于 jQuery 的元素固定效果
元素固定效果在网页中应用得很多,比较常见的使用场景有改进导航,显示广告.Sticky-Kit 是一个非常方便的 jQuery 插件,简化了创建/管理粘元素,有复杂的使用功能.这些功能包括:处理多个固定 ...
基于jQuery图片自适应排列显示代码
基于jQuery图片自适应排列显示代码.这是一款基于jquery.flex-images插件实现的类似谷歌图片流效果.效果图如下: 在线预览源码下载实现的代码. html代码: <di ...
一款基于jquery和css3的响应式二级导航菜单
今天给大家分享一款基于jquery和css3的响应式二级导航菜单,这款导航是传统的基于顶部,鼠标经过的时候显示二级导航,还采用了当前流行的响应式设计.效果图如下: 在线预览源码下载实现的代码. ...
基于Jquery插件Uploadify实现实时显示进度条上传图片
网址:http://www.jb51.net/article/83811.htm 这篇文章主要介绍了基于Jquery插件Uploadify实现实时显示进度条上传图片的相关资料,感兴趣的小伙伴们可以参考 ...
转载 - 10个基于jQuery实现的漂亮网站赏析
这10个基于jQuery实现的网站,不仅美观而且设计师也可以从中获得很好的灵感. 1. Google+ Tour 2. NIzo 3. Cultural Solutions 4. Kasteel Wi ...
13款基于jQuery Mobile的布局插件和示例
现在已经进入了移动互联网时代,因此将你的网站迁移到移动设备上就显得比较重要的.问题是,如何在移动设备的小屏幕中呈现你的网站中的所有内容呢? 本文介绍13款基于jQuery Mobile的布局插件和示例 ...
基于jQuery实现富文本的拖拽和修改大小
实现功能实现富文本编辑器在定义区域内可以拖拽和调整其大小,编辑完成后可将内容生成图片. 由于系统较陈旧,所以选择的是基于jQuery的插件实现. 相关插件 wangEditor jQuery UI ...

基于jquery的五子棋单机版

基于jquery的五子棋单机版相关推荐

最新文章

热门文章