Skip to content

Commit f93eb8b

Browse files
plh97plh97
committed
feat: commit code
1 parent 6722757 commit f93eb8b

File tree

2 files changed

+175
-0
lines changed

2 files changed

+175
-0
lines changed

‎Snake/index.html

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>snake</title>
8+
<style>
9+
body,
10+
html,
11+
canvas {
12+
margin: 0;
13+
padding: 0;
14+
width: 100%;
15+
}
16+
</style>
17+
</head>
18+
<body>
19+
<canvas />
20+
<script type="module" src="index.ts"></script>
21+
</body>
22+
</html>

‎Snake/index.ts

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
class Snake {
2+
x: number;
3+
y: number;
4+
constructor(x: number, y: number) {
5+
this.x = x;
6+
this.y = y;
7+
}
8+
}
9+
10+
const root = {
11+
timer: -1,
12+
data: {
13+
canvas: <HTMLCanvasElement> document.querySelector("canvas"),
14+
ctx: document.querySelector("canvas")?.getContext("2d") as CanvasRenderingContext2D,
15+
snakes: [new Snake(50, 50), new Snake(60, 50), new Snake(70, 50)],
16+
snakePosition: {
17+
x: 70,
18+
y: 50,
19+
},
20+
foodPosition: {
21+
x: 70,
22+
y: 50,
23+
},
24+
direct: 2,
25+
speed: 50,
26+
width: 500,
27+
height: 300,
28+
elementMetric: 10,
29+
},
30+
init() {
31+
this.data.canvas.width = this.data.width;
32+
this.data.canvas.height = this.data.height;
33+
this.eventListener();
34+
this.generateFood();
35+
this.timer = window.setInterval(() => {
36+
this.move();
37+
if (this.isLost()) return;
38+
this.data.snakes.push(
39+
new Snake(this.data.snakePosition.x, this.data.snakePosition.y)
40+
);
41+
if (
42+
this.data.snakePosition.x === this.data.foodPosition.x &&
43+
this.data.snakePosition.y === this.data.foodPosition.y
44+
) {
45+
this.generateFood();
46+
} else {
47+
this.data.snakes.shift();
48+
}
49+
this.drawBackground();
50+
this.drawFood();
51+
this.drawSnake();
52+
}, this.data.speed);
53+
},
54+
isLost() {
55+
if (
56+
this.data.snakePosition.x < 0 ||
57+
this.data.snakePosition.y < 0 ||
58+
this.data.snakePosition.x > this.data.width ||
59+
this.data.snakePosition.y > this.data.height
60+
) {
61+
alert("You Lost");
62+
clearInterval(this.timer);
63+
return true;
64+
}
65+
for (let i = 0; i < this.data.snakes.length - 1; i++) {
66+
const el = this.data.snakes[i];
67+
if (
68+
this.data.snakePosition.x === el.x &&
69+
this.data.snakePosition.y === el.y
70+
) {
71+
alert("You Lost");
72+
clearInterval(this.timer);
73+
return true;
74+
}
75+
}
76+
return false;
77+
},
78+
eventListener() {
79+
document.addEventListener(
80+
"keydown",
81+
($event) => {
82+
const code = $event.keyCode;
83+
if (
84+
code >= 37 &&
85+
code <= 40 &&
86+
Math.abs(this.data.direct - (code - 37)) !== 2
87+
) {
88+
this.data.direct = code - 37;
89+
}
90+
},
91+
false
92+
);
93+
},
94+
move() {
95+
if (this.data.direct === 0) {
96+
this.data.snakePosition.x -= this.data.elementMetric;
97+
}
98+
if (this.data.direct === 1) {
99+
this.data.snakePosition.y -= this.data.elementMetric;
100+
}
101+
if (this.data.direct === 2) {
102+
this.data.snakePosition.x += this.data.elementMetric;
103+
}
104+
if (this.data.direct === 3) {
105+
this.data.snakePosition.y += this.data.elementMetric;
106+
}
107+
},
108+
drawBackground() {
109+
const ctx = this.data.ctx;
110+
ctx.beginPath();
111+
ctx.fillStyle = "lightyellow";
112+
ctx.fillRect(0, 0, 500, 500);
113+
ctx.stroke();
114+
},
115+
drawSnake() {
116+
const ctx = this.data.ctx;
117+
this.data.snakes.forEach((snake) => {
118+
ctx.beginPath();
119+
ctx.fillStyle = "red";
120+
ctx.fillRect(
121+
snake.x + 1,
122+
snake.y + 1,
123+
this.data.elementMetric - 1,
124+
this.data.elementMetric - 1
125+
);
126+
ctx.stroke();
127+
});
128+
},
129+
generateFood() {
130+
this.data.foodPosition.x =
131+
Math.round(
132+
(Math.random() * this.data.width) / this.data.elementMetric
133+
) * this.data.elementMetric;
134+
this.data.foodPosition.y =
135+
Math.round(
136+
(Math.random() * this.data.height) / this.data.elementMetric
137+
) * this.data.elementMetric;
138+
},
139+
drawFood() {
140+
const ctx = this.data.ctx;
141+
ctx.beginPath();
142+
ctx.fillStyle = "red";
143+
ctx.fillRect(
144+
this.data.foodPosition.x + 1,
145+
this.data.foodPosition.y + 1,
146+
this.data.elementMetric - 1,
147+
this.data.elementMetric - 1
148+
);
149+
ctx.stroke();
150+
},
151+
};
152+
153+
root.init();

0 commit comments

Comments
 (0)