js+canvas实现五子棋小游戏

 更新时间:2020-08-02 16:08:30   作者:佚名   我要评论(0)

本文实例为大家分享了js+canvas实现五子棋小游戏的具体代码,供大家参考,具体内容如下
效果展示:

源码展示:


<!DOCTYPE html>
<html lang="en">
<head>
<meta

本文实例为大家分享了js+canvas实现五子棋小游戏的具体代码,供大家参考,具体内容如下

效果展示:

源码展示:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>五子棋</title>
 <style>
 * {
 margin: 0;
 padding: 0;
 }
 
 body {
 margin-top: 20px;
 margin-left: 20px;
 }
 
 canvas {
 background-image: url("img/bak.jpg");
 border: 1px solid #000;
 }
 
 </style>
</head>
<body>
<canvas width="600" height="600" onclick="play(event)"></canvas>
<script>
 /*准备工作: 1获取画布,获取画笔对象 */
 var mcanvas = document.querySelector("canvas");
 var ctx = mcanvas.getContext("2d");
 
 /*准备工作:2创建一个二维数组 用来定义绘制棋盘线*/
 var count = 15;//用来定义棋盘的行数和列数
 var map = new Array(count);
 for (var i = 0; i < map.length; i++) {
 map[i] = new Array(count);
 for (var j = 0; j < map[i].length; j++) {
 map[i][j] = 0;
 }
 }
 /*准备工作:3初始化棋子*/
 var black = new Image();
 var white = new Image();
 black.src = "img/black.png";
 white.src = "img/white.png";
 
 
 //开始绘制 1绘制棋盘线
 ctx.strokeStyle = "#fff";
 var rectWH = 40; //设置绘制矩形的大小
 for (var i = 0; i < map.length; i++) {
 for (var j = 0; j < map[i].length; j++) {
 ctx.strokeRect(j * rectWH, i * rectWH, rectWH, rectWH);
 }
 }
 
 // 用来进行黑白子的切换
 var isBlack = true;
 
 //开始绘制 2下子
 function play(e) {
 //获取点击canvas的位置值默认,canvas的左上角为(0,0) 点
 var leftOffset = 20;//body 的margin
 var x = e.clientX - leftOffset;
 var y = e.clientY - leftOffset;
 // console.log(x+" "+y);
 // 设置点击点后棋子下在哪里,获取点击的位置进行判断如果超过格子的一半则绘制到下一个点如果小于 则绘制在上一个点上
 var xv = (x - rectWH / 2) / rectWH;
 var yv = (y - rectWH / 2) / rectWH;
 
 var col = parseInt(xv) + 1;
 var row = parseInt(yv) + 1;
 console.log(xv + " " + yv + " , " + col + " " + row);
 
 //严格点需要验证 ,验证所输入的点是否在数组中已经存在 ,如果存在 则返回
 if (map[row][col] != 0) {
 alert("咋的,还想往我身上下啊!瞎啊!没看见已经有棋子了!!!");
 return;
 }
 
 // 切换绘制黑白子
 if (isBlack) {
 ctx.drawImage(black, col * 40 - 20, row * 40 - 20);
 isBlack = false;
 map[row][col] = 1;
 Yes(1, row, col);
 } else {
 ctx.drawImage(white, col * 40 - 20, row * 40 - 20);
 isBlack = true;
 map[row][col] = 2;
 Yes(2, row, col);
 }
 }
 
 //算法验证,查看谁赢 tag :1 :黑子 2 :白子
 function Yes(t, row, col) {
 console.log(1);
 var orgrow = row;
 var orgcol = col;
 var total = 1;
 // 判断依据,以当前下的棋子为圆心,水平方向左右寻找和自己想通的值 ,最后判断如果大于5个则表示胜利
 // 1水平方向判断
 while (col - 1 > 0 && map[row][col - 1] == t) { //判断下一个值 注意一定是:col-1
 total++;
 col--;
 }
 row = orgrow;
 col = orgcol;
 while (col + 1 < 15 && map[row][col + 1] == t) {
 col++;
 total++;
 }
 if (total >= 5) {
 if (t == 1){
 alert("黑子赢");
 } else{
 alert("白子赢");
 }
 return;//判断出输赢结束后续判断
 }
 
 // 2垂直方向判断
 row = orgrow;
 col = orgcol;
 total = 1;
 while (row - 1 > 0 && map[row - 1][col] == t) {
 row--;
 total++;
 }
 row = orgrow;
 col = orgcol;
 while (row + 1 < 15 && map[row + 1][col] == t) {
 row++;
 total++;
 }
 if (total >= 5) {
 if (t == 1){
 alert("黑子赢");
 } else{
 alert("白子赢");
 }
 return;//判断出输赢结束后续判断
 }
 
 //左下 右上
 row = orgrow;
 col = orgcol;
 total = 1;
 while (row + 1 < 15 && col - 1 > 0 && map[row + 1][col - 1] == t) {
 row++;
 col--;
 total++;
 }
 row = orgrow;
 col = orgcol;
 while (row - 1 > 0 && col + 1 < 15 && map[row - 1][col + 1] == t) {
 row--;
 col++;
 total++;
 }
 if (total >= 5) {
 if (t == 1){
 alert("黑子赢");
 } else{
 alert("白子赢");
 }
 return;//判断出输赢结束后续判断
 }
 //左上右下
 row = orgrow;
 col = orgcol;
 total = 1;
 while (row - 1 > 0 && col - 1 > 0 && map[row - 1][col - 1] == t) {
 row--;
 col--;
 total++;
 }
 row = orgrow;
 col = orgcol;
 while (row + 1 < 15 && col + 1 < 15 && map[row + 1][col + 1] == t) {
 row++;
 col++;
 total++;
 }
 if (total >= 5) {
 if (t == 1){
 alert("黑子赢");
 } else{
 alert("白子赢");
 }
 return;//判断出输赢结束后续判断
 }
 }
 
 
 /*功能扩充:
 1当胜利后 弹框:a是否在来一局 b 精彩回复
 a 如果点击在来一句 清空数据重新开始
 b 精彩回放将棋盘黑白子按照下棋的顺序进行棋子编号2悔棋功能
 3对算法的扩充
 a如果是双三 则直接弹出胜利
 b若是桶四 则直接弹出胜利
 */
