首页 / JAVASCRIPT / js实现五子棋代码分享

js实现五子棋代码分享

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了js实现五子棋代码分享，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5090字，纯文字阅读大概需要8分钟。

内容图文

本文主要和大家分享js实现五子棋代码，通过canvas绘制棋盘与棋子，通过js代码实现逻辑。

index.html代码：

<!DOCTYPE html><html><head>
    <meta charset="utf-8">
    <title>五子棋</title>
    <link rel="stylesheet" type="text/css" href="css/style.css"></head><body>
    <canvas id="chess" width="450px" height="450px"></canvas>
    <p id='restart' class="restart">
            <span>重新开始</span>
        </p>
    <script type="text/javascript" src="js/script.js"></script></body></html>

style.css代码：

canvas{    display: block;    margin: 50px auto;    box-shadow: -2px -2px 2px #EFEFEF, 5px 5px 5px #B9B9B9;}.restart{    text-align: center;}.restart>span{    display: inline-block;    padding: 10px 20px;    color: #fff;    background-color: #C92027;    border-radius: 5px;}

script.js代码：

//判断是否结束var over = false;//判断落子方var me = true; //我var chressBord = [];//棋盘for(var i = 0; i < 15; i++){
    chressBord[i] = [];    for(var j = 0; j < 15; j++){
        chressBord[i][j] = 0;
    }
}//赢法的统计数组var myWin = [];var computerWin = [];//赢法数组var wins = [];for(var i = 0; i < 15; i++){
    wins[i] = [];    for(var j = 0; j < 15; j++){
        wins[i][j] = [];
    }
}var count = 0; //赢法总数//横线赢法for(var i = 0; i < 15; i++){    for(var j = 0; j < 11; j++){        for(var k = 0; k < 5; k++){
            wins[i][j+k][count] = true;
        }
        count++;
    }
}//竖线赢法for(var i = 0; i < 15; i++){    for(var j = 0; j < 11; j++){        for(var k = 0; k < 5; k++){
            wins[j+k][i][count] = true;
        }
        count++;
    }
}//正斜线赢法for(var i = 0; i < 11; i++){    for(var j = 0; j < 11; j++){        for(var k = 0; k < 5; k++){
            wins[i+k][j+k][count] = true;
        }
        count++;
    }
}//反斜线赢法for(var i = 0; i < 11; i++){    for(var j = 14; j > 3; j--){        for(var k = 0; k < 5; k++){
            wins[i+k][j-k][count] = true;
        }
        count++;
    }
}for(var i = 0; i < count; i++){
    myWin[i] = 0;
    computerWin[i] = 0;
}//获得canvas对象var chess = document.getElementById("chess");var context = chess.getContext('2d');

context.strokeStyle = '#bfbfbf'; //边框颜色var logo = new Image();
logo.src = 'images/logo.jpg';
logo.onload  = function(){
    context.drawImage(logo,0,0,450,450);
    drawChessBoard();
}

document.getElementById("restart").onclick = function(){
    window.location.reload();
}
chess.onclick = function(e){
    if(over){        return;
    }    if(!me){        return;
    }    var x = e.offsetX;    var y = e.offsetY;    var i = Math.floor(x / 30);    var j = Math.floor(y / 30);    if(chressBord[i][j] == 0){
        oneStep(i,j,me);
        chressBord[i][j] = 1;//我        

        for(var k = 0; k < count; k++){            if(wins[i][j][k]){
                myWin[k]++;
                computerWin[k] = 6;//这个位置对方不可能赢了
                if(myWin[k] == 5){
                    window.alert('你赢了');
                    over = true;
                }
            }
        }        if(!over){
            me = !me;
            computerAI();
        }
    }

}//计算机下棋var computerAI = function (){
    var myScore = [];    var computerScore = [];    var max = 0;    var u = 0, v = 0;    for(var i = 0; i < 15; i++){
        myScore[i] = [];
        computerScore[i] = [];        for(var j = 0; j < 15; j++){
            myScore[i][j] = 0;
            computerScore[i][j] = 0;
        }
    }    for(var i = 0; i < 15; i++){        for(var j = 0; j < 15; j++){            if(chressBord[i][j] == 0){                for(var k = 0; k < count; k++){                    if(wins[i][j][k]){                        if(myWin[k] == 1){
                            myScore[i][j] += 200;
                        }else if(myWin[k] == 2){
                            myScore[i][j] += 400;
                        }else if(myWin[k] == 3){
                            myScore[i][j] += 2000;
                        }else if(myWin[k] == 4){
                            myScore[i][j] += 10000;
                        }                        if(computerWin[k] == 1){
                            computerScore[i][j] += 220;
                        }else if(computerWin[k] == 2){
                            computerScore[i][j] += 420;
                        }else if(computerWin[k] == 3){
                            computerScore[i][j] += 2100;
                        }else if(computerWin[k] == 4){
                            computerScore[i][j] += 20000;
                        }                        
                    }
                }                if(myScore[i][j] > max){
                    max  = myScore[i][j];
                    u = i;
                    v = j;
                }else if(myScore[i][j] == max){                    if(computerScore[i][j] > computerScore[u][v]){
                        u = i;
                        v = j;    
                    }
                }                if(computerScore[i][j] > max){
                    max  = computerScore[i][j];
                    u = i;
                    v = j;
                }else if(computerScore[i][j] == max){                    if(myScore[i][j] > myScore[u][v]){
                        u = i;
                        v = j;    
                    }
                }

            }
        }
    }
    oneStep(u,v,false);
    chressBord[u][v] = 2;    for(var k = 0; k < count; k++){        if(wins[u][v][k]){
            computerWin[k]++;
            myWin[k] = 6;//这个位置对方不可能赢了
            if(computerWin[k] == 5){
                window.alert('计算机赢了');
                over = true;
            }
        }
    }    if(!over){
        me = !me;
    }
}//绘画棋盘var drawChessBoard = function(){
    for(var i = 0; i < 15; i++){
        context.moveTo(15 + i * 30 , 15);
        context.lineTo(15 + i * 30 , 435);
        context.stroke();
        context.moveTo(15 , 15 + i * 30);
        context.lineTo(435 , 15 + i * 30);
        context.stroke();
    }
}//画旗子var oneStep = function(i,j,me){
    context.beginPath();
    context.arc(15 + i * 30, 15 + j * 30, 13, 0, 2 * Math.PI);//画圆
    context.closePath();    //渐变
    var gradient = context.createRadialGradient(15 + i * 30 + 2, 15 + j * 30 - 2, 13, 15 + i * 30 + 2, 15 + j * 30 - 2, 0);    if(me){
        gradient.addColorStop(0,'#0a0a0a');
        gradient.addColorStop(1,'#636766');
    }else{
        gradient.addColorStop(0,'#d1d1d1');
        gradient.addColorStop(1,'#f9f9f9');
    }
    context.fillStyle = gradient;
    context.fill();
}

