oNZJOqE

onzjoqe.markdown

oNZJOqE

A Pen by Edward Lance Lorilla on CodePen.

License.

script.js

var Map;
Map = {
  width: 990,
  height: 600,
  backgroundColor: 'rgba(36, 30, 225, 0.25)',
  map: null,
  createMap: function () {
    if (this.map == null) {
      this.map = document.createElement("div");
    }
  },
  adornMap: function () {
    this.map.style.position = "relative";
    this.map.style.width = this.width + "px";
    this.map.style.height = this.height + "px";
    this.map.style.backgroundColor = this.backgroundColor;
  },
  initialize: function () {
    this.createMap();
    this.adornMap();
    document.body.appendChild(this.map);
  }
};
//Snake object
var Snake;
Snake = {
  snakeWidth: 30,
  snakeHeight: 30,
  snake: [[3, 1, null, 'red'], [2, 1, null, 'black'], [1, 1, null, 'black']],
  maP: null,
  direct: "right",
  timer: null,
  createSnake: function () {
    for (var i = 0; i < this.snake.length; i++) {
      if (this.snake[i][2] == null) {
        this.snake[i][2] = document.createElement("div");
      }
      this.snake[i][2].style.width = this.snakeWidth + "px";
      this.snake[i][2].style.height = this.snakeHeight + "px";
      this.snake[i][2].style.backgroundColor = this.snake[i][3];
      this.snake[i][2].style.position = "absolute";
      this.snake[i][2].style.left = this.snake[i][0] * this.snakeWidth + "px";
      this.snake[i][2].style.top = this.snake[i][1] * this.snakeHeight + "px";
      this.maP.appendChild(this.snake[i][2]);
    }
  },
  move: function () {
    //Snake body moves
    for (var i = this.snake.length-1; i> 0; i--) {
      this.snake[i][0] = this.snake[i-1][0];
      this.snake[i][1] = this.snake[i-1][1];
    }
    //Snake head moves
    switch (this.direct) {
      case "left":
        this.snake[0][0] -= 1;
        break;
      case "right":
        this.snake[0][0] += 1;
        break;
      case "up":
        this.snake[0][1] -= 1;
        break;
      case "down":
        this.snake[0][1] += 1;
        break;
    }
    //Prevent the snake from moving outside the map
    if (this.snake[0][0]> 32) {
      this.snake[0][0] = 0;
    }
    if (this.snake[0][0] <0) {
      this.snake[0][0] = 32;
    }
    if (this.snake[0][1] <0) {
      this.snake[0][1] = 19;
    }
    if (this.snake[0][1]> 19) {
      this.snake[0][1] = 0;
    }
    //If the snake hits itself, the game is over
    for (var i = 1; i <this.snake.length; i++) {
      if (this.snake[0][0] == this.snake[i][0] && this.snake[0][1] == this.snake[i][1]) {
        clearInterval(this.timer);
        alert("Game over!");
        return;
      }
    }
    //When the snake eats food, it regenerates the food position, and the snake body becomes one section
    if (this.snake[0][0] == Food.left && this.snake[0][1] == Food.top) {
      Food.createFood();
      this.snake.push(
      [
        this.snake[this.snake.length-1][0],
        this.snake[this.snake.length-1][1],
        null,
        "black"
        ]
        )
    }
    this.createSnake();
  },
  initialize: function () {
    var that = this;
    that.createSnake();
    that.timer = setInterval(function () {
      that.move();
    }, 500)
  }
};
//Food object
var Food;
Food = {
  foodWidth: 30,
  foodHeight: 30,
  backgroundColor: "orange",
  left: null,
  top: null,
  maP: null,
  snakE: null,
  food: null,
  //Create food
  createFood: function () {
    this.randomPosition();
    if (this.food == null) {
      this.food = document.createElement('div');
      this.food.style.width = this.foodWidth + "px";
      this.food.style.height = this.foodHeight + "px";
      this.food.style.backgroundColor = this.backgroundColor;
      this.food.style.position = "absolute";
      this.maP.appendChild(this.food);
    }
    this.food.style.left = this.left * this.foodWidth + "px";
    this.food.style.top = this.top * this.foodHeight + "px";
  },
  //Randomly generate food location
  randomPosition: function () {
    var repeat;
    do {
      repeat = false;
      this.left = Math.floor(Math.random() * 33);
      this.top = Math.floor(Math.random() * 20);
      for (var i = 0; i <this.snakE.length; i++) {
        if (this.left == this.snakE[i][0] && this.top == this.snakE[i][1]) {
          repeat = true;
        }
      }
    } while (repeat)
  }
  };
  window.addEventListener('load', function () {
    Map.initialize();
    Snake.maP = Map.map;
    Snake.initialize();
    Food.maP = Map.map;
    Food.snakE = Snake.snake;
    Food.createFood();
    //Press the up, down, left, and right keys, the snake changes its moving direction
    window.addEventListener('keyup', function (e) {
      var direct = e.keyCode;
      switch (direct) {
        case 37:
          if (Snake.direct == "right") {
            return;
          }
          Snake.direct = "left";
          break;
        case 38:
          if (Snake.direct == "down") {
            return;
          }
          Snake.direct = "up";
          break;
        case 39:
          if (Snake.direct == "left") {
            return;
          }
          Snake.direct = "right";
          break;
        case 40:
          if (Snake.direct == "up") {
            return;
          }
          Snake.direct = "down";
          break;
      }
    })
    //Long press the arrow keys to accelerate the movement
    var lastKey = -1;
    window.addEventListener('keydown', function (e) {
      if (e.keyCode == lastKey) {
        switch (e.keyCode) {
          case 37:
            if (Snake.direct == "right") {
              return;
            }
            Snake.direct = "left";
            break;
          case 38:
            if (Snake.direct == "down") {
              return;
            }
            Snake.direct = "up";
            break;
          case 39:
            if (Snake.direct == "left") {
              return;
            }
            Snake.direct = "right";
            break;
          case 40:
            if (Snake.direct == "up") {
              return;
            }
            Snake.direct = "down";
            break;
        }
        Snake.move();
      }
      lastKey = e.keyCode;
    })
  })