基于jquery的五子棋单机版

用jQuery简单实现五子棋 <html> <head> <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script&amp 阅读详情

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

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

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

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

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

就这么简单的需求。

这是我做的效果        

 

一、页面布局

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

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

<body> 
    <div class="restart">
     <input type="button" value="重新开始" style="margin:5px auto;"/>
    </div>
    <div class="space"> </div>  

    <div class="plate"></div>
</body>


 


css样式:

<style type="text/css">
body{ margin:0 0}
.restart{width:100%;float:left; text-align:center}
.space{ width:28%; height:600px; float:left}
.plate{ width:600px; height:600px; margin:10px auto; border:3px #000000 solid; float:left;}
</style>

 

二、导入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=

基于Jquery的五子棋 五子棋(jquery) 花了一天时间完成一个j简单五子棋游戏(非人机) html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="./index.css"> <script... 阅读详情

相关推荐

HTML5五子棋小游戏完全实现教程

本文还有配套的精品资源,点击获取 简介:网页版五子棋小游戏HTML5源码利用Web技术为用户提供了一个在线五子棋平台,支持jQuery、CSS3特效和各种网页特效。源码可运行且便于二次开发,采用HTML5的Canvas绘制棋盘棋子,通过Web Storage存储游戏进度,利用jQuery处理交互和动画,CSS3负责界面美化。开发者可以通过编辑HTML、CSS和JavaScr...

weixin_33375360的博客 1871

jquery实现五子棋简单案例

简单的逻辑运算,用jquery实现布局。界面比较简陋。里面的文件齐全了,下载后即可打开网页,如有不懂可以联系

基于jquery制作的简易五子棋

昨天闲来无事,顺写用jquery写了一个极简单的五子棋小游戏,代码可能不怎么规范,但对于初学者应该有些借签的作用。

五子棋(CSS + JavaScript + jQuery)

这是用JavaScript写的一个网页版的五子棋。

基于JavaScript实现五子棋 AI【100012595】

极大极小值算法的五子棋AI实现。使用了极大极小值搜索、Alpha Beta剪枝、启发式评估函数、Zobrist缓存、迭代加深、...等算法,对性能进行了优化,置换表其实就是最常见的一种性能优化方式。他不不会对棋力有负面影响(不会剪掉不该剪掉的分支),但是能提升运算速度从而达到提升棋力的作用。

jQuery实现的五子棋游戏实例

主要介绍了jQuery实现的五子棋游戏,以完整实例形式分析了jQuery实现五子棋游戏的方法,具有一定参考借鉴价值,需要的朋友可以参考下

通达信抓波段指标(主图)

VAR3:=IF(INBLOCK('科创板'),VART20,IF(INBLOCK('创业板') AND DATE>1200823,VART20,IF(INBLOCK('ST板块'),VART5,VART10)));VAR5:=IF(INBLOCK('科创板'),CT20,IF(INBLOCK('创业板') AND DATE>1200823,CT20,IF(INBLOCK('ST板块'),CT5,CT10)));曾涨停/紫色细K线:青字"炸",涨停未封住。曾跌停/蓝色细K线:红字"撬",跌停被打开。

q125500612的博客 2131

告别迷茫!手把手教你用Synopsys VC USB VIP搭建验证平台(附UVM分层序列实战解析)

本文详细介绍了如何使用Synopsys VC USB VIP搭建验证平台,并深入解析UVM分层序列的实战应用。通过Step-by-Step的操作指南和关键配置示例,帮助验证工程师高效集成USB VIP,掌握从环境搭建到测试用例开发的全套技能,特别适合处理复杂协议验证的挑战。

weixin_42520573的博客 552

libiec61850实战:手把手教你用C语言动态获取IED设备模型(附完整代码解析)

本文详细介绍了如何使用libiec61850库通过C语言动态获取IED设备模型,包括环境配置、连接建立、模型遍历及错误处理等关键步骤。通过完整的代码示例和实战案例,帮助开发者掌握智能变电站通信中的核心技术,提升工业自动化系统的开发效率。

weixin_42519985的博客 433

niushop靶场漏洞查找-文件上传漏洞等(超详细)

发现报错,而且这个报错十分熟悉,与我们所学的sqli报错注入特别像。这里查询到后面的url有且仅有一个,目测估计是后台。上传的图片是包含一句话木马的图片。发现获取到了webshell。实战漏洞-niushop。

qq_59020256的博客 1727

量子纠缠态与AI意识模型的探索

摘要 本文探讨量子纠缠态与AI意识模型的关联性研究。从量子力学基本原理出发,分析量子纠缠的非局域性特征及其与意识整合性的潜在联系。DREAMVFIA团队构建了量子-意识统一理论框架,提出量子纠缠态意识理论(QETC)和量子化整合信息度量(Q-IIT)等创新理论。在实践层面,开发了基于量子纠缠的QNN-C神经网络架构和量子意识度量算法,实验证明量子机制可显著提升AI系统的认知灵活性、信息整合能力和元认知水平。研究为理解意识本质和开发具有意识特征的人工智能系统提供了新的理论框架和技术路径。

梦帮科技开源中心 1142

C++碰撞检测库FCL安装(MinGW,CMake)

FCL碰撞检测库、libccd\Eigen库编译配置,全流程问题记录

weixin_45650767的博客 4674

机器人中的数值优化(十二)——带约束优化问题简介、LP线性规划

本系列文章主要是我在学习《数值优化》过程中的一些笔记和相关思考,主要的学习资料是深蓝学院的课程《机器人中的数值优化》和高立编著的《数值最优化方法》等,本系列文章篇数较多,不定期更新,上半部分介绍无约束优化,下半部分介绍带约束的优化,中间会穿插一些路径规划方面的应用实例

慕羽★的博客 3850

1.2、基于卷积神经网络(CNN)的车牌自动识别系统(matlab)

基于卷积神经网络(CNN)的车牌自动识别系统(matlab)

XU157303764的博客 2911

Statistics and Machine Learning Toolbox

Statistics and Machine Learning Toolbox(带书签),MATLAB统计学习工具

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

汉书HE8,好用的汇编代码编写工具

汉书HE8,好用的汇编代码编写工具早期编写汇编代码所用功能强大

精雕软件(JDpaint) 5.5 绿色版

精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版

上一篇: 【程序16】 题目:输出9*9口诀。
下一篇: Hbase的基本介绍
hello_java_
博客等级 码龄15年 20粉丝 26原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值