Javascript小游戏之别踩白块儿实例-js教程-PHP中文网

首页

web前端

js教程

Javascript小游戏之别踩白块儿实例

黄舟

Jul 20, 2017 pm 04:27 PM

javascript js 小游戏

游戏唯一的一个规则，我们只需要不断踩着黑色方块前进即可，这里根据方向键来踩白块，在规定的时间内，每走一次分数加100.下面通过本文给大家分享Javascript别踩白块儿（钢琴块儿）小游戏实现代码，一起看看吧

游戏唯一的一个规则，我们只需要不断踩着黑色方块前进即可，这里根据方向键来踩白块

在规定时间内，每走一次分数加100

Javascript小游戏之别踩白块儿实例

游戏内的每一排都是一个有四个元素的数组，当正确的踩到黑块前进后，前一个数组内所有的对象样式属性（backgroundColor）赋值给其后一个数组内的对应位置处的对象，便实现了前进的功能，很简单的思想

<!DOCTYPE html><html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    *{padding: 0;
     margin: 0;
    }
    .p_bg {
      width: 410px;
      height: 512px;
      margin-top: 10px;
      border: 1px solid black;
      box-shadow: 0px 0px 20px #102327;
    }
    #score{
      margin-top: 10px;
      color: #365669;
      margin:0 auto;
      width: 350px;
      height: 80px;
    }
    .span_1 {
      font-size: 3em;
    }
    .box_list {
      border-radius: 100%;
      text-align: center;
      line-height: 100px;
      color: red;
      font-size: 2em;
    }
    .box_list_1 {
      border-radius: 100%;
      box-shadow: 0px 0px 20px #ff5026;
      text-align: center;
      line-height: 100px;
      color: red;
      font-size: 2em;
    }
    .img{
      margin: 0 auto;
      margin-top: 15px;
    }
    .over{
      border: 2px solid #23f00f;
      border-radius: 20%;
      box-shadow: 0px 0px 5px red,0px 0px 10px blue,0px 0px 15px white;
      top: 200px;
      left: 50%;
      margin-left: -150px;
      color: black;
      line-height: 50px;
      text-align: center;
      font-size: 20px;
    }
    .newGame{
      border: 2px solid #23fdff;
      border-radius: 20%;
      box-shadow: 0px 0px 5px red,0px 0px 10px blue,0px 0px 15px green;
      top: 350px;
      left:50%;
      margin-left: -50px;
      color: white;
      font-size: 16px;
      z-index: 9999;
    }
    .newGame:hover{
      border: 2px solid #c05e8c;
      color: #A1FEDC;
    }
    #clock{
      font-size: 4em;
      color: red;
      margin:0 auto;
      width: 350px;
      height: 80px;
    }
  </style>
</head>
<body>
<p style="width: 410px;margin: 0 auto;">
  <p class="p_bg">
  </p>
  <p id="clock">00:00:20:00</p>
  <p id="score">
    <p class="span_1"></p>
  </p>
