打猎游戏——HTML版（JavaScript的应用）

猎杀游戏，页面上有几个正在跑的兔子和飞禽，用鼠标（准星）点击（瞄准开枪）后兔子被打死，倒地身亡（飞禽坠落），血流满地。

（仅供参考）

Firefox浏览器测试没有问题，但edge浏览器与谷歌浏览器可以运行但无法射杀，可能是onclick绑定事件出了问题，修改kill方法应该可以解决

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>打猎游戏</title><style type="text/css">body {overflow: hidden;cursor: url("SizeAll.cur"),default;}</style><script type="text/javascript">// 猎物var preys = new Array(15);// 尸体var deads = new Array(30).fill(0);// 得分var score = 0//时间var time = 30// 触发器var Interval1;var Interval2;var Interval3;var Interval4;var Interval5;function start() {cratepreys();Interval1 = setInterval(moveout, 5000);Interval2 = setInterval(move, 10);Interval3 = setInterval(over, 10);Interval4 = setInterval(fall, 10);Interval5 = setInterval(timego,1000)}function cratepreys() {for (let i = 0; i < 5; i++) {var prey = document.createElement("img");prey.src = "tu.gif";// 随机大小prey.width = Math.floor(Math.random() * 100 + 50);//随机位置prey.style.position = "absolute";prey.style.top = Math.floor(Math.random() * 30 + 540) + "px";prey.style.left = Math.floor(Math.random() * 300) + "px";//清除猎物prey.onclick = kill;//速度，与大小成正比prey.value = prey.width / 30;preys[i] = prey;}for (let i = 5; i < 15; i++) {var prey = document.createElement("img");prey.src = "niao.gif";// 随机大小prey.width = Math.floor(Math.random() * 200 + 130);//随机位置prey.style.position = "absolute";prey.style.top = Math.floor(Math.random() * 350 + 40) + "px";prey.style.left = Math.floor(Math.random() * 300) + "px";//清除猎物prey.onclick = kill;//速度，与大小成正比prey.value = prey.width / 40;preys[i] = prey;}}//五秒一次刷新————被打死的“复活”function moveout() {for (let i = 0; i < 5; i++) {if (preys[i].value === 0) {preys[i].width = Math.floor(Math.random() * 100 + 50);preys[i].style.top = Math.floor(Math.random() * 30 + 540) + "px";preys[i].style.left = 0;preys[i].value = preys[i].width / 30;}}for (let i = 5; i < 15; i++) {if (preys[i].value === 0) {preys[i].width = Math.floor(Math.random() * 200 + 130);preys[i].style.top = Math.floor(Math.random() * 350 + 40) + "px";preys[i].style.left = 0;preys[i].value = preys[i].width / 40;}}}//移动function move() {for (let i = 0; i < 15; i++) {if (preys[i].value !== 0) {if (i > 4) {if (Math.random() > 0.6)preys[i].style.top = parseInt(preys[i].style.top) - preys[i].value / 4 + "px";elsepreys[i].style.top = parseInt(preys[i].style.top) + preys[i].value / 4 + "px";}preys[i].style.left = parseInt(preys[i].style.left) + preys[i].value + "px";document.body.append(preys[i]);}}}//打中function kill() {this.parentNode.removeChild(this);this.value = 0;//速度为零————deadscore++;document.getElementById("scores").value = score;if (parseInt(this.style.top) < 540) {var dead = document.createElement("img")dead.src = "siniao.png"dead.id = "niao"dead.width = this.width / 5dead.style.position = "absolute"dead.style.top = parseInt(this.style.top) + 80 + "px"dead.style.left = parseInt(this.style.left) + 50 + "px"for (let i = 0; i < 30; i++) {if (deads[i] === 0) {deads[i] = deadbreak;}}dead.onfocus(setTimeout(disappear = function () {document.body.removeChild(dead)}, 3000))} else {var dead = document.createElement("img")dead.src = "xue.webp"dead.id = "tu"dead.width = this.widthdead.style.position = "absolute"dead.style.top = this.style.topdead.style.left = this.style.leftdocument.body.append(dead)dead.onfocus(setTimeout(disappear = function () {document.body.removeChild(dead)}, 3000))}}//坠落function fall() {for (let i = 0; i < 30; i++) {if (deads[i] !== 0) {if (deads[i].id === "niao") {deads[i].style.top = parseInt(deads[i].style.top) + 5 + "px";deads[i].style.left = parseInt(deads[i].style.left) + 2 + "px";document.body.append(deads[i])}}}}//越界后刷新function over() {for (let i = 0; i < 15; i++) {if (parseInt(preys[i].style.left) > 1700)preys[i].style.left = 0;if (parseInt(preys[i].style.top) < -20 || parseInt(preys[i].style.top) > 600) {preys[i].style.top = Math.floor(Math.random() * 350 + 40) + "px";preys[i].style.left = 0;}}for (let i = 0; i < 30; i++) {if (deads[i] !== 0) {if (parseInt(deads[i].style.top) > 800) {deads[i] = 0}}}}function timego(){time--document.getElementById("time").innerHTML = time+"s";if (time===-1){if (confirm("本次得分："+score+" 是否重新挑战")) { //if语句内部判断确认框time=31score=0} else {window.location.replace("打猎游戏.html")}}}function pause() {alert("已暂停");}</script>
</head>
<body style="background: url(back.png) no-repeat; background-size: 100% 100%; background-attachment: fixed;">
<div style="height: 700px"><input id="scores"><input type="button" onclick="start()" value="开始"><input type="button" onclick="pause()" value="暂停"><p id="time" style="text-align: center;font-size: 40px;color: #5affcc">30s</p>
</div>
</body>
</html>

