原生JS编写《射击小游戏》
JavaScript
|
1,846
|
0
|

499 字
|
24 分钟
嘿！你点击我我就跑

分数：0

剩余时间：60

HTML代码

<!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>
  <style>
    #map {
      width: 500px;
      height: 500px;
      background-color: cadetblue;
      border: 5px solid rgb(224, 125, 32);
      margin: 0 auto;
      position: relative;
      /* cursor: url(./飞镖.png), default; */
    }

    .fenshu {
      width: 500px;
      margin: 0 auto;
      margin-top: 10%;
    }

    #npc {
      width: 10px;
      height: 10px;
      background-color: rgb(245, 245, 245);
      margin-left: 1%;
      margin-top: 2%;
      border-radius: 50%;
      transition-duration: 0.5s;
      position: absolute;
      left: 10%;
      top: 10%;
    }

    .npc {
      background-color: rgb(245, 245, 245);
      margin-left: 1%;
      margin-top: 2%;
      border-radius: 50%;
      transition-duration: 0.5s;
      position: absolute;
      left: 10%;
      top: 10%;
      animation: myfirst 2s;
      animation-fill-mode: forwards;
    }

    #begingame {
      width: 70px;
      height: 50px;
      margin: 0 auto;
      margin-top: 44%;
    }

    button.playgame {
      padding: 10px 15px;
      background: beige;
      border: 1px solid rgb(67 25 207);
    }

    @keyframes myfirst {
      0% {
        opacity: 1;
      }

      25% {
        opacity: 0.75;
      }

      50% {
        opacity: 0.5;
      }

      75% {
        opacity: 0.25;
      }

      100% {
        opacity: 0;
      }
    }
  </style>
</head>

<body>
  <div class="fenshu">
    <p>分数：<span id="score">0</span></p>
    <p>剩余时间：<span id="time">60</span></p>
  </div>
  <div id="map">

    <div id="npc" onclick="clickNpc(this)"></div>
    <div id="begingame"><button class="playgame" onclick="beginGame()">开始游戏</button></div>
  </div>
  <script>



    function beginGame() {
      // 点击后首先将按钮隐藏掉
      document.getElementById("begingame").style.display = "none";
      let count = 60; //倒计时开始的秒数
      let countdown = setInterval(
        function () {
          if (count == 0) {
            document.getElementById("begingame").style.display = "block";
            // 弹出最终得分
            alert("游戏结束,您的分数为：" + x);
            // 重新加载页面
            location.reload();

          }
          count--;
          document.getElementById("time").innerHTML = count;
        }, 1000);//倒计时增量

      // 自动改变球的大小和位置，延迟时间为1秒
      setInterval(function () {
        let w = Math.floor(Math.random() * (50 - 20)) + 20;
        let b = Math.floor(Math.random() * (460 - 5)) + 5;
        let c = Math.floor(Math.random() * (460 - 5)) + 5;
        let div = document.createElement('div');
        div.className = "npc";
        div.style.width = w + "px";
        div.style.height = w + "px";
        div.style.top = b + "px";
        div.style.left = c + "px";
        document.getElementById('map').appendChild(div);
        div.addEventListener('click', function () {
          clickNpc(div)
        })
      }, "500");
    }

    var x = 0;
    function clickNpc(btn) {
      // 当点击到球时，球的位置和大小都发生改变
      // 记录当前的得分
      x++;
      document.getElementById("score").innerHTML = x;
      btn.remove();
    }
  </script>

</body>

</html><!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>
  <style>
    #map {
      width: 500px;
      height: 500px;
      background-color: cadetblue;
      border: 5px solid rgb(224, 125, 32);
      margin: 0 auto;
      position: relative;
      cursor: crosshair;
      /* cursor: url(./飞镖.png), default; */
    }

    .fenshu {
      width: 500px;
      margin: 0 auto;
      margin-top: 10%;
    }

    #npc {
      width: 10px;
      height: 10px;
      background-color: rgb(245, 245, 245);
      margin-left: 1%;
      margin-top: 2%;
      border-radius: 50%;
      transition-duration: 0.5s;
      position: absolute;
      left: 10%;
      top: 10%;
    }

    .npc {
      background-color: rgb(245, 245, 245);
      margin-left: 1%;
      margin-top: 2%;
      border-radius: 50%;
      transition-duration: 0.5s;
      position: absolute;
      left: 10%;
      top: 10%;
      animation: myfirst 2s;
      animation-fill-mode: forwards;
    }

    #killiimg {
      align-items: center;
      width: fit-content;
      margin: 0 auto;
      top: 47%;
      position: absolute;
      left: 45%;
      /* display: none; */
    }

    #begingame {
      width: 70px;
      height: 50px;
      margin: 0 auto;
      margin-top: 44%;
    }

    button.playgame {
      padding: 10px 15px;
      background: beige;
      border: 1px solid rgb(67 25 207);
    }

    @keyframes myfirst {
      0% {
        opacity: 1;
      }

      25% {
        opacity: 0.75;
      }

      50% {
        opacity: 0.5;
      }

      75% {
        opacity: 0.25;
      }

      100% {
        opacity: 0;
      }
    }
  </style>
</head>

