LudoGame/knowPos.html at master · vikramsaha7/LudoGame · GitHub

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
canvas {
    border:1px solid #d3d3d3;
    background-color: #f1f1f1;
}
</style>

<script>

function Create2DArray(rows) {
  var arr = [];

  for (var i=0;i<rows;i++) {
     arr[i] = [];
  }

  return arr;
}

var myGamePiece;
var myBackground;
var random=0;
var turn='yellow';
i=0;
yPath=Create2DArray(55);
yellow=[[208.78,440.69],[208.78,407.56],[208.78,374.43],[208.78,341.3],[208.78,308.17],[175.65,275.04],[142.52,275.04],[109.39000000000001,275.04],[76.26000000000002,275.04],[43.13000000000002,275.04],[10.000000000000014,275.04],[10.000000000000014,241.91000000000003],[10.000000000000014,208.78000000000003],[43.13000000000002,208.78000000000003],[76.26000000000002,208.78000000000003],[109.39000000000001,208.78000000000003],[142.52,208.78000000000003],[175.65,208.78000000000003],[208.78,175.65000000000003],[208.78,142.52000000000004],[208.78,109.39000000000004],[208.78,76.26000000000005],[208.78,43.130000000000045],[208.78,10.000000000000043],[241.91,10.000000000000043],[275.04,10.000000000000043],[275.04,43.130000000000045],[275.04,76.26000000000005],[275.04,109.39000000000004],[275.04,142.52000000000004],[275.04,175.65000000000003],[308.17,208.78000000000003],[341.3,208.78000000000003],[374.43,208.78000000000003],[407.56,208.78000000000003],[440.69,208.78000000000003],[473.82,208.78000000000003],[473.82,241.91000000000003],[473.82,275.04],[440.69,275.04],[407.56,275.04],[374.43,275.04],[341.3,275.04],[308.17,275.04],[275.04,308.17],[275.04,341.3],[275.04,374.43],[275.04,407.56],[275.04,440.69],[275.04,473.82],[241.91000000000003,473.82],[241.91,440.69],[241.91,407.56],[241.91,374.43],[241.91,341.3],[241.91,308.17],[241.91,275.04]];
green=[[43.13000000000002,208.78000000000003],[76.26000000000002,208.78000000000003],[109.39000000000001,208.78000000000003],[142.52,208.78000000000003],[175.65,208.78000000000003],[208.78,175.65000000000003],[208.78,142.52000000000004],[208.78,109.39000000000004],[208.78,76.26000000000005],[208.78,43.130000000000045],[208.78,10.000000000000043],[241.91,10.000000000000043],[275.04,10.000000000000043],[275.04,43.130000000000045],[275.04,76.26000000000005],[275.04,109.39000000000004],[275.04,142.52000000000004],[275.04,175.65000000000003],[308.17,208.78000000000003],[341.3,208.78000000000003],[374.43,208.78000000000003],[407.56,208.78000000000003],[440.69,208.78000000000003],[473.82,208.78000000000003],[473.82,241.91000000000003],[473.82,275.04],[440.69,275.04],[407.56,275.04],[374.43,275.04],[341.3,275.04],[308.17,275.04],[275.04,308.17],[275.04,341.3],[275.04,374.43],[275.04,407.56],[275.04,440.69],[275.04,473.82],[241.91000000000003,473.82],[208.78000000000003,473.82],[208.78,440.69],[208.78,407.56],[208.78,374.43],[208.78,341.3],[208.78,308.17],[175.65,275.04],[142.52,275.04],[109.39000000000001,275.04],[76.26000000000002,275.04],[43.13000000000002,275.04],[10.000000000000014,275.04],[10.000000000000014,241.91000000000003],[43.13,241.91],[76.26,241.91],[109.39000000000001,241.91],[142.52,241.91],[175.65,241.91],[208.78,241.91]];
red=[[275.04,10.000000000000043],[275.04,43.130000000000045],[275.04,76.26000000000005],[275.04,109.39000000000004],[275.04,142.52000000000004],[275.04,175.65000000000003],[308.17,208.78000000000003],[341.3,208.78000000000003],[374.43,208.78000000000003],[407.56,208.78000000000003],[440.69,208.78000000000003],[473.82,208.78000000000003],[473.82,241.91000000000003],[473.82,275.04],[440.69,275.04],[407.56,275.04],[374.43,275.04],[341.3,275.04],[308.17,275.04],[275.04,308.17],[275.04,341.3],[275.04,374.43],[275.04,407.56],[275.04,440.69],[275.04,473.82],[241.91000000000003,473.82],[208.78000000000003,473.82],[208.78,440.69],[208.78,407.56],[208.78,374.43],[208.78,341.3],[208.78,308.17],[175.65,275.04],[142.52,275.04],[109.39000000000001,275.04],[76.26000000000002,275.04],[43.13000000000002,275.04],[10.000000000000014,275.04],[10.000000000000014,241.91000000000003],[10.000000000000014,208.78000000000003],[43.13000000000002,208.78000000000003],[76.26000000000002,208.78000000000003],[109.39000000000001,208.78000000000003],[142.52,208.78000000000003],[175.65,208.78000000000003],[208.78,175.65000000000003],[208.78,142.52000000000004],[208.78,109.39000000000004],[208.78,76.26000000000005],[208.78,43.130000000000045],[208.78,10.000000000000043],[241.91,43.13],[241.91,76.26],[241.91,109.39000000000001],[241.91,142.52],[241.91,175.65],[241.91,208.78]];
blue=[[440.69,275.04],[407.56,275.04],[374.43,275.04],[341.3,275.04],[308.17,275.04],[275.04,308.17],[275.04,341.3],[275.04,374.43],[275.04,407.56],[275.04,440.69],[275.04,473.82],[241.91000000000003,473.82],[208.78000000000003,473.82],[208.78,440.69],[208.78,407.56],[208.78,374.43],[208.78,341.3],[208.78,308.17],[175.65,275.04],[142.52,275.04],[109.39000000000001,275.04],[76.26000000000002,275.04],[43.13000000000002,275.04],[10.000000000000014,275.04],[10.000000000000014,241.91000000000003],[10.000000000000014,208.78000000000003],[43.13000000000002,208.78000000000003],[76.26000000000002,208.78000000000003],[109.39000000000001,208.78000000000003],[142.52,208.78000000000003],[175.65,208.78000000000003],[208.78,175.65000000000003],[208.78,142.52000000000004],[208.78,109.39000000000004],[208.78,76.26000000000005],[208.78,43.130000000000045],[208.78,10.000000000000043],[241.91,10.000000000000043],[275.04,10.000000000000043],[275.04,43.130000000000045],[275.04,76.26000000000005],[275.04,109.39000000000004],[275.04,142.52000000000004],[275.04,175.65000000000003],[308.17,208.78000000000003],[341.3,208.78000000000003],[374.43,208.78000000000003],[407.56,208.78000000000003],[440.69,208.78000000000003],[473.82,208.78000000000003],[473.82,241.91000000000003],[440.69,241.91000000000003],[407.56,241.91000000000003],[374.43,241.91000000000003],[341.3,241.91000000000003],[308.17,241.91000000000003],[275.04,241.91000000000003]];


