commit ca7435b93e00ce6b8a680f4e54df8f81d7ef1fc9 Author: Tai Groot Date: Sun Aug 16 21:27:35 2015 -0700 Initial commit. diff --git a/King.mp3 b/King.mp3 new file mode 100755 index 0000000..72cd8bd Binary files /dev/null and b/King.mp3 differ diff --git a/Knock.mp3 b/Knock.mp3 new file mode 100755 index 0000000..7033d34 Binary files /dev/null and b/Knock.mp3 differ diff --git a/gameScripts.js b/gameScripts.js new file mode 100755 index 0000000..dcefe7f --- /dev/null +++ b/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 +="
" + } + filler+="
"; + } + 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')&&(toRowfromRow)))) + { + 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; +} \ No newline at end of file diff --git a/gameStyles.css b/gameStyles.css new file mode 100755 index 0000000..ef1f31a --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100755 index 0000000..6eb592d --- /dev/null +++ b/index.html @@ -0,0 +1,42 @@ + + + + + +
+
+
+
+
+ Checkers!     +
+
+
+

+
+ + + Your browser does not support the HTML5 canvas tag.
+ Try using a more modern browser, like Google Chrome,to play the game. + +
+ +
+
+
+
+
+
+ +
+
+
+
+ + + \ No newline at end of file diff --git a/match.mp3 b/match.mp3 new file mode 100755 index 0000000..675710d Binary files /dev/null and b/match.mp3 differ diff --git a/speaker.png b/speaker.png new file mode 100755 index 0000000..986b3b8 Binary files /dev/null and b/speaker.png differ diff --git a/sprites.png b/sprites.png new file mode 100755 index 0000000..7640fa7 Binary files /dev/null and b/sprites.png differ