Skip to content
This repository has been archived by the owner on Nov 22, 2024. It is now read-only.

Commit

Permalink
Merge pull request #105 from cielaAr/main
Browse files Browse the repository at this point in the history 
moonbit小游戏colornoise：色噪第三次提交
  • Loading branch information
@bzy-debug
bzy-debug authored Nov 14, 2024
2 parents 60cca2f + eaee5f3 commit b4d0aff
Show file tree
Hide file tree
Showing 2 changed files with 105 additions and 290 deletions.
395 changes: 105 additions & 290 deletions teams/Arc_En_Ciel/README.md
View file
Original file line number Diff line number Diff line change
@@ -1,290 +1,105 @@
#ColorNoise：色噪v2.0

###更新：优化逻辑，增加san值栏
san值为0时缓慢扣血

这是一次奇异的经历，你可以认为是一场梦、或是一次奇遇。
你来到了一个光怪陆离的世界，它失去色彩并且充满噪音，你感受到自己日渐疯狂、难以忍受，但还好，你还有手中的武器。
去消灭那个疯狂的星球状怪物：科洛诺斯
将世界复原，找寻回家的路吧。

##封面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Container</title>
<style>
.image-container {
width: 320px;
height: 320px;
overflow: hidden; /* 确保图片不会超出容器边界 */
position: relative; /* 用于绝对定位图片 */
}

.image-container img {
width: 100%; /* 使图片宽度填满容器 */
height: auto; /* 保持图片的宽高比 */
position: absolute; /* 绝对定位 */
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 使图片居中 */
}
</style>
</head>
<body>

<div class="image-container">
<img src="cover.png" alt="封面">
</div>

</body>
</html>


##角色控制
方向键：上下左右控制角色移动
z键：攻击/购买
x键：切换角色/退出场景/进入场景

###主角——枪

![alt text](image.png)

###主角——剑

![alt text](image-1.png)

*双主角可长按x切换（商店中有可填补主角———剑空虚的心的道具，获得后atk增加10点）

##游戏场景1

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Container</title>
<style>
.image-container {
width: 320px;
height: 320px;
overflow: hidden; /* 确保图片不会超出容器边界 */
position: relative; /* 用于绝对定位图片 */
}

.image-container img {
width: 100%; /* 使图片宽度填满容器 */
height: auto; /* 保持图片的宽高比 */
position: absolute; /* 绝对定位 */
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 使图片居中 */
}
</style>
</head>
<body>

<div class="image-container">
<img src="image-12.png" alt="1">
</div>

</body>
</html>

*画面下方为状态框与文本显示及操作提示框（可按照提示操作）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Container</title>
<style>
.image-container {
width: 320px;
height: 320px;
overflow: hidden; /* 确保图片不会超出容器边界 */
position: relative; /* 用于绝对定位图片 */
}

.image-container img {
width: 100%; /* 使图片宽度填满容器 */
height: auto; /* 保持图片的宽高比 */
position: absolute; /* 绝对定位 */
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 使图片居中 */
}
</style>
</head>
<body>

<div class="image-container">
<img src="image-13.png" alt="封面">
</div>

</body>
</html>

*此处为画面场景，最左侧为可选角色框

![alt text](image-4.png)

#该方块为陷阱，踩到将会扣血
![alt text](image-5.png)

#此处为法阵，触发后将会进入魔法师房间

![alt text](image-6.png)


##游戏场景2 魔法师房间
*魔法师房间可以缓慢恢复理智
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Container</title>
<style>
.image-container {
width: 320px;
height: 320px;
overflow: hidden; /* 确保图片不会超出容器边界 */
position: relative; /* 用于绝对定位图片 */
}

.image-container img {
width: 100%; /* 使图片宽度填满容器 */
height: auto; /* 保持图片的宽高比 */
position: absolute; /* 绝对定位 */
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 使图片居中 */
}
</style>
</head>
<body>

<div class="image-container">
<img src="image-7.png" alt="魔法师房间">
</div>

</body>
</html>

前往右上角电视处可以购物

###购物界面：
*长按方向键右键选择，右键加Z键购买

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Container</title>
<style>
.image-container {
width: 320px;
height: 320px;
overflow: hidden; /* 确保图片不会超出容器边界 */
position: relative; /* 用于绝对定位图片 */
}

.image-container img {
width: 100%; /* 使图片宽度填满容器 */
height: auto; /* 保持图片的宽高比 */
position: absolute; /* 绝对定位 */
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 使图片居中 */
}
</style>
</head>
<body>

<div class="image-container">
<img src="image-8.png" alt="tvshop">
</div>

</body>
</html>

##游戏场景3

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Container</title>
<style>
.image-container {
width: 320px;
height: 320px;
overflow: hidden; /* 确保图片不会超出容器边界 */
position: relative; /* 用于绝对定位图片 */
}

.image-container img {
width: 100%; /* 使图片宽度填满容器 */
height: auto; /* 保持图片的宽高比 */
position: absolute; /* 绝对定位 */
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 使图片居中 */
}
</style>
</head>
<body>

<div class="image-container">
<img src="image-9.png" alt="封面">
</div>

</body>
</html>

需击杀左边三个怪物方可离开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Container</title>
<style>
.image-container {
width: 320px;
height: 320px;
overflow: hidden; /* 确保图片不会超出容器边界 */
position: relative; /* 用于绝对定位图片 */
}

.image-container img {
width: 100%; /* 使图片宽度填满容器 */
height: auto; /* 保持图片的宽高比 */
position: absolute; /* 绝对定位 */
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 使图片居中 */
}
</style>
</head>
<body>

<div class="image-container">
<img src="image-10.png" alt="hole">
</div>

</body>
</html>
大空洞，进去探索吧

##游戏场景4

长按x进入洞穴，穿过岩洞，你将见到最后的boss
击杀boss，获得胜利，回归真实吧。
@[TOC](ColorNoise：色噪v3.0)
# ColorNoise：色噪v3.0
## 游戏简介
这是一次奇异的经历，你可以认为是一场梦、或是一次奇遇。
你来到了一个光怪陆离的世界，它失去色彩并且充满噪音，你感受到自己日渐疯狂、难以忍受，但还好，你还有手中的武器。
去消灭那个疯狂的星球状怪物：科洛诺斯
将世界复原，找寻回家的路吧。




# 游戏部分场景展示
## 封面：


![<center><img src="./cover.png" alt="cover" style="zoom:25%;" /></center>](https://i-blog.csdnimg.cn/direct/b4160cc466e94f5eb411a1ff3b7e1108.png)








## 角色控制

方向键：上下左右控制角色移动
z键：攻击/购买
x键：切换角色/退出场景/进入场景

### 主角——枪

![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/9909d6e81332425b87a4f70ccd60939c.png)




### 主角——剑
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/df73e35188d0436c8d12cc7367a598c4.png)



* 双主角可长按x切换（商店中有可填补主角———剑空虚的心的道具，获得后atk增加10点）

## 游戏场景1

![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/f6b7b780309c4cff9e44c83a6711c1e3.png)



* 画面下方为状态框与文本显示及操作提示框（可按照提示操作）


* 此处为画面场景，最左侧为可选角色框

* 为节省渲染资源，此处仅将右上角作为游戏视图，同时记录地图物件与人物之间的偏移，使人物再移动时物件反方向移动，以获取更为广阔的游玩感受

![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/1b26f2e33e4d4d4da48b8098dc28db03.png)


### 该方块为陷阱，踩到将会扣血
![< /></center>](https://i-blog.csdnimg.cn/direct/292d6418bf2c4091b0530f4788297113.png)


### 此处为法阵，触发后将会进入魔法师房间

![](https://i-blog.csdnimg.cn/direct/33e4b9394ce245808b9bc274b67b3cc3.png)



## 游戏场景2 魔法师房间
* 魔法师房间可以缓慢恢复理智

![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/6583a920361e4aa2838bf83a7755af51.png)


前往右上角电视处可以购物

### 购物界面：
* 长按方向键右键选择，右键加Z键购买

![<center><img src="./image-8.png" alt="cover" style="zoom:25%;" /></center>](https://i-blog.csdnimg.cn/direct/820db7237f4a4249a46493f2221e2b2b.png)


## 游戏场景3

![](https://i-blog.csdnimg.cn/direct/1c91544d44d24e02a917b7bf048f7fad.png)


需击杀左边三个怪物方可离开

![](https://i-blog.csdnimg.cn/direct/0984741e7ac84837a2b5200d1fc989fd.png)

大空洞，进去探索吧

## 游戏场景4

长按x进入洞穴，穿过岩洞，你将见到最后的boss
击杀boss，获得胜利，回归真实吧。
而后将迎来本游戏的最终挑战（提示，在前面的几个地图获取更多的属性值，将是游玩胜利的关键）
![](https://i-blog.csdnimg.cn/direct/d46b72869b2b4244b4c79a7cd0e06b58.png)




Binary file modified teams/Arc_En_Ciel/game.wasm
View file
Binary file not shown.

0 comments on commit b4d0aff

Please sign in to comment.