We Keep Coding

Function used for calculating not functioning, and a snake that can't be longer than 2?

I'm making a snake clone, and I've got the head to the second segment working. The rest of the body checks should run through automatically, but it cuts off the body at the second segment without going through the rest of the segments, despite the fact that it should. My code is as follows:
var pixels = document.getElementsByClassName('pixel'); // 0 to 95
var dir = 'right';
var foodEat = true;
var dead = true;
var snakeLong = 1;
var headPos;
var foodPix;
var foodMake = function(){ // Create Food pixel (Not On Snake)
var tempnum = Math.ceil(Math.random() * (95 - 5) + 5);
var pixstate = window.getComputedStyle(pixels[tempnum]).getPropertyValue('--state');
if (pixstate == 'snake' || pixstate == 'snakeHead' || pixstate == 'snakeEnd'){
console.log('Repeating');
foodMake();
} else {
console.log('Food Made!');
$(pixels[tempnum]).css('--state','food');
}
}
var directSend = function(reference,direction){
if (direction == 'left'){
reference -=1;
return reference;
} else if (direction == 'up'){
reference -=12;
return reference;
} else if (direction == 'right'){
reference +=1;
return reference;
} else if (direction == 'down'){
reference +=12;
return reference;
}
}
var snakeMake = function(refer,tsnakel){ // Continue To Form Snake
if (tsnakel > 0){
var tempdir = $(pixels[refer]).css('--goFrom');
console.log(directSend(refer,tempdir));
if (tsnakel = 1){
$(pixels[directSend(refer,tempdir)]).css('--state','empty');
} else {
refer = directSend(refer,tempdir);
}
tsnakel -= 1;
snakeMake(refer,tsnakel);
}
}
var snakeHEF = function(){ // Form First Sections of Snake
var Pheadpos;
var tdir;
if (dir == 'left'){ // Previous Segment Position
Pheadpos = 1;
tdir = 'right';
} else if (dir == 'up'){
Pheadpos = 12;
tdir = 'down';
} else if (dir == 'right'){
Pheadpos = -1;
tdir = 'left';
} else if (dir == 'down'){
Pheadpos = -12;
tdir = 'up';
}
$(pixels[headPos]).css('--state','snakeHead');
$(pixels[headPos]).css('--snakePos','1');
$(pixels[headPos]).css('--goFrom',tdir);
if (snakeLong == 1){ // No Food Eaten
$(pixels[headPos+Pheadpos]).css('--state','empty');
}
if (snakeLong >= 2){ // One Food Eaten
var send;
$(pixels[headPos+Pheadpos]).css('--state','snake');
$(pixels[headPos+Pheadpos]).css('--snakePos','2');
var temppos = $(pixels[headPos+Pheadpos]).css('--goFrom');
if (temppos == 'left'){
$(pixels[headPos+Pheadpos-1]).css('--state','empty');
send = headPos+Pheadpos-1;
} else if (temppos == 'up'){
$(pixels[headPos+Pheadpos-12]).css('--state','empty');
send = headPos+Pheadpos-12;
} else if (temppos == 'right'){
$(pixels[headPos+Pheadpos+1]).css('--state','empty');
send = headPos+Pheadpos+1;
} else if (temppos == 'down'){
$(pixels[headPos+Pheadpos+12]).css('--state','empty');
send = headPos+Pheadpos+12;
}
if (snakeLong > 2){ // More Than 1 Food Eaten
snakeMake(send,snakeLong-2);
}
}
}
var Game = setInterval(function(){
$(document).keydown(function(keyPressed){
if (keyPressed.keyCode == 88){ // Reset Game [x]
for (s = 0; s < 96; s++){
var pixstate = $(pixels[s]).css('--state');
if (pixstate == 'food'){
$(pixels[s]).css('--state','empty');
}
if (pixstate == 'snake' || pixstate == 'snakeHead' || pixstate == 'snakeEnd'){
$(pixels[s]).css('--state','empty');
$(pixels[s]).css('--snakePos','not');
$(pixels[s]).css('--goFrom','none');
}
}
foodEat = true;
$(pixels[0]).css('--state','snakeHead');
$(pixels[0]).css('--snakePos','1');
$(pixels[0]).css('--goFrom','left');
dead = false;
snakeLong = 1;
headPos = 0;
dir = 'right';
} // Movement Set
if (keyPressed.keyCode == 37 && dir !== 'right'){ // [<-]
dir = 'left';
} else if (keyPressed.keyCode == 38 && dir !== 'down'){ // [^^]
dir = 'up';
} else if (keyPressed.keyCode == 39 && dir !== 'left'){ // [->]
dir = 'right';
} else if (keyPressed.keyCode == 40 && dir !== 'up'){ // [vv]
dir = 'down';
}
});
if (dead == false){ //Dead Check Then Do Game Calculations
if (dir == 'left'){ // Move Head
for (s = 0; s < 8; s++){
if (headPos == 0+(12*s)){
dead = true;
}
}
if (dead == false){
headPos -= 1;
if (foodPix == headPos){
snakeLong += 1;
foodEat = true;
}
snakeHEF();
}
} else if (dir == 'up'){
if (headPos < 12){
dead = true;
}
if (dead == false){
headPos -= 12;
if (foodPix == headPos){
snakeLong += 1;
foodEat = true;
}
snakeHEF();
}
} else if (dir == 'right'){
for (s = 0; s < 8; s++){
if (headPos == 11+(12*s)){
dead = true;
}
}
if (dead == false){
headPos += 1;
if (foodPix == headPos){
snakeLong += 1;
foodEat = true;
}
snakeHEF();
}
} else if (dir == 'down'){
if (headPos > 83){
dead = true;
}
if (dead == false){
headPos += 12;
if (foodPix == headPos){
snakeLong += 1;
foodEat = true;
}
snakeHEF();
}
}
if (foodEat == true){ // Food generator
foodMake();
foodEat = false;
}
for (s = 0; s < 96; s++){
var tpixstate = $(pixels[s]).css('--state');
if (tpixstate == 'food'){
foodPix = s;
}
}
}
for (s = 0; s < 96; s++){ // Pixel Update
var pixstate = $(pixels[s]).css('--state');
if (pixstate == 'snake' || pixstate == 'snakeHead' || pixstate == 'snakeEnd'){
$(pixels[s]).css('background-color','rgb(0,170,0)');
} else if (pixstate == 'food'){
$(pixels[s]).css('background-color','rgb(270,0,0)');
} else if (pixstate == 'empty'){
$(pixels[s]).css('background-color','rgb(68,68,68)');
}
}
},750);
Edit: To reduce confusion, I have now given the entire code.

