<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example</title>
<script>
Point = function(x, y)
{
this.x = x;
this.y = y;
}
window.onload = function()
{
var canvas;
var context;
var BB;
var offsetX;
var offsetY;
var dragok = false;
var startX;
var startY;
var oldX,oldY;
var fieldArray = [[1,0,1,1,0,0],[1,0,0,1,1,0],[0,0,0,0,0,0]];
var shapes=[];
var possibleLandings = [];
var localX, localY;
var pickedMonster;
var sx = 0;
var sy = 0;
var i1 = 0;
function draw() {
context.clearRect(0, 0, canvas.width, canvas.height);
context.save();
for (var i = 0; i < fieldArray.length; i++)
{
for (var j = 0; j < fieldArray[i].length; j++)
{
context.lineWidth = 1;
context.strokeRect(j*60, i*60, 60, 60);
context.fillRect(j*60, i*60, 60, 60);
}
}
for(var i = 0; i < shapes.length; i++)
{
circle(shapes[i]);
}
context.restore();
if(possibleLandings.length > 0)
{
context.save();
context.fillStyle="#4CFF00";
context.fillRect(oldX,oldY,20,20);
context.restore();
}
else
{
context.save();
context.fillStyle="#FF0000";
context.fillRect(oldX,oldY,20,20);
context.restore();
}
}
function circle(c) {
context.fillStyle=c.fill;
context.beginPath();
context.arc(c.x,c.y,c.r,0,Math.PI*2);
context.closePath();
context.fill();
}
function myDown(e){
e.preventDefault();
e.stopPropagation();
var mx=parseInt(e.clientX-offsetX);
var my=parseInt(e.clientY-offsetY);
dragok=false;
for(var i=0;i<shapes.length;i++){
var s=shapes[i];
var dx=s.x-mx;
var dy=s.y-my;
if(dx*dx+dy*dy<s.r*s.r){
dragok=true;
s.isDragging=true;
pickedMonster = {x:s.x,y:s.y,i:i,theRow:s.theRow,theCol:s.theCol};
oldX = s.x;
oldY = s.y;
localX = mx-s.x+(30/2);
localY = my-s.y+(30/2);
checkMonster(s);
canvas.onmousemove = moveMonster;
canvas.onmouseup = dropMonster;
}
}
startX=mx;
startY=my;
}
function moveMonster(e){
if (dragok)
{
e.preventDefault();
e.stopPropagation();
var mx=parseInt(e.clientX-offsetX);
var my=parseInt(e.clientY-offsetY);
var dx=mx-startX;
var dy=my-startY;
for(var i=0;i<shapes.length;i++)
{
var s=shapes[i];
if(s.isDragging){
s.x+=dx;
s.y+=dy;
pickedMonster.x = e.clientX - localX;
pickedMonster.y = e.clientY - localY;
}
}
draw();
startX=mx;
startY=my;
}
}
function dropMonster(e){
e.preventDefault();
e.stopPropagation();
var legalMove = false;
var dropX=Math.floor((pickedMonster.x+30)/60);
var dropY=Math.floor((pickedMonster.y+30)/60);
console.log(dropX);
for (var i=0; i<possibleLandings.length; i++) {
if (possibleLandings[i].x == dropY && possibleLandings[i].y == dropX) {
legalMove = true;
break;
}
}
if (!legalMove) {
shapes[pickedMonster.i].x = oldX;
shapes[pickedMonster.i].y = oldY;
}
else
{
var rowOffset = (dropY - pickedMonster.theRow) / 2;
var colOffset = (dropX - pickedMonster.theCol) / 2;
fieldArray[pickedMonster.theRow][pickedMonster.theCol] = 0;
fieldArray[pickedMonster.theRow + rowOffset][pickedMonster.theCol + colOffset] = 0;
fieldArray[pickedMonster.theRow + 2 * rowOffset][pickedMonster.theCol + 2 * colOffset] = 1;
for (i=0; i<5; i++) {
var currentMonster = shapes[i];
if (currentMonster.theRow == pickedMonster.theRow + rowOffset &&
currentMonster.theCol == pickedMonster.theCol + colOffset)
{
shapes.splice(i, 1);
}
}
}
dragok = false;
for(var i=0;i<shapes.length;i++){
shapes[i].isDragging=false;
}
draw();
}
function checkMonster(s)
{
for (var i=0; i<4; i++) {
var deltaRow=(1-i)*(i % 2-1);
var deltaCol = (2 - i) * (i % 2);
if (checkField(s,deltaRow,deltaCol)) {
possibleLandings.push(new Point(s.theRow+2*deltaRow,s.theCol+2*deltaCol));
}
}
}
function checkField(s,rowOffset,colOffset) {
if (fieldArray[s.theRow + 2 * rowOffset] != undefined &&
fieldArray[s.theRow + 2 * rowOffset][s.theCol + 2 * colOffset] != undefined) {
if (fieldArray[s.theRow + rowOffset][s.theCol + colOffset] == 1
&& fieldArray[s.theRow + 2 * rowOffset][s.theCol + 2 * colOffset] == 0) {
return true;
}
}
return false;
}
function main()
{
canvas = document.getElementById("drawingCanvas"),
context = canvas.getContext("2d");
canvas.style.background = "#A0A0A0"
BB = canvas.getBoundingClientRect();
context.fillStyle = 'rgb(150,190,255)';
context.globalAlpha = 0.7;
offsetX=BB.left;
offsetY=BB.top;
for (var i = 0; i < fieldArray.length; i++)
{
for (var j = 0; j < fieldArray[i].length; j++)
{
if (fieldArray[i][j] == 1) {
shapes.push({x:j*60+30,y:i*60+30,r:30,theRow:i,theCol:j,fill:"#444444",isDragging:false});
}
}
}
draw();
canvas.onmousedown = myDown;
}
main();
}
</script>
</head>
<body>
<canvas id="drawingCanvas" width="500" height="500"></canvas>
</body>
</html> |