打猎游戏——HTML版（JavaScript的应用）相关推荐

消除类游戏(js版)
原文:消除类游戏(js版) 最近一直在玩一款消灭星星的消除类游戏,周末无聊就用js也写了一遍,感觉玩比写还困难一直玩不到10000分.废话不多说直接上源码. 效果图(ps 页面有点难看木有美工) 代码 ...
k40游戏增强版服务器维护中,Redmi K40 游戏增强版发布，第四台 K40 出现了
原标题:Redmi K40 游戏增强版发布,第四台 K40 出现了今晚 Redmi 发布了旗下的新款游戏手机 -- Redmi K40 游戏增强版,这也是K40.K40 Pro.K40 Pro+ 之 ...
掼蛋游戏WEB版——PHP后台实现源码
以下是掼蛋游戏WEB版的部分后台源码,全部源码陆续发布.当有大量的类文件要包含的时候,我们只要确定相应的规则,然后在__autoload()函数中,将类名与实际的磁盘文件对应起来,就可以实现lazy ...
联名款Redmi K40游戏增强版今日揭晓：神秘女主粉色头发吸睛
今年4月,全新的Redmi K40游戏增强版手机在国内发布,这是小米旗下首款专门为游戏用户打造的电竞手机,起售价仅1999元,是业内最便宜的游戏手机,一经发售便引起广大用户的热烈抢购.现在有最新消息 ...
Redmi K40游戏增强版外观配置前瞻：价格成唯一悬念！
经过多日的漫长等待,全新的RedmiK40游戏增强版终于将于今晚19:30正式与大家见面了,作为Redmi旗下首款游戏手机,该机自开始得到曝光以来就受到了外界的高度关注,而随着发布会进入最后的倒计时, ...
Redmi K40游戏增强版首发雷电异形闪光灯：电竞气息十足！
根据官方此前宣布的消息,Redmi旗下首款游戏手机Redmi K40游戏增强版将于4月27日也就是明天正式发布.随着发布时间的日益临近,官方对新机的预热也更加密集. 近日Redmi官方再次为新机预热, ...
java android 五子棋游戏_基于Android平台五子棋游戏最终版.doc
基于Android平台五子棋游戏最终版毕业设计(论文)任务书毕业设计(论文)题目: 基于android平台的五子棋游戏的设计与实现毕业设计(论文)要求及原始数据(资料): 1．综述国内基于and ...
php掼蛋源码,掼蛋游戏WEB版——PHP后台实现源码
以下是掼蛋游戏WEB版的部分后台源码,全部源码陆续发布.当有大量的类文件要包含的时候,我们只要确定相应的规则,然后在__autoload()函数中,将类名与实际的磁盘文件对应起来,就可以实现lazy ...
练习：尼姆游戏(聪明版/傻瓜式•人机对战)
题目尼姆游戏,这是一个著名的游戏,有很多变种玩法.两个玩家轮流从一堆物品中拿走一部分.在每一步中,玩家可以自由选择拿走多少物品,但是必须拿走一部并且最多只能拿走一半物品,然后轮到下一个玩家.拿走 ...

打猎游戏——HTML版（JavaScript的应用）

打猎游戏——HTML版（JavaScript的应用）相关推荐

最新文章

热门文章