Update index.html

[infrareactive]

<title>Cyber Chess v9.0: Gold Master</title> <style> :root { --neon-cyan: #00ffff; --neon-magenta: #ff00ff; --bg-dark: #0a0a0a; --alert-red: #ff3333; --glass: rgba(255, 255, 255, 0.05); } body { background: #111; color: #eee; font-family: 'Segoe UI', sans-serif; overflow-x: hidden; } #cyberChessSection { background: var(--bg-dark); min-height: 100vh; padding: 2rem 0; } .chess-title { font-size: 2.5rem; font-weight: 800; text-align: center; background: linear-gradient(45deg, var(--neon-cyan), var(--neon-magenta)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 2px; } .scoreboard { display: flex; justify-content: center; gap: 1rem; margin-bottom: 1rem; } .score-box { background: var(--glass); border: 1px solid #333; padding: 0.5rem 1rem; border-radius: 4px; text-align: center; transition: 0.3s; flex: 1; max-width: 150px; } .score-box.active { border-color: currentColor; box-shadow: 0 0 15px currentColor; background: rgba(255,255,255,0.1); } .score-white { color: #fff; } .score-black { color: var(--neon-magenta); } .status-display { text-align: center; font-size: 1rem; color: #888; min-height: 1.5em; margin-bottom: 10px; } .chessboard-container { display: flex; justify-content: center; margin: 1rem 0; } .chessboard { width: clamp(300px, 95vw, 520px); aspect-ratio: 1/1; display: grid; grid-template-columns: repeat(8, 1fr); border: 4px solid var(--neon-cyan); background: #000; box-shadow: 0 0 20px rgba(0, 255, 255, 0.2); } .square { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; } .square.light { background: #2a2a2a; } .square.dark { background: #1a1a1a; } .square.selected { background: rgba(0, 255, 255, 0.3) !important; } .square.last-move { background: rgba(255, 255, 0, 0.15) !important; border: 1px inset rgba(255, 255, 0, 0.3); } .square.valid-move::after { content: ''; position: absolute; width: 12px; height: 12px; background: rgba(0, 255, 0, 0.4); border-radius: 50%; } .piece { font-size: clamp(2rem, 8vw, 3rem); user-select: none; z-index: 2; cursor: grab; } .piece.white { color: #fff; text-shadow: 0 0 8px rgba(255,255,255,0.4); } .piece.black { color: var(--neon-magenta); text-shadow: 0 0 8px rgba(255,0,255,0.4); } .cyber-btn { background: #000; border: 1px solid var(--neon-cyan); color: var(--neon-cyan); padding: 0.4rem 1rem; text-transform: uppercase; cursor: pointer; transition: 0.3s; font-size: 0.8rem; } .cyber-btn:hover { background: var(--neon-cyan); color: #000; box-shadow: 0 0 10px var(--neon-cyan); } </style>

Cyber Chess v9

White: 0

Black: 0

System Ready

Reset Undo AI Mode

<script> const SoundSystem = { ctx: null, init() { if (!this.ctx) this.ctx = new (window.AudioContext || window.webkitAudioContext)(); if(this.ctx.state === 'suspended') this.ctx.resume(); }, play(freq, type='sine', dur=0.1) { this.init(); const osc = this.ctx.createOscillator(); const g = this.ctx.createGain(); osc.type = type; osc.frequency.setValueAtTime(freq, this.ctx.currentTime); g.gain.setValueAtTime(0.1, this.ctx.currentTime); g.gain.exponentialRampToValueAtTime(0.01, this.ctx.currentTime + dur); osc.connect(g); g.connect(this.ctx.destination); osc.start(); osc.stop(this.ctx.currentTime + dur); } }; const game = { board: [], turn: 'W', history: [], mode: 'pvp', lastMove: null, scores: {W:0, B:0}, vals: {P:10, N:30, B:30, R:50, Q:90, K:900}, pst: { P: [[0,0,0,0,0,0,0,0],[5,5,5,5,5,5,5,5],[1,1,2,3,3,2,1,1],[0.5,0.5,1,2.5,2.5,1,0.5,0.5],[0,0,0,2,2,0,0,0],[0.5,-0.5,-1,0,0,-1,-0.5,0.5],[0.5,1,1,-2,-2,1,1,0.5],[0,0,0,0,0,0,0,0]], N: [[-5,-4,-3,-3,-3,-3,-4,-5],[-4,-2,0,0,0,0,-2,-4],[-3,0,1,1.5,1.5,1,0,-3],[-3,0.5,1.5,2,2,1.5,0.5,-3],[-3,0,1.5,2,2,1.5,0,-3],[-3,0.5,1,1.5,1.5,1,0.5,-3],[-4,-2,0,0.5,0.5,0,-2,-4],[-5,-4,-3,-3,-3,-3,-4,-5]] }, syms: {W:{K:'♔',Q:'♕',R:'♖',B:'♗',N:'♘',P:'♙'}, B:{K:'♚',Q:'♛',R:'♜',B:'♝',N:'♞',P:'♟'}}, init() { this.board = [['r','n','b','q','k','b','n','r'],['p','p','p','p','p','p','p','p'],[null,null,null,null,null,null,null,null],[null,null,null,null,null,null,null,null],[null,null,null,null,null,null,null,null],[null,null,null,null,null,null,null,null],['P','P','P','P','P','P','P','P'],['R','N','B','Q','K','B','N','R']]; this.turn = 'W'; this.history = []; this.lastMove = null; this.render(); this.updateUI(); }, evaluate() { let s = 0; for(let r=0; r<8; r++) for(let c=0; c<8; c++) { let p = this.board[r][c]; if(!p) continue; let v = this.vals[p.toUpperCase()] + (this.pst[p.toUpperCase()] ? this.pst[p.toUpperCase()][p === p.toUpperCase() ? r : 7-r][c] : 0); s += (p === p.toUpperCase() ? v : -v); } return s; }, minimax(depth, alpha, beta, isMax) { if(depth === 0) return -this.evaluate(); let moves = this.getAllMoves(isMax ? 'B' : 'W'); if(!moves.length) return isMax ? -1000 : 1000; let best = isMax ? -Infinity : Infinity; for(let m of moves) { let old = this.board[m.to.r][m.to.c]; this.board[m.to.r][m.to.c] = this.board[m.from.r][m.from.c]; this.board[m.from.r][m.from.c] = null; let score = this.minimax(depth-1, alpha, beta, !isMax); this.board[m.from.r][m.from.c] = this.board[m.to.r][m.to.c]; this.board[m.to.r][m.to.c] = old; if(isMax) { best = Math.max(best, score); alpha = Math.max(alpha, best); } else { best = Math.min(best, score); beta = Math.min(beta, best); } if(beta <= alpha) break; } return best; }, triggerAI() { setTimeout(() => { let moves = this.getAllMoves('B'); let bestM = null, bestS = -Infinity; moves.sort(() => Math.random() - 0.5); for(let m of moves) { let old = this.board[m.to.r][m.to.c]; this.board[m.to.r][m.to.c] = this.board[m.from.r][m.from.c]; this.board[m.from.r][m.from.c] = null; let s = this.minimax(2, -Infinity, Infinity, false); this.board[m.from.r][m.from.c] = this.board[m.to.r][m.to.c]; this.board[m.to.r][m.to.c] = old; if(s > bestS) { bestS = s; bestM = m; } } if(bestM) this.move(bestM.from, bestM.to); }, 300); }, getAllMoves(color) { let moves = []; for(let r=0; r<8; r++) for(let c=0; c<8; c++) { let p = this.board[r][c]; if(p && (color==='W' ? p===p.toUpperCase() : p===p.toLowerCase())) { for(let tr=0; tr<8; tr++) for(let tc=0; tc<8; tc++) { if(this.isLegal({r,c}, {r:tr, c:tc})) moves.push({from:{r,c}, to:{r:tr, c:tc}}); } } } return moves; }, isLegal(f, t) { let p = this.board[f.r][f.c]; if(!p) return false; let target = this.board[t.r][t.c]; if(target && (p===p.toUpperCase()) === (target===target.toUpperCase())) return false; let dx = t.c-f.c, dy = t.r-f.r, type = p.toUpperCase(); // Basic movement logic if(type==='P') { let dir = p==='P' ? -1 : 1; if(dx===0 && dy===dir && !target) {} else if(dx===0 && dy===2*dir && f.r===(p==='P'?6:1) && !target && !this.board[f.r+dir][f.c]) {} else if(Math.abs(dx)===1 && dy===dir && target) {} else return false; } else if(type==='R') { if(dx!==0 && dy!==0 || !this.pathClear(f,t)) return false; } else if(type==='B') { if(Math.abs(dx)!==Math.abs(dy) || !this.pathClear(f,t)) return false; } else if(type==='Q') { if((dx!==0 && dy!==0 && Math.abs(dx)!==Math.abs(dy)) || !this.pathClear(f,t)) return false; } else if(type==='N') { if(!(Math.abs(dx)===2 && Math.abs(dy)===1 || Math.abs(dx)===1 && Math.abs(dy)===2)) return false; } else if(type==='K') { if(Math.abs(dx)>1 || Math.abs(dy)>1) return false; } // King Safety let old = this.board[t.r][t.c]; this.board[t.r][t.c] = this.board[f.r][f.c]; this.board[f.r][f.c] = null; let safe = !this.inDanger(p===p.toUpperCase() ? 'W':'B'); this.board[f.r][f.c] = this.board[t.r][t.c]; this.board[t.r][t.c] = old; return safe; }, pathClear(f, t) { let dx = Math.sign(t.c-f.c), dy = Math.sign(t.r-f.r); let c = f.c+dx, r = f.r+dy; while(c!==t.c || r!==t.r) { if(this.board[r][c]) return false; c+=dx; r+=dy; } return true; }, inDanger(color) { let kr, kc; for(let r=0; r<8; r++) for(let c=0; c<8; c++) if(this.board[r][c]===(color==='W'?'K':'k')) { kr=r; kc=c; } for(let r=0; r<8; r++) for(let c=0; c<8; c++) { let p = this.board[r][c]; if(p && (color==='W' ? p===p.toLowerCase() : p===p.toUpperCase())) { // Check if this piece can hit the king (Simplified geometry check) let dx = kc-c, dy = kr-r, type = p.toUpperCase(); let canHit = false; if(type==='P') canHit = (Math.abs(dx)===1 && dy===(p==='P'?-1:1)); else if(type==='R') canHit = (dx===0 || dy===0) && this.pathClear({r,c},{r:kr,c:kc}); else if(type==='B') canHit = (Math.abs(dx)===Math.abs(dy)) && this.pathClear({r,c},{r:kr,c:kc}); else if(type==='Q') canHit = (dx===0 || dy===0 || Math.abs(dx)===Math.abs(dy)) && this.pathClear({r,c},{r:kr,c:kc}); else if(type==='N') canHit = (Math.abs(dx)===2 && Math.abs(dy)===1 || Math.abs(dx)===1 && Math.abs(dy)===2); else if(type==='K') canHit = (Math.abs(dx)<=1 && Math.abs(dy)<=1); if(canHit) return true; } } return false; }, move(f, t) { this.history.push(JSON.stringify(this.board)); let target = this.board[t.r][t.c]; if(target) { this.scores[this.turn] += this.vals[target.toUpperCase()]; SoundSystem.play(200, 'square'); } else SoundSystem.play(400); this.board[t.r][t.c] = this.board[f.r][f.c]; this.board[f.r][f.c] = null; // Promotion if(this.board[t.r][t.c].toUpperCase()==='P' && (t.r===0 || t.r===7)) this.board[t.r][t.c] = this.turn==='W'?'Q':'q'; this.lastMove = {f, t}; this.turn = this.turn==='W' ? 'B' : 'W'; this.render(); this.updateUI(); if(this.mode==='ai' && this.turn==='B') this.triggerAI(); }, render() { const el = document.getElementById('chessboard'); el.innerHTML = ''; for(let r=0; r<8; r++) for(let c=0; c<8; c++) { const sq = document.createElement('div'); sq.className = `square ${(r+c)%2?'dark':'light'}`; if(this.selected && this.selected.r===r && this.selected.c===c) sq.classList.add('selected'); if(this.lastMove && ((this.lastMove.f.r===r && this.lastMove.f.c===c) || (this.lastMove.t.r===r && this.lastMove.t.c===c))) sq.classList.add('last-move'); let p = this.board[r][c]; if(p) { const pEl = document.createElement('div'); pEl.className = `piece ${p===p.toUpperCase()?'white':'black'}`; pEl.textContent = this.syms[p===p.toUpperCase()?'W':'B'][p.toUpperCase()]; sq.appendChild(pEl); } if(this.selected && this.isLegal(this.selected, {r,c})) sq.classList.add('valid-move'); sq.onclick = () => { SoundSystem.init(); if(p && (this.turn==='W' ? p===p.toUpperCase() : p===p.toLowerCase())) { this.selected = {r,c}; this.render(); } else if(this.selected) { if(this.isLegal(this.selected, {r,c})) this.move(this.selected, {r,c}); this.selected = null; this.render(); } }; el.appendChild(sq); } }, updateUI() { document.getElementById('scoreWhite').textContent = `White: ${this.scores.W}`; document.getElementById('scoreBlack').textContent = `Black: ${this.scores.B}`; document.getElementById('statusDisplay').textContent = this.turn==='W' ? "White's Turn" : "Black's Turn (Analyzing...)"; }, setMode(m) { this.mode = m; this.init(); }, undo() { if(this.history.length) { this.board = JSON.parse(this.history.pop()); this.turn = this.turn==='W'?'B':'W'; this.render(); this.updateUI(); } }, reset() { this.init(); } }; game.init(); </script>