当前位置: 代码迷 >> Java Web开发 >> [源码]一个网页版的纯js写的五子棋,该如何处理
  详细解决方案

[源码]一个网页版的纯js写的五子棋,该如何处理

热度:8093   发布时间:2016-04-10 22:35:49.0
[源码]一个网页版的纯js写的五子棋
本帖最后由 defonds 于 2014-03-25 11:11:10 编辑
怎么做高手给点思路。。。。或者给个链接,,,  主要是  图怎么画(就和咱们下的一样),
------解决方案--------------------
引用:
我有用js实现的源码、
可否开源一把
------解决方案--------------------

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<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 {
  相关解决方案