Concept:
I am aware that none of you enjoyed losing when you played the snake game. In order to avoid seeing the “Game Over” warning, we all loved looking for shortcuts as children. However, as techies, I know you would want to make this “Snake” dance to your beats. In this midterm Project on the Snake Game in P5js, I will demonstrate this to you all.
The goal of the game is to develop the snake that you control using the keyboard’s arrow keys. If the snake strikes an edge or its own body, the game is ended. Collecting apples that are positioned at random on the game board will allow you to grow.
Setup:
According to this concept, the gaming board is divided into blocks. Block size and block count are set in separate variables.
The snake advances one block in the direction it is currently travelling in with each loop iteration. The direction is also predetermined in a separate variable and is only altered when the user clicks an arrow key. Nothing more than a few blocks with a unique color scheme make up the snake. Every snake block has a rectangle drawn for it with a background other than the canvas once the location of the blocks is saved in an array.
When the snake slams into its own body or an edge of the game board, the game is over. In both cases, just the head needs to be taken into account because the body always moves in lockstep with the head.
Movement:
When the user hits an arrow key, the snake shifts its direction of travel. The framework’s thekeyPressed() method makes it simple to intercept this event.
The Snake is traveling left if the value in the x-direction is negative, and upwards if the value is negative in the y-direction
Food processing:
The most challenging aspect of the overall process is undoubtedly food processing. By selecting random x and y values, the apple is positioned on the board. The apple is only ever placed on a position, though, if no other portion of the snake’s body is currently there. The apple will be placed at random in another location if the snake consumes it. Additionally, the snake expands by one block and the score rises as well.
Game scoring:
Last but not least, the start-stop-pause procedure must be built. For this, we use a normal event listener for a button that was previously placed in the HTML. A click then changes a variable that sets the state. This is queried in the game loop. If it is set to pause, most processing is skipped.
Code:
the current one goes as follows:
NUM_ROWS = 20;
NUM_COLS = 20;
DIMENSION = 600;
MENU = 0;
TILE_WIDTH = DIMENSION/NUM_COLS;
TILE_HEIGHT = DIMENSION/NUM_ROWS;
SCORE = 0;
function preload(){
main = loadImage('menu.jpg');
headleft = loadImage('head_left.png');
headup= loadImage('head_up.png');
headright = loadImage('head_right.png');
headdown= loadImage('head_down.png');
myFont = loadFont('SnakeGameDemoRegular.ttf');
}
function setup(){
createCanvas(DIMENSION,DIMENSION);
//frameRate(12);
}
class Head{
constructor(row, col){
this.row = row;
this.col = col;
this.vc = 0;
this.rc = 0;
// this.headup=loadImage('head_up.png');
// this.headleft = loadImage('head_left.png');
this.key_handler = {UP: false, DOWN: false,LEFT: false, RIGHT: true};
this.direction = '';
}
update(){
if (this.key_handler.RIGHT){
this.direction=RIGHT;
this.headimg = image(headright,((this.col)*TILE_WIDTH)+45,((this.row)*TILE_HEIGHT)+15);
this.vc = 1;
this.vr = 0;
text("RIGHT",100,100);
}
if (this.key_handler.LEFT){
this.direction=LEFT;
this.headimg = image(headleft,(this.col)*TILE_WIDTH,(this.row)*TILE_HEIGHT);
this.vc = -1;
this.vr = 0;
text("left",100,100);
}
if (this.key_handler.UP){
// this.direction=UP;
this.headimg = image(headup,(this.col)*TILE_WIDTH,(this.row)*TILE_HEIGHT);
this.vc = 0;
this.vr = -1;
}
if (this.key_handler.DOWN){
//this.direction=DOWN;
this.headimg = image(headdown,(this.col)*TILE_WIDTH,(this.row)*TILE_HEIGHT);
this.vc = 0;
this.vr = 1;
}
if (this.key_handler.RIGHT){
for(let x = (g.arr.length)-2; x<=1; x--){
g[i].row = g[i-1].row
g[i].col = g[i-1].col
g[i].display()}
g.arr[1].row = this.row + 1;
g.arr[1].col = this.col + 1;
g.arr[1].display();
//this.headimg;
}
else if(this.key_handler.UP){
for(let x = g.arr.length-2; x<=1; x--){
g.arr[i].row = g.arr[i-1].row
g.arr[i].col = g.arr[i-1].col
g.arr[i].display();
}
g.arr[1].row = this.row + 1
g.arr[1].col = this.col + 1
g.arr[1].display();
this.headimg;}
else if(this.key_handler.DOWN){
for(let x = g.arr.length-2; x<=1; x--){
g.arr[i].row = g.arr[i-1].row
g.arr[i].col = g.arr[i-1].col
g.arr[i].display()
}
g.arr[1].row = this.row + 1
g.arr[1].col = this.col + 1
g.arr[1].display();
this.headimg
}
else if(this.key_handler.LEFT){
for(let x = g.arr.length-2; x<=1; x--){
g.arr[i].row = g.arr[i-1].row
g.arr[i].col = g.arr[i-1].col
g.arr[i].display()
}
g.arr[1].row = this.row + 1
g.arr[1].col = this.col + 1
g.arr[1].display()
this.headimg
}
this.headimg;
this.row += this.vr;
this.col += this.vc;
}
display(){
this.update();
this.headimg;
}
}
class SnakeElement{
constructor(col, row){
this.row = row;
this.col = col;
//this.clr = clr;
}
display(){
text("HERE MEOW",100,100);
if (y.key_handler.RIGHT){
ellipse((this.col) * TILE_WIDTH, (this.row)* TILE_HEIGHT, 30, 30)}
if (y.key_handler.UP){
ellipse((this.col) * TILE_WIDTH, (this.row)* TILE_HEIGHT, 30, 30)}
if (y.key_handler.DOWN){
ellipse((this.col) * TILE_WIDTH, (this.row)* TILE_HEIGHT, 30, 30)}
if (y.key_handler.LEFT){
ellipse((this.col) * TILE_WIDTH, (this.row)* TILE_HEIGHT, 30, 30) }
// if (this.clr == 'green'){
// fill(80, 153, 32) }
// if (this.clr =='red'){
// fill(173, 48, 32)}
// if (this.clr =='yellow'){
// fill( 251, 226, 76)}
y.headimg;
}
}
// class Snake extends Array{
// constructor(){
// this.push(y);
// for(let i=0; i<3; i++){
// this.push(SnakeElement(((NUM_COLS/2))*TILE_WIDTH ,(NUM_COLS/2)*TILE_WIDTH));
// }
// this.score = this.length(2-3;
// }
// addElem(elem) {
// this.push(elem);
// }
// display(){
// fill(0,0,0);
// text("HERE",100,100);
// this[0].display();
// }
// }
class Snake{
constructor(){
this.arr = [];
this.arr.push(y);
for(let i=0; i<3; i++){
let x = new SnakeElement(((NUM_COLS/2))*TILE_WIDTH ,(NUM_COLS/2)*TILE_WIDTH);
this.arr.push(x);
}
this.score = this.arr.length-3;
//text(this.score,200,200);
}
addElem(elem){
this.arr.push(elem);
}
display(){
this.arr[0].display();
}
}
let y = new Head(NUM_ROWS/2,NUM_COLS/2);
let g = new Snake();
function draw(){
if (MENU==0){
background(main);
textSize(50);
textFont(myFont);
fill('white');
text("SNEK GAME",240,100);
textSize(30);
fill('white');
text('START', 450, 240);
text('Instructions',450, 290);
}
if (MENU==1){
if (frameCount%12==0){
background('black');
g.display();
}
//h.update();
}
if(MENU==2){
background('white');
}
print(mouseX, mouseY);
}
function mouseClicked(){
if(MENU==0){
if((mouseX < 516 && mouseX > 448)&&(mouseY < 238 && mouseY > 218)){
MENU=1;
}
if((mouseX < 583 && mouseX > 450)&&(mouseY<291 && mouseY>265)){
MENU=2;
}
}
}
function keyPressed() {
if (keyCode === UP_ARROW) {
y.key_handler.UP = true;
y.key_handler.DOWN = false;
y.key_handler.LEFT = false;
y.key_handler.RIGHT = false;
}
if (keyCode === DOWN_ARROW) {
y.key_handler.UP = false;
y.key_handler.DOWN = true;
y.key_handler.LEFT = false;
y.key_handler.RIGHT = false;
}
if (keyCode === LEFT_ARROW) {
y.key_handler.UP = false;
y.key_handler.DOWN = false;
y.key_handler.LEFT = true;
y.key_handler.RIGHT = false;
}
if (keyCode === RIGHT_ARROW) {
y.key_handler.UP = false;
y.key_handler.DOWN = false;
y.key_handler.LEFT = false;
y.key_handler.RIGHT = true;
}
}
Reflections:
Currently, our code is not working, we are still debugging to figure out the current problem with it then we are gonna upgrade our program. We are trying to make the snake move in animation and not just be moving in the standard way of a moving square. we hope to make it colorful as well not just black and white as most snake games are these days.