</script>
</body>
</html>

图片资源:

背景图片:

更多有趣的经典小游戏实现专题,分享给大家:

C++经典小游戏汇总

python经典小游戏汇总

python俄罗斯方块游戏集合

JavaScript经典游戏 玩不停

java经典小游戏汇总

javascript经典小游戏汇总

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:

  • 纯JS实现五子棋游戏兼容各浏览器(附源码)
  • 基于JavaScript实现五子棋游戏
  • Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
  • 原生JS+Canvas实现五子棋游戏实例
  • JS canvas绘制五子棋的棋盘
  • H5+C3+JS实现五子棋游戏(AI篇)
  • javascript 初学教程及五子棋小程序的简单实现
  • H5+C3+JS实现双人对战五子棋游戏(UI篇)
  • 原生JS+Canvas实现五子棋游戏
  • JavaScript实现五子棋游戏的方法详解

相关文章

  • js+canvas实现五子棋小游戏

    js+canvas实现五子棋小游戏

    本文实例为大家分享了js+canvas实现五子棋小游戏的具体代码,供大家参考,具体内容如下 效果展示: 源码展示: <!DOCTYPE html> <html lang="en"> <head> <meta
    2020-08-02
  • js实现点击上传图片并设为模糊背景

    js实现点击上传图片并设为模糊背景

    本文实例为大家分享了js实现点击上传图片,同时设该图片为模糊背景,供大家参考,具体内容如下 效果展示: 源码展示: <!doctype html> <html> <head> <meta c
    2020-08-02
  • django下创建多个app并设置urls方法

    django下创建多个app并设置urls方法

    1、创建第二个app 假设我们项目P下面已经有了一个默认的app,名字是app1。现在我想创建第二个app,名字时app2。 进入pychram下的Terminal中,运行命令: pytho
    2020-08-02
  • 基于opencv实现简单画板功能

    基于opencv实现简单画板功能

    OpenCV提供了很多简单的语句,实现复杂的功能,根据颜色和鼠标交互的基础语句,我们可以建立一个简单的画板。尽管它简单,但是制作的框架步骤不能少。 如果您感兴趣
    2020-08-02
  • 原生js+canvas实现贪吃蛇效果

    原生js+canvas实现贪吃蛇效果

    本文实例为大家分享了canvas实现贪吃蛇效果的具体代码,供大家参考,具体内容如下 效果展示: 源码展示: 页面布局展示:worm.html <!DOCTYPE html> <html> <he
    2020-08-02
  • flask开启多线程的具体方法

    flask开启多线程的具体方法

    在我之前解释了flask如何支持多线程主要通过两个类来实现,LocalStack和Local,在Local中有两个属性,__storage__和__ident_func__,后者用来获取线程id,从而区分不同线
    2020-08-02
  • Python改变对象的字符串显示的方法

    Python改变对象的字符串显示的方法

    问题 你想改变对象实例的打印或显示输出,让它们更具可读性。 解决方案 要改变一个实例的字符串表示,可重新定义它的 __str__() 和 __repr__() 方法。例如: c
    2020-08-02
  • Android入门计算器编写代码

    Android入门计算器编写代码

    这个简易计算器是我按照一本android开发入门书学的,书上的第一个例子就是计算器的编写。计算器的编写主要涉及到按键的布局和按键输入要点。 一个总的Lnearlayout的
    2020-08-02
  • javascript实现京东登录显示隐藏密码

    javascript实现京东登录显示隐藏密码

    本文实例为大家分享了javascript仿京东登录显示隐藏密码的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U
    2020-08-02
  • JavaScript实现动态生成表格

    JavaScript实现动态生成表格

    本文实例为大家分享了JavaScript实现动态生成表格的具体代码,供大家参考,具体内容如下 功能描述 在输入框中输入行和列,点击按钮,生成拥有对应行和列的表格。如下
    2020-08-02

最新评论