Chessboard using HTML5

Using these files, you create a canvas 500×500 and a button with onclick=save(); This creates the board, all of the peices and after you click save, it will convert all of the piece’s locations from Javascript variables, to URL variables where PHP can then grab them with the _GET command and then archive it to MySQL.

Filename: chessboard.php
require('../verify.php');

	require('../sql_connect.php');

	$SQLchessQuery = mysql_query('SELECT * FROM chess');  //convert mysql to php var

	while ($SQLchessRow = mysql_fetch_assoc($SQLchessQuery)) {
			$bpx1 = $SQLchessRow["bpx1"];
			$bpy1 = $SQLchessRow["bpy1"];
			$bpx2 = $SQLchessRow["bpx2"];
			$bpy2 = $SQLchessRow["bpy2"];
			$bpx3 = $SQLchessRow["bpx3"];
			$bpy3 = $SQLchessRow["bpy3"];
			$bpx4 = $SQLchessRow["bpx4"];
			$bpy4 = $SQLchessRow["bpy4"];
			$bpx5 = $SQLchessRow["bpx5"];
			$bpy5 = $SQLchessRow["bpy5"];
			$bpx6 = $SQLchessRow["bpx6"];
			$bpy6 = $SQLchessRow["bpy6"];
			$bpx7 = $SQLchessRow["bpx7"];
			$bpy7 = $SQLchessRow["bpy7"];
			$bpx8 = $SQLchessRow["bpx8"];
			$bpy8 = $SQLchessRow["bpy8"];

			$wpx1 = $SQLchessRow["wpx1"];
			$wpy1 = $SQLchessRow["wpy1"];
			$wpx2 = $SQLchessRow["wpx2"];
			$wpy2 = $SQLchessRow["wpy2"];
			$wpx3 = $SQLchessRow["wpx3"];
			$wpy3 = $SQLchessRow["wpy3"];
			$wpx4 = $SQLchessRow["wpx4"];
			$wpy4 = $SQLchessRow["wpy4"];
			$wpx5 = $SQLchessRow["wpx5"];
			$wpy5 = $SQLchessRow["wpy5"];
			$wpx6 = $SQLchessRow["wpx6"];
			$wpy6 = $SQLchessRow["wpy6"];
			$wpx7 = $SQLchessRow["wpx7"];
			$wpy7 = $SQLchessRow["wpy7"];
			$wpx8 = $SQLchessRow["wpx8"];
			$wpy8 = $SQLchessRow["wpy8"];

			$brx1 = $SQLchessRow["brx1"];
			$bry1 = $SQLchessRow["bry1"];
			$brx2 = $SQLchessRow["brx2"];
			$bry2 = $SQLchessRow["bry2"];
			$bnx1 = $SQLchessRow["bnx1"];
			$bny1 = $SQLchessRow["bny1"];
			$bnx2 = $SQLchessRow["bnx2"];
			$bny2 = $SQLchessRow["bny2"];
			$bbx1 = $SQLchessRow["bbx1"];
			$bby1 = $SQLchessRow["bby1"];
			$bbx2 = $SQLchessRow["bbx2"];
			$bby2 = $SQLchessRow["bby2"];
			$bkx1 = $SQLchessRow["bkx1"];
			$bky1 = $SQLchessRow["bky1"];
			$bqx1 = $SQLchessRow["bqx1"];
			$bqy1 = $SQLchessRow["bqy1"];

			$wrx1 = $SQLchessRow["wrx1"];
			$wry1 = $SQLchessRow["wry1"];
			$wrx2 = $SQLchessRow["wrx2"];
			$wry2 = $SQLchessRow["wry2"];
			$wnx1 = $SQLchessRow["wnx1"];
			$wny1 = $SQLchessRow["wny1"];
			$wnx2 = $SQLchessRow["wnx2"];
			$wny2 = $SQLchessRow["wny2"];
			$wbx1 = $SQLchessRow["wbx1"];
			$wby1 = $SQLchessRow["wby1"];
			$wbx2 = $SQLchessRow["wbx2"];
			$wby2 = $SQLchessRow["wby2"];
			$wkx1 = $SQLchessRow["wkx1"];
			$wky1 = $SQLchessRow["wky1"];
			$wqx1 = $SQLchessRow["wqx1"];
			$wqy1 = $SQLchessRow["wqy1"];
		}
