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