Skip to content

Instantly share code, notes, and snippets.

@martian17
Created January 6, 2020 15:23
Show Gist options
  • Save martian17/6cc3b06672cce14539e8e9d7b9f83b39 to your computer and use it in GitHub Desktop.
Save martian17/6cc3b06672cce14539e8e9d7b9f83b39 to your computer and use it in GitHub Desktop.
オセロのJSです。
var Reversi = function() {
var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d') //canvas作製
var column = 8 //盤面横マス数
var row = 8 //盤面縦マス数
var cellWidth = 500 / column
var stoneRadius = (cellWidth * 0.8) / 2 //コマの直径
var board = [];
//ルーチン関数s
var twoDToOneD = function(x,y){
return y * row + x;
};
var oneDToTwoD = function(idx){
return [idx%row,Math.floor(idx/row)];
};
var xyInRange = function(x,y){
if(x < 0 || x >= row) return false;//左端と右端が
if(y < 0 || y >= column) return false;//上端と下端が
if(maskX[i] < 0 || maskX[i] >= row) return false;//左端と右端が
if(maskY[i] < 0 || maskY[i] >= column) return false;//上端と下端が
return true;
};
var coordsToIdx = function(x, y) {
//枠内の座標でクリックしたら枠左上の点を選んたことにする
var j = Math.floor(x / cellWidth)
var i = Math.floor(y / cellWidth)
return twoDToOneD(j,i)//
};
//end ルーチン関数s
var render = function() {
//render 描画する関数
ctx.fillStyle = '#080'
ctx.fillRect(0, 0, cellWidth * row, cellWidth * column)
for (i = 0; i < column + 1; i++) {
var y = i * cellWidth
ctx.beginPath()
ctx.moveTo(0, y)
ctx.lineTo(cellWidth * row, y)
ctx.closePath()
ctx.strokeStyle = '#000'
ctx.stroke()
}
for (i = 0; i < row + 1; i++) {
var x = i * cellWidth
ctx.beginPath()
ctx.moveTo(x, 0)
ctx.lineTo(x, cellWidth * column)
ctx.closePath()
ctx.strokeStyle = '#000'
ctx.stroke()
}
for (i = 0; i < column; i++) {
var y = i * cellWidth
for (j = 0; j < row; j++) {
var x = j * cellWidth
//
/*if ((i + j) % 2 === 0) {
//チェッカーボード
ctx.fillStyle = '#000'
ctx.fillRect(x, y, cellWidth, cellWidth)
}*/
//オセロ本体
var idx = twoDToOneD(j,i);
var stoneColor = board[idx]
if (stoneColor !== 2) {
ctx.beginPath()
ctx.arc(x + cellWidth / 2, y + cellWidth / 2, stoneRadius, 0, 6.28)
ctx.closePath()
ctx.strokeStyle = '#fff'
if (stoneColor === 0) {
ctx.fillStyle = '#000'
} else {
ctx.fillStyle = '#fff'
}
ctx.stroke()
ctx.fill()
}
}
}
}
var init = function() {
//ゲームが終わった時・ゲームを最初に描画する時に最初の盤面を描画するfunction
for (var i = 0; i < column * row; i++) {
/*
0 is black
1 is white
2 is empty
*/
board[i] = 2 //2 is empty
}
//fill the center 4
board[27] = 0
board[28] = 1
board[35] = 1
board[36] = 0
}
init()
render()
this.init = init;
this.render = render;
color = 0;
antiColor = 1;
var maskX = [
-1,
0,
1,
-1,
1,
-1,
0,
1
];
var maskY = [
-1,
-1,
-1,
0,
0,
1,
1,
1,
];
var findFlipped = function(idx){
var xy = oneDToTwoD(idx);
var flipped = [];
for(var i = 0; i < maskX.length; i++){
if(xyInRange(xy[0]+maskX[i],xy[1]+maskY[i])){//if in range
var idx2 = twoDToOneD(xy[0]+maskX[i],xy[1]+maskY[i]);
if(board[idx2] === antiColor){//different color: begin search
//console.log(idx2,board[idx2],antiColor);
var j = 2;
var matches = [idx2];
while(true){
if(xyInRange(xy[0]+maskX[i]*j,xy[1]+maskY[i]*j)){
var idx3 = twoDToOneD(xy[0]+maskX[i]*j,xy[1]+maskY[i]*j)
if(board[idx3] === antiColor){
matches.push(idx3);
}else if(board[idx3] === color){//found match, add pairs
flipped.push(matches);
break;
}
}else{
break;
}
j++;
}
}//else if same color or empty don't search
}//else if not in range don't search
}
return flipped;
};
var changeColor = function(){
var c0 = color;
color = antiColor;
antiColor = c0;
};
var canvasOnclick = function(e) {
//クリックすることで座標の情報を獲得
var x = e.offsetX
var y = e.offsetY
var idx = coordsToIdx(x, y)
if (board[idx] === 2) {
var flipped = findFlipped(idx);
if(flipped.length === 0){
console.log("you can't place there");
return false;
}else{
board[idx] = color;
for(var i = 0; i < flipped.length; i++){
for(var j = 0; j < flipped[i].length; j++){
board[flipped[i][j]] = color;
}
}
render();
changeColor();
if(color === 0){
console.log("Black's turn");
}else{
console.log("White's turn");
}
}
}
}
canvas.addEventListener('click', canvasOnclick.bind(this), false);
}
var reversi = new Reversi()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment