Initial commit.

gameScripts.js

@@ -0,0 +1,325 @@
+var selected = null, x_pos = 0, y_pos = 0, x_elem = 0, y_elem = 0;
+var locationCount=1;
+var isMute = false;
+var isPaused = false;
+var kingAudio = new Audio('King.mp3');
+var knockAudio = new Audio('Knock.mp3');
+var matchAudio = new Audio('match.mp3');
+var arrSquares;
+var gameOver;
+
+function newGame()
+{
+    gameOver = false;
+    drawBoard();
+    fillBoard();
+    makePiecesDraggable();
+    makeMouseUpDetectable();
+}
+
+function drawBoard()
+{
+    var c = document.getElementById("myCanvas");
+    var ctx = c.getContext("2d");
+    ctx.fillStyle = "#FF0000";
+    ctx.fillRect(0,0,800,800);
+    for(var i=0;i<=800;i+=200)
+    {
+        for(var w=100;w<=800;w+=200)
+        {
+            ctx.fillStyle = "#000000";
+            ctx.fillRect(i,w,100,100);
+        }
+    }
+    for(var i=100;i<=800;i+=200)
+    {
+        for(var w=0;w<=800;w+=200)
+        {
+            ctx.fillStyle = "#000000";
+            ctx.fillRect(i,w,100,100);
+        }
+    }
+    
+    ctx.strokeStyle = "#98999A";
+    for(var i=100;i<=800;i+=100)
+    {
+        ctx.moveTo(i,0);
+        ctx.lineTo(i,800);
+        ctx.stroke();
+    }
+    for(var i=100;i<=800;i+=100)
+    {
+        ctx.moveTo(0,i);
+        ctx.lineTo(800,i);
+        ctx.stroke();
+    }
+}
+
+function fillBoard()
+{
+    loadArray();
+    var filler = "";
+    
+    for(var i=0; i<8; i++)
+    {
+        for(var w=0; w<8; w++)
+        {
+            filler +="<div id='"+i+"a"+w+"' class='inline icon empty'></div>"
+        }
+        filler+="<br>";
+    }
+    document.getElementById("iconHolder").innerHTML = filler;
+    changePieces();
+}
+
+function loadArray()
+{
+    arrSquares = new Array(8);
+    for(i = 0; i<8; i++)
+    {
+        arrSquares[i] = new Array(8);
+    }
+    for(row = 0; row <8; row++)
+    {
+       for(col = 0; col <8; col++)
+       {
+            arrSquares[row][col] = {rowNumber:row, colNumber:col, type:'empty'};
+       }
+    }
+}
+
+function changePieces()
+{
+    for(var i=0; i<8; i++)
+    {
+        for(var w=0; w<8; w++)
+        {
+            if(((i+w)%2==0))
+            {
+                if(i<3)
+                {
+                    document.getElementById((i+'a'+w)).className='inline icon red';
+                    arrSquares[i][w].type='red';
+                }
+                else if(i>4)
+                {
+                    document.getElementById((i+'a'+w)).className='inline icon black';
+                    arrSquares[i][w].type='black';
+                }
+            }
+        }
+    }
+}
+function makePiecesDraggable()
+{
+    for(var i=0; i<8; i++)
+    {
+        for(var w=0; w<8; w++)
+        {
+            document.getElementById(i+'a'+w).onmousedown = function () 
+            {
+                _drag_init(this);
+                return false;
+            };
+        }
+    }
+    document.onmousemove = _move_elem;
+    document.onmouseup = _destroy;
+}
+
+function makeMouseUpDetectable()
+{
+    for(var i=0; i<8; i++)
+    {
+        for(var w=0; w<8; w++)
+        {
+            $('#'+i+'a'+w).click(function(e) {
+              var offset = $('#myCanvas').offset();
+              var relativeX = (e.pageX - offset.left);
+              var relativeY = (e.pageY - offset.top);
+              movePiece(this.id, relativeX, relativeY);
+            });
+        }
+    }
+}
+function movePiece(idName, XCoor, YCoor)
+{
+    if(!gameOver)
+    {
+        var fromRow= parseInt(idName.substring(0,1));
+        var fromCol= parseInt(idName.substring(2,3));
+        var toCoorString = determineSquare(XCoor,YCoor);
+        var toRow = parseInt(toCoorString.substring(2,3));
+        var toCol = parseInt(toCoorString.substring(0,1));
+        var avRow = Math.floor((toRow+fromRow)/2);
+        var avCol = Math.floor((toCol+fromCol)/2);
+        var avType = arrSquares[avRow][avCol].type;
+        var fromType =arrSquares[fromRow][fromCol].type;
+        
+        if(((arrSquares[fromRow][fromCol].type)!='empty')&&(arrSquares[toRow][toCol].type=='empty') && (((toCol+toRow)%2)==0))
+        {
+            if((Math.abs(toRow-fromRow)<2)&&(Math.abs(toCol-fromCol)<2))
+            {
+                if(!(((fromType=='red')&&(toRow<fromRow))||((fromType=='black')&&(toRow>fromRow))))
+                {
+                    arrSquares[toRow][toCol].type = arrSquares[fromRow][fromCol].type;
+                    arrSquares[fromRow][fromCol].type = 'empty';
+                    playSound('Knock');
+                }
+            }
+            else if((Math.abs(toRow-fromRow)<3)&&(Math.abs(toCol-fromCol)<3)&&((avType=='red')||(avType=='redK')||(avType=='black')||(avType=='blackK')))
+            {   
+                if(fromType=='black'||fromType=='blackK')
+                {
+                    if(avType=='red'||avType=='redK')
+                    {
+                        arrSquares[avRow][avCol].type='empty';
+                    }
+                    arrSquares[toRow][toCol].type = arrSquares[fromRow][fromCol].type;
+                    arrSquares[fromRow][fromCol].type = 'empty';
+                    playSound('Knock');
+                }
+                else
+                {
+                   if(avType=='black'||avType=='blackK')
+                    {
+                        arrSquares[avRow][avCol].type='empty';
+                    } 
+                    arrSquares[toRow][toCol].type = arrSquares[fromRow][fromCol].type;
+                    arrSquares[fromRow][fromCol].type = 'empty';
+                    playSound('Knock');
+                }
+            }
+        }
+        checkKing();
+        replacePieces();
+        checkWin();
+    }
+    else
+    {
+        replacePieces();
+    }
+}
+
+function determineSquare(XCoor, YCoor)
+{
+    
+    return ((Math.floor(XCoor/100))+'a'+Math.floor(YCoor/100));
+}
+
+function checkKing()
+{
+    for(var w=0;w<8;w++)
+    {
+        if(arrSquares[7][w].type=='red')
+        {
+            arrSquares[7][w].type='redK';
+            playSound('King');
+        }
+        if(arrSquares[0][w].type=='black')
+        {
+            arrSquares[0][w].type='blackK';
+            playSound('King');
+        }
+    }
+}
+
+function replacePieces()
+{
+    for(var i=0; i<8; i++)
+    {
+        for(var w=0; w<8; w++)
+        {
+            document.getElementById(i+'a'+w).className="inline icon " +arrSquares[i][w].type;
+        }
+    }
+}
+function checkWin()
+{
+    var redCount=0;
+    var blackCount=0;
+    for(var i=0; i<8; i++)
+    {
+        for(var w=0; w<8; w++)
+        {
+            var type = arrSquares[i][w].type;
+            if((type=='red')||(type=='redK'))
+            {
+                redCount++;
+            }
+            if((type=='black')||(type=='blackK'))
+            {
+                blackCount++;
+            }
+        }
+    }
+    if(redCount<1)
+    {
+        alert("BLACK WINS!!!");
+        gameOver = true;
+    }
+    else if(blackCount<1)
+    {
+        alert("RED WINS!!!");
+        gameOver = true;
+    }
+}
+
+function mute()
+{
+    var holder = document.getElementById("soundHolder");
+    if(isMute)
+    {
+       holder.style.backgroundPosition = "0px 0px";
+    }
+    else
+    {
+       holder.style.backgroundPosition = "60px 0px";
+    }
+    isMute = !isMute;
+    playSound("match");
+}
+
+function playSound(soundType)
+{
+    if(!isMute)
+    {
+        if(soundType == "match")
+        {
+            matchAudio.play();
+        }
+        else if(soundType == 'Knock')
+        {
+           knockAudio.play(); 
+        }
+        else if(soundType == "King")
+        {
+            kingAudio.play(); 
+        }
+    }
+}
+
+function _drag_init(elem) {
+    selected = elem;
+    selected.style.position='relative';
+    x_elem = x_pos;
+    y_elem = y_pos;
+}
+
+function _move_elem(e) {
+    x_pos = document.all ? window.event.clientX : e.pageX;
+    y_pos = document.all ? window.event.clientY : e.pageY;
+    if (selected !== null) {
+        selected.style.left = (x_pos - x_elem) + 'px';
+        selected.style.top = (y_pos - y_elem) + 'px';
+    }
+}
+
+function _destroy() {
+    if(selected != null)
+    {
+        selected.className='inline icon empty';
+        selected.removeAttribute('style');
+    }
+    selected = null;
+}

