Figg
/
ColorTubes
关注 1
点赞 0
派生 0
代码 工单 0 合并请求 0 版本发布 0 百科 动态
浏览代码

Merge branch 'feat/keep_complete_tubes'

master
Figg 7 个月前
父节点
6c65ff057d 2ae8559d05
当前提交
5078fa2c6d
共有 6 个文件被更改，包括 96 次插入 和 28 次删除
分列视图 显示文件统计
  1. 29
    9
      css/style.css
  2. 15
    12
      index.html
  3. 20
    4
      js/controller.js
  4. 1
    0
      js/drawer.js
  5. 11
    3
      js/game.js
  6. 20
    0
      js/ui.js

+ 29
- 9
css/style.css 查看文件 

@@ -3,19 +3,39 @@ body {
3 3 
 	margin: 0;
4 4 
 }
5 5
6 
-menu {
7 
-	padding: 0;
8 
-	margin: 5px;
6 
+.menuitem label::after {
7 
+	content: " :";
9 8 
 }
10 9
11 
-menuitem {
12 
-	margin-right: 10px;
10 
+.menuitem input {
11 
+	max-width: 50px;
13 12 
 }
14 13
15 
-menuitem label::after {
16 
-	content: " :";
14 
+.row {
15 
+	display: flex;
16 
+	flex-direction: row;
17 17 
 }
18 18
19 
-menuitem input {
20 
-	max-width: 50px;
19 
+.w-max {
20 
+	width: max-content;
21 
+}
22 
+
23 
+.justify-evenly {
24 
+	justify-content: space-evenly;
25 
+}
26 
+
27 
+.justify-center {
28 
+	justify-content: center;
29 
+}
30 
+
31 
+.border {
32 
+	border: 1px solid black;
33 
+}
34 
+
35 
+.p-2 {
36 
+	padding: 0.5rem;
37 
+}
38 
+
39 
+.m-2 {
40 
+	margin: 0.5rem;
21 41 
 }

+ 15
- 12
index.html 查看文件 

@@ -4,10 +4,11 @@
4 4 
 <head>
5 5 
 	<meta charset="utf-8">
6 6 
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
7 
-	<title>Le jeu des tubes là</title>
7 
+	<title>🌟 Les jeu des bouteilles là glou glou 🌟</title>
8 8 
 	<link href="./css/style.css" rel="stylesheet">
9 9 
 	<script src="./js/lib/p5.min.js"></script>
10 10 
 	<script src="./js/model/tube.js"></script>
11 
+	<script src="./js/ui.js"></script>
11 12 
 	<script src="./js/model/game.js"></script>
12 13 
 	<script src="./js/drawer.js"></script>
13 14 
 	<script src="./js/controller.js"></script>
 
@@ -15,26 +16,28 @@
15 16 
 </head>
16 17
17 18 
 <body>
18 
-	<menu>
19 
-		<menuitem>
19 
+	<div class="row w-full justify-evenly border p-2 m-2">
20 
+		<span class="menuitem">
20 21 
 			<label>Tubes Number</label>
21 22 
 			<input type="number" size="5" id="tbNumber" value="10">
22 
-		</menuitem>
23 
-		<menuitem>
23 
+		</span>
24 
+		<span class="menuitem">
24 25 
 			<label>Tubes Levels</label>
25 26 
 			<input type="number" size="5" id="tbLevel" value="6">
26 
-		</menuitem>
27 
-		<menuitem>
27 
+		</span>
28 
+		<span class="menuitem">
28 29 
 			<label>Padding</label>
29 30 
 			<input type="number" size="5" id="padding" value="10">
30 
-		</menuitem>
31 
-		<menuitem>
31 
+		</span>
32 
+		<span class="menuitem">
32 33 
 			<label>Tube Scale</label>
33 34 
 			<input type="number" size="5" id="scale" value="50">
34 
-		</menuitem>
35 
+		</span>
35 36 
 		<button type="button" onclick="controller.initializeGame()">New game</button>
36 
-	</menu>
37 
-	<main oncontextmenu="return false;">
37 
+	</div>
38 
+	<div class="row justify-center">
39 
+		<main oncontextmenu="return false;">
40 
+	</div>
38 41 
 	</main>
39 42 
 </body>
40 43

+ 20
- 4
js/controller.js 查看文件 

@@ -16,6 +16,10 @@ class Controller
16 16 
 		this.drawer = new Drawer(params.PADDING, params.SCALE);
17 17
18 18 
 		this.drawer.computeGameParams(params.TUBESNUMBERS, params.TUBESLEVELS);
19 
+		this.width = 800
20 
+		this.height = 600
21 
+		this.ui = new UI(this.width, this.height);
22 
+		this.lastTime = 0;
19 23
20 24 
 		this.initializeColorTubes(params.TUBESLEVELS - 1);
21 25 
 		
@@ -123,10 +127,22 @@ class Controller
123 127
124 128 
 	runLoop()
125 129 
 	{
126 
-		if (!this.needUpdate) return;
130 
+		const timeDelta = millis() - lastTime;
131 
+		// peut-être pas nécessaire de limiter le framerate
132 
+		if (timeDelta < 50)
133 
+			return;
134 
+		this.lastTime = millis();
127 135
128 
-		this.drawer.draw(this.game);
129 
-
130 
-		this.needUpdate = false;
136 
+		const steps = [
137 
+			(this.needUpdate || this.game.isCompleted) && drawGame,
138 
+			this.game.isCompleted && drawUI
139 
+		]
140 
+
141 
+		steps.forEach(step => step && step());
142 
+	}
143 
+
144 
+	function drawUI()
145 
+	{
146 
+		this.ui.drawWinView();
131 147 
 	}
132 148 
 }

+ 1
- 0
js/drawer.js 查看文件 

@@ -74,4 +74,5 @@ class Drawer
74 74 
 			&& x < this.#canvas.width - this.padding
75 75 
 			&& y < this.#canvas.height - this.padding;
76 76 
 	}
77 
+
77 78 
 }

+ 11
- 3
js/game.js 查看文件 

@@ -4,9 +4,10 @@ class Game {
4 4
5 5 
 	constructor(nbTubes, tubeLevel)
6 6 
 	{
7 
-		this.#tubes = [];
8 
-		this.#selectedTube = null;
9 
-
7 
+		this.tubes = [];
8 
+		this.selectedTube = null;
9 
+		this.isCompleted = false;
10 
+
10 11 
 		for (let i = 0; i < nbTubes; i++)
11 12 
 		{
12 13 
 			this.#tubes.push(new Tube(tubeLevel));
 
@@ -64,4 +65,11 @@ class Game {
64 65 
 	{
65 66 
 		return index >= 0 && index < this.#tubes.length;
66 67 
 	}
68 
+
69 
+	isComplete()
70 
+	{
71 
+		return this.#tubes.every(
72 
+			tube => tube.isComplete() || tube.isEmpty()
73 
+		);
74 
+	}
67 75 
 }

+ 20
- 0
js/ui.js 查看文件 

@@ -0,0 +1,20 @@
1 
+class UI {
2 
+
3 
+    constructor(width, height){
4 
+        this.width = width;
5 
+        this.height = height;
6 
+    }
7 
+
8 
+    drawWinView(){
9 
+        fill('red');
10 
+		textSize(50);
11 
+		let textX = lerp(this.width / 2 - 175, 20 * sin(frameCount/10), 0.2);
12 
+		let textY = lerp(this.height / 2, 20 * cos(frameCount/10), 0.2);
13 
+		let message = "👑 You Win! 👑"
14 
+		text(message, textX, textY);
15 
+		textX ++;
16 
+		textY ++;
17 
+		fill('yellow');
18 
+		text(message, textX, textY);
19 
+    }
20 
+}

撰写 预览
正在加载...
取消
保存