As it turns out, I was calling the code to remove the third body segment every time, (lines 76 thru 88) even when the body was supposed to be longer.(I changed it to one '--state' changer, in an if statement checking for a body length of 2) Additionally, an if statement (line 40) was using = instead of ==, causing it to count as true each time, cutting off the fourth body segment.

having problems understanding a tutorial on one page scroll-vanilla JS- no libraries

I was looking into one of the only few full page scroll codes which I have found so far, and wanted to somehow get the idea of what I should do by reversing the engineering but I'm noob and not good at understanding it pretty well, I don't understand it well and I get stock at every line, can you please explain to me what the guy has done? Whats the basics of what he is doing ..variables and functions and what they are in this case and why we need them? A summary on what is going on.
this is the link to the code
https://codepen.io/igstudio/pen/pbYOab
this is the JS code
(function() {
"use strict";
/*[pan and well CSS scrolls]*/
var pnls = document.querySelectorAll('.panel').length,
scdir, hold = false;
function _scrollY(obj) {
var slength, plength, pan, step = 100,
vh = window.innerHeight / 100,
vmin = Math.min(window.innerHeight, window.innerWidth) / 100;
if ((this !== undefined && this.id === 'well') || (obj !== undefined && obj.id === 'well')) {
pan = this || obj;
plength = parseInt(pan.offsetHeight / vh);
}
if (pan === undefined) {
return;
}
plength = plength || parseInt(pan.offsetHeight / vmin);
slength = parseInt(pan.style.transform.replace('translateY(', ''));
if (scdir === 'up' && Math.abs(slength) < (plength - plength / pnls)) {
slength = slength - step;
} else if (scdir === 'down' && slength < 0) {
slength = slength + step;
} else if (scdir === 'top') {
slength = 0;
}
if (hold === false) {
hold = true;
pan.style.transform = 'translateY(' + slength + 'vh)';
setTimeout(function() {
hold = false;
}, 1000);
}
console.log(scdir + ':' + slength + ':' + plength + ':' + (plength - plength / pnls));
}
/*[swipe detection on touchscreen devices]*/
function _swipe(obj) {
var swdir,
sX,
sY,
dX,
dY,
threshold = 100,
/*[min distance traveled to be considered swipe]*/
slack = 50,
/*[max distance allowed at the same time in perpendicular direction]*/
alT = 500,
/*[max time allowed to travel that distance]*/
elT, /*[elapsed time]*/
stT; /*[start time]*/
obj.addEventListener('touchstart', function(e) {
var tchs = e.changedTouches[0];
swdir = 'none';
sX = tchs.pageX;
sY = tchs.pageY;
stT = new Date().getTime();
//e.preventDefault();
}, false);
obj.addEventListener('touchmove', function(e) {
e.preventDefault(); /*[prevent scrolling when inside DIV]*/
}, false);
obj.addEventListener('touchend', function(e) {
var tchs = e.changedTouches[0];
dX = tchs.pageX - sX;
dY = tchs.pageY - sY;
elT = new Date().getTime() - stT;
if (elT <= alT) {
if (Math.abs(dX) >= threshold && Math.abs(dY) <= slack) {
swdir = (dX < 0) ? 'left' : 'right';
} else if (Math.abs(dY) >= threshold && Math.abs(dX) <= slack) {
swdir = (dY < 0) ? 'up' : 'down';
}
if (obj.id === 'well') {
if (swdir === 'up') {
scdir = swdir;
_scrollY(obj);
} else if (swdir === 'down' && obj.style.transform !== 'translateY(0)') {
scdir = swdir;
_scrollY(obj);
}
e.stopPropagation();
}
}
}, false);
}
/*[assignments]*/
var well = document.getElementById('well');
well.style.transform = 'translateY(0)';
well.addEventListener('wheel', function(e) {
if (e.deltaY < 0) {
scdir = 'down';
}
if (e.deltaY > 0) {
scdir = 'up';
}
e.stopPropagation();
});
well.addEventListener('wheel', _scrollY);
_swipe(well);
var tops = document.querySelectorAll('.top');
for (var i = 0; i < tops.length; i++) {
tops[i].addEventListener('click', function() {
scdir = 'top';
_scrollY(well);
});
}
})();
Thanks.

