javascript - 如何添加游戏菜单

问题描述

我正在尝试添加一个带有“开始”的通用游戏菜单来启动游戏。我该怎么做呢？这是代码：

var LEFT_KEY = 37;
var UP_KEY = 38;
var RIGHT_KEY = 39;
var DOWN_KEY = 40;
var SPACE_KEY = 32;
var HERO_MOVEMENT = 3;
var lastLoopRun = 0;
var score = 0;
var iterations = 0;
var controller = new Object();
var enemies = new Array();

function createSprite(element, x, y, w, h) {
  var result = new Object();
  result.element = element;
  result.x = x;
  result.y = y;
  result.w = w;
  result.h = h;
  return result;
}

function toggleKey(keyCode, isPressed) {

  if (keyCode == LEFT_KEY) {

    controller.left = isPressed;

  }

  if (keyCode == RIGHT_KEY) {

    controller.right = isPressed;

  }

  if (keyCode == UP_KEY) {

    controller.up = isPressed;

  }

  if (keyCode == DOWN_KEY) {

    controller.down = isPressed;

  }

  if (keyCode == SPACE_KEY) {

    controller.space = isPressed;

  }

}

function intersects(a, b) {

  return a.x < b.x + b.w && a.x + a.w > b.x && a.y < b.y + b.h && a.y + a.h > b.y;

}

function ensureBounds(sprite, ignoreY) {

  if (sprite.x < 20) {

    sprite.x = 20;

  }

  if (!ignoreY && sprite.y < 20) {

    sprite.y = 20;

  }

  if (sprite.x + sprite.w > 480) {

    sprite.x = 480 - sprite.w;

  }

  if (!ignoreY && sprite.y + sprite.h > 480) {

    sprite.y = 480 - sprite.h;

  }

}

function setPosition(sprite) {

  var e = document.getElementById(sprite.element);

  e.style.left = sprite.x + 'px';

  e.style.top = sprite.y + 'px';

}

function handleControls() {

  if (controller.up) {

    hero.y -= HERO_MOVEMENT;

  }

  if (controller.down) {

    hero.y += HERO_MOVEMENT;

  }

  if (controller.left) {

    hero.x -= HERO_MOVEMENT;

  }

  if (controller.right) {

    hero.x += HERO_MOVEMENT;

  }

  if (controller.space) {

    var laser = getFireableLaser();

    if (laser) {

      laser.x = hero.x + 9;

      laser.y = hero.y - laser.h;

    }

  }

  ensureBounds(hero);

}

function getFireableLaser() {

  var result = null;

  for (var i = 0; i < lasers.length; i++) {

    if (lasers[i].y <= -120) {

      result = lasers[i];

    }

  }

  return result;

}

function getIntersectingLaser(enemy) {

  var result = null;

  for (var i = 0; i < lasers.length; i++) {

    if (intersects(lasers[i], enemy)) {

      result = lasers[i];

      break;

    }

  }

  return result;

}

function checkCollisions() {

  for (var i = 0; i < enemies.length; i++) {

    var laser = getIntersectingLaser(enemies[i]);

    if (laser) {

      var element = document.getElementById(enemies[i].element);

      element.style.visibility = 'hidden';

      element.parentNode.removeChild(element);

      enemies.splice(i, 1);

      i--;

      laser.y = -laser.h;

      score += 100;

    } else if (intersects(hero, enemies[i])) {

      gameOver();

    } else if (enemies[i].y + enemies[i].h >= 500) {

      var element = document.getElementById(enemies[i].element);

      element.style.visibility = 'hidden';

      element.parentNode.removeChild(element);

      enemies.splice(i, 1);

      i--;

    }

  }

}

function gameOver() {

  var element = document.getElementById(hero.element);

  element.style.visibility = 'hidden';

  element = document.getElementById('gameover');

  element.style.visibility = 'visible';

}

function showSprites() {

  setPosition(hero);

  for (var i = 0; i < lasers.length; i++) {

    setPosition(lasers[i]);

  }

  for (var i = 0; i < enemies.length; i++) {

    setPosition(enemies[i]);

  }

  var scoreElement = document.getElementById('score');

  scoreElement.innerHTML = 'SCORE: ' + score;

}

function updatePositions() {

  for (var i = 0; i < enemies.length; i++) {

    enemies[i].y += 4;

    enemies[i].x += getRandom(7) - 3;

    ensureBounds(enemies[i], true);

  }

  for (var i = 0; i < lasers.length; i++) {

    lasers[i].y -= 12;

  }

}

function addEnemy() {

  var interval = 50;

  if (iterations > 1500) {

    interval = 5;

  } else if (iterations > 1000) {

    interval = 20;

  } else if (iterations > 500) {

    interval = 35;

  }



  if (getRandom(interval) == 0) {

    var elementName = 'enemy' + getRandom(10000000);

    var enemy = createSprite(elementName, getRandom(450), -40, 35, 35);



    var element = document.createElement('div');

    element.id = enemy.element;

    element.className = 'enemy';

    document.children[0].appendChild(element);



    enemies[enemies.length] = enemy;

  }

}

function getRandom(maxSize) {

  return parseInt(Math.random() * maxSize);

}

function loop() {

  if (new Date().getTime() - lastLoopRun > 40) {

    updatePositions();

    handleControls();

    checkCollisions();



    addEnemy();



    showSprites();



    lastLoopRun = new Date().getTime();

    iterations++;

  }

  setTimeout('loop();', 2);

}

document.onkeydown = function(evt) {

  toggleKey(evt.keyCode, true);

};

document.onkeyup = function(evt) {

  toggleKey(evt.keyCode, false);

};

var hero = createSprite('hero', 250, 460, 20, 20);

var lasers = new Array();

for (var i = 0; i < 3; i++) {

  lasers[i] = createSprite('laser' + i, 0, -120, 2, 50);

}

loop();

#hero {
  /* background: #ff0000; */
  background-image: url("man-of-space.png");
  width: 40px;
  height: 40px;
  position: absolute;
}

#background {
  background-image: url("space.png");
  /* background: #000000; */
  width: 500px;
  height: 500px;
  position: absolute;
  left: 0px;
  top: 0px;
}

.laser {
  background: #00ff00;
  width: 2px;
  height: 50px;
  position: absolute;
}

.enemy {
  background-image: url("spaceship.png");
  background-size: 40px 40px;
  width: 40px;
  height: 40px;
  position: absolute;
}

#score {
  color: #ffffff;
  font-size: 18pt;
  position: absolute;
  left: 20px;
  top: 20px;
}

#gameover {
  color: #ff0000;
  font-size: 20px;
  position: absolute;
  left: 160px;
  top: 200px;
  visibility: hidden;
}

<div id="background"></div>
<div id="hero"></div>
<div class="laser" id="laser0"></div>
<div class="laser" id="laser1"></div>
<div class="laser" id="laser2"></div>
<div id="score"></div>
<div id="gameover">GAME OVER</div>

标签： javascripthtmlcss

javascript - 如何添加游戏菜单

问题描述

解决方案

推荐阅读