Question

我有一个关于制作平台游戏而不使用canvas的愚蠢想法。它使用github的其他代码进行碰撞检测。

<!-- CSS -->
#character {
  position: absolute;
  background: blue;
  top: 0px;
  left: 0px;
  width: 50px;
  height: 50px;
  z-index: 1;
}

#box1 {
  position: absolute;
  background-color: #D0D0D0;
  top: 250px;
  left: 0px;
  width: 500px;
  height: 50px;
  z-index: 0;
}

#box2 {
  position: absolute;
  background-color: #D0D0D0;
  top: 200px;
  left: 400px;
  width: 50px;
  height: 50px;
  z-index: 0;
}

#box3 {
  position: absolute;
  background-color: #D0D0D0;
  top: 500px;
  left: 600px;
  width: 250px;
  height: 50px;
  z-index: 0;
}

#box4 {
  position: absolute;
  background-color: #D0D0D0;
  top: 500px;
  left: 400px;
  width: 50px;
  height: 50px;
  z-index: 0;
}

#box5 {
  position: absolute;
  background-color: #D0D0D0;
  top: 300px;
  left: 700px;
  width: 300px;
  height: 50px;
  z-index: 0;
}

#box6 {
  position: absolute;
  background-color: #D0D0D0;
  top: 200px;
  left: 1050px;
  width: 200px;
  height: 50px;
  z-index: 0;
}

#box7 {
  position: absolute;
  background-color: #D0D0D0;
  top: 550px;
  left: 450px;
  width: 50px;
  height: 50px;
}

#trap1 {
  position: absolute;
  background-color: red;
  top: 300px;
  left: 500px;
  width: 100px;
  height: 50px;
  z-index: 0;
}

#trap2 {
  position: absolute;
  background-color: red;
  top: 250px;
  left: 1000px;
  width: 50px;
  height: 50px;
  z-index: 0;
}

#end {
  position: absolute;
  background-color: yellow;
  top: 100px;
  left: 1225px;
  width: 25px;
  height: 25px;
  z-index: 0;
}

<!-- HTML -->
<body id=my>
<a>use W A D to move</a>
  <div id="character"></div>
  <div id="box1" class="box"></div>
  <div id="box2" class="box"></div>
  <div id="box3" class="box"></div>
  <div id="box4" class="box"></div>
  <div id="box5" class="box"></div>
  <div id="box6" class="box"></div>
  <div id="box7" class="box"></div>
  <div id="trap1" class="box"></div>
  <div id="trap2" class="box"></div>
  <div id="end" class="box"></div>
</body>

<!-- JavaScript -->
var currentKey; //records the current key pressed
var charSpeed = 40; //how fast the character will move
var coll = setInterval(col, 5);


function checkb(cb) {
  return cb == "b";
}

function checkr(cr) {
  return cr == "r";
}

function checkl(cl) {
  return cl == "l";
}

function checkt(ct) {
  return ct == "t";
}

function checke(ce) {
  return ce == "e";
}

function col() {
  var c = [colCheck($('#character'), $('#box1')), colCheck($('#character'), $('#box2')), colCheck($('#character'), $('#box3')), colCheck($('#character'), $('#box4')), colCheck($('#character'), $('#box5')), colCheck($('#character'), $('#box6')), colCheck($('#character'), $('#box7'))];

  var col = collision($('#character'), $('#trap1'));
  var col1 = collision($('#character'), $('#trap2'));
  var col2 = collision($('#character'), $('#end'));
  if (col == true || col1 == true) {
    self.location['replace'](location);
    clearInterval(coll);
  }
  if (col2 == true) {
    alert("You Won!!");
    self.location['replace'](location);
    clearInterval(coll);
  }
  if (c.some(checkr)) {
    $('#character').css("left", '-=15');
  }
  if (c.some(checkl)) {
    $('#character').css("left", '+=15');
  }
  if (c.some(checkb)) {}
  if (c.some(checkt)) {
    $('#character').css("top", '+=45');
  }
  if (!c.some(checkb)) {
    $('#character').css("top", '+=2');
  }
}
document.addEventListener('keydown', function(ev) {
  return onkey(ev, ev.keyCode, true);
}, false);
document.addEventListener('keyup', function(ev) {
  return onkey(ev, ev.keyCode, false);
}, false);


