遇上中秋之夜，总要来一次嫦娥奔月

Front_Yue
598 阅读8分钟

前言

一、中秋的起源

中秋节是中国传统的重要节日之一，通常在农历八月十五这一天庆祝。中秋节的起源有多种说法，其中最为广泛接受的是以下两种：

一种说法是中秋节起源于古代的祭月节。在古代，人们认为月亮是女神嫦娥的化身，因此每年农历八月十五这一天，人们会在户外摆放桌子，上面供奉着各种美食和饮品，然后一起仰望明月，祭拜女神嫦娥，表达对美好生活的向往和感恩之情。

另一种说法是中秋节起源于古代的农耕文化。在古代，人们认为农作物的生长和收获与月亮的变化息息相关，因此在农历八月十五这一天，人们会庆祝秋季的丰收，感恩大地的恩赐，同时也祈求来年的丰收和平安。

无论哪种说法，中秋节都是一个表达感恩和团圆的节日，人们通常会与家人和朋友一起分享美食、赏月、玩灯等活动，共度一个温馨而难忘的夜晚。

二，嫦娥奔月的故事

相传在很久以前，天上有十个太阳，它们轮流出现，照耀大地，使人们感到非常炎热。后来，一个名叫后羿的英雄使用神箭射下了九个太阳，使得大地重新恢复了宁静与和平。人们为了纪念这个英雄，开始在农历的八月十五这一天举行祭祀活动。

在这个节日里，人们会在户外摆放桌子，上面供奉着各种美食和饮品，然后一起仰望明月，祭拜英雄后羿。传说中，后羿的妻子嫦娥因为误服了仙丹而飞升到了月宫，成为了月神。每当人们仰望到月亮的时候，就能看到嫦娥在那里守护着人间的幸福和和平。

据说，在月宫中，嫦娥每天都会喝下一种叫做“长生不老药”的神药，使得她永葆青春和美貌。但是，嫦娥非常想念人间的世界和她的丈夫后羿，于是她决定偷偷地带一些长生不老药回到人间。然而，她被月神玉兔发现了，于是嫦娥便躲进了月亮里，成为了月宫的一位美丽的仙女，永远守护着人间的幸福和和平。

这个传说中，嫦娥是一个美丽、善良和勇敢的女性形象，她的形象也成为了中国文化中的一个重要符号。中秋节也因此成为了一个表达感恩和团圆的节日，人们通常会与家人和朋友一起分享美食、赏月、玩灯等活动，共度一个温馨而难忘的夜晚。

正文开始

一、创意设计

作为一名程序员，遇上中秋，怎么也要展示一下程序员的浪漫，于是想到中秋最受大家喜欢的嫦娥奔月的故事，以此为背景，利用HTML、CSS和JavaScript创作一款嫦娥奔月小游戏，不仅可以展示程序员的浪漫，还可以向大家介绍中秋节和嫦娥奔月的故事。

在游戏中，利用HTML和CSS绘制游戏界面，如月球、嫦娥和各种障碍物等。然后，利用JavaScript编写游戏逻辑，如嫦娥的移动、障碍物的生成和碰撞检测等。最后，添加一些特效和音效，以增强游戏的可玩性和趣味性。

这样一款嫦娥奔月小游戏，不仅可以让大家更好地了解中秋节和嫦娥奔月的故事，还可以让大家感受到程序员的创意和浪漫，并为大家带来更多的乐趣和惊喜。

二、前期准备

游戏中所用到的素材，如图片

三、创作思路

1.嫦娥奔月总体界面

利用HTML,CSS以及相关素材，创作出如图所示游戏界面。 image.png

2.嫦娥奔月功能设计

玩家进入游戏界面，点击我已知晓，即可开始嫦娥奔月，玩家可通过上下左右方向键控制嫦娥移动。 image.png 在玩家移动的过程中，需要注意躲避障碍物（孙悟空，猪八戒，沙僧，唐僧），如果玩家碰到障碍物，游戏失败，则重新开始游戏。

image.png

若玩家躲避障碍物，并安全使嫦娥到达月球，即游戏成功。

image.png

3.嫦娥奔月掘金体验

由于展示的问题，读者可点击码上掘金右上角，可进行更好的体验。

四、嫦娥奔月完整代码

以下是实现嫦娥奔月小游戏的完整代码，仅供参考。

HTML 部分源码

