0
点赞
收藏
分享

微信扫一扫

【原生JS】做一个打字消除小游戏，学习摸鱼两不误

看山远兮 2023-06-26 阅读 64
javascript学习css加载MathHarmonyOS后端开发



JS打字消除小游戏

  • 话不多说先看效果！
  • 页面布局：
  • CSS样式：
  • JS文件（重点）：


话不多说先看效果！


JS打字消除游戏


页面布局：

<!DOCTYPE html>
<html>
<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>
     <!-- 这里我使用u-reset来清除一些默认样式 -->
    <link rel="stylesheet" href="./css/u-reset.min.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/index.js"></script>
</head>
<body>
    <!-- 开始界面开始 -->
    <div class="start">
        <div class="start-aom">
            <img src="./img/start/girl.png" alt="" class="girl">
            <img src="./img/start/text.png" alt="" class="title">
        </div>
        <img src="./img/start/play.png" alt="" class="playbtn">
    </div>
    <!-- 开始界面结束 -->
    <!-- 加载界面开始 -->
    <div class="load">
        <div class="loading">
            <div class="loadTiao">
                <div class="progresscon">
                    <span></span>
                </div>
            </div>
        </div>
    </div>
    <!-- 加载界面结束 -->
    <!-- 游戏开始 -->
    <div class="plays">
        <div class="main"></div>
        <div class="fenshu">
            <span></span>
        </div>
        <div class="xuetiao">
            <div class="xuetiao1"></div>
        </div>
        <img src="./img/play/close.png" class="close" alt="">
        <audio src="./于荣光 - 少林英雄.mp3"></audio>
    </div>
    <!-- 游戏结束 -->
</body>
</html>

CSS样式：