Game over return

I am during writing game. When condition (playerlife < 1) is meet, game should stop. Whole game is in singlePlayer function. The problem is, I don't know how to end this function. Simple placing condition inside singlePlayer function doesn't work because it is checked only once during starting a game.
if (playerlife < 1) {
return;
}
I also tried to put this condition in interval and check if condition is meet continously but I doesn't work and anyway it doesn't looks like a good idea.
Below is part of code where after moving player there are checked some conditions. Game is similar to old school "Frogger". When player jump in to the water then he lost 1 life. After loosing 3 lives game should be over.
$(function() {
function singlePlayer() {
checkPosition(x, y) {
for (var i = 0; i < raftsTab.length; i++) {
if (x == raftsTab[i].PosX && y == raftsTab[i].PosY) {
let thisRaft = raftsTab[i];
console.log(x, y);
console.log(thisRaft);
clearInterval(MoveToPlayer);
movePlayer(thisRaft);
return;
}
}
for (var i = 0; i < raftsTab.length; i++) {
if (x !== raftsTab[i].PosX && y !== raftsTab[i].PosY && y !== 0 && y !== 5 && y !== 10) {
player1.lifes = player1.lifes - 1;
//player dead after loosing 3 lives - it would be perfect if game could be ended from here
$('.lifes').text("Player lifes: " + player1.lifes);
for (var i = 0; i < trophiesTab.length; i++) {
if (player1.trophie - 1 == i) {
trophiesTab[i].show();
player1.trophie = -1;
}
}
player1.PosX = 5;
player1.PosY = 10;
clearInterval(MoveToPlayer);
changePosition();
return;
}
}
for (var i = 0; i < trophiesTab.length; i++) {
if (x == trophiesTab[i].PosX && y == trophiesTab[i].PosY && player1.trophie == -1) {
trophiesTab[i].hide();
}
}
if (x == 5 && y == 0 && player1.trophie !== -1) {
tresure1 = tresure1 + player1.trophie;
player1.items = player1.items + 1;
$('.items').text("Gathered items: " + player1.items + "/3");
player1.trophie = -1;
console.log(tresure1);
}
clearInterval(MoveToPlayer);
}
}
});

