365JS - 1 - Snake

Developer
Kévin Barfleur
Size
6,331 Kb
Views
8,096
  1. 365JS - 1 - Snake Previews
  2. 365JS - 1 - Snake HTML Codes
  3. 365JS - 1 - Snake CSS Codes
  4. 365JS - 1 - Snake JS Codes

How do I make an 365js - 1 - snake?

What is a 365js - 1 - snake? How do you make a 365js - 1 - snake? This script and codes were developed by Kévin Barfleur on 30 January 2023, Monday.

365JS - 1 - Snake Previews
IQ Test

365JS - 1 - Snake - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>365JS - 1 - Snake</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="game">	<h1>Snake.js</h1>	<canvas class="gameCanvas" width="400px" height="400px"></canvas>	<div class="button up"><i class="fa fa-arrow-up"></i></div>	<div class="button right"><i class="fa fa-arrow-right"></i></div>	<div class="button down"><i class="fa fa-arrow-down"></i></div>	<div class="button left"><i class="fa fa-arrow-left"></i></div>	<div class="score"></div>	<div class="speed"></div>
</div> <script src="js/index.js"></script>
</body>
</html>

365JS - 1 - Snake - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Raleway);
@import url(https://fonts.googleapis.com/css?family=Monoton);
@import url(https://fonts.googleapis.com/css?family=Press+Start+2P);
body { background-color: #FFD96F; overflow: hidden;
}
.game { position: relative; width: 510px; height: 750px; border: 5px solid black; border-radius: 10%; margin: 5% auto; background-color: #2C2A2D; box-shadow: 10px 10px black, 20px 20px 20px black;
}
.game h1 { width: 100%; text-align: center; font-family: 'Monoton', cursive; font-size: 90px; color: lightgray; margin-top: 0px; margin-bottom: 0px;
}
.game canvas { margin: auto 50%; border: 2px solid black; border-radius: 10px; transform: translateX(-50%);
}
.game .score { width: 80px; height: 30px; background-color: black; margin-left: 60px; font-family: 'Press Start 2P', cursive; text-align: center; font-size: 20px; color: white; padding-top: 10px; border-radius: 10px;
}
.game .speed { position: absolute; width: 150px; height: 25px; top: 548px; right: 50px; background-color: black; font-family: 'Press Start 2P', cursive; text-align: center; font-size: 10px; color: white; padding-top: 15px; border-radius: 10px;
}
.game .button { width: 60px; height: 60px; background-color: #82352D; border-radius: 100%; box-shadow: 3px 3px #53211C; transition: .3s;
}
.game .button.active { transition: .3s; transform: translateX(3px) translateY(3px); box-shadow: 0px 0px #53211C;
}
.game .button.up { text-align: center; position: absolute; bottom: 120px; left: calc(50% - 30px);
}
.game .button.up i { padding-top: 15px; font-size: 30px; background-color: #666666; -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; color: transparent; text-shadow: rgba(255, 255, 255, 0.5) 0px 3px 3px;
}
.game .button.right { text-align: center; position: absolute; bottom: 70px; right: 30%;
}
.game .button.right i { padding-top: 15px; font-size: 30px; background-color: #666666; -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; color: transparent; text-shadow: rgba(255, 255, 255, 0.5) 0px 3px 3px;
}
.game .button.down { text-align: center; position: absolute; bottom: 20px; left: calc(50% - 30px);
}
.game .button.down i { padding-top: 15px; font-size: 30px; background-color: #666666; -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; color: transparent; text-shadow: rgba(255, 255, 255, 0.5) 0px 3px 3px;
}
.game .button.left { text-align: center; position: absolute; bottom: 70px; left: 30%;
}
.game .button.left i { padding-top: 15px; font-size: 30px; background-color: #666666; -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; color: transparent; text-shadow: rgba(255, 255, 255, 0.5) 0px 3px 3px;
}

365JS - 1 - Snake - Script Codes JS Codes

'use strict';
// Button Effect
var buttons = document.querySelectorAll('.button');
//Canvas
var canvas = document.querySelector('canvas');
var canvasContext = canvas.getContext('2d');
var framePerSecond = 10;
var scale = 20;
//Score & speed
var score = document.querySelector('.score');
var speed = document.querySelector('.speed');
speed.innerHTML = 0 + " px/s";
var randomSpeed = 0;
var level = 140;
//Générate fruitGrid
var fruitX = [];
var fruitY = [];
for (var i = 0; i <= 380; i += 20) {	fruitX.push(i);	fruitY.push(i);
}
// About snake coordonate/direction
var coordFruitX = undefined, coordFruitY = undefined;
var direction = 'undefined';
var loose = false;
var snakeX = canvas.width / 2;
var snakeY = canvas.height / 2;
var snakeSize = 1;
var snakeHolderX = [snakeX];
var snakeHolderY = [snakeY];
var timeLooper = undefined;
// Lanch game on window load
window.onload = function () {	generateFruit();	game();
};
var gameLoop = setInterval(function () {	game();	score.innerHTML = snakeSize - 1;
}, level);
var game = function game() {	// Color background each frame	canvasContext.fillStyle = '#232124';	canvasContext.fillRect(0, 0, canvas.width, canvas.height);	// Touch border or snake	if (loose) reset();	// Update & draw Snake, Fruit	moveSnake(snakeX, snakeY);	for (var i = 0; i < snakeSize; i++) {	drawSnake(snakeHolderX[i], snakeHolderY[i]);	}	drawFruit(coordFruitX, coordFruitY);	if (direction !== 'undefined') {	randomSpeed = Math.random() * 0.8 + 1.2;	speed.innerHTML = Math.round(snakeSize * randomSpeed * 100 / 100) / 2 + " px/s";	}
};
window.addEventListener('keydown', function (event) {	if (event.key === 'ArrowUp') {	direction = 'up';	buttons[0].classList.add('active');	}	if (event.key === 'ArrowDown') {	direction = 'down';	buttons[2].classList.add('active');	}	if (event.key === 'ArrowLeft') {	direction = 'left';	buttons[3].classList.add('active');	}	if (event.key === 'ArrowRight') {	direction = 'right';	buttons[1].classList.add('active');	}
});
window.addEventListener('keyup', function (event) {	if (event.key === 'ArrowUp') buttons[0].classList.remove('active');	if (event.key === 'ArrowDown') buttons[2].classList.remove('active');	if (event.key === 'ArrowLeft') buttons[3].classList.remove('active');	if (event.key === 'ArrowRight') buttons[1].classList.remove('active');
});
var moveSnake = function moveSnake(posX, posY) {	// Update save array for Snake size	snakeHolderX.unshift(posX);	snakeHolderY.unshift(posY);	if (direction === 'up') {	posY -= 1 * scale;	if (posY <= 0) loose = true;	}	if (direction === 'down') {	posY += 1 * scale;	if (posY >= canvas.height - 20) loose = true;	}	if (direction === 'left') {	posX -= 1 * scale;	if (posX <= 0) loose = true;	}	if (direction === 'right') {	posX += 1 * scale;	if (posX >= canvas.height - 20) loose = true;	}	snakeX = posX;	snakeY = posY;	snakeHolderX[0] = snakeX;	snakeHolderY[0] = snakeY;	// check about snake's body colision	if (snakeHolderX.length > 1) {	for (var i = 1; i < snakeSize; i++) {	distanceSnakeBody(snakeHolderX[0], snakeHolderY[0], snakeHolderX[i], snakeHolderY[i]);	}	}	// fruit colision => increment size	distanceFruit(snakeX, snakeY, coordFruitX, coordFruitY);
};
var drawSnake = function drawSnake(snakePosX, snakePosY) {	canvasContext.beginPath();	canvasContext.strokeStyle = 'black';	canvasContext.lineWidth = '2';	canvasContext.rect(snakePosX, snakePosY, 20, 20);	canvasContext.fillStyle = '#D96FFF';	canvasContext.fill();	canvasContext.stroke();
};
var generateFruit = function generateFruit() {	var randomPositionX = Math.floor(Math.random() * 18 + 1);	var randomPositionY = Math.floor(Math.random() * 18 + 1);	coordFruitX = fruitX[randomPositionX];	coordFruitY = fruitY[randomPositionY];
};
var drawFruit = function drawFruit(posX, posY) {	canvasContext.beginPath();	canvasContext.strokeStyle = 'black';	canvasContext.lineWidth = '2';	canvasContext.rect(posX, posY, 20, 20);	canvasContext.fillStyle = '#FFD96F';	canvasContext.fill();	canvasContext.stroke();
};
// Calculate distance between two point => for colisions
var distanceFruit = function distanceFruit(posSnakeX, posSnakeY, posFruitX, posFruitY) {	var d = Math.floor(Math.hypot(posFruitX - posSnakeX, posFruitY - posSnakeY));	if (d < 20) {	generateFruit();	snakeSize++;	score.innerHTML = snakeSize - 1;	if (level > 30) {	level -= 10;	}	}
};
// Like distanceFruit
var distanceSnakeBody = function distanceSnakeBody(posSnakeX, posSnakeY, snakeBodyX, snakeBodyY) {	var d = Math.floor(Math.hypot(snakeBodyX - posSnakeX, snakeBodyY - posSnakeY));	if (d < 20) {	for (var i = 0; i < snakeSize; i++) {	drawSnake(snakeHolderX[i], snakeHolderY[i]);	}	reset();	}
};
var reset = function reset() {	direction = 'undefined';	snakeX = canvas.width / 2;	snakeY = canvas.height / 2;	loose = false;	snakeSize = 1;	score.innerHTML = snakeSize - 1;	speed.innerHTML = 0 + " px/s";	level = 200;
};
365JS - 1 - Snake - Script Codes
365JS - 1 - Snake - Script Codes
Home Page Home
Developer Kévin Barfleur
Username kevin_barfleur
Uploaded January 30, 2023
Rating 3
Size 6,331 Kb
Views 8,096
Do you need developer help for 365JS - 1 - Snake?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kévin Barfleur (kevin_barfleur) Script Codes
Name
365JS - Todolist
ReactJS - Markdown Previewer
ReactJS - Todolist
365JS - Clavier
ReactMeteoApp
Stylexemple
ReactJS - Portfolio
ReactJS - Camper Leaderboard
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!