filename: chessboard.js

var canvas = $("#canvas");
	var c = canvas[0].getContext("2d");

	var bp = "images/chessboard-black-pawn.png";
	var br = "images/chessboard-black-rook.png";
	var bn = "images/chessboard-black-knight.png";
	var bb = "images/chessboard-black-bishop.png";
	var bq = "images/chessboard-black-queen.png";
	var bk = "images/chessboard-black-king.png";
	var wp = "images/chessboard-white-pawn.png";
	var wr = "images/chessboard-white-rook.png";
	var wn = "images/chessboard-white-knight.png";
	var wb = "images/chessboard-white-bishop.png";
	var wq = "images/chessboard-white-queen.png";
	var wk = "images/chessboard-white-king.png";	

	var blackPawn1 = new DragImage(bp, php echo $bpx1 ?>, php echo $bpy1 ?>);
	var blackPawn2 = new DragImage(bp, php echo $bpx2 ?>, php echo $bpy2 ?>);
	var blackPawn3 = new DragImage(bp, php echo $bpx3 ?>, php echo $bpy3 ?>);
	var blackPawn4 = new DragImage(bp, php echo $bpx4 ?>, php echo $bpy4 ?>);
	var blackPawn5 = new DragImage(bp, php echo $bpx5 ?>, php echo $bpy5 ?>);
	var blackPawn6 = new DragImage(bp, php echo $bpx6 ?>, php echo $bpy6 ?>);
	var blackPawn7 = new DragImage(bp, php echo $bpx7 ?>, php echo $bpy7 ?>);
	var blackPawn8 = new DragImage(bp, php echo $bpx8 ?>, php echo $bpy8 ?>);

	var whitePawn1 = new DragImage(wp, php echo $wpx1 ?>, php echo $wpy1 ?>);
	var whitePawn2 = new DragImage(wp, php echo $wpx2 ?>, php echo $wpy2 ?>);
	var whitePawn3 = new DragImage(wp, php echo $wpx3 ?>, php echo $wpy3 ?>);
	var whitePawn4 = new DragImage(wp, php echo $wpx4 ?>, php echo $wpy4 ?>);
	var whitePawn5 = new DragImage(wp, php echo $wpx5 ?>, php echo $wpy5 ?>);
	var whitePawn6 = new DragImage(wp, php echo $wpx6 ?>, php echo $wpy6 ?>);
	var whitePawn7 = new DragImage(wp, php echo $wpx7 ?>, php echo $wpy7 ?>);
	var whitePawn8 = new DragImage(wp, php echo $wpx8 ?>, php echo $wpy8 ?>);

	var blackRook1 = new DragImage(br, php echo $brx1 ?>, php echo $bry1 ?>);
	var blackRook2 = new DragImage(br, php echo $brx2 ?>, php echo $bry2 ?>);
	var blackKnight1 = new DragImage(bn, php echo $bnx1 ?>, php echo $bny1 ?>);
	var blackKnight2 = new DragImage(bn, php echo $bnx2 ?>, php echo $bny2 ?>);
	var blackBishop1 = new DragImage(bb, php echo $bbx1 ?>, php echo $bby1 ?>);
	var blackBishop2 = new DragImage(bb, php echo $bbx2 ?>, php echo $bby2 ?>);
	var blackQueen1 = new DragImage(bq, php echo $bqx1 ?>, php echo $bqy1 ?>);
	var blackKing1 = new DragImage(bk, php echo $bkx1 ?>, php echo $bky1 ?>);

	var whiteRook1 = new DragImage(wr, php echo $wrx1 ?>, php echo $wry1 ?>);
	var whiteRook2 = new DragImage(wr, php echo $wrx2 ?>, php echo $wry2 ?>);
	var whiteKnight1 = new DragImage(wn, php echo $wnx1 ?>, php echo $wny1 ?>);
	var whiteKnight2 = new DragImage(wn, php echo $wnx2 ?>, php echo $wny2 ?>);
	var whiteBishop1 = new DragImage(wb, php echo $wbx1 ?>, php echo $wby1 ?>);
	var whiteBishop2 = new DragImage(wb, php echo $wbx2 ?>, php echo $wby2 ?>);
	var whiteQueen1 = new DragImage(wq, php echo $wqx1 ?>, php echo $wqy1 ?>);
	var whiteKing1 = new DragImage(wk, php echo $wkx1 ?>, php echo $wky1 ?>);

	

	var loop = setInterval(function() {

	    //c.fillStyle = "white";
	    //c.fillRect(0, 0, 500, 500);
	    var background = new Image();
	    background.src = "images/chessboard.png";
	    c.drawImage(background, 0, 0);

		blackPawn1.update();
		blackPawn2.update();
		blackPawn3.update();
		blackPawn4.update();
		blackPawn5.update();
		blackPawn6.update();
		blackPawn7.update();
		blackPawn8.update();

		whitePawn1.update();
		whitePawn2.update();
		whitePawn3.update();
		whitePawn4.update();
		whitePawn5.update();
		whitePawn6.update();
		whitePawn7.update();
		whitePawn8.update();

		blackRook1.update();
		blackRook2.update();
		blackKnight1.update();
		blackKnight2.update();
		blackBishop1.update();
		blackBishop2.update();
		blackQueen1.update();
		blackKing1.update();

		whiteRook1.update();
		whiteRook2.update();
		whiteKnight1.update();
		whiteKnight2.update();
		whiteBishop1.update();
		whiteBishop2.update();
		whiteQueen1.update();
		whiteKing1.update();

	    
	}, 30);

	function save() {

	    window.location.href = 
		'chessboard_save.php?bpx1=' + blackPawn1.getX() +
		'&bpy1=' + blackPawn1.getY() +
		'&bpx2=' + blackPawn2.getX() +
		'&bpy2=' + blackPawn2.getY() +
		'&bpx3=' + blackPawn3.getX() +
		'&bpy3=' + blackPawn3.getY() +
		'&bpx4=' + blackPawn4.getX() +
		'&bpy4=' + blackPawn4.getY() +
		'&bpx5=' + blackPawn5.getX() +
		'&bpy5=' + blackPawn5.getY() +
		'&bpx6=' + blackPawn6.getX() +
		'&bpy6=' + blackPawn6.getY() +
		'&bpx7=' + blackPawn7.getX() +
		'&bpy7=' + blackPawn7.getY() +
		'&bpx8=' + blackPawn8.getX() +
		'&bpy8=' + blackPawn8.getY() +
		'&wpx1=' + whitePawn1.getX() +
		'&wpy1=' + whitePawn1.getY() +
		'&wpx2=' + whitePawn2.getX() +
		'&wpy2=' + whitePawn2.getY() +
		'&wpx3=' + whitePawn3.getX() +
		'&wpy3=' + whitePawn3.getY() +
		'&wpx4=' + whitePawn4.getX() +
		'&wpy4=' + whitePawn4.getY() +
		'&wpx5=' + whitePawn5.getX() +
		'&wpy5=' + whitePawn5.getY() +
		'&wpx6=' + whitePawn6.getX() +
		'&wpy6=' + whitePawn6.getY() +
		'&wpx7=' + whitePawn7.getX() +
		'&wpy7=' + whitePawn7.getY() +
		'&wpx8=' + whitePawn8.getX() +
		'&wpy8=' + whitePawn8.getY() +
		'&brx1=' + blackRook1.getX() +
		'&bry1=' + blackRook1.getY() +
		'&brx2=' + blackRook2.getX() +
		'&bry2=' + blackRook2.getY() +
		'&bnx1=' + blackKnight1.getX() +
		'&bny1=' + blackKnight1.getY() +
		'&bnx2=' + blackKnight2.getX() +
		'&bny2=' + blackKnight2.getY() +
		'&bbx1=' + blackBishop1.getX() +
		'&bby1=' + blackBishop1.getY() +
		'&bbx2=' + blackBishop2.getX() +
		'&bby2=' + blackBishop2.getY() +
		'&bqx1=' + blackQueen1.getX() +
		'&bqy1=' + blackQueen1.getY() +
		'&bkx1=' + blackKing1.getX() +
		'&bky1=' + blackKing1.getY() +
		'&wrx1=' + whiteRook1.getX() +
		'&wry1=' + whiteRook1.getY() +
		'&wrx2=' + whiteRook2.getX() +
		'&wry2=' + whiteRook2.getY() +
		'&wnx1=' + whiteKnight1.getX() +
		'&wny1=' + whiteKnight1.getY() +
		'&wnx2=' + whiteKnight2.getX() +
		'&wny2=' + whiteKnight2.getY() +
		'&wbx1=' + whiteBishop1.getX() +
		'&wby1=' + whiteBishop1.getY() +
		'&wbx2=' + whiteBishop2.getX() +
		'&wby2=' + whiteBishop2.getY() +
		'&wqx1=' + whiteQueen1.getX() +
		'&wqy1=' + whiteQueen1.getY() +
		'&wkx1=' + whiteKing1.getX() +
		'&wky1=' + whiteKing1.getY();

	}

	var mouseX = 0,
	    mouseY = 0;
	var mousePressed = false;
	var dragging = false;
	canvas.mousemove(function(e) {
	    mouseX = e.offsetX;
	    mouseY = e.offsetY;
	})

	$(document).mousedown(function() {
	    mousePressed = true;
	}).mouseup(function() {
	    mousePressed = false;
	    dragging = false;
	});

	function DragImage(src, x, y) {
	    var that = this;
	    var startX = 0,
		startY = 0;
	    var drag = false;
	    
	    this.x = x;
	    this.y = y;
	    var img = new Image();
	    img.src = src;
	    this.update = function() {
		if (mousePressed ) {
		    
		        var left = that.x;
		        var right = that.x + img.width;
		        var top = that.y;
		        var bottom = that.y + img.height;
			    
		        if (!drag) {
		            startX = mouseX - that.x;
		            startY = mouseY - that.y;

		        }
		        if (mouseX < right && mouseX > left && mouseY < bottom && mouseY > top) {
		            if (!dragging){
		  		dragging = true;
		                drag = true;
		            }
		            
		        }
		    
		} else {
		     
		    drag = false;
		    
		}
		if (drag) {
		    that.x = mouseX - startX;
		    that.y = mouseY - startY;
		    
		}
		c.drawImage(img, that.x, that.y);
	    }
	
	this.getX = function(){
        	return that.x;
    	};
	this.getY = function(){
		return that.y;	
	};
	}