<!DOCTYPE html>
<html>
<head>
    <title>嫦娥奔月</title>
    <link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
    <div id="game">
        <div id="player" style="left: 50px; bottom: 50px;"></div>
        <div id="moon"></div>
        <div id="obstacle_1"></div>
        <div id="obstacle_2"></div>
        <div id="obstacle_3"></div>
        <div id="obstacle_4"></div>
    </div>
    <div class="game-rule">
        <div class="start position">
            <h2>游戏规则</h2>
            <div>&emsp;&emsp;嫦娥奔月小游戏，玩家需要使用键盘上的上下左右箭头键来控制嫦娥的移动，并躲避障碍物（如组八戒，孙悟空）。如果嫦娥撞到了障碍物，游戏结束。当嫦娥到达月球时，即奔月成功。</div>
            <p><span>我已知晓</span></p>
        </div>
        <div class="error position">
            嫦娥奔月路途中遇到危险，请重新尝试。。。
        </div>
        <div class="success position">
            <h2>奔 月 成 功</h2>
            <p></p>
            <div>
                <span>重新开始</span>
            </div>
        </div>
    </div>
</body>
</html>
<script src="./script.js"></script>

CSS 部分源码

html,body{
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100vw;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #06070a;
}
#game {
    width: 1200px;
    height: 625px;
	position: relative;
	margin: 0 auto;
	border: 1px solid #000;
    background: url("./image/bgc.jpg");
    background-repeat: no-repeat;
    background-size: contain;
}

#player {
	width: 150px;
	height: 175px;
    background: url("./image/changE.png");
    background-repeat: no-repeat;
    background-size: contain;
	position: absolute;
	left: 50px;
	bottom: 50px;
}

#moon {
    width: 142px;
    height: 138px;
    border-radius: 50%;
    position: absolute;
    right: 318px;
    top: 2px;
}

#obstacle_1 {
	width: 150px;
	height: 150px;
    background: url("./image/monkey.png");
    background-repeat: no-repeat;
    background-size: contain;
	position: absolute;
    left: 100px;
    top: 180px;
}

#obstacle_2 {
    width: 128px;
    height: 150px;
    background: url("./image/tangseng.png");
    background-repeat: no-repeat;
    background-size: contain;
	position: absolute;
    left: 400px;
    top: 180px;
}
#obstacle_3 {
    width: 150px;
    height: 156px;
    background: url("./image/pig.png");
    background-repeat: no-repeat;
    background-size: contain;
	position: absolute;
    left: 700px;
    top: 220px;
}
#obstacle_4 {
    width: 100px;
    height: 130px;
    background: url("./image/shaseng.png");
    background-repeat: no-repeat;
    background-size: contain;
	position: absolute;
    left: 1070px;
    top: 196px;
}


