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
|
<script>
document.addEventListener('DOMContentLoaded', function() {
var bg = new Image();
bg.src = '../images/Spielfeld example.png';
function anim() {
var canvas = document.querySelector('#canvas1');
var ctx = canvas.getContext('2d');
canvas.width = window.innerWidth * 0.9;
canvas.height = canvas.width * (9 / 16);
var width = canvas.width;
var height = bg.height * (canvas.width / bg.width);
if(height < canvas.height) {
width = bg.width * (canvas.height / bg.height);
height = canvas.height;
}
ctx.drawImage(bg, 0, 0, width, height);
ctx.lineWidth = 3;
// Oben
ctx.strokeStyle = 'red';
// ctx.strokeRect(200,30,100,150);
ctx.strokeRect(350,30,100,150);
ctx.strokeRect(500,30,100,150);
ctx.strokeRect(650,30,100,150);
ctx.strokeRect(800,30,100,150);
ctx.strokeRect(950,30,100,150);
ctx.strokeRect(1100,30,100,150);
ctx.strokeRect(1250,30,100,150);
//ctx.strokeRect(1400,30,100,150);
//ctx.strokeRect(150,215,100,150);
ctx.strokeRect(300,215,100,150);
ctx.strokeRect(450,215,100,150);
ctx.strokeRect(600,215,100,150);
ctx.strokeRect(750,215,100,150);
ctx.strokeRect(900,215,100,150);
ctx.strokeRect(1050,215,100,150);
ctx.strokeRect(1200,215,100,150);
ctx.strokeRect(1350,215,100,150);
//ctx.strokeRect(1500,215,100,150);
// Oben Deck
ctx.strokeRect(30,30,100,150);
// Oben History Log
ctx.strokeRect(30,215,100,150);
// Unten
ctx.strokeStyle = 'green';
//ctx.strokeRect(150,435,100,150);
ctx.strokeRect(300,435,100,150);
ctx.strokeRect(450,435,100,150);
ctx.strokeRect(600,435,100,150);
ctx.strokeRect(750,435,100,150);
ctx.strokeRect(900,435,100,150);
ctx.strokeRect(1050,435,100,150);
ctx.strokeRect(1200,435,100,150);
ctx.strokeRect(1350,435,100,150);
//ctx.strokeRect(1500,435,100,150);
// ctx.strokeRect(200,635,100,150);
ctx.strokeRect(350,635,100,150);
ctx.strokeRect(500,635,100,150);
ctx.strokeRect(650,635,100,150);
ctx.strokeRect(800,635,100,150);
ctx.strokeRect(950,635,100,150);
ctx.strokeRect(1100,635,100,150);
ctx.strokeRect(1250,635,100,150);
//ctx.strokeRect(1400,635,100,150);
// Unten Deck
ctx.strokeRect(1600,635,100,150);
// Unten History Log
ctx.strokeRect(1600,435,100,150);
// Spieler Hand
ctx.strokeRect(300,825,80,120);
ctx.strokeRect(450,825,80,120);
ctx.strokeRect(600,825,80,120);
ctx.strokeRect(750,825,80,120);
ctx.strokeRect(900,825,80,120);
ctx.strokeRect(1050,825,80,120);
ctx.strokeRect(1200,825,80,120);
ctx.strokeRect(1350,825,80,120);
requestAnimationFrame(anim);
}
anim();
});
</script>
|