JS+canvas 오목 인간 과 컴퓨터 의 대전 실현 절차 에 대한 상세 한 설명
function Gobang () {
this.over = false; //
this.player = true; // true: false:
this.allChesses = []; //
this.existChesses = [] //
this.winsCount = 0; //
this.wins = []; //
this.myWins = []; //
this.computerWins = []; //
}
2.초기 화
//
Gobang.prototype.init = function(opts) {
// canvas
this.createCanvas(opts);
//
this.boardInit();
//
this.mouseMove();
//
this.algorithmInit();
//
this.dorpChess();
}
3.캔버스 바둑판 생 성
//
// canvas
Gobang.prototype.createCanvas = function(opts) {
var opts = opts || {};
if (opts.width && opts.width%30 !== 0) throw new RangeError(opts.width+' 30 ');
this.col = (opts.width && opts.width/30) || 15; //
var oCanvas = document.createElement('canvas');
oCanvas.width = oCanvas.height = opts.width || 450;
this.canvas = oCanvas;
document.querySelector(opts.container || 'body').appendChild(this.canvas);
this.ctx = oCanvas.getContext('2d');
}
4.바둑판 초기 화
//
Gobang.prototype.boardInit = function(opts){
this.drawBoard();
}
//
Gobang.prototype.drawBoard = function(){
this.ctx.strokeStyle = "#bfbfbf";
for (var i = 0; i < this.col; i++) {
this.ctx.moveTo(15+ 30*i, 15);
this.ctx.lineTo(15+ 30*i, this.col*30-15);
this.ctx.stroke();
this.ctx.moveTo(15, 15+ 30*i);
this.ctx.lineTo(this.col*30-15, 15+ 30*i);
this.ctx.stroke();
}
}
5.바둑 알 그리 기
//
Gobang.prototype.drawChess = function(x, y, player){
var x = 15 + x * 30,
y = 15 + y * 30;
this.ctx.beginPath();
this.ctx.arc(x, y, 13, 0, Math.PI*2);
var grd = this.ctx.createRadialGradient(x + 2, y - 2, 13 , x + 2, y - 2, 0);
if (player) { // ==
grd.addColorStop(0, '#0a0a0a');
grd.addColorStop(1, '#636766');
}else{ // ==
grd.addColorStop(0, '#d1d1d1');
grd.addColorStop(1, '#f9f9f9');
}
this.ctx.fillStyle = grd;
this.ctx.fill()
}
6.이동 초점
// , , canvas
Gobang.prototype.mouseMove = function(){
var that = this;
this.canvas.addEventListener('mousemove', function (e) {
that.ctx.clearRect(0, 0, that.col*30, that.col*30);
var x = Math.floor((e.offsetX)/30),
y = Math.floor((e.offsetY)/30);
//
that.drawBoard();
//
that.focusChess(x, y);
//
that.redrawedChess()
});
}
//
Gobang.prototype.focusChess = function(x, y){
this.ctx.beginPath();
this.ctx.fillStyle = '#E74343';
this.ctx.arc(15 + x * 30, 15 + y * 30, 6, 0, Math.PI*2);
this.ctx.fill();
}
//
Gobang.prototype.redrawedChess = function(x, y){
for (var i = 0; i < this.existChesses.length; i++) {
this.drawChess(this.existChesses[i].x, this.existChesses[i].y, this.existChesses[i].player);
}
}
7.알고리즘 초기 화
//
Gobang.prototype.algorithmInit = function(){
//
for (var x = 0; x < this.col; x++) {
this.allChesses[x] = [];
this.wins[x] = [];
for (var y = 0; y < this.col; y++) {
this.allChesses[x][y] = false;
this.wins[x][y] = [];
}
}
//
this.computedWins();
//
for (var i = 0; i < this.winsCount; i++) {
this.myWins[i] = 0;
this.computerWins[i] = 0;
}
}
8.모든 이 기 는 법 획득
Gobang.prototype.computedWins = function(){
/*
15
*/
for (var x = 0; x < this.col; x++) { //
for (var y = 0; y < this.col-4; y ++) {
this.winsCount ++;
/*
:
1.
[0,0]
[0,1]
[0,2]
[0,3]
[0,4]
2.
[0,1]
[0,2]
[0,3]
[0,4]
[0,5]
11 , x 15 11 , 15 * 11
*/
// for
for (var k = 0; k < 5; k ++) {
this.wins[x][y+k][this.winsCount] = true;
/*
:
this.wins = [
[
[1:true],
[1:true],
[1:true],
[1:true],
[1:true]
],
[
......
]
]
,
this.wins[0][0][1], this.wins[0][4][1], this.wins[0][5][1], this.wins[0][6][1], this.wins[0][7][1]
:
var obj = {
a: 10,
b: 'demo'
}
obj['a'] === obj.a
this.wins[0][0].1, this.wins[0][8].1, this.wins[0][9].1, this.wins[0][10].1, this.wins[0][11].1
,
this.wins[0][0].1 x=0, y=0,
this.wins[0][12].1 x=0, y=1,
......
this.wins[0][0],this.wins[0][13]... this.wins[x][y]
: [0,0] [0,1] [0,2] [0,3] [0,4]
*/
}
}
}
for (var y = 0; y < this.col; y++) { // , , 15 * 11
for (var x = 0; x < this.col-4; x ++) {
this.winsCount ++;
for (var k = 0; k < 5; k ++) {
this.wins[x+k][y][this.winsCount] = true;
}
}
}
크로스 오 버
/*
*/
for (var x = 0; x < this.col-4; x++) { // -> 11 * 11
for (var y = 0; y < this.col-4; y ++) {
this.winsCount ++;
/*
:
1. [0,0]
[1,1]
[2,2]
[3,3]
[4,4]
2. [0,1]
[1,2]
[2,3]
[3,4]
[4,5]
3. [0,2]
[1,3]
[2,4]
[3,5]
[4,6]
...
[1,0]
[2,1]
[3,2]
[4,3]
[5,5]
*/
for (var k = 0; k < 5; k ++) {
this.wins[x+k][y+k][this.winsCount] = true;
}
}
}
for (var x = this.col-1; x >= 4; x --) { // -> 11 * 11
for (var y = 0; y < this.col-4; y ++) {
this.winsCount ++;
for (var k = 0; k < 5; k ++) {
this.wins[x-k][y+k][this.winsCount] = true;
}
}
}
}
9.정착 실현
//
Gobang.prototype.dorpChess = function(){
var that = this;
this.canvas.addEventListener('click', function(e) {
//
if (that.over) return;
var x = Math.floor((e.offsetX)/30),
y = Math.floor((e.offsetY)/30);
//
if (that.allChesses[x][y]) return;
//
that.checkChess(x, y)
if (!that.over) {
that.player = false;
that.computerDropChess();//
}
})
}
//
Gobang.prototype.checkChess = function(x, y){
//
this.drawChess(x, y, this.player);
//
this.existChesses.push({
x: x,
y: y,
player: this.player
});
// true,
this.allChesses[x][y] = true;
this.currWinChesses(x, y, this.player);
}
//
Gobang.prototype.currWinChesses = function(x, y, player){
var currObj = player ? this.myWins : this.computerWins;
var enemyObj = player ? this.computerWins : this.myWins;
var currText = player ? ' ' : ' ';
for (var i = 1; i <= this.winsCount; i++) {
if (this.wins[x][y][i]) { // 1 1
currObj[i-1] ++; // ;
enemyObj[i-1] = 6; // , , 6 5
if (currObj[i-1] === 5) { // 5 ,
alert(currText+' ')
this.over = true;
}
}
}
}
10.컴퓨터 낙 자 실현
//
Gobang.prototype.computerDropChess = function(){
var myScore = [], //
computerScore = [], //
maxScore = 0; //
//
var scoreInit = function(){
for( var x = 0; x < this.col; x ++) {
myScore[x] = [];
computerScore[x] = [];
for (var y = 0; y < this.col; y ++) {
myScore[x][y] = 0;
computerScore[x][y] = 0;
}
}
}
scoreInit.call(this);
//
var x = 0, y = 0;
//
function formatScore(o, n) {
if (o < 6 && o > 0) {
var n = 10;
for (var i = 0; i < o; i++) {
n *= 3;
}
return n
}
return 0
}
//
function existChess(arr) {
var existArr = [];
for (var i = 0; i < arr.length; i++) {
for (var j = 0; j < arr[i].length; j++) {
if (!arr[i][j]) {
existArr.push({x:i, y:j})
}
}
}
return existArr;
}
var exceptArr = existChess(this.allChesses);
// ,
for (var i = 0; i < exceptArr.length; i++) {
var o = exceptArr[i];
//
for (var k = 0; k < this.winsCount; k++) {
//
if (this.wins[o.x][o.y][k]) {
// , ,
// , ,
myScore[o.x][o.y] += formatScore(this.myWins[k-1], 10);
computerScore[o.x][o.y] += formatScore(this.computerWins[k-1], 11);
}
}
//
if (myScore[o.x][o.y] > maxScore) { // ,
maxScore = myScore[o.x][o.y];
x = o.x;
y = o.y;
}else if (myScore[o.x][o.y] === maxScore) { // , , ,
if (computerScore[o.x][o.y] > computerScore[x][y]) {
x = o.x;
y = o.y;
}
}
// , ,
if (computerScore[o.x][o.y] > maxScore) {
maxScore = computerScore[o.x][o.y];
x = o.x;
y = o.y;
}else if (computerScore[o.x][o.y] === maxScore) {
if (myScore[o.x][o.y] > myScore[x][y]) {
x = o.x;
y = o.y;
}
}
}
this.checkChess(x, y)
if (!this.over) {
this.player = true;
}
}
var gobang = new Gobang();
gobang.init()
github 주소 온라인 주소
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
JS 판단 수조 네 가지 실현 방법 상세그러면 본고는 주로 몇 가지 판단 방식과 방식 판단의 원리를 바탕으로 문제가 있는지 토론하고자 한다. 예를 들어 html에 여러 개의 iframe 대상이 있으면 instanceof의 검증 결과가 기대에 부합되지 않을...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.