How to disable setInterval function and start it again

setInterval "MoveToPlayer" should start after meeting first condition from "checkPosition" method and it should run(this works). After meeting the same condition again it should stop and start again with different parameter. I through that simple placing clearInterval(MoveToPlayer) will do the job but it doesn't work.
Second issue is how to stop this interval for example from "checkPosition" method?
class player {
constructor(name, PosY) {
this.name = name;
this.PosX = 5;
this.PosY = PosY;
this.object = $('.' + name);
this.speed = 0;
this.direction = "";
this.lifes = 3;
}
playerMove(thisRaft) {
var MoveToPlayer = setInterval(() => {
clearInterval(MoveToPlayer)
$('.player1').css('left', thisRaft.PosX * 50);
$('.player1').css('bottom', thisRaft.PosY * 50);
}, 1);
}
checkPosition(x, y) {
for (var i = 0; i < raftsTab.length; i++) {
if (x == raftsTab[i].PosX && y == raftsTab[i].PosY) {
let thisRaft = raftsTab[i];
this.playerMove(thisRaft);
return;
}
}
for (var i = 0; i < raftsTab.length; i++) {
if (x !== raftsTab[i].PosX && y !== raftsTab[i].PosY && y !== 0 && y !== 5 && y !== 10) {
console.log("Dead");
player1.PosX = 5;
player1.PosY = 0;
changePosition();
return;
}
}
}
}

