2 questions: I want to disable the snake being able to go in opposite directions (so when it is moving left it cannot go right, if going up cannot go down etc.). How do I do it? Newbie here. Please, as descriptive as possible.
What are all those variables? px, py, gs, tc, ax, ay, yv
Here is the full code:
<canvas id="gc" width="400" height ="400"></canvas>
<script>
window.onload=function(){
canv=document.getElementById("gc");
ctx=canv.getContext("2d");
document.addEventListener("keydown", keyPush);
setInterval(game,1250/15);
}
px=py=10
gs=tc=20;
ax=ay=15;
xv=yv=0;
trail=[];
tail=5;
function game(){
px+=xv;
py+=yv;
if(px<0) {
px = tc-1;
}
if (px>tc-1){
px = 0;
}
if (py<0) {
py=tc-1;
}
if (py>tc-1) {
py=0;
}
ctx.fillStyle="black";
ctx.fillRect(0,0,canv.width,canv.height);
ctx.fillStyle="lime";
for(var i =0; i<trail.length; i++) {
ctx.fillRect(trail[i].x*gs, trail[i].y*gs, gs-2, gs-2);
if (trail[i].x==px && trail[i].y ==py) {
tail =5;
}
}
trail.push({x:px,y:py});
while(trail.length>tail){
trail.shift();
}
if (ax==px && ay ==py) {
tail++;
ax=Math.floor(Math.random()*tc);
ay=Math.floor(Math.random()*tc);
}
ctx.fillStyle="red";
ctx.fillRect(ax*gs, ay*gs, gs-2, gs-2);
}
function keyPush(evt){
switch(evt.keyCode){
case 37:
xv=-1;yv=0;
break;
case 38:
xv=0;yv=-1;
break;
case 39:
xv=1;yv=0;
break;
case 40:
xv=0;yv=1;
break;
}
}
</script>
px, py, gs, tc, ax, ay, yv are the inital x and y coordinate of snake and the first bullet and the size of the two elements
to disallow move in oposite direction, you can store the previous move inside a variable and allow to move the snake in another direction only if previous move was not the oposite one
window.onload = function() {
canv = document.getElementById("gc");
ctx = canv.getContext("2d");
document.addEventListener("keydown", keyPush);
setInterval(game, 1250 / 15);
}
var previousMove;
px = py = 10
gs = tc = 20;
ax = ay = 15;
xv = yv = 0;
trail = [];
tail = 5;
function game() {
px += xv;
py += yv;
if (px < 0) {
px = tc - 1;
}
if (px > tc - 1) {
px = 0;
}
if (py < 0) {
py = tc - 1;
}
if (py > tc - 1) {
py = 0;
}
ctx.fillStyle = "black";
ctx.fillRect(0, 0, canv.width, canv.height);
ctx.fillStyle = "lime";
for (var i = 0; i < trail.length; i++) {
ctx.fillRect(trail[i].x * gs, trail[i].y * gs, gs - 2, gs - 2);
if (trail[i].x == px && trail[i].y == py) {
tail = 5;
}
}
trail.push({
x: px,
y: py
});
while (trail.length > tail) {
trail.shift();
}
if (ax == px && ay == py) {
tail++;
ax = Math.floor(Math.random() * tc);
ay = Math.floor(Math.random() * tc);
}
ctx.fillStyle = "red";
ctx.fillRect(ax * gs, ay * gs, gs - 2, gs - 2);
}
function keyPush(evt) {
switch (evt.keyCode) {
case 37:
if (previousMove !== 39) {
xv = -1;
yv = 0;
previousMove = 37;
}
break;
case 38:
if (previousMove !== 40) {
xv = 0;
yv = -1;
previousMove = 38;
}
break;
case 39:
if (previousMove !== 37) {
xv = 1;
yv = 0;
previousMove = 39;
}
break;
case 40:
if (previousMove !== 38) {
xv = 0;
yv = 1;
previousMove = 40;
}
break;
}
}<canvas id="gc" width="400" height="400"></canvas>to do it i add a global variable
var previousMove;
and change the keyPush function to became the following
function keyPush(evt) {
switch (evt.keyCode) {
case 37:
if (previousMove !== 39) {
xv = -1;
yv = 0;
previousMove = 37;
}
break;
case 38:
if (previousMove !== 40) {
xv = 0;
yv = -1;
previousMove = 38;
}
break;
case 39:
if (previousMove !== 37) {
xv = 1;
yv = 0;
previousMove = 39;
}
break;
case 40:
if (previousMove !== 38) {
xv = 0;
yv = 1;
previousMove = 40;
}
break;
}