forked from CodingWith-Adam/GreenBlob
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
126 lines (110 loc) · 1.97 KB
/
index.js
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
const canvas = document.getElementById("gameArea");
const ctx = canvas.getContext("2d");
let x = 100;
let y = 100;
let radius = 50;
let speed = 10;
let upPressed = false;
let downPressed = false;
let leftPressed = false;
let rightPressed = false;
function drawGame() {
requestAnimationFrame(drawGame);
clearScreen();
inputs();
boundryCheck();
drawGreenBlob();
}
function boundryCheck() {
//up
if (y < radius) {
y = radius;
}
//down
if (y > canvas.height - radius) {
y = canvas.height - radius;
}
//left
if (x < radius) {
x = radius;
}
//right
if (x > canvas.width - radius) {
x = canvas.width - radius;
}
}
function inputs() {
if (upPressed) {
y = y - speed;
}
if (downPressed) {
y = y + speed;
}
if (leftPressed) {
x = x - speed;
}
if (rightPressed) {
x = x + speed;
}
}
function drawGreenBlob() {
ctx.fillStyle = "green";
if (upPressed) {
ctx.fillStyle = "red";
}
if (downPressed) {
ctx.fillStyle = "blue";
}
if (leftPressed) {
ctx.fillStyle = "yellow";
}
if (rightPressed) {
ctx.fillStyle = "purple";
}
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2);
ctx.fill();
}
function clearScreen() {
ctx.fillStyle = "black";
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
document.body.addEventListener("keydown", keyDown);
document.body.addEventListener("keyup", keyUp);
function keyDown(event) {
//up
if (event.keyCode == 38) {
upPressed = true;
}
//down
if (event.keyCode == 40) {
downPressed = true;
}
//left
if (event.keyCode == 37) {
leftPressed = true;
}
//right
if (event.keyCode == 39) {
rightPressed = true;
}
}
function keyUp(event) {
//up
if (event.keyCode == 38) {
upPressed = false;
}
//down
if (event.keyCode == 40) {
downPressed = false;
}
//left
if (event.keyCode == 37) {
leftPressed = false;
}
//right
if (event.keyCode == 39) {
rightPressed = false;
}
}
drawGame();