當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
打猎游戏——HTML版（JavaScript的应用）
生活随笔
收集整理的這篇文章主要介紹了
打猎游戏——HTML版（JavaScript的应用）
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
獵殺游戲，頁面上有幾個正在跑的兔子和飛禽，用鼠標（準星）點擊（瞄準開槍）后兔子被打死，倒地身亡（飛禽墜落），血流滿地。
（僅供參考）
Firefox瀏覽器測試沒有問題，但edge瀏覽器與谷歌瀏覽器可以運行但無法射殺，可能是onclick綁定事件出了問題，修改kill方法應(yīng)該可以解決
?
<!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// 觸發(fā)器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;}}//五秒一次刷新————被打死的“復(fù)活”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+" 是否重新挑戰(zhàn)")) { //if語句內(nèi)部判斷確認框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>總結(jié)
以上是生活随笔為你收集整理的打猎游戏——HTML版（JavaScript的应用）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 写一段wavefront_reader的
- 下一篇： JavaScript isArray