【JAVASCRIPT】Snake

oNZJOqE

A Pen by Edward Lance Lorilla on CodePen.

License.

view raw onzjoqe.markdown hosted with ❤ by GitHub

	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;
	})
	})

view raw script.js hosted with ❤ by GitHub