</p>
<script>
  var box;
  var sum = 0;//全局变量 分数
  var oclock=document.getElementById("clock");
  var start1 = oclock.innerHTML;
  var finish = "00:00:00:00";
  var timer = null;//
  var Over=new over();//实例化对象结束游戏框
  var NewGame=new newGame();//实例化重新开始游戏按钮
  var index=false;//标志位哦（用于控制结束游戏框重复出现）
  var again=true;//标志位（用于结束游戏后控制无法再踩白块）
  box = new showbox();//实例化对象
  box.show();//构造游戏白块
  window.onkeydown = function (e) {
    box.clickinfo(e.keyCode);//获取方向键keyCode值并传参调用函数
  }
    function onTime()//定义倒计时秒表函数
    {
      if (start1 == finish)//到达时间执行
      {  index=true;
        clearInterval(timer);
        if(index==true){
        //由于后续定时器一直执行，当点击重新开始游戏后会重复出现结束框，所以设置标志位控制只出现一次
          Over.createOver();
          index=false;
        }
        return;
      }
      var hms = new String(start1).split(":");//以:作为分隔符号取字符串内的数据
      var ms = new Number(hms[3]);//给每个数据定义对象
      var s = new Number(hms[2]);
      var m = new Number(hms[1]);
      var h = new Number(hms[0]);
      ms -= 10;//每次执行ms减10
      if (ms < 0)//判断时间并进行变化
      {
        ms = 90;
        s -= 1;
        if (s < 0)
        {
          s = 59;
          m -= 1;
        }
        if (m < 0)
        {
          m = 59;
          h -= 1;
        }
      }
      var ms = ms < 10 ? ("0" + ms) : ms;//如果出现个位数给个位数前面添加0
      var ss = s < 10 ? ("0" + s) : s;
      var sm = m < 10 ? ("0" + m) : m;
      var sh = h < 10 ? ("0" + h) : h;
      start1 = sh + ":" + sm + ":" + ss + ":" + ms;
      oclock.innerHTML = start1;//重新给oclock赋值
      clearInterval(timer);
      timer =setInterval("onTime()", 100);
    }
    function run() {//开始倒计时函数
      timer =setInterval("onTime()", 100);
    }
  function showbox() {//定义构造函数创建白块
    this.width = 100;
    this.height = 100;
    this.border = "1px solid black";
    this.float = "left";
    this.color = "black";
    this.body = [[null, null, null, null], [null, null, null, null], [null, null, null, null], [null, null, null, null], [null, null, null, null]];
    /*定义一个二维数组，每一个数组中存放的元素代表每一个白块对象一排四个一共五排*/
    this.show = function () {
      document.getElementsByClassName("span_1")[0].innerHTML = "分数：" + sum;//初始化分数
      for (var i = 0; i < this.body.length; i++) {//两重循环动态创建白块和黑块
        var ran_num = Math.floor(Math.random() * 4);//去一个（0~3）的随机数，使每一行随机位置出现一个黑块
        for (var k = 0; k < this.body[i].length; k++) {
          if (this.body[i][k] == null) {//事先判断一下是否已近存在该对象，防止产生多余对象（后续会多次调用该方法）
            this.body[i][k] = document.createElement("p");
            this.body[i][k].style.width = this.width + "px";//给对象添加属性
            this.body[i][k].style.height = this.height + "px";
            this.body[i][k].style.border = this.border;
            this.body[i][k].style.float = this.float;//让每一个白块浮动
            if (k == ran_num) {//随机黑块位置
              this.body[i][k].className = "box_list";
              this.body[i][k].style.backgroundColor = this.color;
            } else {
              this.body[i][k].className = "box_list_1";
              this.body[i][k].style.backgroundColor = "white";
            }
          }
          document.getElementsByClassName("p_bg")[0].appendChild(this.body[i][k]);
        }
      }
      for(var i=0;i<this.body.length;i++){//两重循环给黑块添加方向键图片（这里是页面加载后执行）
        for(var j=0;j<this.body[i].length;j++){
          if(this.body[i][j].style.backgroundColor=="black"){
            this.body[i][j].innerHTML="<img  class=img src=&#39;image/direct"+j+".png&#39;/ alt="Javascript小游戏之别踩白块儿实例" >";
            //这里我给图片direct0（方向左）direct1（方向上）direct2（方向下）direct3（方向右）命名
          }
        }
      }
    }
    this.clickinfo = function (code) {//code：传的方向键keyCode值
      for (var i = 0; i < 4; i++) {//给最下面一行索引赋值
        this.body[4][i].index = i;
      }
      if (code == 37) {
        if (this.body[4][0].style.backgroundColor == "black") {//判断若是方向左键且当前是黑块
          box.moveinfo();
        }
        else {
          document.getElementsByClassName("span_1")[0].innerHTML = "分数：" + sum;//变动分数
          clearInterval(timer);
          Over.createOver();//现实游戏结束框
          again=false;
        }
      }
      if (code == 38) {
        if (this.body[4][1].style.backgroundColor == "black") {
          box.moveinfo();
        }
        else {
          document.getElementsByClassName("span_1")[0].innerHTML = "分数：" + sum;
          clearInterval(timer);
          Over.createOver();
          again=false;
        }
      }
      if (code == 40) {
        if (this.body[4][2].style.backgroundColor == "black") {
          box.moveinfo();
        }
        else {
          document.getElementsByClassName("span_1")[0].innerHTML = "分数：" + sum;
          clearInterval(timer);
          Over.createOver();
          again=false;
        }
      }
      if (code == 39) {
        if (this.body[4][3].style.backgroundColor == "black") {
          box.moveinfo();
        }
        else {
          document.getElementsByClassName("span_1")[0].innerHTML = "分数：" + sum;
          clearInterval(timer);
          Over.createOver();
          again=false;
        }
      }
      for(var i=0;i<this.body.length;i++){//再一次两重循环给黑块添加方向键图片（这里是在游戏过程中）
        for(var j=0;j<this.body[i].length;j++){
          this.body[i][j].innerHTML="";
          if(this.body[i][j].style.backgroundColor=="black"){
            this.body[i][j].innerHTML="<img  class=img src=&#39;image/direct"+j+".png&#39;/ alt="Javascript小游戏之别踩白块儿实例" >";
          }
        }
      }
    }
    this.moveinfo = function () {//踩白块前进功能函数
      if (again == true) {
        clearInterval(timer);//先清除一次定时器因为后面会再次调用，多余的定时器会让时间加速倒计时
        sum += 100;//每走一次加100分
        run();//开启倒计时（当第一次走的时候 开始倒计时，标志着游戏开始了）
        document.getElementsByClassName("span_1")[0].innerHTML = "分数：" + sum;//每走一次都要动态改变一下当前分数
        for (var k = 4; k > 0; k--) {
        //把后一排所有块的样式属性变为其前一排块和其相对应位置块的样式属性
        // 这里注意：要从最后一排开始赋值，并且第一排的块不算进去
          for (var i = 0; i < 4; i++) {
            this.body[k][i].style.backgroundColor = this.body[k - 1][i].style.backgroundColor;
          }
        }
        var ran_num = Math.floor(Math.random() * 4);
        //取随机数创建第一排黑白块
        for (var i = 0; i < 4; i++) {
          if (i == ran_num) {
            this.body[0][i].style.backgroundColor = "black";
          }
          else {
            this.body[0][i].style.backgroundColor = "white";
          }
        }
        this.show();//每一次踩白块都要调用一下show让全局改变一下
      }
    }
  }
  function over(){//定义结束游戏框构造函数
    this.width="300px";
    this.height="100px";
    this.bgColor="#ccc";
    this.position="absolute";
    this._over=null;
    this.className="over";
    this.createOver=function(){
      if(this._over==null){
        this._over=document.createElement("p");
        this._over.style.width=this.width;
        this._over.style.height=this.height;
        this._over.style.backgroundColor=this.bgColor;
        this._over.style.position=this.position;
        this._over.className=this.className;
        this._over.innerHTML="<span>游戏结束</br>得分："+sum+"</span>";
        document.body.appendChild(this._over);
        NewGame.createNewGame();
      }
    }
  }
  function newGame(){//定义重新开始按钮构造函数
    this.width="100px";
    this.height="40px";
    this.bgColor="#4D5260";
    this.position="absolute";
    this._newGame=null;
    this.className="newGame";
    this.createNewGame=function(){
      if(this._newGame==null){
        this._newGame=document.createElement("button");
        this._newGame.style.width=this.width;
        this._newGame.style.height=this.height;
        this._newGame.style.backgroundColor=this.bgColor;
        this._newGame.style.position=this.position;
        this._newGame.className=this.className;
        this._newGame.innerHTML="<span>重新开始</span>";
        document.body.appendChild(this._newGame);
      }
      var oNewGame=document.getElementsByClassName("newGame")[0];//获取创建后的重新开始按钮
      oNewGame.onclick=function(){//添加点击事件  初始各种对象
        sum=0;
        again=true;
        document.getElementsByClassName("span_1")[0].innerHTML = "分数：" + sum;
        document.getElementById("clock").innerHTML="00:00:20:00";
        start1="00:00:20:00";
        document.getElementsByClassName("newGame")[0].remove();//移除重新开始按钮
        document.getElementsByClassName("over")[0].remove();//移除结束游戏框
        NewGame._newGame=null;
        Over._over=null;
      }
    }
  }
