今天为小朋友们准备了一个非常简单的小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，复制进去就能使用哦。小朋友可以自己试试的。