.game-rule {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.game-rule .position{
  text-align: center;
}
.game-rule .start{
    width: 460px;
    padding:10px 20px;
    background-color: #ef85a0;
}
.game-rule .start div{
    margin: 30px 0;
    color: #fff;
    text-align: left;
    line-height: 26px;
}
.game-rule .start span{
    padding: 6px 12px;
    background-color: #1da7de;
    cursor: pointer;
    border-radius: 12px;
}

.game-rule .error{
    width: 700px;
    padding: 24px;
    background-color: #a65fbd;
    color: #fff;
    font-size: 30px;
    display: none;
}
.game-rule .success{
    width: 700px;
    padding: 24px;
    background: url("./image/denglong.gif");
    background-repeat: no-repeat;
    background-size: cover;
    display: none;
}
.game-rule .success h2{
    color: #e7b210;
    font-size: 36px;
    margin: 12px 0;
}
.game-rule .success p{
    color: #a65fbd;
    font-size: 40px;
    margin: 60px 0;
}
.game-rule .success div{
    height: 40px;
    line-height: 40px;
}
.game-rule .success span{
    padding: 8px 20px;
    background-color: #ed0a24;
    color: #fff;
    cursor: pointer;
    border-radius: 12px;
}

JavaScript 部分源码

var player = document.getElementById("player");
var moon = document.getElementById("moon");
var obstacle1 = document.getElementById("obstacle_1");
var obstacle2 = document.getElementById("obstacle_2");
var obstacle3 = document.getElementById("obstacle_3");
var obstacle4 = document.getElementById("obstacle_4");


function keyDownFun(event) {
	if (event.key === "ArrowLeft") {
		moveLeft();
	} else if (event.key === "ArrowRight") {
		moveRight();
	} else if (event.key === "ArrowUp") {
		moveUp();
	} else if (event.key === "ArrowDown") {
		moveDown();
	}
}

function moveLeft() {
	var left = parseInt(player.style.left);
	if (left > 0) {
		player.style.left = left - 10 + "px";
		checkCollision();
		checkWin();
	}
}

function moveRight() {
	var left = parseInt(player.style.left);
	if (left < 1050) {
		player.style.left = left + 10 + "px";
		checkCollision();
		checkWin();
	}
}

function moveUp() {
	var bottom = parseInt(player.style.bottom);
	if (bottom < 450) {
		player.style.bottom = bottom + 10 + "px";
		checkCollision();
		checkWin();
	}
}

function moveDown() {
	var bottom = parseInt(player.style.bottom);
	if (bottom > 0) {
		player.style.bottom = bottom - 10 + "px";
		checkCollision();
		checkWin();
	}
}

function checkCollision() {
	var playerRect = player.getBoundingClientRect();
	var obstacleRect1 = obstacle1.getBoundingClientRect();
	var obstacleRect2 = obstacle2.getBoundingClientRect();
	var obstacleRect3 = obstacle3.getBoundingClientRect();
	var obstacleRect4 = obstacle4.getBoundingClientRect();
	if (playerRect.left < obstacleRect1.right && playerRect.right > obstacleRect1.left + 60 &&
		playerRect.top < obstacleRect1.bottom && playerRect.bottom > obstacleRect1.top) {
		error()
	}
	if (playerRect.left < obstacleRect2.right && playerRect.right > obstacleRect2.left + 60 &&
		playerRect.top < obstacleRect2.bottom && playerRect.bottom > obstacleRect2.top) {
		error()
	}
	if (playerRect.left < obstacleRect3.right && playerRect.right > obstacleRect3.left + 60 &&
		playerRect.top < obstacleRect3.bottom && playerRect.bottom > obstacleRect3.top) {
		error()
	}
	if (playerRect.left < obstacleRect4.right && playerRect.right > obstacleRect4.left + 60 &&
		playerRect.top < obstacleRect4.bottom && playerRect.bottom > obstacleRect4.top) {
		error()
	}
}

function checkWin() {
	var playerRect = player.getBoundingClientRect();
	var moonRect = moon.getBoundingClientRect();
	console.log(playerRect);
	console.log(moonRect);
	if (playerRect.left < moonRect.right - 80 && playerRect.right > moonRect.left + 140 &&
		playerRect.top < moonRect.bottom - 80 && playerRect.bottom > moonRect.top) {
		success()
	}
}


// 游戏规则阅读
var gameStart = document.querySelector(".start")
var agreeBtn = document.querySelector(".start span")
agreeBtn.addEventListener("click", function () {
	// 在这里添加你想要执行的代码，比如隐藏开始按钮，显示游戏界面等等
	setTimeout(() => {
		gameStart.style.display = "none";
		document.addEventListener("keydown", keyDownFun);
	}, 1000);
});

// 游戏失败
function error() {
	document.removeEventListener("keydown", keyDownFun);
	var gameError = document.querySelector(".error")
	gameError.style.display = "block";
	setTimeout(() => {
		gameError.style.display = "none";
		gameStart.style.display = "block";
		player.style.left = "50px"
		player.style.bottom = "50px"
	}, 1500);
}

// 游戏成功
var gameSuccess = document.querySelector(".success")
var successP = document.querySelector(".success p")

const messages = [
	"中秋佳节，月圆人团圆。",
	"家和万事兴，月圆人更圆。",
	"月到中秋分外明，人团圆后更妙情。",
	"月圆人圆事事圆满。",
	"桂香满地月色圆，人团圆中秋更甜。",
	"月圆人圆家更圆，祝你中秋快乐。",
	"月圆人团圆，幸福围着你转。",
	"月圆情更浓，祝福送到家中。",
	"中秋佳节，祝你团圆幸福。",
	"圆圆的月亮，圆圆的心情，祝你中秋快乐。",
	"月圆人团圆，幸福永相伴。",
	"桂花香里你相伴，月光下你相思。",
	"月圆人团圆，幸福与你缠绵。",
	"中秋佳节，祝你幸福美满。",
	"月圆人团圆，幸福一生缘。",
	"月圆人圆事事圆满，祝你中秋快乐。",
	"中秋佳节，祝你团圆美满。",
	"月圆人团圆，幸福与你相伴。",
	"月圆人团圆，幸福永不断。",
	"中秋佳节，祝你天天开心，事事如意。"
];
function success() {
	document.removeEventListener("keydown", keyDownFun);
	const index = Math.floor(Math.random() * messages.length);
	console.log(index);
	successP.innerHTML = messages[index];
	gameSuccess.style.display = "block";
}

// 重新开始
var successBtn = document.querySelector(".success span")
successBtn.addEventListener("click", function () {
	gameSuccess.style.display = "none";
	gameStart.style.display = "block";
	player.style.left = "50px"
	player.style.bottom = "50px"
});

节日祝福

中秋佳节，月圆人团圆。祝愿您和您的家人在这个美好的时刻，心中充满了欢乐和幸福。愿月亮的温柔光芒照亮您的前路，让您在未来的日子里，一帆风顺，事事如意。祝您中秋快乐，阖家幸福！

avatar
文章
阅读
粉丝