cringe-studios.com/meeemster/chess/chess.js

168 lines
4.1 KiB
JavaScript
Raw Permalink Normal View History

2022-11-04 16:30:10 +01:00
// Constants
let PAWN = "pawn";
let KING = "king";
let TEXTURES = {
pawn: {w: "amoguspawnw.png", b: "amoguspawnb.png"},
king: {w: "amoguskingw.png", b: "amoguskingb.png"}
}
let board;
let chessfields = [];
let draggedPiece;
function getPiece(element) {
let field = parseInt(element.getAttribute("data-field"));
let x = field % 8;
let y = Math.floor(field / 8);
let pieceBlack = element.getAttribute("data-pieceBlack") == "true";
let type = element.getAttribute("data-pieceType");
return {
type: type,
field: field,
x: x,
y: y,
black: pieceBlack
}
}
function getPieceAt(x, y) {
let field = y * 8 + x;
if(field < 0 || field > 63) return null;
let fieldEl = chessfields[field];
return fieldEl.children.length == 0 ? null : getPiece(fieldEl.children[0]);
}
function startGame() {
for(let i = 0; i < 64; i++) {
let field = document.createElement("div");
let x = i % 8;
let y = Math.floor(i / 8);
if(x % 2 == 0 ^ y % 2 == 0) {
field.classList.add("black");
}else {
field.classList.add("white");
}
field.ondragover = function(e) {
let piece = draggedPiece;
if(piece == null || piece == "") return;
let thePiece = document.getElementById(piece);
let pieceObj = getPiece(thePiece);
let pieceOnField = field.children.length != 0;
switch(pieceObj.type) {
case KING:
if(Math.abs(x - pieceObj.x) > 1) return;
if(Math.abs(y - pieceObj.y) > 1) return;
for(let dx = -1; dx <= 1; dx++) {
for(let dy = -1; dy <= 1; dy++) {
let p = getPieceAt(x + dx, y + dy);
if(p != null && p.type == KING && p.black != pieceObj.black) return;
}
}
break;
case PAWN:
if(Math.abs(x - pieceObj.x) > 1) return;
if((x - pieceObj.x == 0) == pieceOnField) return;
if(y - pieceObj.y != (pieceObj.black ? 1 : -1)) return;
break;
}
if(pieceOnField){
let otherPieceObj = getPiece(field.children[0]);
if(pieceObj.black != otherPieceObj.black) {
field.style.backgroundColor = "red";
e.preventDefault();
return;
}
return;
}
field.style.backgroundColor = "green";
e.preventDefault();
}
field.ondragleave = function(e) {
field.style.backgroundColor = null;
}
field.ondrop = function(e) {
e.preventDefault();
let piece = draggedPiece;
if(piece == null || piece == "") return;
field.style.backgroundColor = null;
let thePiece = document.getElementById(piece);
thePiece.setAttribute("data-field", i);
if(field.children.length != 0) field.children[0].remove();
field.appendChild(thePiece);
}
board.appendChild(field);
chessfields.push(field);
}
let pieces = [
{type: PAWN, black: true},
{type: PAWN, black: false},
{type: KING, black: true},
{type: KING, black: false}
];
for(let p of pieces) {
let field;
outer: while(true) {
field = Math.floor(Math.random() * 64);
let x = field % 8;
let y = Math.floor(field / 8);
if(p.type == PAWN && (p.black ? y == 0 : y == 7)) continue;
if(chessfields[field].children.length != 0) continue;
for(let dx = -1; dx <= 1; dx++) {
for(let dy = -1; dy <= 1; dy++) {
let pc = getPieceAt(x + dx, y + dy);
if(pc != null && pc.type == KING && pc.black != p.black) continue outer;
}
}
break;
}
let thePiece = document.createElement("img");
thePiece.id = "cringe" + Math.random();
thePiece.setAttribute("draggable", true);
thePiece.src = TEXTURES[p.type][p.black ? "b" : "w"];
thePiece.setAttribute("data-pieceType", p.type);
thePiece.setAttribute("data-pieceBlack", p.black);
thePiece.setAttribute("data-field", field);
chessfields[field].appendChild(thePiece);
thePiece.ondragstart = function(e) {
draggedPiece = thePiece.id;
};
}
}
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {templateUrl: "chess.html"})
.when("/one", {templateUrl: "one.html"})
.when("/two", {templateUrl: "two.html"})
});
app.controller('ChessController', ['$scope', function($scope) {
board = document.getElementById("chessboard");
chessfields = [];
startGame();
}]);
app.controller('OneController', ['$scope', function($scope) {
$("p").click(function() {
$(this).slideUp();
});
}]);