Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	Connect 4
ID	5914238829527040
Created	8 years ago, 1494863336917
Updated	8 years ago, 1495003812783
Code	<!DOCTYPE HTML> <html> <head> <title>Connect 4</title> <style> body { background-color: grey; color: white; text-align: center; font-size: 1.8em; } #canvas { margin: auto; background-color: blue; } select { border: solid; cursor: pointer; border-radius: 10px; font-size: 0.9em; } #p1 { background-color: red; } #p2 { background-color: yellow; } input { text-align: center; border: solid; font-size: 0.7em; border-radius: 10px; width: 2em; } :focus { outline: none; } { -webkit-user-select: none; /* Safari / -khtml-user-select: none; / Konqueror HTML / -moz-user-select: none; / Firefox / -ms-user-select: none; / Internet Explorer/Edge / user-select: none; / Non-prefixed version, currently supported by Chrome and Opera / } </style> </head> <body> Max AI <input id="max ai" type="number" value="7" onChange="maxAI();"> Width <input id="width" type="number" value="7" onChange="changeWidth();"> Height <input id="height" type="number" value="6" onChange="changeHeight();"><br> <select id="p1" onClick="p1();"> <option value="Human">Human</option> <option value="1">AI 1</option> <option value="2">AI 2</option> <option value="3">AI 3</option> <option value="4">AI 4</option> <option value="5">AI 5</option> <option value="6">AI 6</option> <option value="7">AI 7</option> </select> <select id="p2" onClick="p2();"> <option value="Human">Human</option> <option value="1">AI 1</option> <option value="2">AI 2</option> <option value="3">AI 3</option> <option value="4">AI 4</option> <option value="5">AI 5</option> <option value="6">AI 6</option> <option value="7">AI 7</option> </select><br> <canvas id="canvas"></canvas> </body> <script> var canvas = document.getElementById("canvas"); canvas.width = 560; canvas.height = 480; var ctx = canvas.getContext("2d"); var game={ width:7, height:6 }; /events/ var mouseIsPressed = false; var mouse = { x: -1, y: 0 }; /useable functions/ ctx.textAlign = "center"; ctx.lineCap = "round"; ctx.lineWidth = 20; var turn = 1, board = []; //returns how many points player 1 or 2 has var win = function(Board, draw) { var max = 0; var on = 0; for (var i = 0; i < game.width; i++) { max = 0; on = 0; for (var j = 0; j < game.height; j++) { if (Board[i][j]) { if (on === Board[i][j]) { max++; if (max >= 4 && on !== 0) { if (draw) { ctx.moveTo(40 + i 80, 40 + j * 80); ctx.lineTo(40 + i * 80, 40 + (j - 3) * 80); ctx.stroke(); } return Board[i][j]; } } else { max = 1; on = Board[i][j]; } } } } for (var j = 0; j < game.height; j++) { max = 0; on = 0; for (var i = 0; i < game.width; i++) { if (Board[i][j]) { if (on === Board[i][j]) { max++; if (max >= 4 && on !== 0) { if (draw) { ctx.moveTo(40 + i * 80, 40 + j * 80); ctx.lineTo(40 + (i - 3) * 80, 40 + j * 80); ctx.stroke(); } return Board[i][j]; } } else { max = 1; on = Board[i][j]; } } else { on = 0; max = 0; } } } for (var i = 0; i < game.width-3; i++) { for (var j = 0; j < game.height-3; j++) { if ( Board[i][j] !== 0 && Board[i][j] === Board[i + 1][j + 1] && Board[i][j] === Board[i + 2][j + 2] && Board[i][j] === Board[i + 3][j + 3] ) { if (draw) { ctx.moveTo(40 + i * 80, 40 + j * 80); ctx.lineTo(40 + (i + 3) * 80, 40 + (j + 3) * 80); ctx.stroke(); } return Board[i][j]; } if ( Board[i + 3][j] !== 0 && Board[i + 3][j] === Board[i + 2][j + 1] && Board[i + 3][j] === Board[i + 1][j + 2] && Board[i + 3][j] === Board[i][j + 3] ) { if (draw) { ctx.moveTo(40 + (i + 3) * 80, 40 + j * 80); ctx.lineTo(40 + i * 80, 40 + (j + 3) * 80); ctx.stroke(); } return Board[i + 3][j]; } } } var dead = 0; for (var i = 0; i < game.width; i++) { if (Board[i][0] !== 0) { dead++; } } if (dead === game.width) { return 3; } return 0; }; //checks if a cordinate is a legal move and returns true or false var lookAtNextMove = function(Board, move, player) { var Move = function(Board, a, player) { if (a !== 0 && !a) { return; } if (Board[a][0] === 0 && a === Math.floor(a)) { var at = game.height-1; while (Board[a][at] !== 0) { at--; } Board[a][at] = player; } }; var newBoard = []; for (var i = 0; i < game.width; i++) { newBoard.push([]); for (var j = 0; j < game.height; j++) { newBoard[i].push(Board[i][j]); } } Move(newBoard, move, player); return newBoard; }; //returns a new board after a given move on a provided board /AI/ var level = [5, 5, 5]; var memory = [-1, -1, -1]; var AI = function(board, player) { if (memory[player] === -1) { memory[player] = [ function(board, player) { var p = 0; var o = 0; var max = 0; var on = 0; var sav = 0; for (var i = 0; i < game.width; i++) { max = 0; on = 0; for (var j = 0; j < game.height; j++) { if (board[i][j]) { j += game.height; } } j -= game.height; if (j) { j--; var scr = 0; var cur = board[i][j]; while (board[i][j] === cur) { j++; scr++; } if (cur === player) { p += scr; } else { o += scr; } } } for (var j = 0; j < game.height; j++) { max = 0; on = 0; sav = 0; for (var i = 0; i < game.width; i++) { if (board[i][j]) { if (on === board[i][j]) { max++; if (max >= 4 && on !== 0) { if (on === player) { p += 2 + sav; } else { o += 2 + sav; } sav = 0; } sav++; } else { if (on === 0) { on = board[i][j]; max++; } else { max = 1; on = board[i][j]; } } } else { max++; if (on === 0) { sav++; } else { if (max >= 4) { if (on === player) { p += 2 + sav; } else { o += 2 + sav; } sav = 0; } } } } } for (var i = 0; i < game.width-3; i++) { for (var j = 0; j < game.height-3; j++) { sav = 0; on = 0; max = true; for (var k = 0; k < 4; k++) { if (board[i + k][j + k]) { sav++; if (on === 0) { on = board[i + k][j + k]; } else if (on !== board[i + k][j + k]) { max = false; } } } if (max) { if (on === player) { p += sav; } else { o += sav; } } sav = 0; on = 0; max = true; for (var k = 0; k < 4; k++) { if (board[i + 3 - k][j + k]) { sav++; if (on === 0) { on = board[i + 3 - k][j + k]; } else if (on !== board[i + 3 - k][j + k]) { max = false; } } } if (max) { if (on === player) { p += sav; } else { o += sav; } } } } return p - o; }, function(on) { if (!Array.isArray(on) \|\| on.length !== 5) { while ( !Array.isArray(memory[player][2][memory[player][3]]) \|\| memory[player][2][memory[player][3]].length !== 5 ) { if (memory[player][3] <= 0) { return "DONE"; } memory[player][3]--; } return; } if (on[4] === -1) { var W = win(on[0]); if (W) { if (W === player) { if (on[1] !== player && on[2] > 1) { memory[player][2][memory[player][3]] = 100; while ( !Array.isArray( memory[player][2][memory[player][2].length - 1] ) ) { memory[player][2].pop(); } memory[player][3] = memory[player][2].length - 1; } memory[player][2][memory[player][3]] = 100 + 1 / on[2]; memory[player][3]--; return; } if (on[1] === player && on[2] > 1) { memory[player][2][memory[player][3]] = -100; while ( !Array.isArray(memory[player][2][memory[player][2].length - 1]) ) { memory[player][2].pop(); } memory[player][3] = memory[player][2].length - 1; } memory[player][2][memory[player][3]] = -100 - 1 / on[2]; memory[player][3]--; return; } if (on[2] >= on[3]) { memory[player][2][memory[player][3]] = memory[player][0]( on[0], player ); memory[player][3]--; return; } } if (on[4] < 0) { if (on[0][-on[4] - 1][0] === 0) { memory[player][2].push([ lookAtNextMove(on[0], -on[4] - 1, on[1]), -(on[1] - 3), on[2] + 1, on[3], -1 ]); } else { memory[player][2].push("N/A"); memory[player][2][memory[player][3]][4]--; if (memory[player][2][memory[player][3]][4] <= -game.width-1) { memory[player][2][memory[player][3]][4] = 0; } return; } memory[player][2][memory[player][3]][4]--; if (memory[player][2][memory[player][3]][4] <= -game.width-1) { memory[player][2][memory[player][3]][4] = 0; } memory[player][3] = memory[player][2].length - 1; return; } else { var best = [-Infinity, game.width-1]; if (on[1] === player) { for (var i = game.width; i > 0; i--) { if (on[0][i - 1][0] === 0) { var score = memory[player][2][memory[player][3] + i]; if (score > best[0]) { best = [score, i]; } } memory[player][2].pop(); } } else { best = [Infinity, game.width-1]; for (var i = game.width; i > 0; i--) { if (on[0][i - 1][0] === 0) { var score = memory[player][2][memory[player][3] + i]; if (score < best[0]) { best = [score, i]; } } memory[player][2].pop(); } } if (on[2] === 0) { memory[player][2][memory[player][3]] = best[1] - 1; return "DONE"; } if (best[0] === 100 && on[1] !== player && on[2] > 1) { memory[player][2][memory[player][3]] = 100; while ( !Array.isArray(memory[player][2][memory[player][2].length - 1]) ) { memory[player][2].pop(); } memory[player][3] = memory[player][2].length - 1; } else if (best[0] === -100 && on[1] === player && on[2] > 1) { memory[player][2][memory[player][3]] = -100; while ( !Array.isArray(memory[player][2][memory[player][2].length - 1]) ) { memory[player][2].pop(); } memory[player][3] = memory[player][2].length - 1; } memory[player][2][memory[player][3]] = best[0]; memory[player][3]--; return; } }, -1, 0 ]; } if (memory[player][2] === -1) { memory[player][2] = [[board, player, 0, level[player], -1]]; memory[player][3] = 0; } for (var i = 1000; i > 0; i--) { if (memory[player][1](memory[player][2][memory[player][3]]) === "DONE") { i = 0; } } if (memory[player][2].length === 1) { if (!Array.isArray(memory[player][2][0])) { var ans = memory[player][2][0]; memory[player][2] = -1; return ans; } } }; var okay = true; var human = function(board, player) { ctx.fillStyle = "rgba(220,220,0,0.5)"; if (player === 1) { ctx.fillStyle = "rgba(255,0,0,0.5)"; } canvas.style.cursor = "pointer"; var at = game.height-1; while (Math.floor(mouse.x / 80)>=0&&board[Math.floor(mouse.x / 80)][at] !== 0 && at >= 0) { at--; } ctx.beginPath(); ctx.arc(Math.floor(mouse.x / 80) * 80 + 40, at * 80 + 40, 35, 0, Math.PI * 2); ctx.fill(); if (mouseIsPressed && okay) { okay = false; return Math.floor(mouse.x / 80); } }; /players/ var Red = [human, "You"]; //AI,name var Yellow = [human, "You"]; //AI,name /varriables/ for (var i = 0; i < game.width; i++) { board.push([]); for (var j = 0; j < game.height; j++) { board[i].push(0); } } /functions/ var move = function(a) { if (a !== 0 && !a) { return; } if (a>=0&&board[a][0] === 0 && a === Math.floor(a)) { var at = game.height-1; while (board[a][at] !== 0) { at--; } board[a][at] = turn; turn++; if (turn > 2) { turn = 1; } } }; var clear = function() { memory = [-1, -1, -1]; board = []; for (var i = 0; i <= game.width; i++) { board.push([]); for (var j = 0; j <= game.height; j++) { board[i].push(0); } } turn = 1; ctx.textAlign = "center"; ctx.lineCap = "round"; ctx.lineWidth = 20; }; /draw/ var draw = function() { canvas.style.cursor = "wait"; /board/ ctx.noStroke = true; ctx.textSize = 35; ctx.fillStyle = "rgb(0,122,255)"; ctx.fillRect(0, 0, game.width80, game.height80); for (var i = 0; i < game.width; i++) { for (var j = 0; j < game.height; j++) { ctx.fillStyle = "rgb(255,255,255)"; ctx.strokeStyle = "rgba(0,0,0,0)"; ctx.beginPath(); ctx.arc(40 + i * 80, 40 + j * 80, 35, 0, Math.PI * 2); if (board[i][j] === 1) { ctx.fillStyle = "rgb(255,0,0)"; } if (board[i][j] === 2) { ctx.fillStyle = "rgb(220,220,0)"; } ctx.fill(); } } /play/ ctx.strokeStyle = "rgb(0,200,50)"; ctx.beginPath(); if (win(board, true)) { canvas.style.cursor = "pointer"; ctx.fillStyle = "rgba(0,0,0,0.5)"; ctx.fillRect(0, game.height40-30, game.width80, 60); var winner = Red[1]; ctx.fillStyle = "rgb(255,0,0)"; if (win(board) === 2) { ctx.fillStyle = "rgb(220,220,0)"; winner = Yellow[1]; } else if (win(board) === 3) { ctx.fillStyle = "rgb(50,180,200)"; winner = "Nobody"; } ctx.font = "40px Arial"; ctx.fillText(winner + " won!", game.width40, game.height40+10); } else { var temp = []; for (var i = 0; i < board.length; i++) { temp.push([]); for (var j = 0; j < board[i].length; j++) { temp[i].push(board[i][j]); } } if (turn === 1) { move(Red[0](temp, 1)); } else { move(Yellow[0](temp, 2)); } } }; /events/ function getMousePos(canvas, evt) { var rect = canvas.getBoundingClientRect(); return { x: evt.clientX - rect.left, y: evt.clientY - rect.top }; } canvas.addEventListener( "mousemove", function(evt) { mouse = getMousePos(canvas, evt); }, false ); canvas.addEventListener( "mousedown", function() { mouseIsPressed = true; okay = true; if (win(board)) { okay = false; clear(); } }, false ); canvas.addEventListener( "mouseup", function() { mouseIsPressed = false; }, false ); canvas.addEventListener( "mouseout", function() { mouse = { x: -1, y: 0 }; }, false ); var P1 = document.getElementById("p1"); var P2 = document.getElementById("p2"); var maxai=document.getElementById("max ai"); function p1() { clear(); var v = P1.value; if (v === "Human") { Red = [human, "You"]; } else { Red = [AI, "The AI"]; level[1] = eval(v) + 2; } } function p2() { clear(); var v = P2.value; if (v === "Human") { Yellow = [human, "You"]; } else { Yellow = [AI, "The AI"]; level[2] = eval(v) + 2; } } P2.value="4"; p2(); var Wth=document.getElementById("width"); var Hht=document.getElementById("height"); function changeWidth(){ if(Wth.value<4){Wth.value=4;} canvas.width=Math.floor(Wth.value)80; game.width=Math.floor(Wth.value); clear(); } function changeHeight(){ if(Hht.value<2){Hht.value=2;} canvas.height=Math.floor(Hht.value)80; game.height=Math.floor(Hht.value); clear(); } function maxAI(){ var temp="<option value=\"Human\">Human</option>"; for(var i=1;i<=maxai.value;i++){ temp+="<option value=\""+i+"\">AI "+i+"</option>"; } var temp2=["Human","Human"]; if(P1.value!=="Human"&&eval(P1.value)<=maxai.value){ temp2[0]=P1.value; } if(P2.value!=="Human"&&eval(P2.value)<=maxai.value){ temp2[1]=P2.value; } P1.innerHTML=temp; P2.innerHTML=temp; P1.value=temp2[0]; P2.value=temp2[1]; p1(); p2(); }; setInterval(draw,0); </script> </html>
Folds	4,57,59,84,85,717
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgLTEgN_ACgw
Votes	228
Spin-Offs	56
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Saffron
Author Name	Efhiii
Author ID	kaid_673263829029683148315313
Author Profile Access	COACH

Archive Data

Added	10 months ago, 1739450755654
Updated	10 months ago, 1739450763067
Source Deleted	unknown