Skip to content

Commit 2ee5bdb

Browse files
author
rchmatagung
committed
chore: Mengubah makanan ular menjadi gambar apel
1 parent 62e56a5 commit 2ee5bdb

3 files changed

Lines changed: 147 additions & 131 deletions

File tree

‎snake-game/assets/apple.png‎

503 KB
Loading

‎snake-game/index.html‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<html>
2-
<head>
3-
</head>
4-
<script type="text/javascript" src="index.js"></script>
5-
<body onload="draw();">
6-
<h1>Snake</h1>
7-
<canvas id="snakeBoard" width="400" height="400" style="border:1px solid #000000;"></canvas>
8-
<canvas id="score1Board" width="100" height="100" style="border:1px solid #000000;"></canvas>
9-
<canvas id="score2Board" width="100" height="100" style="border:1px solid #000000;"></canvas>
10-
</body>
11-
</html>
2+
<head> </head>
3+
<script type="text/javascript" src="index.js"></script>
4+
<body onload="draw();">
5+
<h1>Snake</h1>
6+
<img id="apple" style="display: none" width="20" height="20" src="assets/apple.png" alt="Apple" />
7+
<canvas id="snakeBoard" width="400" height="400" style="border: 1px solid #000000"></canvas>
8+
<canvas id="score1Board" width="100" height="100" style="border: 1px solid #000000"></canvas>
9+
<canvas id="score2Board" width="100" height="100" style="border: 1px solid #000000"></canvas>
10+
</body>
11+
</html>

‎snake-game/index.js‎

Lines changed: 137 additions & 121 deletions
Original file line numberDiff line numberDiff line change
@@ -4,178 +4,194 @@ const REDRAW_INTERVAL = 50;
44
const WIDTH = CANVAS_SIZE / CELL_SIZE;
55
const HEIGHT = CANVAS_SIZE / CELL_SIZE;
66
const DIRECTION = {
7-
LEFT: 0,
8-
RIGHT: 1,
9-
UP: 2,
10-
DOWN: 3,
11-
}
7+
LEFT: 0,
8+
RIGHT: 1,
9+
UP: 2,
10+
DOWN: 3,
11+
};
1212
const MOVE_INTERVAL = 150;
1313

1414
function initPosition() {
15-
return {
16-
x: Math.floor(Math.random() * WIDTH),
17-
y: Math.floor(Math.random() * HEIGHT),
18-
}
15+
return {
16+
x: Math.floor(Math.random() * WIDTH),
17+
y: Math.floor(Math.random() * HEIGHT),
18+
};
1919
}
2020

2121
function initHeadAndBody() {
22-
let head = initPosition();
23-
let body = [{x: head.x, y: head.y}];
24-
return {
25-
head: head,
26-
body: body,
27-
}
22+
let head = initPosition();
23+
let body = [{ x: head.x, y: head.y }];
24+
return {
25+
head: head,
26+
body: body,
27+
};
2828
}
2929

3030
function initDirection() {
31-
return Math.floor(Math.random() * 4);
31+
return Math.floor(Math.random() * 4);
3232
}
3333

3434
let snake = {
35-
color: "purple",
36-
...initHeadAndBody(),
37-
direction: initDirection(),
38-
score: 0,
39-
}
40-
let apple1 = {
35+
color: "purple",
36+
...initHeadAndBody(),
37+
direction: initDirection(),
38+
score: 0,
39+
};
40+
41+
let apples = [
42+
{
4143
color: "red",
4244
position: initPosition(),
43-
}
44-
let apple2 = {
45-
color: "red",
45+
},
46+
{
47+
color: "green",
4648
position: initPosition(),
47-
}
49+
},
50+
];
51+
52+
// let apples = {
53+
// color: "red",
54+
// position: initPosition(),
55+
// };
56+
// let apple2 = {
57+
// color: "red",
58+
// position: initPosition(),
59+
// };
4860

4961
function drawCell(ctx, x, y, color) {
50-
ctx.fillStyle = color;
51-
ctx.fillRect(x * CELL_SIZE, y * CELL_SIZE, CELL_SIZE, CELL_SIZE);
62+
ctx.fillStyle = color;
63+
ctx.fillRect(x * CELL_SIZE, y * CELL_SIZE, CELL_SIZE, CELL_SIZE);
5264
}
5365