内容总结

以上是互联网集市为您收集整理的js实现五子棋代码分享全部内容，希望文章能够帮你解决js实现五子棋代码分享所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/294933.html

来源：【匿名】

【上一篇】javascript事件循环机制实例详解【下一篇】javascript 怎么调用php方法

更多 ►

【js实现五子棋代码分享】教程文章相关的互联网学习教程文章

Javascript如何获取缓存和清除缓存API的示例代码分享

本篇文章主要介绍了详解Javascript获取缓存和清除缓存API，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧JavaScript ServiceWorker API的好处就是让web开发人员轻松的控制缓存。虽然使用ETags等技术也是一种控制缓存的技术，按使用JavaScript让程序来控制缓存功能更强大，更自由。当然，强大有强大的好处，也有弊处——你需要做善后处理，所谓的善后处理，就是要清理缓存。下面我们来看看如何创建缓...

Vue.js实现自定义指令代码分享【图】

自定义指令是用来操作DOM的。尽管Vue推崇数据驱动视图的理念，但并非所有情况都适合数据驱动。自定义指令就是一种有效的补充和扩展，不仅可用于定义任何的DOM操作，并且是可复用的。比如谷歌图片的加载做得非常优雅，在图片未完成加载前，用随机的背景色占位，图片加载完成后才直接渲染出来。用自定义指令可以非常方便的实现这个功能。自定义指令的第二用处是用于集成第三方插件。我们知道任何软件开发领域都可以分为四层：底层是...

Vuefrom-validate表单验证代码分享

本文主要和大家介绍Vue from-validate 表单验证的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。前言需要进行表单数据验证，原先才用html5来完成验证，但是效果很差，也不够灵活，所以需要进行自定义的表单验证，网上的插件都太过庞大，项目并没有这么多的需求。那让我们自己来写一个吧！知识准备vue的自定义指令具体可以看官方手册，连接如下：https://vuejs.org/v2...

jquery左右全屏大尺寸多图滑动效果代码分享_jquery【图】

本文实例讲述了jquery左右全屏大尺寸多图滑动效果。分享给大家供大家参考。具体如下：这是一款基于jquery实现的banner焦点图播放效果的插件，图片播放时处于满屏的状态，很具有画面感，呈现的效果更佳充实，用户的视觉体验更加具体，是一款很时尚大方的特效代码。运行效果图： -------------------查看效果下载源码-------------------小提示：浏览器中如果不能正常运行，可以尝试切换浏...

PHP实现Javascript中的escape及unescape函数代码分享，escapeunescape_PHP教程