html,body{
    width: 100%;
    height: 100%;
}
.start{
    width: 100%;
    height: 100%;
    background: url(../img/start/bg.png) no-repeat center center/cover;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10000;
    transition: all 1s;
    /* display: none; */
}
.start-aom{
    width: 400px;
    height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.girl{
    width: 250px;
    height: 250px;
    display: block;
    margin: 0 auto;
    transform: translateY(70px);
    animation: jump 1s;
}
 @keyframes jump{
    0%{
        transform: translateY(0px);
    }
    50%{
        transform: translateY(160px);
    }
    100%{
        transform: translateY(0px);
    }
}
.title{
    width: 400px;
    height: 200px;
    display: block;
    /* margin: 0 auto; */
    position: relative;
    z-index: 1000;
}
.playbtn{
    width: 50px;
    height: 50px;
    display: block;
    position: absolute;
    right: 0;
    left: 0;
    margin: auto;
    bottom: 50px;
    animation: run 1s infinite;
}
.playbtn:hover{
    cursor: pointer;
}
@keyframes run{
    0%{
        transform: translateY(0px);
    }
    50%{
        transform: translateY(20px);
    }
    100%{
        transform: translateY(0px);
    }
}
/* 加载界面开始 */
.load{
    width: 100%;
    height: 100%;
    background: url(../img/load/bg.png) no-repeat center/cover;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    transition: all 1s;
    /* display: none; */
    z-index: 1000;
}
.loading{
    width: 500px;
    height: 500px;
    background: url(../img/load/loading1.png) center no-repeat;
    background-size: 100% auto ;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    /* display: none; */
}
.loadTiao{
    width: 303px;
    height: 39px;
    background: url(../img/load/loadingProgress.png) center no-repeat;
    background-size: 100% auto;
    display: block;
    margin: 220px auto 0;
    position: relative;
}
.progresscon{
    width: 0px;
    height: 19px;
    background: url(../img/load/progresscon.png);
    position: absolute;
    left: 5px;
    top: 9px;
    border-radius: 15px;
}
.progresscon span{
    text-align: center;
    width: 303px;
    display: block;
}
/* 加载界面结束 */
/* 游戏开始 */
.plays{
    width: 100%;
    height: 100%;
    background:url(../img/play/bg.png) center/cover no-repeat ;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: 999;
}
.main{
    width: 100%;
    height: 100px;
    position: relative;
    z-index: 10;
    float: left;
    transition: all 5s;
}
.main img{
    transition: all 0.2s;
}

.xuetiao{
    width: 204px;
    height: 48px;
    background: url(../img/play/life.png) center no-repeat;
    background-size: contain;
    z-index: 100;
    float: left;
    position: absolute;
    top: 19px;
    left: 194px;
}
.xuetiao1{
    width: 132px;
    height: 24px;
    background-color: rgb(224, 31, 31);
    position: absolute;
    top: 13px;
    left: 60px;
    border-radius: 7px;
}
.fenshu{
    width: 168px;
    height: 53px;
    background: url(../img/play/fenzhi.png) center no-repeat;
    background-size: contain;
    z-index: 100;
    position: absolute;
    top: 10px;
    left: 10px;
}
.fenshu span{
    font-size: 20px;
    color: #fff;
    display: block;
    margin-top: 21px;
    margin-left: 95px;
}
.close{
    position: absolute;
    top: 10px;
    right: 10px;
    width: 50px;
    height: 50px;
    z-index: 1000;
}
/* 游戏结束 */

JS文件（重点）：

window.onload = function () {
  // 获取开始界面，为后面动画切换
  var start = document.querySelector(".start");
  // 获取加载界面，为后面动画切换
  var load = document.querySelector(".load");
  // 获取开始按钮
  var btn = document.querySelector(".playbtn");
  // 获取加载条
  var loadTiao = document.querySelector(".loadTiao");
  var loadTiaoWidth = window.getComputedStyle(loadTiao).width;
  // 获取进度
  var progresscon = document.querySelector(".progresscon");
  var spans = document.querySelector(".progresscon span");
  // 获取画布
  var main = document.querySelector(".main");
  // 获取分数
  var fenshu = document.querySelector(".fenshu span");
  var nums = 0;
  // 获取音乐按钮
  var yinyuebtn = document.querySelector(".close");
  // 获取音乐
  var music = document.querySelector("audio");
  // 获取血条宽度
  var xuetiao = document.querySelector(".xuetiao1");

  // 点击开始按钮切换界面并开始加载
  btn.onclick = function () {
    start.style.transform = "translateY(-100%)";

    var t = setInterval(function () {
      var now = parseInt(window.getComputedStyle(progresscon).width);
      //    console.log(now);
      if (now >= 289) {
        clearInterval(t);
        load.style.transform = "translateY(-100%)";
        xialuo();
      }

      //宽度=当前宽度+速度
      progresscon.style.width = now + 5 + "px";
      var width = parseInt((now / 289) * 100) + "%";
      spans.innerHTML = width;
    }, 100);
  };

  // 随机字母
  /* 
    先把26个字母放到数组中，随机数=数组下标——图片
    创建img，随机位置
    */
  function xialuo() {
    var letters = [
      "A",
      "B",
      "C",
      "D",
      "E",
      "F",
      "G",
      "H",
      "I",
      "J",
      "K",
      "L",
      "M",
      "N",
      "O",
      "P",
      "Q",
      "R",
      "S",
      "T",
      "U",
      "V",
      "W",
      "X",
      "Y",
      "Z",
    ];

    function down() {
      var num = Math.floor(Math.random() * 26);
      // 创建一个新的节点
      var img = document.createElement("img");
      var letter = letters[num].toLowerCase();
      img.src = `./img/play/zimu/${letter}.png`;
      img.classList.add(letter);
      //在父元素插入一个节点
      main.appendChild(img);
      img.style.position = "absolute";
      img.style.width = "80px";
      img.style.height = "80px";
      var top = Math.random() * (main.offsetHeight - 10);
      var left = Math.random() * main.offsetWidth;
      img.style.top = top + "px";
      img.style.left = left + "px";
    }
    for (var i = 0; i < 5; i++) {
      down();
    }

    // 落下()
    // top=当前的top+速度
    // top=当前字母距顶部距离+速度
    var t1 = setInterval(function () {
      // 获取生成的字母
      var imgList = document.querySelectorAll(".main img");
      if (imgList.length < 5) {
        for (var i = 0; i < 5 - imgList.length; i++) down();
      }
      for (var i = 0; i < imgList.length; i++) {
        var _top = imgList[i].offsetTop;
        imgList[i].style.top = _top + 10 + "px";
        if (_top >= innerHeight - 80) {
          imgList[i].style.display = "none";
          //删除子节点
          main.removeChild(imgList[i]);
          xuetiaoWidth = parseInt(getComputedStyle(xuetiao).width);
          console.log(xuetiaoWidth);
          xuetiao.style.width = xuetiaoWidth - 11 + "px";
          if (xuetiaoWidth == 0) {
            clearInterval(t1);
            alert("很遗憾，闯关失败!!!");
          }
        }
      }
    }, 50);

    // 消除字母
    // 获取键盘的按键，得到图片的类名，比较，相等，消色并移除
    window.onkeydown = function (e) {
      e = e || enevt;
      console.log(e.key);
      var imgList = document.querySelectorAll(".main img");
      for (var i = 0; i < imgList.length; i++) {
        if (imgList[i].className == e.key) {
          imgList[i].style.display = "none";
          main.removeChild(imgList[i]);
          nums += 10;
          fenshu.innerHTML = nums;
          if (nums == 100) {
            clearInterval(t1);
            alert("恭喜您，已通关！！！");
          }
        }
      }
    };
  }

  //血条消失

  // 音乐开关
  flag = false;
  yinyuebtn.onclick = function () {
    flag = !flag;
    if (flag) {
      music.play();
      yinyuebtn.src = "./img/play/jia.png";
    } else {
      music.pause();
      yinyuebtn.src = "./img/play/close.png";
    }
  };
};


举报

相关推荐

用Python做一个小游戏

python小游戏代码人生指尖人生

原生JS小游戏：从0实现一个扫雷游戏

javascriptcsses6html前端前端开发

如何做一个音乐小游戏

小游戏游戏开发手游开发yyds干货盘点

用C语言做一个小游戏——扫雷

c语言开发语言后端

11个“高能”网站，学编程和赚钱两不误！

高能网站编程语言赚钱算法刷题

做一个贪吃蛇小游戏happy一下

c++开发语言

一起用Go做一个小游戏（下）

golang服务器前端javajavascriptLinux系统/运维

【摸鱼系列】如何用Python做一个有趣的Loading彩蛋游戏~

python游戏pygame

Linux shell编程学习笔记84：tee命令——显示保存两不误

leetcodec++算法

计划写一个消除游戏系列

实现原理游戏开发游戏引擎
0 条评论