Javascript和HTML5利用canvas构建Web五子棋游戏实现算

来源:http://www.sh-fengwen.com 作者:瘦身美容 人气:105 发布时间:2019-09-04
摘要: HTML5 利用canvas构建 Web五子棋游戏程序设计 这只是一个简单的JAVAscript和HTML5小程序,没有实现人机对战。 五子棋棋盘落子点对应的二维数组。数组的元素对应落子点。比如数组元素值

 HTML5 利用canvas构建 Web五子棋游戏程序设计

这只是一个简单的JAVAscript和HTML5小程序,没有实现人机对战。
五子棋棋盘落子点对应的二维数组。数组的元素对应落子点。比如数组元素值为0表示该元素对应的落子点没有棋子,数组元素值为1表示该元素对应的落子点有白棋子,数组元素值为2表示该元素对应的落子点有黑棋子;
判断五子棋赢棋的算法是通过对五子棋棋盘落子点对应的二维数组的操作来实现的。

 

判断五子棋赢棋算法
下边的函数可以实现判断五子棋赢棋的算法,也可以按照教材中相应的算法实现。
其中函数的参数xx.yy为数组下标,chess数组实现五子棋棋盘落子点的数据结构映射。
算法的思想方法是:以当前落子点对应的下标为基点,向其周围8个方向进行搜索,如果有同色子连五子,返回1,或2,否则返回0。返回1代表白棋方胜,返回2代表黑棋方胜。返回0代表没有发生赢棋数据结构状态。
图片 1 
图片 2
图片 3 

这只是一个简单的javascript和HTML5小程序,没有实现人机对战。

复制代码 代码如下:

 

<!DOCTYPE html>
< html xmlns=";
< head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body {
margin: 10px;
}
</style>
<script type="text/javascript">
var canvas;
var context;
var isWhite = true;//设置是否该轮到白棋
var isWell = false;//设置该局棋盘是否赢了,如果赢了就不能再走了
var img_b = new Image();
img_b.src = "images/b.png";//白棋图片
var img_w = new Image();
img_w.src = "images/w.png";//黑棋图片
var chessData = new Array(15);//这个为棋盘的二维数组用来保存棋盘信息,初始化0为没有走过的,1为白棋走的,2为黑棋走的
for (var x = 0; x < 15; x++) {
chessData[x] = new Array(15);
for (var y = 0; y < 15; y++) {
chessData[x][y] = 0;
}
}
function drawRect() {//页面加载完毕调用函数,初始化棋盘
canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
for (var i = 0; i <= 640; i += 40) {//绘制棋盘的线
context.beginPath();
context.moveTo(0, i);
context.lineTo(640, i);
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(i, 0);
context.lineTo(i, 640);
context.closePath();
context.stroke();
}
}
function play(e) {//鼠标点击时发生
var x = parseInt((e.clientX - 20) / 40);//计算鼠标点击的区域,如果点击了(65,65),那么就是点击了(1,1)的位置
var y = parseInt((e.clientY - 20) / 40);
if (chessData[x][y] != 0) {//判断该位置是否被下过了
alert("你不能在这个位置下棋");
return;
}
if (isWhite) {
isWhite = false;
drawChess(1, x, y);
}
else {
isWhite = true;
drawChess(2, x, y);
}
}
function drawChess(chess, x, y) {//参数为,棋(1为白棋,2为黑棋),数组位置
if (isWell == true) {
alert("已经结束了,如果需要重新玩,请刷新");
return;
}
if (x >= 0 && x < 15 && y >= 0 && y < 15) {
if (chess == 1) {
context.drawImage(img_w, x * 40 + 20, y * 40 + 20);//绘制白棋
chessData[x][y] = 1;
}
else {
context.drawImage(img_b, x * 40 + 20, y * 40 + 20);
chessData[x][y] = 2;
}
judge(x, y, chess);
}
}
function judge(x, y, chess) {//判断该局棋盘是否赢了
var count1 = 0;
var count2 = 0;
var count3 = 0;
var count4 = 0;
//左右判断
for (var i = x; i >= 0; i--) {
if (chessData
[y] != chess) {
break;
}
count1++;
}
for (var i = x + 1; i < 15; i++) {
if (chessData
[y] != chess) {
break;
}
count1++;
}
//上下判断
for (var i = y; i >= 0; i--) {
if (chessData[x]
!= chess) {
break;
}
count2++;
}
for (var i = y + 1; i < 15; i++) {
if (chessData[x]
!= chess) {
break;
}
count2++;
}
//左上右下判断
for (var i = x, j = y; i >= 0, j >= 0; i--, j--) {
if (chessData
[j] != chess) {
break;
}
count3++;
}
for (var i = x + 1, j = y + 1; i < 15, j < 15; i++, j++) {
if (chessData
[j] != chess) {
break;
}
count3++;
}
//右上左下判断
for (var i = x, j = y; i >= 0, j < 15; i--, j++) {
if (chessData
[j] != chess) {
break;
}
count4++;
}
for (var i = x + 1, j = y - 1; i < 15, j >= 0; i++, j--) {
if (chessData
[j] != chess) {
break;
}
count4++;
}
if (count1 >= 5 || count2 >= 5 || count3 >= 5 || count4 >= 5) {
if (chess == 1) {
alert("白棋赢了");
}
else {
alert("黑棋赢了");
}
isWell = true;//设置该局棋盘已经赢了,不可以再走了
}
}
</script>
< /head>
< body onload="drawRect()">
<div>
<canvas width="640" id="canvas" onmousedown="play(event)" height="640">你的浏览器不支持HTML5 canvas,请使用 google chrome 浏览器 打开.
</canvas>
</div>
< /body>
< /html>