filename: save.php
$bpx1 = $_GET["bpx1"];
$bpy1 = $_GET["bpy1"];
$bpx2 = $_GET["bpx2"];
$bpy2 = $_GET["bpy2"];
$bpx3 = $_GET["bpx3"];
$bpy3 = $_GET["bpy3"];
$bpx4 = $_GET["bpx4"];
$bpy4 = $_GET["bpy4"];
$bpx5 = $_GET["bpx5"];
$bpy5 = $_GET["bpy5"];
$bpx6 = $_GET["bpx6"];
$bpy6 = $_GET["bpy6"];
$bpx7 = $_GET["bpx7"];
$bpy7 = $_GET["bpy7"];
$bpx8 = $_GET["bpx8"];
$bpy8 = $_GET["bpy8"];

$wpx1 = $_GET["wpx1"];
$wpy1 = $_GET["wpy1"];
$wpx2 = $_GET["wpx2"];
$wpy2 = $_GET["wpy2"];
$wpx3 = $_GET["wpx3"];
$wpy3 = $_GET["wpy3"];
$wpx4 = $_GET["wpx4"];
$wpy4 = $_GET["wpy4"];
$wpx5 = $_GET["wpx5"];
$wpy5 = $_GET["wpy5"];
$wpx6 = $_GET["wpx6"];
$wpy6 = $_GET["wpy6"];
$wpx7 = $_GET["wpx7"];
$wpy7 = $_GET["wpy7"];
$wpx8 = $_GET["wpx8"];
$wpy8 = $_GET["wpy8"];

