找回密码
当前位置：前端开发者 > HTML > 正文

前端 开发 H5游戏_五子棋

2018-07-19 分类：HTML 阅读(755) 评论(0)

游戏前端开发工作内容|前端开发不好找工作了|前端开发设计工作年龄的要求

代码片段 1

<!DOCTYPE html>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<head>
    <title>web前端开发岗位分析：h5五子棋</title>
    <style type=”text/css”>
        body,
        canvas,
        div {
            margin: 0;
            padding: 0;
        }
        #myCanvas {
            background: #FEBC66
        }
    </style>
</head>
<body>
    <!–===================================================================
Copyright 2014 weiyang
email:weiyangyin@163.com
五子棋带简单ai
===================================================================–>
    <canvas id=”myCanvas” width=”620″ height=”620″> Your browser does not support the canvas element. </canvas>
    <div id=”player”></div>
    <script type=”text/javascript”>
        var chessboard = function (id) {
            this.dom = document.getElementById(id);
            this.ctx = this.dom.getContext(“2d”);
            this.a_w = 40;
            this.chessList = [];
        }
        chessboard.prototype = {
            init: function () {
                this.draw();
                this.createchessList();
                var domTop = this.dom.offsetTop, domLeft = this.dom.offsetLeft, self = this;
                self.playChess(7, 7, 1);
                this.dom.onclick = function (e) {
                    var _x = e.pageX – domLeft, _y = e.pageY – domTop,
                        i = Math.round(_x / self.a_w) – 1,
                        j = Math.round(_y / self.a_w) – 1;
                    if (self.chessList[i][j] == 2) {
                        self.playChess(i, j, 0);
                        if (test.testAll(self.chessList, i, j)) {
                            alert(“你赢了”);
                            self.init();
                        }
                        var ai = AI(self.chessList);
                        self.playChess(ai[0], ai[1], 1);
                        if (test.testAll(self.chessList, ai[0], ai[1])) {
                            alert(“你输了”);
                            self.init();
                        }
                    }
                }
            },
            draw: function () {
                var ctx = this.ctx;
                ctx.clearRect(0, 0, 620, 620);
                for (var i = 0; i < 15; i++) {
                    ctx.beginPath();
                    ctx.moveTo(30, 30 + this.a_w * i);
                    ctx.lineTo(590, 30 + this.a_w * i);
                    ctx.moveTo(30 + this.a_w * i, 30);
                    ctx.lineTo(30 + this.a_w * i, 590);
                    ctx.lineWidth = 1;
                    ctx.strokeStyle = “#000”;
                    ctx.stroke();
                }
            },
            createchessList: function () {
                for (var i = 0; i < 15; i++) {
                    this.chessList[i] = [];
                    for (var j = 0; j < 15; j++) {
                        this.chessList[i][j] = 2;
                    }
                }
            },
            playChess: function (i, j, type) {
                var ctx = this.ctx;
                if (type == 0) {
                    ctx.fillStyle = “#fff”;
                    this.chessList[i][j] = 0;
                }
                if (type == 1) {
                    ctx.fillStyle = “#333”;
                    this.chessList[i][j] = 1;
                }
                ctx.strokeStyle = “#333”;
                ctx.beginPath();
                ctx.arc(30 + i * this.a_w, 30 + j * this.a_w, 15, 0, Math.PI * 2, true);
                ctx.closePath();
                ctx.fill();
                ctx.stroke();
            }
        }
        var test = {
            vertical: function (list, i, j) {
                var k = list[i][j], sum = 1, type = 0, n = i + 1;
                for (var n = i + 1; n < 15; n++) {
                    if (list[n][j] == k) {
                        sum++;
                    } else if (list[n][j] == 2) {
                        break;
                    } else {
                        type++;
                        break;
                    }
                }
                for (var n = i – 1; n > 0; n–) {
                    if (list[n][j] == k) {
                        sum++;
                    } else if (list[n][j] == 2) {
                        break;
                    } else {
                        type++;
                        break;
                    }
                }
                return [sum, type];
            },
            horizontal: function (list, i, j) {
                var k = list[i][j], sum = 1, type = 0;
                for (var n = j + 1; n < 15; n++) {
                    if (list[i][n] == k) {
                        sum++;
                    } else if (list[i][n] == 2) {
                        break;
                    } else {
                        type++;
                        break;
                    }
                }
                for (var n = j – 1; n > 0; n–) {
                    if (list[i][n] == k) {
                        sum++;
                    } else if (list[i][n] == 2) {
                        break;
                    } else {
                        type++;
                        break;
                    }
                }
                return [sum, type];
            },
            inclined1: function (list, i, j) {
                var k = list[i][j], type = 0, sum = 1,
                    z = (i > j) ? i : j, w = (i < j) ? i : j;
                for (var v = 1; v < 15 – z; v++) {
                    if (list[i + v][j + v] == k) {
                        sum++;
                    } else if (list[i + v][j + v] == 2) {
                        break;
                    } else {
                        type++;
                        break;
                    }
                }
                for (var v = 1; v < w; v++) {
                    if (list[i – v][j – v] == k) {
                        sum++;
                    } else if (list[i – v][j – v] == 2) {
                        break;
                    } else {
                        type++;
                        break;
                    }
                }
                return [sum, type];
            },
            inclined2: function (list, i, j) {
                var k = list[i][j], sum = 1, type = 0;
                var z = (i > (15 – j)) ? i : (15 – j);
                var w = (i < (15 – j)) ? i : (15 – j);
                for (var v = 1; v < 15 – z; v++) {
                    if (list[i + v][j – v] == k) {
                        sum++;
                    } else if (list[i + v][j – v] == 2) {
                        break;
                    } else {
                        type++;
                        break;
                    }
                }
                for (var v = 1; v < w; v++) {
                    if (list[i – v][j + v] == k) {
                        sum++;
                    } else if (list[i – v][j + v] == 2) {
                        break;
                    } else {
                        type++;
                        break;
                    }
                }
                return [sum, type];
            },
            testAll: function (list, i, j) {
                if (this.vertical(list, i, j)[0] >= 5 || this.horizontal(list, i, j)[0] >= 5 || this.inclined1(list, i, j)[0] >= 5 || this.inclined2(list, i, j)[0] >= 5) {
                    return true;
                } else {
                    return false;
                }
            },
            scoreTest: function (list, i, j, type) {
                var score = 0;
                list[i][j] = type;
                var rus = [];
                rus.push(this.vertical(list, i, j), this.horizontal(list, i, j), this.inclined1(list, i, j), this.inclined2(list, i, j));
                list[i][j] = 2;
                var ruspd = {
                    h5: 0,
                    h4: 0,
                    s4: 0,
                    h3: 0,
                    s3: 0,
                    h2: 0,
                    s2: 0
                };
                for (var i = 0; i < 4; i++) {
                    var _rus0 = rus[i][0], _rus1 = rus[i][1];
                    if (_rus0 == 2 && _rus1 == 1) {
                        ruspd.s2++;
                    }
                    if (_rus0 == 2 && _rus1 == 0) {
                        ruspd.h2++;
                    }
                    if (_rus0 == 3 && _rus1 == 1) {
                        ruspd.s3++;
                    }
                    if (_rus0 == 3 && _rus1 == 0) {
                        ruspd.h3++;
                    }
                    if (_rus0 == 4 && _rus1 == 1) {
                        ruspd.s4++;
                    }
                    if (_rus0 == 4 && _rus1 == 0) {
                        ruspd.h4++;
                    }
                    if (_rus0 == 5) {
                        ruspd.h5++;
                    }
                }
                if (ruspd.h5 > 0) {
                    score = 200;
                    return score;
                }
                if (ruspd.h4 > 0) {
                    score = 100;
                    return score;
                }
                if (ruspd.s4 > 1) {
                    score = 100;
                    return score;
                }
                if (ruspd.s4 > 0 && ruspd.h3 > 0) {
                    score = 100;
                    return score;
                }
                if (ruspd.h3 > 1) {
                    score = 90
                    return score;
                }
                if (ruspd.h3 == 1 && ruspd.s3 > 0) {
                    score = 70
                    return score;
                }
                if (ruspd.h3 == 1 && ruspd.s3 > 0) {
                    score = 70
                    return score;
                }
                if (ruspd.s4 == 1) {
                    score = 60
                    return score;
                }
                if (ruspd.h3 == 1) {
                    score = 50
                    return score;
                }
                if (ruspd.h2 > 1) {
                    score = 40
                    return score;
                }
                if (ruspd.s3 > 0) {
                    score = 30
                    return score;
                }
                if (ruspd.h2 == 1) {
                    score = 20
                    return score;
                }
                if (ruspd.s2 == 1) {
                    score = 10
                    return score;
                }
                return score;
            },
            random: function (n, m) {
                return Math.floor(Math.random() * (m – n + 1) + n);
            }
        }
        function AI(list) {
            var rus = [], score = -200;
            for (var i = 0; i < 15; i++) {
                for (var j = 0; j < 15; j++) {
                    if (list[i][j] == 2) {
                        var sub_score = test.scoreTest(list, i, j, 1);
                        if (sub_score > score) {
                            score = sub_score;
                            rus = [];
                            rus.push([i, j])
                        } else if (sub_score == score) {
                            rus.push([i, j])
                        }
                        var sub_score = test.scoreTest(list, i, j, 0);
                        if (sub_score > score) {
                            score = sub_score;
                            rus = [];
                            rus.push([i, j])
                        } else if (sub_score == score) {
                            rus.push([i, j])
                        }
                    }
                }
            }
            return rus[test.random(0, rus.length – 1)];
        }
        var board = new chessboard(“myCanvas”);
        board.init();
    </script>
