Connect four game logic

connect 4
connect 4 ai algorithm
connect 4 strategy
connect four rules
connect 4 openings
connect 4 game theory
connect 4 app
connect 4 imessage cheat

Building a connect four game as my first js project. My game has a background photo of a Connect Four game board and an HTML table on top to hold the tokens. The tokens are images that I will drag onto the board.

So far I have the code(below) which allows me to drag the tokens onto the game board.

var dragYellow = document.getElementById('yellowToken1');
var dragRed = document.getElementById('redToken1');
var dropLoc = [];

function locOnDrop(e) {                 
	e.preventDefault();            
	e.currentTarget.appendChild(        
		document.createElement('img')
	).src = document.getElementById(    
		e.dataTransfer.getData('key')  
	).src;
}

gameGrid = [ [1, 2, 3, 4, 5, 6, 7],                         
			       [8, 9, 10, 11, 12, 13, 14],
			       [15, 16, 17, 18, 19, 20, 21],
			       [22, 23, 24, 25, 26, 27, 28],
			       [29, 30, 31, 32, 33, 34, 35],
			       [36, 37, 38, 39, 40, 41, 42],
			       ];

for(var i = 0; i < gameGrid.length; i++){           
     for(var j = 0; j < gameGrid[i].length; j++){        

	    dropLoc[gameGrid[i][j]] = document.getElementById(gameGrid[i][j].toString());
	    dropLoc[gameGrid[i][j]].ondrop = locOnDrop;          
	                                                             
	    dropLoc[gameGrid[i][j]].ondragover = function(e) {       
	        e.preventDefault();
    	}
	}
}

Connect four game logic, The way you communicate is by making sure (like the answer mentioned) that your table is only JUST a visual representation of your data� Like tic tac toe, this game is played against an opponent. To be successful, you have to constantly plan ahead and revise your strategy! Four in a Row - Learning Connections

While you could do something to figure out the position of a given cell in the row, and the position of the row in the table (for example, when you click a TD or the like), the simplest way is probably to actually build the data into the table.

For example, if your HTML table looks like:

<tr data-row='1'><td data-column='1'>&nbsp;</td><!-- rest of the cells --></tr>

It becomes pretty trivial to use jquery or similar to find the right position that maps to the array info. For that matter, if each cell has a unique number (as your sample suggests) you could even just have each TD have that info stored as data-position="12" or the like and make the query even easier.

In jquery you could just use $('td[data-position=12]') to grab the element directly.

Connect Four, Connect Four. // Set up board and variables. // Fill the board with empty characters. // Game loop. // Show board. // Ask player for move. // Try the move. This is the classic strategy game of Connect Four. In this game you and the computer take turns to put down coloured pegs, once the peg of a colour forms a line of 4, the game is won. The smaller the number of pegs used when the computer is beaten, the higher the score.

per @Alireza Fattahi request

https://jsfiddle.net/lgehrig4/thg468ex/

what my code accomplishes so far 1. visuals (background, gameboard, tokens) 2. Grab player names(2 player only. Not against the computer) 3. Randomly picks a player to start 4. Can drag and drop tokens onto the board

//SETUP
var button = document.getElementById("setStart");
var gameActive = false;


//GRAB PLAYER NAMES / CHOOSE FIRST MOVE /RESET BOARD
function setStart() {

	if (gameActive == false) {
		playerOne = prompt("Player One(yellow) please enter your name");
		playerTwo = prompt("Player Two(red) please enter your name");
		document.getElementById("yellowPlayer").innerHTML = playerOne;
		document.getElementById("redPlayer").innerHTML = playerTwo;
		gameActive = true;
	}
	players = [playerOne, playerTwo];

	if (gameActive == true) {
        first = Math.floor(Math.random() * 2);
        alert(players[first] + " you go first");
	}
}

//MOVE TOKENS TO BOARD

var dragYellow = document.getElementById('yellowToken1');
var dragRed = document.getElementById('redToken1');
var dropLoc = [];

function locOnDrop(e) {                 
	e.preventDefault();            
	e.currentTarget.appendChild(        
		document.createElement('img')
	).src = document.getElementById(    
		e.dataTransfer.getData('key')  
	).src;
}

gameGrid = [ [1, 2, 3, 4, 5, 6, 7],                            
			       [8, 9, 10, 11, 12, 13, 14],
			       [15, 16, 17, 18, 19, 20, 21],
			       [22, 23, 24, 25, 26, 27, 28],
			       [29, 30, 31, 32, 33, 34, 35],
			       [36, 37, 38, 39, 40, 41, 42],
			       ];

for(var i = 0; i < gameGrid.length; i++){          
     for(var j = 0; j < gameGrid[i].length; j++){       

	    dropLoc[gameGrid[i][j]] = document.getElementById(gameGrid[i][j].toString());
	    dropLoc[gameGrid[i][j]].ondrop = locOnDrop;         
	                                            
	    dropLoc[gameGrid[i][j]].ondragover = function(e) {      
	        e.preventDefault();
    	}
	}
}

dragYellow.ondragstart = function(evt) {              
    evt.dataTransfer.setData('key', 'yellowToken1');  

dragRed.ondragstart = function(evt) {                 
    evt.dataTransfer.setData('key', 'redToken1');     
}
* {
	margin: 0;
	padding: 0;
}

body {
	background: url("img/table.jpg") no-repeat;
	background-size: cover;
	background-position: bottom;
}

#game {
	background: url("img/background1.png");
	position: relative;
	width: 700px;
	height: 700px;
	margin-left: 260px;
	margin-top: 120px;
	/*z-index: -1;*/
}

table {
	position: absolute;
	right: 117px;
	top: 120px;
	border-spacing: 0px;
	z-index: 2;
}

td {
	width: 66px;
	height: 59px;
	text-align: center;
}

#yellow {
	position: absolute;
	width: 50px;
	height: 50px;
	left: 220px;
	top: 520px;
	z-index: 3;
}

#red {
	position: absolute;
	width: 130px;
	height: 50px;
	left: 341px;
	top: 520px;
	z-index: 3;
}

.image {
    position: relative;
    width: 50px;
    height: 50px;
}

button {
	position: relative;
	width: 200px;
	height: 50px;
	left: 1100px;
	top: 700px;
	border: 2px solid black;
	border-radius: 15px;
	background-color: green;
	color: white;
	font-family: monospace;
	font-weight: bold;
	font-size: 2em;
	text-transform: uppercase;
}

button:hover {
  background-color: lightgreen;
  color: black;
}

/*player one div*/
#playerOne {
	position: relative;
	width: 165px;
	height: 110px;
	left: 1120px;
	top: 475px;
}

/*player two div*/
#playerTwo {
	position: relative;
	width: 165px;
	height: 110px;
	left: 1120px;
	top: 510px;
}

/*player one name*/
#yellowPlayer {
	width: 160px;
	height: 25px;
	background-color: yellow;
	border: 2px solid black;
	border-radius: 15px;
	text-align: center;
	text-transform: uppercase;
	font-family: monospace;
	font-size: 15px;
}

/*player two name*/
#redPlayer {
	width: 160px;
	height: 25px;
	background-color: red;
	border: 2px solid black;
	border-radius: 15px;
	text-align: center;
	text-transform: uppercase;
	font-family: monospace;
	font-size: 15px;
}

h3	{
	text-align: center;
}

#playerOneWins {
	width: 50px;
	height: 50px;
	border: 2px solid black;
	border-radius: 50px;
	margin: auto;
}

#playerTwoWins {
	width: 50px;
	height: 50px;
	border: 2px solid black;
	border-radius: 50px;
	margin: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Connect Four</title>
	<link rel="stylesheet" type="text/css" href="connect.css">
