-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathblob.html
124 lines (107 loc) · 2.79 KB
/
blob.html
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
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: Plum;}
canvas{ border: 2px solid black;}
</style>
</head>
<body>
<img id="left1" src = "Left 1 (1).png" alt= "Image failed to load" style="display:none">
<img id="left2" src = "Left 2 (1).png" alt= "Image failed to load" style="display:none">
<img id="left3" src = "Left 3 (1).png" alt= "Image failed to load" style="display:none">
Use the arrow keys to move the blob. Try and get the dots. if the dot dose not apear, refresh the screen.
<br>
<canvas id = "game"></canvas>
<script>
var Key = {
_pressed: {},
LEFT: 37,
UP: 38,
RIGHT: 39,
DOWN: 40,
isDown: function(keyCode){
return this._pressed[keyCode];
},
onKeydown: function(event) {
this._pressed[event.keyCode] = true;
},
onKeyup: function(event) {
delete this._pressed[event.keyCode];
}
};
var flipped = 0
window.addEventListener('keyup', function(event) {Key.onKeyup(event); }, false);
window.addEventListener('keydown', function(event) {Key.onKeydown(event); }, false);
var x = 50;
var y = 50;
var toggle = 1;
var canvas = document.getElementById('game');
canvas.width = 600; //window.innerWidth;
canvas.height =600; //window.innerHeight;
var ctx = canvas.getContext('2d');
var goalX = Math.random() * canvas.width;
var goalY = Math.random() * canvas.height;
var playerSize = 25;
var goalSize = 15;
var speed = 3;
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "white";
ctx.fillRect(0, 0, canvas.width, canvas.height);
if(Key.isDown(Key.UP)){
y-=speed;
if(y < 0){
y= canvas.height;
}
}
if(Key.isDown(Key.DOWN)){
y+=speed;
if(y > canvas.height){
y= y%canvas.height;
}
}
if(Key.isDown(Key.LEFT)){
x-=speed;
flipped = 0
if(x < 0){
x = canvas.width;
}
}
if(Key.isDown(Key.RIGHT)){
x+=speed;
flipped = 0
if(x > canvas.width){
x= x%canvas.width;
}
}
if ((Math.abs(x-goalX))**2 + (Math.abs(y-goalY))**2 < (playerSize+goalSize)**2){
goalX = Math.random() * canvas.width;
goalY = Math.random() * canvas.height;
}
toggle +=1;
toggle %= 90;
if (toggle < 30){
var character = document.getElementById("left1");
}
else if (toggle >=30 && toggle < 60){
var character = document.getElementById("left2");
}
else {
var character = document.getElementById("left3");
}
if (flipped == 0){
ctx.drawImage(character, x-40, y-30);
}
else{
ctx.drawImage(character, x-40, y-30, -1, 1);
}
var goal = new Path2D();
goal.arc(goalX, goalY, goalSize, 0, 2 * Math.PI)
ctx.fillStyle = "#FF0000"
ctx.fill(goal)
}
setInterval(draw, 10);
</script>
</body>
</html>