function onkey(ev, key, down) {
  if (down && $('#character').queue("fx").length == 0) {
    if (key == 100 || key == 68 ) {
      moveChar("right");
    } else if (key == 65 || key == 97 ) {
      moveChar("left");
    } else if (key == 87 || key == 119 ) {
      moveCharu("up");
    }
  }
}

function collision($div1, $div2) {
  var x1 = $div1.offset().left;
  var y1 = $div1.offset().top;
  var h1 = $div1.outerHeight(true);
  var w1 = $div1.outerWidth(true);
  var b1 = y1 + h1;
  var r1 = x1 + w1;
  var x2 = $div2.offset().left;
  var y2 = $div2.offset().top;
  var h2 = $div2.outerHeight(true);
  var w2 = $div2.outerWidth(true);
  var b2 = y2 + h2;
  var r2 = x2 + w2;

  if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return false;
  return true;
}

function colCheck($div1, $div2) {
  // get the vectors to check against
  var vX = ($div1.offset().left + ($div1.outerWidth(true) / 2)) - ($div2.offset().left + ($div2.outerWidth(true) / 2)),
    vY = ($div1.offset().top + ($div1.outerHeight(true) / 2)) - ($div2.offset().top + ($div2.outerHeight(true) / 2)),
    // add the half widths and half heights of the objects
    hWidths = ($div1.outerWidth(true) / 2) + ($div2.outerWidth(true) / 2),
    hHeights = ($div1.outerHeight(true) / 2) + ($div2.outerHeight(true) / 2),
    colDir = "e";

  // if the x and y vector are less than the half width or half height, they we must be inside the object, causing a collision
  if (Math.abs(vX) < hWidths && Math.abs(vY) < hHeights) {
    // figures out on which side we are colliding (top, bottom, left, or right)
    var oX = hWidths - Math.abs(vX),
      oY = hHeights - Math.abs(vY);
    if (oX >= oY) {
      if (vY > 0) {
        colDir = "t";
        $div1.offset().top += oY;
      } else {
        colDir = "b";
        $div1.offset().top -= oY;
      }
    } else {
      if (vX > 0) {
        colDir = "l";
        $div1.offset().left += oX;
      } else {
        colDir = "r";
        $div1.offset().left -= oX;
      }
    }
  }
  return colDir;
}

//Process Character Move Function
function moveChar(dir) {
  if (dir == "left") {
    //don't let the character move any further left if they are already at the left side of the screen  
    if ($('#character').position().left > 0) {
      $('#character').animate({
        left: '-=15'
      }, charSpeed);
    }
  }
  if (dir == "right") {
    $('#character').animate({
      left: '+=15'
    }, charSpeed);
  }
}

function moveCharu(dir, ) {
  var c = [colCheck($('#character'), $('#box1')), colCheck($('#character'), $('#box2')), colCheck($('#character'), $('#box3')), colCheck($('#character'), $('#box4')), colCheck($('#character'), $('#box5')), colCheck($('#character'), $('#box6')), colCheck($('#character'), $('#box7'))];

  if (dir == "up") {
    //don't let the character move any further up if they are already at the top of the screen and also don't let char air jump.
    if (c.some(checkb)) {
      var jump = setInterval(function() {
        $('#character').css({
          top: '-=8'
        }, );
      }, 1);
      var clearjump = setTimeout(function() {
        clearInterval(jump);
      }, 790);
    }
  }
}

（我知道它太乱了，而且有很多无用的东西，但......呃？）

有任何改进的想法吗？或者只是评论没关系

没有画布的平台游戏

0 个答案: