Connect Four

by lgehrig4

HTML

<!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...

CSS

* {
	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:...

JavaScript

//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');     
}