PHP实现Javascript中的escape及unescape函数代码分享，escapeunescape 这个类相当好用.作用么,PHP做JSON传递GBK字符,比如中文,日文,韩文神马的Unicode最合适不过了.. <?php classcoding {//模仿JAVASCRIPT的ESCAPE和UNESCAPE函数的功能 functionunescape($str){$text=preg_replace_callback("/%u[0-9A-Za-z]{4}/",array(&$this,toUtf8),$str);returnmb_convert_encoding($text,"gb2312","utf-8");}functiontoUtf8($ar){foreach($ar...

PHP实现Javascript中的escape及unescape函数代码分享_PHP教程

PHP实现Javascript中的escape及unescape函数代码分享这篇文章主要介绍了PHP实现Javascript中的escape及unescape函数代码分享,本文给出两个实现版本,需要的朋友可以参考下这个类相当好用.作用么,PHP做JSON传递GBK字符,比如中文,日文,韩文神马的Unicode最合适不过了..12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152classcoding{//模仿JAVASCRIPT的ESCAPE和UNESCAPE函数的功能fu...

PHP实现Javascript中的escape及unescape函数代码分享_php实例

这个类相当好用.作用么,PHP做JSON传递GBK字符,比如中文,日文,韩文神马的Unicode最合适不过了.. <?php classcoding {//模仿JAVASCRIPT的ESCAPE和UNESCAPE函数的功能 functionunescape($str){$text=preg_replace_callback("/%u[0-9A-Za-z]{4}/",array(&$this,toUtf8),$str);returnmb_convert_encoding($text,"gb2312","utf-8");}functiontoUtf8($ar){foreach($aras$val){$val=intval(substr($val,2),16);if($val<0x7F){// 0000-007F ...

PHP实现Javascript中的escape及unescape函数代码分享_PHP

这个类相当好用.作用么,PHP做JSON传递GBK字符,比如中文,日文,韩文神马的Unicode最合适不过了..<?php classcoding {//模仿JAVASCRIPT的ESCAPE和UNESCAPE函数的功能 functionunescape($str){$text=preg_replace_callback("/%u[0-9A-Za-z]{4}/",array(&$this,toUtf8),$str);returnmb_convert_encoding($text,"gb2312","utf-8");}functiontoUtf8($ar){foreach($aras$val){$val=intval(substr($val,2),16);if($val<0x7F){// 0000-007F $...

PHP实现Javascript中的escape及unescape函数代码分享

javascript实现省市联动的代码分享

本篇文章给大家带来的内容是关于javascript实现省市联动的代码分享，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。前言：这个系列主要是对之前学习JavaScript实现的一些小demo的总结，总觉得不能这样学过了就算了，趁着假期就好好总结一下吧。在平常的网站开发中，我们常常会遇到这样的一个需求：在注册页面或者完善个人信息时要选择个人所在地，当选择省时，该省对应的市也会自动更新。技术点分析：DOM操作：获...

第3篇快速入门—js基础实战应用代码分享

DOM--节点的增删改查CRUD，DOM--例子:设置新闻字体， DOM的一个小例子---制作一个下拉菜单DOM--节点的增删改查CRUD<!DOCTYPE html> <html><head><title>DOM--节点的增删改查CRUD</title><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="this is my page"><meta http-equiv="content-type" content="text/html; charset=UTF-8"><style type="text/css">p {border: #00c...

使用vue-cli实战项目代码分享【图】

这次给大家带来使用vue-cli实战项目代码分享，使用vue-cli实战的注意事项有哪些，下面就是实战案例，一起来看一下。本文是针对对于完全没有了解过vue 和npm，连运行环境和项目构建的都不会的小白，对于前端老司机的就不用看了，浪费时间。使用npm 与vue-cli 构建vue 项目第一步：安装运行环境（node与npm）nodeJ官网：http://nodejs.cn/下载安装包( 安装)安装完成后，需要检测是否安装成功使用命令行cmd 打开dos 黑窗口，运行 node...

原生nodejs使用websocket代码分享

本文给大家分享的是在原生的nodejs中如何使用websocket实现信息传输，非常实用，有需要的小伙伴可以参考下安装：npm install ws服务端（nodejs）：var WebSocketServer = require(ws).Server, wss = new WebSocketServer({ port: 8080 }); wss.on(connection, function (ws) { console.log(client connected); ws.on(message, function (message) {console.log(message); }); });客户端：<script> var ws = new WebSocket("ws://...

nodeJS服务器创建与重启操作代码分享

这次给大家带来nodeJS服务器创建与重启操作代码分享，nodeJS服务器创建与重启操作的注意事项有哪些，下面就是实战案例，一起来看一下。一：首先在nodejs项目里创建一个server.js文件，输入下面代码var http = require("http"); http.createServer(function(request, response) { response.writeHead(200, {"Content-Type": "text/plain"}); response.write("Hello World"); response.end(); }).listen(8888);然后在cmd下进入项目...

关于js的一些小知识点代码分享

本篇文章给大家分享的内容是关于js的一些小知识点代码分享，有着一定的参考价值，有需要的朋友可以参考一下js 防止重复提交第一种方式点击时返回false 2. 点击时，把按钮变为不可用比如 disabled var feedbtnlock = 0;function bonus_passwd() {if (feedbtnlock == 0) {feedbtnlock = 1;setTimeout(function(){feedbtnlock = 0;}, 1500);} else {alert(请勿重复点击！); return false;} }表单验证validate 2. valid...

首页 / JAVASCRIPT / js实现五子棋代码分享

js实现五子棋代码分享

内容导读

内容图文

内容总结

内容备注

内容手机端

【js实现五子棋代码分享】教程文章相关的互联网学习教程文章

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程