</body>
</html>

先将棋盘画出来：
draw: function() {
var ctx = this.ctx;
ctx.clearRect(0, 0, 620, 620);
for (var i = 0; i < 15; i++) {
ctx.beginPath();
ctx.moveTo(30, 30 + this.a_w i);
ctx.lineTo(590, 30 + this.a_w i);
ctx.moveTo(30 + this.a_w i, 30);
ctx.lineTo(30 + this.a_w i, 590);
ctx.lineWidth = 1;
ctx.strokeStyle = “#000”;
ctx.stroke();

    }

}

生成二维数组存储棋盘状态，初始值为2
createchessList: function() {
for (var i = 0; i < 15; i++) {
this.chessList = [];
for (var j = 0; j < 15; j++) {
[i] this.chessList[j] = 2;
}
}
}

每次下棋之后，判断二维数组的形态
test中的四个方向遍历，判断是否有五子。

vertical: function(list, i, j) {
var k = list[j];
var sum = 1;
var type = 0;
for (var n = i + 1; n < 15; n++) {
if (list[n][j] == k) {
sum++;
} else if (list[n][j] == 2) {
break;
} else {
type++;
break;
}
}

for (var n = i – 1; n > 0; n–) {
    if (list[n][j] == k) {
        sum++;
    } else if (list[n][j] == 2) {
        break;
    } else {
        type++;
        break;
    }
}
return [sum, type];
},
horizontal: function(list, i, j) {
var k = list[j];
var sum = 1;
var type = 0;
for (var n = j + 1; n < 15; n++) {
    if (list[n] == k) {
        sum++;
    } else if (list[n] == 2) {
        break;
    } else {
        type++;
        break;
    }
}
for (var n = j – 1; n > 0; n–) {
    if (list[n] == k) {
        sum++;
    } else if (list[n] == 2) {
        break;
    } else {
        type++;
        break;
    }
}
return [sum, type];
},
inclined1: function(list, i, j) {
var k = list[j];
var type = 0;
var sum = 1;
var z = (i > j) ? i: j;
var w = (i < j) ? i: j;
for (var v = 1; v < 15 – z; v++) {
    if (list[i + v][j + v] == k) {
        sum++;
    } else if (list[i + v][j + v] == 2) {
        break;
    } else {
        type++;
        break;
    }
}
for (var v = 1; v < w; v++) {
    if (list[i – v][j – v] == k) {
        sum++;
    } else if (list[i – v][j – v] == 2) {
        break;
    } else {
        type++;
        break;
    }
}
return [sum, type];
},
inclined2: function(list, i, j) {
var k = list[j];
var sum = 1;
var type = 0;
var z = (i > (15 – j)) ? i: (15 – j);
var w = (i < (15 – j)) ? i: (15 – j);
for (var v = 1; v < 15 – z; v++) {
    if (list[i + v][j – v] == k) {
        sum++;
    } else if (list[i + v][j – v] == 2) {
        break;
    } else {
        type++;
        break;
    }
}
for (var v = 1; v < w; v++) {
    if (list[i – v][j + v] == k) {
        sum++;
    } else if (list[i – v][j + v] == 2) {
        break;
    } else {
        type++;
        break;
    }
}
return [sum, type];
}
scoreTest方法为ai计算分值，取最大值的位置
ruspd判断形态，如下
var ruspd = {
h5: 0,
h4: 0,
s4: 0,
h3: 0,
s3: 0,
h2: 0,
s2: 0
};
然后给出每个位置分值
然后ai返回一个存储最大分值的数组中的随机元素
function AI(list) {
var rus = [];
var score = -200;
for (var i = 0; i < 15; i++) {
for (var j = 0; j < 15; j++) {
if (list[j] == 2) {
var sub_score = test.scoreTest(list, i, j, 1);
if (sub_score > score) {
score = sub_score;
rus = [];
rus.push([i, j])
} else if (sub_score == score) {
rus.push([i, j])
}
var sub_score = test.scoreTest(list, i, j, 0);
if (sub_score > score) {
score = sub_score;
rus = [];
rus.push([i, j])
} else if (sub_score == score) {
rus.push([i, j])
}
}
}
}
return rus[test.random(0, rus.length – 1)];
}

这个游戏的ai只计算一步，比较弱，对此有兴趣的可以交流

web前端开发就业方向|安卓开发跟前端区别|web前端开发现在就业情况

赞(0)
前端开发者 » 前端 开发 H5游戏_五子棋
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论