$brx1 = $_GET["brx1"];
$bry1 = $_GET["bry1"];
$brx2 = $_GET["brx2"];
$bry2 = $_GET["bry2"];
$bnx1 = $_GET["bnx1"];
$bny1 = $_GET["bny1"];
$bnx2 = $_GET["bnx2"];
$bny2 = $_GET["bny2"];
$bbx1 = $_GET["bbx1"];
$bby1 = $_GET["bby1"];
$bbx2 = $_GET["bbx2"];
$bby2 = $_GET["bby2"];
$bqx1 = $_GET["bqx1"];
$bqy1 = $_GET["bqy1"];
$bkx1 = $_GET["bkx1"];
$bky1 = $_GET["bky1"];

$wrx1 = $_GET["wrx1"];
$wry1 = $_GET["wry1"];
$wrx2 = $_GET["wrx2"];
$wry2 = $_GET["wry2"];
$wnx1 = $_GET["wnx1"];
$wny1 = $_GET["wny1"];
$wnx2 = $_GET["wnx2"];
$wny2 = $_GET["wny2"];
$wbx1 = $_GET["wbx1"];
$wby1 = $_GET["wby1"];
$wbx2 = $_GET["wbx2"];
$wby2 = $_GET["wby2"];
$wqx1 = $_GET["wqx1"];
$wqy1 = $_GET["wqy1"];
$wkx1 = $_GET["wkx1"];
$wky1 = $_GET["wky1"];