</script>
</body>
</html>

登录后复制

总结

以上所述是小编给大家介绍的Javascript别踩白块儿（钢琴块儿）小游戏实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

以上是Javascript小游戏之别踩白块儿实例的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7557

CakePHP 教程

1384

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

如何使用WebSocket和JavaScript实现在线语音识别系统 Dec 17, 2023 pm 02:54 PM

如何使用WebSocket和JavaScript实现在线语音识别系统引言：随着科技的不断发展，语音识别技术已经成为了人工智能领域的重要组成部分。而基于WebSocket和JavaScript实现的在线语音识别系统，具备了低延迟、实时性和跨平台的特点，成为了一种被广泛应用的解决方案。本文将介绍如何使用WebSocket和JavaScript来实现在线语音识别系

推荐：优秀JS开源人脸检测识别项目 Apr 03, 2024 am 11:55 AM

人脸检测识别技术已经是一个比较成熟且应用广泛的技术。而目前最为广泛的互联网应用语言非JS莫属，在Web前端实现人脸检测识别相比后端的人脸识别有优势也有弱势。优势包括减少网络交互、实时识别，大大缩短了用户等待时间，提高了用户体验；弱势是：受到模型大小限制，其中准确率也有限。如何在web端使用js实现人脸检测呢？为了实现Web端人脸识别，需要熟悉相关的编程语言和技术，如JavaScript、HTML、CSS、WebRTC等。同时还需要掌握相关的计算机视觉和人工智能技术。值得注意的是，由于Web端的计

