├── .vscode
└── settings.json
├── index.html
└── index.js
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | "liveServer.settings.port": 5503
3 | }
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
26 |
27 |
28 | Green Blobs
29 |
30 |
31 |
32 |
33 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | const canvas = document.getElementById("gameArea");
2 | const ctx = canvas.getContext("2d");
3 |
4 | let x = 100;
5 | let y = 100;
6 | let radius = 50;
7 | let speed = 10;
8 |
9 | let upPressed = false;
10 | let downPressed = false;
11 | let leftPressed = false;
12 | let rightPressed = false;
13 |
14 | function drawGame() {
15 | requestAnimationFrame(drawGame);
16 | clearScreen();
17 | inputs();
18 | boundryCheck();
19 | drawGreenBlob();
20 | }
21 |
22 | function boundryCheck() {
23 | //up
24 | if (y < radius) {
25 | y = radius;
26 | }
27 | //down
28 | if (y > canvas.height - radius) {
29 | y = canvas.height - radius;
30 | }
31 | //left
32 | if (x < radius) {
33 | x = radius;
34 | }
35 | //right
36 | if (x > canvas.width - radius) {
37 | x = canvas.width - radius;
38 | }
39 | }
40 |
41 | function inputs() {
42 | if (upPressed) {
43 | y = y - speed;
44 | }
45 | if (downPressed) {
46 | y = y + speed;
47 | }
48 | if (leftPressed) {
49 | x = x - speed;
50 | }
51 | if (rightPressed) {
52 | x = x + speed;
53 | }
54 | }
55 |
56 | function drawGreenBlob() {
57 | ctx.fillStyle = "green";
58 | if (upPressed) {
59 | ctx.fillStyle = "red";
60 | }
61 | if (downPressed) {
62 | ctx.fillStyle = "blue";
63 | }
64 | if (leftPressed) {
65 | ctx.fillStyle = "yellow";
66 | }
67 | if (rightPressed) {
68 | ctx.fillStyle = "purple";
69 | }
70 |
71 | ctx.beginPath();
72 | ctx.arc(x, y, radius, 0, Math.PI * 2);
73 | ctx.fill();
74 | }
75 |
76 | function clearScreen() {
77 | ctx.fillStyle = "black";
78 | ctx.fillRect(0, 0, canvas.width, canvas.height);
79 | }
80 |
81 | document.body.addEventListener("keydown", keyDown);
82 | document.body.addEventListener("keyup", keyUp);
83 |
84 | function keyDown(event) {
85 | //up
86 | if (event.keyCode == 38) {
87 | upPressed = true;
88 | }
89 |
90 | //down
91 | if (event.keyCode == 40) {
92 | downPressed = true;
93 | }
94 | //left
95 | if (event.keyCode == 37) {
96 | leftPressed = true;
97 | }
98 |
99 | //right
100 | if (event.keyCode == 39) {
101 | rightPressed = true;
102 | }
103 | }
104 |
105 | function keyUp(event) {
106 | //up
107 | if (event.keyCode == 38) {
108 | upPressed = false;
109 | }
110 |
111 | //down
112 | if (event.keyCode == 40) {
113 | downPressed = false;
114 | }
115 | //left
116 | if (event.keyCode == 37) {
117 | leftPressed = false;
118 | }
119 |
120 | //right
121 | if (event.keyCode == 39) {
122 | rightPressed = false;
123 | }
124 | }
125 |
126 | drawGame();
127 |
--------------------------------------------------------------------------------