Regarding your first issue you are clearing the interval immediately after it starts, so it won't continue.
In order to make the interval more dynamic you should have a function that returns an interval within checkPosition.
Wasn't able to understand how your game should actually work, but I am posting an alteration to your script where I modified PlayerMove and checkPosition in away that gives you a better control of the interval in question.
Hope it is clear and helpful for you
class player {
constructor(name, PosY) {
this.name = name;
this.PosX = 5;
this.PosY = PosY;
this.object = $('.' + name);
this.speed = 0;
this.direction = "";
this.lifes = 3;
}
playerMove(thisRaft) {
return setInterval(() => {
$('.player1').css('left', thisRaft.PosX * 50);
$('.player1').css('bottom', thisRaft.PosY * 50);
}, 1);
}
checkPosition(x, y) {
if (someCondition && this.currentPlayerMove) {
clearInterval(this.currentPlayerMove)
}
for (var i = 0; i < raftsTab.length; i++) {
if (x == raftsTab[i].PosX && y == raftsTab[i].PosY) {
let thisRaft = raftsTab[i];
this.currentPlayerMove = this.playerMove(thisRaft);
return;
}
}
for (var i = 0; i < raftsTab.length; i++) {
if (x !== raftsTab[i].PosX && y !== raftsTab[i].PosY && y !== 0 && y !== 5 && y !== 10) {
console.log("Dead");
player1.PosX = 5;
player1.PosY = 0;
changePosition();
return;
}
}
}

Just assign your handler at such scope, that would make it accessible to all functions that could clear it.
var handler;
function movePlayer(text){
clearInterval(handler); // stop execution before assigning new handler
handler = setInterval(()=>{
/* do your stuff */
console.log(text);
}, 100)
}
movePlayer("I'm moving")
setTimeout(()=>{
clearInterval(handler)
}, 500)
setTimeout(()=>{
movePlayer("I'm moving again")
}, 1500)
setTimeout(()=>{
clearInterval(handler)
}, 2000)

Make a canvas object stop inside the canvas area?

Basically I've made a little game, but what I'm wondering is how do I make my created object not go outside the lines of the canvas. When he reaches a border I want him to stop. Any help is appreciated

Hi there i made a little demo game my self. In that game there is what you are looking for. Working demo you can find it here
So what i did was to
1) track user keyboard press
document.onkeydown = function(e) {
e = e || window.event;
if(e.keyCode == "37") player.move("left");
else if(e.keyCode == "38") player.move("up");
else if(e.keyCode == "39") player.move("right");
else if(e.keyCode == "40") player.move("down");
};
2) getting a basic config of the player position (middle in my case)
var player = {
x: Math.round((w/2)/objectSizes),
y: Math.round((h/2)/objectSizes)
}
3) then on the function play.move i track the direction and do all the restrictions
player.move = function(direction) {
/**
* A temporary object to hold the current x, y so if there is a collision with the new coordinates to fallback here
*/
var hold_player = {
x: player.x,
y: player.y
};
/**
* Decide here the direction of the user and do the neccessary changes on the directions
*/
switch(direction) {
case "left":
player.x -= speed / modifier;
if(player.currentDirection == "stand") {
player.currentDirection = "left-1";
} else if(player.currentDirection == "left-1") {
player.currentDirection = "left-2";
} else if(player.currentDirection == "left-2") {
player.currentDirection = "left-1";
} else {
player.currentDirection = "left-1";
}
break;
case "right":
player.x += speed / modifier;
if(player.currentDirection == "stand") {
player.currentDirection = "right-1";
} else if(player.currentDirection == "right-1") {
player.currentDirection = "right-2";
} else if(player.currentDirection == "right-2") {
player.currentDirection = "right-1";
} else {
player.currentDirection = "right-1";
}
break;
case "up":
player.y -= speed / modifier;
if(player.currentDirection == "stand") {
player.currentDirection = "up-1";
} else if(player.currentDirection == "up-1") {
player.currentDirection = "up-2";
} else if(player.currentDirection == "up-2") {
player.currentDirection = "up-1";
} else {
player.currentDirection = "up-1";
}
break;
case "down":
player.y += speed / modifier;
if(player.currentDirection == "stand") {
player.currentDirection = "down-1";
} else if(player.currentDirection == "down-1") {
player.currentDirection = "down-2";
} else if(player.currentDirection == "down-2") {
player.currentDirection = "down-1";
} else {
player.currentDirection = "down-1";
}
break;
}
/**
* if there is a collision just fallback to the temp object i build before while not change back the direction so we can have a movement
*/
if(check_collision(player.x, player.y)) {
player.x = hold_player.x;
player.y = hold_player.y;
}
/**
* If player finds the coordinates of pokeball the generate new one, play the sound and update the score
*/
if(player.x == pokeball.x && player.y == pokeball.y) { // found a pokeball !! create a new one
console.log("found a pokeball of "+pokeball.spritePosition+"! Bravo! ");
pokePick.pause();
pokePick.currentTime = 0;
pokePick.play();
score += 1;
pokeball.generatePosition();
}
update();
};
Then at last i have this function to check any collision
/**
* Our function that decides if there is a collision on the objects or not
* #function
* #name check_collision
* #param {Integer} x - The x axis
* #param {Integer} y - The y axis
*/
function check_collision(x, y) {
var foundCollision = false;
if(((x > 3 && x < 9) && y == 6) || ((x > 4 && x < 9) && (y == 5 || y == 4 || y == 3))) { //collision on house
console.log("on house");
foundCollision = true;
}
if((x<1 || x>20) ||
(y<2 || y>20) ||
((y > 0 && y < 4) && (x == 20 || x == 19)) || //right corner
((y > 0 && y < 4) && (x == 2 || x == 3)) || //left corner
((y > 18) && (x == 2 || x == 3)) || //left corner
((x > 17) && (y == 19 || y == 20)) || //left corner
((x > 19) && (y == 17 || y == 18)) //left corner 2
) {
console.log("lost on the woods");
foundCollision = true
}
return foundCollision;
}