gameStyles.css

@@ -0,0 +1,67 @@
+body{
+    background-color:white;
+}
+#soundHolder{
+    width: 62px;
+    height: 50px;
+    background-image: url("speaker.png");
+    background-size: 120px 55px;
+}
+#omniContainerBox{
+padding-left:23%;
+}
+
+.inline{
+display: inline-block;
+}
+.icon
+{
+    width: 100px;
+    height: 100px;
+    background-image: url("sprites.png");
+    background-size: 155px;	
+}
+.red
+{
+    background-position: -20 -7.5;
+}
+.black
+{
+    background-position: -20 -120.5;
+}
+.redK
+{
+    background-position: -20 -231.5;
+}
+.blackK
+{
+    background-position: -20 -341.5;
+}
+.empty
+{
+    background-position: -20 -450;
+}
+#title{
+    font-size: -webkit-xxx-large;
+    font-style: oblique;
+    font-family: fantasy;
+}
+#iconHolder{
+position: absolute;
+top:0;
+left:0;
+right:0;
+left:0;
+
+}
+#board{
+position: relative;
+}
+.noselect {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}

index.html

@@ -0,0 +1,42 @@
+<html>
+    <head>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
+    </head>
+    <link rel="stylesheet" type="text/css" href="gameStyles.css"/>
+    <center>
+        <div id="game">
+            <div id="gameBoard" class='noselect'>
+                <div id="options">
+                    <div id="scoreHolder" class="inline">
+                        <span id='title'>Checkers!</span>&nbsp;&nbsp;&nbsp;&nbsp;
+                        <div id="soundHolder" class="inline" onclick="mute()">
+                        </div>
+                    </div>
+                </div><br>
+                <div id="board">
+                    
+                    <canvas id="myCanvas" class='inline' width="800" height="800" style="border:3px solid #98999A;">
+                        Your browser does not support the HTML5 canvas tag. <br>
+                        Try using a more modern browser, like <a href="https://www.google.com/chrome/browser/">Google Chrome</a>,to play the game.
+                    </canvas>
+                    <div id="iconHolder" background-image='checkers.png'>
+
+                    </div>
+                </div>
+            </div>
+            <br>
+            <div id="buttons">
+                <center>
+                    <button onclick="newGame()">
+                        New Game
+                    </button>
+                </center>
+            </div>
+        </div>
+    </center>
+    <script src="gameScripts.js">
+    </script>
+    <script>
+        newGame();
+    </script>
+</html>