function startGame() {
	myBackground = new component(512, 512, "ludo.png", 0, 0, "image");
    myGamePiece = new component(25, 25, "red1.png", 10, 10, "image");

    myGameArea.start();
}

var myGameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = 512;
        this.canvas.height = 512;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.frameNo = 0;
        this.interval = setInterval(updateGameArea, 160);

        window.addEventListener('keydown', function (e) {
            myGameArea.key = e.keyCode;
        });
        window.addEventListener('keyup', function (e) {
            myGameArea.key = false;
        });
    },
    clear : function() {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    },
    stop : function() {
        clearInterval(this.interval);
    }
}

function component(width, height, color, x, y, type) {
    this.type = type;
    if (type == "image") {
        this.image = new Image();
        this.image.src = color;
    }
    this.width = width;
    this.height = height;
    this.speedX = 0;
    this.speedY = 0;
    this.x = x;
    this.y = y;
    this.update = function() {
        ctx = myGameArea.context;
        if (type == "image") {
            ctx.drawImage(this.image,
                this.x,
                this.y,
                this.width, this.height);
        } else {
            ctx.fillStyle = color;
            ctx.fillRect(this.x, this.y, this.width, this.height);
        }
    }
    this.newPos = function() {
        this.x += this.speedX;
        this.y += this.speedY;
    }
}

function updateGameArea() {
    myGameArea.clear();
    myBackground.newPos();
    myBackground.update();
    myGamePiece.speedX = 0;
    myGamePiece.speedY = 0;
    var x=33.13;
    if (myGameArea.key && myGameArea.key == 37) {myGamePiece.speedX = -3; }   //left
    if (myGameArea.key && myGameArea.key == 39) {myGamePiece.speedX = 3; }
    if (myGameArea.key && myGameArea.key == 38) {myGamePiece.speedY = -3;
    //myGamePiece.x=yellow[i][0];
    //myGamePiece.y=yellow[i][1];
    }   //up key
    if (myGameArea.key && myGameArea.key == 40) {myGamePiece.speedY = 3; }

    myGamePiece.newPos();
    myGamePiece.update();
}

function setRandom() {
  random=Math.random()%7;

}

function setarr(){
  yPath[i][0]=myGamePiece.x;
  yPath[i][1]=myGamePiece.y;
  i++;
}

function print() {
  str="["
  for (var j in yPath)
{

      str+='['+yPath[j][0]+','+yPath[j][1]+'],'
      //console.log('['+yPath[j][0]+','+yPath[j][1]+'],');
}
      str+='];'
      console.log(str);
}
</script>
</head>
<body onload="startGame();" >
<div style="text-align:center;width:480px;" id="id" >

</div>
<input type="button" value="random" name="click" onclick="setRandom();">
<input type="button" value="setArray" name="click1" onclick="setarr();">
<input type="button" value="print" name="click2" onclick="print();">


</body>
</html>