1️⃣ 玉兔吃月饼效果图

玉兔吃月饼效果图，全屏观看效果最佳，兼容手机端和PC端。快快分享给你心中的小伙伴，一起吃月饼。

玉兔吃月饼

2️⃣ 中秋节由来

在这里插入图片描述

中国四大传统节日之一

中秋节，又称祭月节、月光诞、月夕、秋节、仲秋节、拜月节、月娘节、月亮节、团圆节等，是中国民间的传统节日。中秋节源自天象崇拜，由上古时代秋夕祭月演变而来。中秋节自古便有祭月、赏月、吃月饼、看花灯、赏桂花、饮桂花酒等民俗，流传至今，经久不息。

中秋节起源于上古时代，普及于汉代，定型于唐朝初年，盛行于宋朝以后。中秋节是秋季时令习俗的综合，其所包含的节俗因素，大都有古老的渊源。中秋节以月之圆兆人之团圆，为寄托思念故乡，思念亲人之情，祈盼丰收、幸福，成为丰富多彩、弥足珍贵的文化遗产。

最初“祭月节”的节期是在干支历二十四节气“秋分”这天，后来才调至夏历八月十五日。 中秋节与春节、清明节、端午节 并称为中国四大传统节日。受中华文化的影响，中秋节也是东亚和东南亚一些国家尤其是当地的华人华侨的传统节日。 2006年5月20日，国务院将其列入首批国家级非物质文化遗产名录。自2008年起中秋节被列为国家法定节假日。

3️⃣ 玉兔吃月饼设计思路

1.1 游戏规则

    玉兔，又名月兔，居住在月球上，在月宫里负责捣药，是中国古代神话传说中的动物。
    月饼，又称月团、丰收饼、团圆饼等，是中国的汉族传统美食之一。月饼最初是用来拜祭月神的供品。
    让玉兔吃月饼，但是博主讨厌五仁的，所以一吃到五仁的游戏就结束了。

1.2 灵感来源

通过CSDN中秋节献礼，来自程序员的一份特别礼物，每逢佳节倍思亲，献给中秋佳节的你和家人，一款吃月饼的小游戏，带给你们其乐融融的快乐。

4️⃣ 玉兔吃月饼的游戏场景

4.1 开始场景

通过图文介绍游戏规则，单击开始吃月饼游戏，拖动玉兔吃月饼， 如果吃到五仁的月饼，游戏结束。

在这里插入图片描述

4.2 游戏场景

通过拖动玉兔，碰到月饼就可以吃月饼了，吃一个月饼积一分，右上角显示爱心分数。

在这里插入图片描述

4.2 分享场景

游戏结束后，可以通过再玩一次，再来吃月饼，也可以分享给好友一起玩（前提是你这个代码部署到服务器了，通过服务器访问的，可以通用分享一起来玩），也可以看到自己的吃到月饼数，通过月饼数邀请小伙伴一起来玩。

在这里插入图片描述

5️⃣ 玉兔吃月饼游戏代码

1.1 界面代码

html代码

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="initial-scale=1, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0, width=device-width">
	<meta name="screen-orientation" content="portrait">
    <title>玉兔吃月饼 - xcLeigh</title>
    <link rel="stylesheet" type="text/css" href="css/index.css">

</head>
<body>
<div id="container">
	<div id="guidePanel"></div>
	<div id="gamepanel">
		<div class="score-wrap">
            <div class="heart"></div>
            <span id="score">0</span>
        </div>
		<canvas id="stage" width="320" height="568"></canvas>
	</div>
	<div id="gameoverPanel"></div>
	<div id="resultPanel">
        <div class="weixin-share"></div>
        <a href="javascript:void(0)" class="replay"></a>
        <div id="fenghao"></div>
        <div id="scorecontent">
        	您在<span id="stime" class="lighttext">520</span>秒内抢到了<span id="sscore" class="lighttext">520</span>个月饼<br>超过了<span id="suser" class="lighttext">52%</span>的用户！
        </div>
        <div class="textc">
        	<span class="btn1 share">邀另一半吃月饼</span>
        </div>
	</div>
</div>

<script src="js/index.js"></script>

</body>
</html>