五子棋棋盘落子点对应的二维数组。数组的元素对应落子点。比如数组元素值为0表示该元素对应的落子点没有棋子,数组元素值为1表示该元素对应的落子点有白棋子,数组元素值为2表示该元素对应的落子点有黑棋子;

您可能感兴趣的文章:

  • 纯JS实现五子棋游戏兼容各浏览器(附源码)
  • JavaScript 井字棋人工智能实现代码
  • javascript 7行代码画出一个围棋棋盘
  • 中国象棋js代码,仅演示,未能真下
  • JS小游戏之象棋暗棋源码详解
  • 诘屈聱牙之javascript中国象棋
  • js 钻石棋网页游戏代码
  • 原生JS+Canvas实现五子棋游戏实例
  • 原生JS+Canvas实现五子棋游戏
  • 基于JavaScript实现五子棋游戏
  • html5 canvas-1.canvas介绍(hello canvas)

 

 判断五子棋赢棋的算法是通过对五子棋棋盘落子点对应的二维数组的操作来实现的。

 

 

 

 判断五子棋赢棋算法

 

下边的函数可以实现判断五子棋赢棋的算法,也可以按照教材中相应的算法实现。

 

其中函数的参数xx.yy为数组下标,chess数组实现五子棋棋盘落子点的数据结构映射。

 

算法的思想方法是:以当前落子点对应的下标为基点,向其周围8个方向进行搜索,如果有同色子连五子,返回1,或2,否则返回0。返回1代表白棋方胜,返回2代表黑棋方胜。返回0代表没有发生赢棋数据结构状态。

 

 

 

提供程序用到的棋子

图片 4
图片 5

图片 6

 

 

 

 

<!DOCTYPE html> 

<html xmlns="; 

<head> 

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

    <title></title> 

    <style type="text/css"> 

        body { 

            margin: 10px; 

        } 

    </style> 

    <script type="text/javascript"> 

        var canvas; 

        var context; 

        var isWhite = true;//设置是否该轮到白棋 

        var isWell = false;//设置该局棋盘是否赢了,如果赢了就不能再走了 

        var img_b = new Image(); 

        img_b.src = "images/b.png";//白棋图片 

        var img_w = new Image(); 

        img_w.src = "images/w.png";//黑棋图片 

  

        var chessData = new Array(15);//这个为棋盘的二维数组用来保存棋盘信息,初始化0为没有走过的,1为白棋走的,2为黑棋走的 

        for (var x = 0; x < 15; x++) { 

            chessData[x] = new Array(15); 

            for (var y = 0; y < 15; y++) { 

                chessData[x][y] = 0; 

            } 

        } 

  

        function drawRect() {//页面加载完毕调用函数,初始化棋盘 

            canvas = document.getElementById("canvas"); 

            context = canvas.getContext("2d"); 

  

            for (var i = 0; i <= 640; i += 40) {//绘制棋盘的线 

                context.beginPath(); 

                context.moveTo(0, i); 

                context.lineTo(640, i); 

                context.closePath(); 

                context.stroke(); 

  

                context.beginPath(); 

                context.moveTo(i, 0); 

                context.lineTo(i, 640); 

                context.closePath(); 

                context.stroke(); 

            } 

        } 

        function play(e) {//鼠标点击时发生 

            var x = parseInt((e.clientX - 20) / 40);//计算鼠标点击的区域,如果点击了(65,65),那么就是点击了(1,1)的位置 

            var y = parseInt((e.clientY - 20) / 40); 

  

            if (chessData[x][y] != 0) {//判断该位置是否被下过了 

                alert("你不能在这个位置下棋"); 

                return; 

            } 

  

            if (isWhite) { 

                isWhite = false; 

                drawChess(1, x, y); 

            } 

            else { 

                isWhite = true; 

                drawChess(2, x, y); 

            } 

  

        } 

        function drawChess(chess, x, y) {//参数为,棋(1为白棋,2为黑棋),数组位置 

            if (isWell == true) { 

                alert("已经结束了,如果需要重新玩,请刷新"); 

本文由美高梅游戏平台网站发布于瘦身美容,转载请注明出处:Javascript和HTML5利用canvas构建Web五子棋游戏实现算

关键词:

最火资讯