股票分析必备工具：学习PHP和JS绘制蜡烛图的步骤 Dec 17, 2023 pm 06:55 PM

股票分析必备工具：学习PHP和JS绘制蜡烛图的步骤，需要具体代码示例随着互联网和科技的快速发展，股票交易已经成为许多投资者的重要途径之一。而股票分析是投资者决策的重要一环，其中蜡烛图被广泛应用于技术分析中。学习如何使用PHP和JS绘制蜡烛图将为投资者提供更多直观的信息，帮助他们更好地做出决策。蜡烛图是一种以蜡烛形状来展示股票价格的技术图表。它展示了股票价格的

详解：Windows 10是否内置了扫雷小游戏 Dec 23, 2023 pm 02:07 PM

我们在使用win10操作系统的时候，想要知道win10更新了之后是不是还保存有以前老版本中的自带游戏扫雷，据小编所知，我们可以在商店中进行下载安装，只要在商店中搜索microsoftminesweeper即可。具体步骤就来和小编一起看一下吧~windows10有扫雷游戏吗1，首先打开win10开始菜单，点击。然后搜索，点击搜索。2，点击排在第一位的。3，然后就可能需要输入微软账户，即Microsoft账户。没有Microsoft账户的可以安装提示注册即可。输入账户密码，点击下一步。4，然后开始下

WebSocket与JavaScript：实现实时监控系统的关键技术 Dec 17, 2023 pm 05:30 PM

WebSocket与JavaScript：实现实时监控系统的关键技术引言：随着互联网技术的快速发展，实时监控系统在各个领域中得到了广泛的应用。而实现实时监控的关键技术之一就是WebSocket与JavaScript的结合使用。本文将介绍WebSocket与JavaScript在实时监控系统中的应用，并给出代码示例，详细解释其实现原理。一、WebSocket技

如何利用JavaScript和WebSocket实现实时在线点餐系统 Dec 17, 2023 pm 12:09 PM

如何利用JavaScript和WebSocket实现实时在线点餐系统介绍：随着互联网的普及和技术的进步，越来越多的餐厅开始提供在线点餐服务。为了实现实时在线点餐系统，我们可以利用JavaScript和WebSocket技术。WebSocket是一种基于TCP协议的全双工通信协议，可以实现客户端与服务器的实时双向通信。在实时在线点餐系统中，当用户选择菜品并下单

如何在谷歌浏览器中游玩小游戏 Jan 30, 2024 pm 12:39 PM

谷歌浏览器怎么玩小游戏？谷歌浏览器之中是有着非常多充满人文关怀的功能设计的，各位可以在其中获得非常多样化的乐趣。在谷歌浏览器之中，有这一个非常好玩的彩蛋小游戏，即小恐龙游戏，很多小伙伴都非常喜欢这个游戏，但却不清楚该怎么触发进行游玩，下面就由小编为大家带来恐龙小游戏进入教程。谷歌浏览器怎么玩小游戏方法一：【电脑断网】如果你的电脑使用有线网络，请拔掉网线；如果你的电脑使用无线网络，请在电脑右下角点击无线网络连接断开。②在你电脑断网的前提下，打开谷歌浏览器(GoogleChrome)即可出现谷歌浏览

JavaScript和WebSocket：打造高效的实时天气预报系统 Dec 17, 2023 pm 05:13 PM

JavaScript和WebSocket：打造高效的实时天气预报系统引言：如今，天气预报的准确性对于日常生活以及决策制定具有重要意义。随着技术的发展，我们可以通过实时获取天气数据来提供更准确可靠的天气预报。在本文中，我们将学习如何使用JavaScript和WebSocket技术，来构建一个高效的实时天气预报系统。本文将通过具体的代码示例来展示实现的过程。We

See all articles

Javascript小游戏之别踩白块儿实例

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题