你的位置:首页 > Java教程

[Java教程]用JS写了一个打字游戏,反正我是通不了关

  今天想写个简单的游戏, 打字游戏好像都没写过, 那么就写打字游戏吧, gamePad包含了关卡的信息, 可以用来调整给个关卡字符下落的速度;

  getRandom函数会返回一个字符对象, 这个对象包含了字符下落的速度和当前被定位的x,y值, 一整框代码比较有借鉴的地方就是, 只用了一个定时器, 而不是每一个字符都用一个定时器, 那样会严重影响性能;

  没使用第三方的库, 纯手贱, 用原生的js写游戏

<html><head>  <meta charset="utf-8">  <style>    #conatiner{      width:400px;      height:500px;      border:1px solid #eee;      position: relative;    }  </style></head>  <body>    <span>typing</span>    <div>       <span id="score">0</span>得分    </div>    <div id="conatiner">          </div>    <button id="start">开始游戏</button>  </body>  <script>    var gamePad = {      1 : {        speed : 100      },      2 : {        speed : 90      },      3 : {        speed : 70      },      4 : {        speed : 40      },      5 : {        speed : 20      }    }    var getRandom = function() {      //随即一个97到122的字符;      var charCode = 97+Math.floor(Math.random()*26);      var speed = Math.ceil(Math.random()*4);      return {        code : String.fromCharCode(charCode),        speed : speed,        y : 0,        x : Math.floor(Math.random()*390),      }    };    function game( n , score ) {      var eConatiner = document.getElementById("conatiner");      var eScore = document.getElementById("score");      var showArr = []; //字符对象的列表      var shoted = 0;      //随机一个字符对象, 包含了字符的运动速度,字符的值      //让showArr这个数组的数据运动;      var run = function() {        //随机生成字符对象        if(Math.random()>0.9) {          var obj = getRandom();          showArr.push(obj);        }        //让元素运动        for(var i=0 ;i < showArr.length; i++) {          showArr[i].y+=showArr[i].speed;          if(showArr[i].y>500) {            //showArr.splice(i,1);            clear();            alert("游戏失败");            location.reload();          }        }        eConatiner.innerHTML = "";        //让元素添加到界面中;        for(var i=0 ;i < showArr.length; i++) {          var eSpan = document.createElement("span");          eSpan.style.position = "absolute";          eSpan.innerHTML = showArr[i].code;          eSpan.style.left = showArr[i].x;          eSpan.style.top = showArr[i].y;          eConatiner.appendChild(eSpan);        }      }      var keyup = function(ev) {        for(var i=0 ;i < showArr.length; i++) {          if(showArr[i].code === ev.key) {            showArr.splice(i,1);            shoted++;            eScore.innerHTML = shoted;            if(shoted === score && gamePad[n+1] === undefined) {              alert("少侠你好厉害, 你好快, 真的好快好快的");            }else if(shoted === score) {              clear();              alert("进入下一关");              game(n+1, score+10)            }            return;          }        }      }      var clear = function() {        clearInterval(game.timer);        window.removeEventListener("keyup", keyup);      }      window.addEventListener("keyup", keyup);      game.timer = setInterval(run,gamePad[n].speed);    }    document.getElementById("start").addEventListener("click", function() {      game(1, 10);    });  </script></html>

   重新整理代码, 修改成面向对象样子, 过程式的代码太乱了, 虽然说是面向对象, 只是JS看起来舒服多;

   通过面向对象的思维把JS代码各个模块进行封装, 避免作用域的混乱不堪:

<html><head>  <meta charset="utf-8">  <style>    #conatiner{      width:400px;      height:500px;      border:1px solid #eee;      position: relative;    }  </style></head>  <body>    <span>typing</span>    <div>       <span id="score">0</span>得分 ;       需要:<span id="need"></span>分;    </div>    <div id="conatiner">          </div>    <button id="start">开始游戏</button>  </body>  <script>    var eConatiner = document.getElementById("conatiner");    var eScore = document.getElementById("score");    var getRandom = function() {      //随即一个97到122的字符;      var charCode = 97+Math.floor(Math.random()*26);      var speed = Math.ceil(Math.random()*4);      return {        code : String.fromCharCode(charCode),        speed : speed,        y : 0,        x : Math.floor(Math.random()*390),      }    };    function Game( n , score , eConatiner, eScore ,need) {      this.need = need;      this.need.innerHTML = score;      this.showArr = []; //字符对象的列表      this.shoted = 0;      this.n = n;      this.score = score;      this.eConatiner = eConatiner;      this.eScore = eScore;      this.events();      this.run();      this.timer = setInterval(this.run.bind(this), Game.gamePad[n].speed);    }    Game.gamePad = {      1 : {        speed : 100      },      2 : {        speed : 90      },      3 : {        speed : 70      },      4 : {        speed : 40      },      5 : {        speed : 20      }    }    Game.prototype.keyup = function(ev) {      showArr = this.showArr;      for(var i=0 ;i < showArr.length; i++) {        if(showArr[i].code === ev.key) {          showArr.splice(i,1);          this.shoted++;          this.eScore.innerHTML = this.shoted;          if(this.shoted === this.score && Game.gamePad[this.n+1] === undefined) {            alert("少侠你好厉害, 你好快, 真的好快好快的");          }else if(this.shoted === this.score) {            this.unbind();            alert("进入下一关");            new Game(this.n+1, this.score+10, this.eConatiner, this.eScore, this.need);          }          return;        }      }    }    Game.prototype.events = function() {      this.keyup = this.keyup.bind(this);      window.addEventListener("keyup", this.keyup);    }    Game.prototype.unbind = function() {      clearInterval(this.timer);      window.removeEventListener("keyup", this.keyup);    }    //随机一个字符对象, 包含了字符的运动速度,字符的值    //让showArr这个数组的数据运动;    Game.prototype.run = function(){      showArr = this.showArr;      //随机生成字符对象      if(Math.random()>0.9) {        var obj = getRandom();        showArr.push(obj);      }      //让元素运动      for(var i=0 ;i < showArr.length; i++) {        showArr[i].y+=showArr[i].speed;        if(showArr[i].y>500) {          alert("游戏失败");          location.reload();        }      }      this.eConatiner.innerHTML = "";      //让元素添加到界面中;      for(var i=0 ;i < showArr.length; i++) {        var eSpan = document.createElement("span");        eSpan.style.position = "absolute";        eSpan.innerHTML = showArr[i].code;        eSpan.style.left = showArr[i].x;        eSpan.style.top = showArr[i].y;        this.eConatiner.appendChild(eSpan);      }    }    document.getElementById("start").addEventListener("click", function() {      new Game(1, 10, eConatiner, eScore, document.getElementById("need"));    });  </script></html>

 

作者: NONO
出处:http://www.cnblogs.com/diligenceday/
QQ:287101329
微信:18101055830