</head>
<body>

	<!-- Banner -->
	<div id="banner">

	</div>

	<!-- Player One's name and score -->
	<div id="playerOne">
		<div id="yellowPlayer"></div>
		<!-- <input id="yellowPlayer" type="text" name="playerOneName" maxlength="15" value="Player One Name"> -->
		<h3>WINS</h3>
		<div id="playerOneWins">

		</div>
	</div>

	<!-- Player Two's name and score -->
	<div id="playerTwo">
		<div id="redPlayer"></div>
		<!-- <input id="redPlayer" type="text" name="playerTwoName" maxlength="15" value="Player Two Name"> -->
		<h3>WINS</h3>
		<div id="playerTwoWins">

		</div>
	</div>

	<!-- New Game /  -->
	<button id="btn" onclick="setStart()">New Game</button>


	<!--Main Board  -->
	<div id="game">
		<table id="gameBoard">
			<tr id="row1">
				<td id="1"></td>
				<td id="2"></td>
				<td id="3"></td>
				<td id="4"></td>
				<td id="5"></td>
				<td id="6"></td>
				<td id="7"></td>
			</tr>
			<tr id="row2">
				<td id="8"></td>
				<td id="9"></td>
				<td id="10"></td>
				<td id="11"></td>
				<td id="12"></td>
				<td id="13"></td>
				<td id="14"></td>
			</tr>
			<tr id="row3">
				<td id="15"></td>
				<td id="16"></td>
				<td id="17"></td>
				<td id="18"></td>
				<td id="19"></td>
				<td id="20"></td>
				<td id="21"></td>
			</tr>
			<tr id="row4">
				<td id="22"></td>
				<td id="23"></td>
				<td id="24"></td>
				<td id="25"></td>
				<td id="26"></td>
				<td id="27"></td>
				<td id="28"></td>
			</tr>
			<tr id="row5">
				<td id="29"></td>
				<td id="30"></td>
				<td id="31"></td>
				<td id="32"></td>
				<td id="33"></td>
				<td id="34"></td>
				<td id="35"></td>
			</tr>
			<tr id="row6">
				<td id="36"></td>
				<td id="37"></td>
				<td id="38"></td>
				<td id="39"></td>
				<td id="40"></td>
				<td id="41"></td>
				<td id="42"></td>
			</tr>
		</table>

		<!-- Mouse Down / Mouse Up event -->
		<div id="yellow">
			<img src="img/yellow.png" id="yellowToken1" class="image" draggable="true">
		</div>
		<div id="red">
			<img src="img/red.png" id="redToken1" class="image" draggable="true" >
		</div>
	</div>

	<!-- ondrop="dragDrop(event)" ondragover="allowDrop(event)" -->





<script src="connect.js"></script>

</body>
</html>

[PDF] Connect Four, None of the parts of the algorithms discussed so far are specific to connect 4. Any two player game with alternating moves and terminal wins and losses can be� Connect 4 is a free two-player strategy game in which players have to form a line of four disks of one color. Play our online version of the popular connection game by Silvergames.com. Place colored disks on the files until you successfully set 4 in the same row. The row can be horizontal, vertical or diagonal.

Connect 4 AI: How it Works, Add computer AI logic to face a challenging opponent (assuming this is feasible to implement at my current skill level). ConnectFour.java: import� Drop the discs into the slots, and connect 4 to score! This classic two-player game lets you compete against a friend or the computer. Your goal is to form a line of four matching pieces. Play as the red or yellow team!

Basic Connect Four game, Connect Four (or Four-in-a-line) is a two-player strategy game played on a 7- column by 6-row board. Each player has a color and drops� In our experiment, we remake the game Connect Four using a CPU made in our CPE 233 class. Throughout the first seven weeks of the quarter, we strive to create this CPU written in VHDL using a program called Vivado. The specific CPU we created is shown in the image attached.

Part 1 – Introduction, Connect Four is a popular two-player connection game in which the players first choose a color and then take turns dropping one colored disc� Giant Wooden 4 in A Row – Four Connect Board Game Set in White – Ideal Family Game for Kids &Adults – Outdoor Indoor Game for Backyard,Lawn,Parties,Bar Game (2 FT) 4.4 out of 5 stars 36 $64.99 $ 64 . 99

Comments
  • Could you give us a complete working example?
  • not sure how I would do that. The background , gameboard and token images are saved on my computer. I can post the HTML and CSS files as well if that helps?
  • here's the HTML
  • @JeffS to get best answer here try to add your code at jsfiddle.net or codepen.io. Then link your code here. As your project is html + js + css you will have no problem. People can help you much more when they can see and run your code
  • Edit your question and add the html there instead of sending an answer