How do I change the direction of snake

Question

1.00/5 (1 vote)

See more:

<!DOCTYPE html>
<html lang="en">
<head>
	<title>Game</title>
	<meta charset="utf-8">
	<style type="text/css">
		#canvas {background:gray;}
	</style>
</head>
<body>
	<canvas id="canvas" width="500px" height="500px">	
	</canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var multiples = [25, 50, 75, 100, 125, 150, 175, 200, 225, 250, 275, 300, 325, 350, 375, 400, 425, 450, 475, 500];



var rightPressed = false;
var leftPressed = false;
var upPressed = false;
var downPressed = false;

var foods = {
	x: Math.floor(Math.random() * multiples[0]) *25,
	y: Math.floor(Math.random() * multiples[0]) *25,
	width: 25,
	height: 25
};

var snake = {
	x: 25,
	y: 25,
	width: 25,
	height: 25
};

function drawRect() {
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	ctx.beginPath();
	ctx.rect(snake.x, snake.y, snake.width, snake.height)
	ctx.fillStyle = "#000000";
	ctx.fill();
	ctx.closePath();
}

function controls() {
	if(rightPressed) {
		snake.x += 25;
	}else if(leftPressed) {
		snake.x -= 25;
	}else if(upPressed) {
		snake.y -= 25;
	}else if(downPressed) {
		snake.y += 25;
	}
}

function collision() {
	if(snake.x >= canvas.width) {
		snake.x = canvas.width - canvas.width;
	}else if(snake.x < canvas.width - canvas.width) {
		snake.x = canvas.width;
	}else if(snake.y >= canvas.height) {
		snake.y = canvas.height - canvas.height;
	}else if(snake.y < canvas.height - canvas.height) {
		snake.y = canvas.height;
	}
}

document.addEventListener("keydown", keyDownHandler, false);
//document.addEventListener("keyup", keyUpHandler, false);

function keyDownHandler(e) {
    if(e.keyCode == 39) {
        rightPressed = true;
		leftPressed = false;
		upPressed =  false;
		downPressed = false;
    }
    else if(e.keyCode == 37) {
        leftPressed = true;
		rightPressed = false;
		upPressed = false;
		downPressed = false;
    }
	if(e.keyCode == 38) {
        upPressed = true;
		leftPressed = false;
		rightPressed = false;
		downPressed = false;
    }
    else if(e.keyCode == 40) {
        downPressed = true;
		rightPressed = false;
		leftPressed = false;
		upPressed = false;
    }
}

/*
function keyUpHandler(e) {
    if(e.keyCode == 39) {
        rightPressed = false;
    }
    else if(e.keyCode == 37) {
        leftPressed = false;
    }
	if(e.keyCode == 38) {
        upPressed = false;
    }
    else if(e.keyCode == 40) {
        downPressed = false;
    }
}
*/

function food() {
	ctx.beginPath();
	ctx.rect(foods.x, foods.y, foods.width, foods.height);
	ctx.fillStyle = "#8B0000";
	ctx.fill();
	eatFood();
	ctx.closePath();
}

function eatFood() {
	if(snake.x == foods.x && snake.y == foods.y) {
		foods.x = Math.floor(Math.random() * multiples[0]) *25;
		foods.y = Math.floor(Math.random() * multiples[0]) *25;
		snake.width += 25;
	}
}

function start() {
	drawRect();
	controls();
	collision();
	food();
}
//up pressed make length -height value

setInterval(start, 100);
</script>
</body>
</html>

What I have tried:

Ive tried changing the direction of the snake but cant figure it out any help at all would be very appreciative.

Posted 7-Mar-18 8:15am

Member 13712171

Updated 7-Mar-18 15:39pm

Add a Solution

Comments

ZurdoDev 7-Mar-18 15:19pm

What part of the code controls the direction?

Member 13712171 7-Mar-18 16:48pm

well the controls function is where the direction of movement is being changed depending on what key you press.

Karthik_Mahalingam 8-Mar-18 3:38am

Tip: use Reply button, to post Comments/query to the user, so that the user gets notified and responds to your text.

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Maciej Los · Answer 1 · 2018-03-07T09:41:00

Solution 1

Please, refer this:
GitHub - patorjk/JavaScript-Snake: The game of Snake written in JavaScript.[^]
Snakes and Ladders - An attempt using HTML5[^]

Posted 7-Mar-18 9:41am

Maciej Los

Updated 7-Mar-18 9:42am

v2

Patrice T · Answer 2 · 2018-03-07T15:40:00

In order to get useful answers, you have to explain what is supposed to be your snake game, so that we have an idea of what you want.
Do you want to recreate a SnakeByte? Snake Byte [Plums: 0] ATARI 800 (8-Bit) - 540 - YouTube[^]

Quote:
Ive tried changing the direction of the snake but cant figure it out

This mean nothing to us, remember that we are not in your head, we are not NSA and we have no mind reading potion.

Explain what is this game, its requirements.
Give details of what is wrong and what you tried.

[Update]

Quote:
Yes it is a game similar to SnakeByte just trying to make classic snake but I'm a having a problem with getting the the direction of the snake to change

You have a problem in your code, it allow the snake to do a U turn which is impossible.
Note that SnakeByte was using 2 keys, turn left and turn right.
When I run your code, the snake head follow the directions I type, can you give more details about your problem.
A snake is a head, a body ans a tail, your code only handle the head.
SnakeByte was using a 2d array to remember the position of everything. This allowed to handle the snake body for any path and any length.