5466
function drawScore(snake) {
55-
let scoreCanvas;
56-
if (snake.color == snake.color) {
57-
scoreCanvas = document.getElementById("score1Board");
58-
} else {
59-
scoreCanvas = document.getElementById("score2Board");
60-
}
61-
let scoreCtx = scoreCanvas.getContext("2d");
67+
let scoreCanvas;
68+
if (snake.color == snake.color) {
69+
scoreCanvas = document.getElementById("score1Board");
70+
} else {
71+
scoreCanvas = document.getElementById("score2Board");
72+
}
73+
let scoreCtx = scoreCanvas.getContext("2d");
6274

63-
scoreCtx.clearRect(0, 0, CANVAS_SIZE, CANVAS_SIZE);
64-
scoreCtx.font = "30px Arial";
65-
scoreCtx.fillStyle = snake.color
66-
scoreCtx.fillText(snake.score, 10, scoreCanvas.scrollHeight / 2);
75+
scoreCtx.clearRect(0, 0, CANVAS_SIZE, CANVAS_SIZE);
76+
scoreCtx.font = "30px Arial";
77+
scoreCtx.fillStyle = snake.color;
78+
scoreCtx.fillText(snake.score, 10, scoreCanvas.scrollHeight / 2);
6779
}
6880

6981
function draw() {
70-
setInterval(function() {
71-
let snakeCanvas = document.getElementById("snakeBoard");
72-
let ctx = snakeCanvas.getContext("2d");
73-
74-
ctx.clearRect(0, 0, CANVAS_SIZE, CANVAS_SIZE);
75-
76-
drawCell(ctx, snake.head.x, snake.head.y, snake.color);
77-
//loop
78-
for (let i = 1; i < snake.body.length; i++) {
79-
drawCell(ctx, snake.body[i].x, snake.body[i].y, snake.color);
80-
}
81-
drawCell(ctx, apple1.position.x, apple1.position.y, apple1.color);
82-
drawCell(ctx, apple2.position.x, apple2.position.y, apple2.color);
83-
84-
drawScore(snake);
85-
}, REDRAW_INTERVAL);
86-
}
82+
setInterval(function () {
83+
let snakeCanvas = document.getElementById("snakeBoard");
84+
let ctx = snakeCanvas.getContext("2d");
8785

88-
function teleport(snake) {
89-
if (snake.head.x < 0) {
90-
snake.head.x = CANVAS_SIZE / CELL_SIZE - 1;
91-
}
92-
if (snake.head.x >= WIDTH) {
93-
snake.head.x = 0;
94-
}
95-
if (snake.head.y < 0) {
96-
snake.head.y = CANVAS_SIZE / CELL_SIZE - 1;
86+
ctx.clearRect(0, 0, CANVAS_SIZE, CANVAS_SIZE);
87+
88+
drawCell(ctx, snake.head.x, snake.head.y, snake.color);
89+
//loop
90+
for (let i = 1; i < snake.body.length; i++) {
91+
drawCell(ctx, snake.body[i].x, snake.body[i].y, snake.color);
9792
}
98-
if (snake.head.y >= HEIGHT) {
99-
snake.head.y = 0;
93+
for (let i = 0; i < apples.length; i++) {
94+
let apple = apples[i];
95+
96+
var img = document.getElementById("apple");
97+
ctx.drawImage(img, apple.position.x * CELL_SIZE, apple.position.y * CELL_SIZE, CELL_SIZE, CELL_SIZE);
10098
}
99+
100+
// drawCell(ctx, apples.position.x, apples.position.y, apples.color);
101+
// drawCell(ctx, apple2.position.x, apple2.position.y, apple2.color);
102+
103+
drawScore(snake);
104+
}, REDRAW_INTERVAL);
101105
}
102106

103-
function eat(snake, apple1, apple2) {
104-
if (snake.head.x == apple1.position.x && snake.head.y == apple1.position.y) {
105-
apple1.position = initPosition();
106-
snake.score++;
107-
//this
108-
snake.body.push({x: snake.head.x, y: snake.head.y});
109-
}
110-
if (snake.head.x == apple2.position.x && snake.head.y == apple2.position.y) {
111-
apple2.position = initPosition();
112-
snake.score++;
113-
//this
114-
snake.body.push({x: snake.head.x, y: snake.head.y});
107+
function teleport(snake) {
108+
if (snake.head.x < 0) {
109+
snake.head.x = CANVAS_SIZE / CELL_SIZE - 1;
110+
}
111+
if (snake.head.x >= WIDTH) {
112+
snake.head.x = 0;
113+
}
114+
if (snake.head.y < 0) {
115+
snake.head.y = CANVAS_SIZE / CELL_SIZE - 1;
116+
}
117+
if (snake.head.y >= HEIGHT) {
118+
snake.head.y = 0;
119+
}
120+
}
121+
122+
function eat(snake, apples) {
123+
for (let i = 0; i < apples.length; i++) {
124+
let apple = apples[i];
125+
if (snake.head.x == apple.position.x && snake.head.y == apple.position.y) {
126+
apple.position = initPosition();
127+
snake.score++;
128+
//this
129+
snake.body.push({ x: snake.head.x, y: snake.head.y });
115130
}
131+
}
116132
}
117133

118134
function moveLeft(snake) {
119-
snake.head.x--;
120-
teleport(snake);
121-
eat(snake, apple1, apple2);
135+
snake.head.x--;
136+
teleport(snake);
137+
eat(snake, apples);
122138
}
123139

124140
function moveRight(snake) {
125-
snake.head.x++;
126-
teleport(snake);
127-
eat(snake, apple1, apple2);
141+
snake.head.x++;
142+
teleport(snake);
143+
eat(snake, apples);
128144
}
129145

130146
function moveDown(snake) {
131-
snake.head.y++;
132-
teleport(snake);
133-
eat(snake, apple1, apple2);
147+
snake.head.y++;
148+
teleport(snake);
149+
eat(snake, apples);
134150
}
135151

136152
function moveUp(snake) {
137-
snake.head.y--;
138-
teleport(snake);
139-
eat(snake, apple1, apple2);
153+
snake.head.y--;
154+
teleport(snake);
155+
eat(snake, apples);
140156
}
141157

142158
function move(snake) {
143-
switch (snake.direction) {
144-
case DIRECTION.LEFT:
145-
moveLeft(snake);
146-
break;
147-
case DIRECTION.RIGHT:
148-
moveRight(snake);
149-
break;
150-
case DIRECTION.DOWN:
151-
moveDown(snake);
152-
break;
153-
case DIRECTION.UP:
154-
moveUp(snake);
155-
break;
156-
}
157-
moveBody(snake);
158-
setTimeout(function() {
159-
move(snake);
160-
}, MOVE_INTERVAL);
159+
switch (snake.direction) {
160+
case DIRECTION.LEFT:
161+
moveLeft(snake);
162+
break;
163+
case DIRECTION.RIGHT:
164+
moveRight(snake);
165+
break;
166+
case DIRECTION.DOWN:
167+
moveDown(snake);
168+
break;
169+
case DIRECTION.UP:
170+
moveUp(snake);
171+
break;
172+
}
173+
moveBody(snake);
174+
setTimeout(function () {
175+
move(snake);
176+
}, MOVE_INTERVAL);
161177
}
162178

163179
//this
164180
function moveBody(snake) {
165-
snake.body.unshift({ x: snake.head.x, y: snake.head.y });
166-
snake.body.pop();
181+
snake.body.unshift({ x: snake.head.x, y: snake.head.y });
182+
snake.body.pop();
167183
}
168184

169185
document.addEventListener("keydown", function (event) {
170-
if (event.key === "ArrowLeft") {
171-
snake.direction = DIRECTION.LEFT;
172-
} else if (event.key === "ArrowRight") {
173-
snake.direction = DIRECTION.RIGHT;
174-
} else if (event.key === "ArrowUp") {
175-
snake.direction = DIRECTION.UP;
176-
} else if (event.key === "ArrowDown") {
177-
snake.direction = DIRECTION.DOWN;
178-
}
179-
})
186+
if (event.key === "ArrowLeft") {
187+
snake.direction = DIRECTION.LEFT;
188+
} else if (event.key === "ArrowRight") {
189+
snake.direction = DIRECTION.RIGHT;
190+
} else if (event.key === "ArrowUp") {
191+
snake.direction = DIRECTION.UP;
192+
} else if (event.key === "ArrowDown") {
193+
snake.direction = DIRECTION.DOWN;
194+
}
195+
});
180196

181197
move(snake);

0 commit comments

Comments
 (0)