端午特供——小朋友都会写的【狂扁·大粽子】
【摘要】 今天为小朋友们准备了一个非常简单的小HTML游戏，简单到你自己就可以编写哦：先看看我的截图，功能很简单：粽子、血量、锤子、提示文字。编辑在正式编码之前，小朋友们，你们要知道粽子的由来哦：端午节：“端午节的由来主要有以下说法：1、纪念屈原；2、纪念吴国大将伍子胥；3、纪念孝女曹娥。纪念屈原：屈原是战国诗人及政治家，因主张政治改革，触犯到贵族大臣们的利益，遭到排挤和流放，最后楚国被秦国打败，...
今天为小朋友们准备了一个非常简单的小HTML游戏，简单到你自己就可以编写哦：
先看看我的截图，功能很简单：粽子、血量、锤子、提示文字。
在正式编码之前，小朋友们，你们要知道粽子的由来哦：
端午节：
“端午节的由来主要有以下说法：
1、纪念屈原；
2、纪念吴国大将伍子胥；
3、纪念孝女曹娥。
纪念屈原：屈原是战国诗人及政治家，因主张政治改革，触犯到贵族大臣们的利益，遭到排挤和流放，最后楚国被秦国打败，屈原悲愤难耐，跳入汨罗江，以身殉国，老百姓为了纪念屈原，就把他跳江的日子定为端午节。”
粽子（节庆食物）
粽子，由粽叶包裹糯米蒸制而成的食品，是中国传统节庆食物之一。粽子作为中国历史文化积淀最深厚的传统食品之一，传播亦甚远。端午食粽的风俗，千百年来，在中国盛行不衰，而且流传到朝鲜、日本及东南亚诸国。
粽，即粽籺，俗称粽子，主要材料是糯米、馅料，用箬叶（或柊叶、簕古子叶等）包裹而成，形状多样，主要有尖角状、四角状等。粽子由来久远，最初是用来祭祀祖先神灵的贡品。南北叫法不同，北方产黍，用黍米做粽，角状，古时候在北方称“角黍”。由于各地饮食习惯的不同，粽子形成了南北风味；从口味上分，粽子有咸粽和甜粽两大类。
粽子种类繁多，从馅料看，北方有包小枣的北京枣粽；南方则有绿豆、五花肉、豆沙、八宝、火腿、冬菇、蛋黄等多种馅料，其中以广东咸肉粽、浙江嘉兴粽子为代表。2012年粽子入选纪录片《舌尖上的中国》第二集《主食的故事》系列美食之一。
响当当的有名啊，那么粽子的味道南北也是有区别的，有机会可以多尝试尝试各种味道的粽子呢。
直接上编码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>狂扁·大粽子</title>
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
</head>
<body style="overflow: hidden;">
<div id="box" style="width: 100%;height: 100vh;background-image: url('bg1.png');background-repeat: no-repeat;background-size: 70% 90%;background-position-x: 50%;" onclick="cilckIt(this)">
</div>
<div style="position: fixed; top: 10%;font-size: 3rem;color: red;">
血量：<span id="hp">5000</span>
</div>
<div id="cut" style="position: fixed; top: 10%;left: 70%;font-size: 3rem;color: red;display: none;">
</div>
<script>
function cilckIt(o) {
var json = getMousePos();
var it = $('<div class="show"></div>');
var css = {
position: 'absolute',
width: '15%',
height: '22%',
"background-image": "url('bg3.png')",
"background-repeat": 'no-repeat',
"background-size": "100% 100%",
"z-index": 999,
top: json.y,
left: json.x
};
it.css(css);
$(o).append(it);
var ra = parseInt(Math.random() * 3);
if (ra == 1) {
$("#cut").html("<span><b>疼！！！</b></span>");
} else if (ra == 2) {
$("#cut").html("<span><b>打我干嘛！！！</b></span>");
} else {
$("#cut").html("<span><b>疼、疼、疼！</b></span>");
}
$("#cut").show();
var hp = $("#hp").text();
if (hp <= 0) {
alert("游戏结束，你胜利了。");
window.location.reload();
return;
}
$("#hp").text(hp - 100);
setTimeout(function() {
$("#box div:first").remove();
$("#cut").hide();
}, 300);
}
function getMousePos(event) {
var e = event || window.event;
return {
'x': e.clientX,
'y': e.clientY
}
}
</script>
</body>
</html>
只需要创建一个HTML，复制进去就能使用哦。小朋友可以自己试试的。
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）