require('../sql_connect.php');

mysql_query("UPDATE chess SET 
bpx1 = '$bpx1', bpy1 = '$bpy1',
bpx2 = '$bpx2', bpy2 = '$bpy2',
bpx3 = '$bpx3', bpy3 = '$bpy3',
bpx4 = '$bpx4', bpy4 = '$bpy4',
bpx5 = '$bpx5', bpy5 = '$bpy5',
bpx6 = '$bpx6', bpy6 = '$bpy6',
bpx7 = '$bpx7', bpy7 = '$bpy7',
bpx8 = '$bpx8', bpy8 = '$bpy8',
wpx1 = '$wpx1', wpy1 = '$wpy1',
wpx2 = '$wpx2', wpy2 = '$wpy2',
wpx3 = '$wpx3', wpy3 = '$wpy3',
wpx4 = '$wpx4', wpy4 = '$wpy4',
wpx5 = '$wpx5', wpy5 = '$wpy5',
wpx6 = '$wpx6', wpy6 = '$wpy6',
wpx7 = '$wpx7', wpy7 = '$wpy7',
wpx8 = '$wpx8', wpy8 = '$wpy8',
brx1 = '$brx1', bry1 = '$bry1',
brx2 = '$brx2', bry2 = '$bry2',
bnx1 = '$bnx1', bny1 = '$bny1',
bnx2 = '$bnx2', bny2 = '$bny2',
bbx1 = '$bbx1', bby1 = '$bby1',
bbx2 = '$bbx2', bby2 = '$bby2',
bqx1 = '$bqx1', bqy1 = '$bqy1',
bkx1 = '$bkx1', bky1 = '$bky1',
wrx1 = '$wrx1', wry1 = '$wry1',
wrx2 = '$wrx2', wry2 = '$wry2',
wnx1 = '$wnx1', wny1 = '$wny1',
wnx2 = '$wnx2', wny2 = '$wny2',
wbx1 = '$wbx1', wby1 = '$wby1',
wbx2 = '$wbx2', wby2 = '$wby2',
wqx1 = '$wqx1', wqy1 = '$wqy1',
wkx1 = '$wkx1', wky1 = '$wky1'
" );


header('location:index.php');

Leave a Reply

Your email address will not be published.