<body>
  <div class="fenshu">
    <p>分数：<span id="score">0</span></p>
    <p>剩余时间：<span id="time">60</span></p>
  </div>
  <div id="map">

    <div id="npc" onclick="clickNpc(this)"></div>
    <div id="killiimg"><img src="/picture/图标.png"></div>
    <div id="begingame"><button class="playgame" onclick="beginGame()">开始游戏</button></div>
  </div>
  <script>



    function beginGame() {
      // 点击后首先将按钮隐藏掉
      document.getElementById("begingame").style.display = "none";
      let count = 60; //倒计时开始的秒数
      let countdown = setInterval(
        function () {
          if (count == 0) {
            document.getElementById("begingame").style.display = "block";
            // 弹出最终得分
            alert("游戏结束,您的分数为：" + x);
            // 重新加载页面
            location.reload();

          }
          count--;
          document.getElementById("time").innerHTML = count;
        }, 1000);//倒计时增量

      // 自动改变球的大小和位置，延迟时间为1秒
      setInterval(function () {
        let w = Math.floor(Math.random() * (50 - 20)) + 20;
        let b = Math.floor(Math.random() * (460 - 5)) + 5;
        let c = Math.floor(Math.random() * (460 - 5)) + 5;
        let div = document.createElement('div');
        div.className = "npc";
        div.style.width = w + "px";
        div.style.height = w + "px";
        div.style.top = b + "px";
        div.style.left = c + "px";
        document.getElementById('map').appendChild(div);
        div.addEventListener('click', function () {
          clickNpc(div)
        })
      }, "500");
    }

    var x = 0;
    function clickNpc(btn) {
      // 当点击到球时，球的位置和大小都发生改变
      // 出现击杀图标
      document.getElementById('killiimg').style.visibility = "visible";
      let time = setInterval(() => {
        clearInterval(time);
        document.getElementById('killiimg').style.visibility = "hidden";
      }, 200);

      // 记录当前的得分
      x++;
      document.getElementById("score").innerHTML = x;
      btn.remove();
    }
  </script>

</body>

</html><!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>
  <style>
    #map {
      width: 500px;
      height: 500px;
      background-color: cadetblue;
      border: 5px solid rgb(224, 125, 32);
      margin: 0 auto;
      position: relative;
      /* cursor: url(./飞镖.png), default; */
    }

    .fenshu {
      width: 500px;
      margin: 0 auto;
      margin-top: 10%;
    }

    #npc {
      width: 10px;
      height: 10px;
      background-color: rgb(245, 245, 245);
      margin-left: 1%;
      margin-top: 2%;
      border-radius: 50%;
      transition-duration: 0.5s;
      position: absolute;
      left: 10%;
      top: 10%;
    }

    .npc {
      background-color: rgb(245, 245, 245);
      margin-left: 1%;
      margin-top: 2%;
      border-radius: 50%;
      transition-duration: 0.5s;
      position: absolute;
      left: 10%;
      top: 10%;
      animation: myfirst 2s;
      animation-fill-mode: forwards;
    }

    #begingame {
      width: 70px;
      height: 50px;
      margin: 0 auto;
      margin-top: 44%;
    }

    button.playgame {
      padding: 10px 15px;
      background: beige;
      border: 1px solid rgb(67 25 207);
    }

    @keyframes myfirst {
      0% {
        opacity: 1;
      }

      25% {
        opacity: 0.75;
      }

      50% {
        opacity: 0.5;
      }

      75% {
        opacity: 0.25;
      }

      100% {
        opacity: 0;
      }
    }
  </style>
</head>

<body>
  <div class="fenshu">
    <p>分数：<span id="score">0</span></p>
    <p>剩余时间：<span id="time">60</span></p>
  </div>
  <div id="map">

    <div id="npc" onclick="clickNpc(this)"></div>
    <div id="begingame"><button class="playgame" onclick="beginGame()">开始游戏</button></div>
  </div>
  <script>



    function beginGame() {
      // 点击后首先将按钮隐藏掉
      document.getElementById("begingame").style.display = "none";
      let count = 60; //倒计时开始的秒数
      let countdown = setInterval(
        function () {
          if (count == 0) {
            document.getElementById("begingame").style.display = "block";
            // 弹出最终得分
            alert("游戏结束,您的分数为：" + x);
            // 重新加载页面
            location.reload();

          }
          count--;
          document.getElementById("time").innerHTML = count;
        }, 1000);//倒计时增量

      // 自动改变球的大小和位置，延迟时间为1秒
      setInterval(function () {
        let w = Math.floor(Math.random() * (50 - 20)) + 20;
        let b = Math.floor(Math.random() * (460 - 5)) + 5;
        let c = Math.floor(Math.random() * (460 - 5)) + 5;
        let div = document.createElement('div');
        div.className = "npc";
        div.style.width = w + "px";
        div.style.height = w + "px";
        div.style.top = b + "px";
        div.style.left = c + "px";
        document.getElementById('map').appendChild(div);
        div.addEventListener('click', function () {
          clickNpc(div)
        })
      }, "500");
    }

    var x = 0;
    function clickNpc(btn) {
      // 当点击到球时，球的位置和大小都发生改变
      // 记录当前的得分
      x++;
      document.getElementById("score").innerHTML = x;
      btn.remove();
    }
  </script>

</body>

</html>
暂无评论

发送评论 编辑评论 


				

			

						

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
							
													

					

				

			

			
			

				

					
				

			

				

											

							
							
						

																				
					
											
						

	

		
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
（╯‵□′）╯︵┴─┴
￣﹃￣
(/ω＼)
∠( ᐛ 」∠)＿
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ｀)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ(￣∇￣o)
ヾ(´･ ･｀｡)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò｡)
Σ(っ °Д °;)っ
( ,,´･ω･)ﾉ"(´っω･｀｡)
╮(╯▽╰)╭
o(*////▽////*)q
＞﹏＜
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
	

	

		
颜文字
Emoji
小恐龙
花!
	


									

			

			
			
		

	






上一篇
下一篇