南通科迅教育

Javascript皮卡丘推箱子游戏代码

作者:南通科迅教育 2019年05月14日

今天我们来分享一下最近很多的搬箱子游戏:

Html代码如下:

<!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8" />

  <title>JS皮卡丘推箱子游戏代码</title>

  <style>

   div{

    background:url(img/wall.jpg);

   }

  </style>

 </head>

 <body>

  <script type="text/javascript" src="js/main.js"></script>

 </body>

</html>

js代码

var omap;

var move;

var step = 0;

function Map() {

 this.mapstyle = [

  [0, 0, 1, 1, 1, 1, 1, 0, 0],

  [0, 0, 1, 0, 5, 0, 1, 0, 0],

  [0, 0, 1, 0, 4, 0, 1, 0, 0],

  [1, 1, 1, 0, 3, 0, 1, 1, 1],

  [1, 0, 0, 0, 7, 0, 0, 0, 1],

  [1, 0, 7, 7, 7, 7, 7, 0, 1],

  [1, 0, 0, 0, 7, 0, 0, 0, 1],

  [1, 1, 1, 4, 7, 4, 1, 1, 1],

  [0, 0, 1, 0, 3, 0, 1, 0, 0],

  [0, 0, 1, 0, 7, 0, 1, 0, 0],

  [0, 0, 1, 0, 3, 0, 1, 0, 0],

  [0, 0, 1, 1, 1, 1, 1, 0, 0]

 ]

 //0:空地 1:墙 3:目的地 4:箱子 5:人 7:箱子和目的地重合 8:人和目的地重合

 this.length1 = this.mapstyle.length;

 this.length2 = this.mapstyle[0].length;

 this.show = function() {

  document.getElementsByTagName("body")[0].innerHTML = "";

  for (var i = 0; i < this.length1; i++) {

   for (var j = 0; j < this.length2; j++) {

    switch (this.mapstyle[i][j]) {

     case 0:

      document.write('<div style="width:45px; height:45px; display:inline-block; "></div>');

      break;

     case 1:

      document.write(

       '<div style="width:45px; height:45px; background:url(img/wall.jpg); display:inline-block;"></div>');

      break;

     case 3:

      document.write(

       '<div style="width:44px; height:44px; border:0.5px solid limegreen; display:inline-block;"></div>');

      break;

     case 4:

      document.write('<div style="width:45px; height:45px; background:url(img/box.png); display:inline-block;"></div>');

      break;

     case 5:

      document.write(

       '<div style="width:45px; height:45px; background:url(img/timg@0,1x.png); background-position:50% 50%; background-size:100%; display:inline-block;"></div>'

      );

      break;

     case 7:

      document.write(

       '<div style="width:45px; height:45px; background:url(img/over_box.png); display:inline-block;"></div>');

      break;

     case 8:

      document.write(

       '<div style="width:45px; height:45px; background:url(img/timg@0,1x.png); background-position:50% 50%; background-size:100%; display:inline-block;"></div>'

      );

      break;

    }

   }

   document.write("<br/>");

  }

 }

}

function Move() {

 var flag = 0;

 var result = 0;

 for (var i = 0; i < omap.length1; i++) {

  for (var j = 0; j < omap.length2; j++) {

   if (omap.mapstyle[i][j] == 3) {

    flag++;

   }

  }

 }

 console.log(flag);

 this.play = function(code) {

  for (var i = 0; i < omap.length1; i++) {

   for (var j = 0; j < omap.length2; j++) {

    if (omap.mapstyle[i][j] == 5 || omap.mapstyle[i][j] == 8) {

     break;

    }

   }

   if (omap.mapstyle[i][j] == 5 || omap.mapstyle[i][j] == 8) {

    break;

   }

  }

  switch (code) {

   case 37: //左

    if (omap.mapstyle[i][j - 1] == 0 || omap.mapstyle[i][j - 1] == 3) {

     omap.mapstyle[i][j - 1] += 5;

     omap.mapstyle[i][j] -= 5;

    } else if (omap.mapstyle[i][j - 1] == 7 || omap.mapstyle[i][j - 1] == 4) {

     if (omap.mapstyle[i][j - 2] == 0 || omap.mapstyle[i][j - 2] == 3) {

      omap.mapstyle[i][j - 2] += 4;

      omap.mapstyle[i][j - 1] += 1;

      omap.mapstyle[i][j] -= 5;

     }

    }

    break;

   case 38: //上

    if (omap.mapstyle[i - 1][j] == 0 || omap.mapstyle[i - 1][j] == 3) {

     omap.mapstyle[i - 1][j] += 5;

     omap.mapstyle[i][j] -= 5;

    } else if (omap.mapstyle[i - 1][j] == 7 || omap.mapstyle[i - 1][j] == 4) {

     if (omap.mapstyle[i - 2][j] == 0 || omap.mapstyle[i - 2][j] == 3) {

      omap.mapstyle[i - 2][j] += 4;

      omap.mapstyle[i - 1][j] += 1;

      omap.mapstyle[i][j] -= 5;

     }

    }

    break;

   case 40: //下

    if (omap.mapstyle[i + 1][j] == 0 || omap.mapstyle[i + 1][j] == 3) {

     omap.mapstyle[i + 1][j] += 5;

     omap.mapstyle[i][j] -= 5;

    } else if (omap.mapstyle[i + 1][j] == 7 || omap.mapstyle[i + 1][j] == 4) {

     if (omap.mapstyle[i + 2][j] == 0 || omap.mapstyle[i + 2][j] == 3) {

      omap.mapstyle[i + 2][j] += 4;

      omap.mapstyle[i + 1][j] += 1;

      omap.mapstyle[i][j] -= 5;

     }

    }

    break;

   case 39: //右 

    if (omap.mapstyle[i][j + 1] == 0 || omap.mapstyle[i][j + 1] == 3) {

     omap.mapstyle[i][j + 1] += 5;

     omap.mapstyle[i][j] -= 5;

    } else if (omap.mapstyle[i][j + 1] == 7 || omap.mapstyle[i][j + 1] == 4) {

     if (omap.mapstyle[i][j + 2] == 0 || omap.mapstyle[i][j + 2] == 3) {

      omap.mapstyle[i][j + 2] += 4;

      omap.mapstyle[i][j + 1] += 1;

      omap.mapstyle[i][j] -= 5;

     }

    }

    break;

  }

  omap.show();

  for (var i = 0; i < omap.length1; i++) {

   for (var j = 0; j < omap.length2; j++) {

    if (omap.mapstyle[i][j] == 7) {

     result++;

    }

   }

  }

  if (flag == result) {

   alert("恭喜tong guan,你总共走了" + step + "步");

  } else {

   result = 0;

  }

 }

}

window.onload = function() {

 omap = new Map();

 omap.show();

 move = new Move();

 function play() {

  if (window.event) {

   code = window.event.keyCode;

  } else {

   code = event.keyCode;

  }

  move.play(code);

  step++;

 }

 console.time("timer");

 for (var i = 0; i < 10000; i++) {}

 console.timeEnd("timer");

 document.onkeydown = play;

}

那么这期就到这里,下期再见

加微信咨询
黄老师 @科迅教育
微信号:ntk******88

获取课程资料+免费试听,体验强师课程!

微信咨询
相关资料
南通UI设计培训 学历低 学完好就业吗? 南通JAVA培训课程体系 南通C4D培训学完都可以做什么 南通软件开发培训需要学什么? 南通Java培训入门知识准备