How to Make Snake Game In JavaScript | Free tutorial With Source Code

on
Hello welcome to coding surfer in this instructional exercise you will make sense of how to build the game snake. The game is a snake game and it has astoundingly clear justification, which is the explanation it is an ideal manual for tell the best way to fabricate games with P5 framework of JavaScript. What's more, you can download the code of this game given in the last.

Snake Game In JavaScript
Also Read : Jarvis Desktop Assistant With GUI Using Python

The player is spoken to as snake, which develops inside the occasion that it eats food. The goal of the sport is to eat some thing number food as could be expected under the instances without crashing into your self. This is simple in the early duration of the game yet is step by step an increasing number of troublesome as the length of the snake develops.

For installing P5 framework of Javascript programming language simple to have to click to this link given below -


Snake Game

Also Read : How to Create Flappy Bird Game In Python | Free Tutorial With Souce Code

Packages We Need To create this game - 

P5 .js - To download it visit the website P5js.org Or You can download the Snake Game's Source code with P5 .js the link is below -


Packages we need to create this Snake Game -

code of this snake game

 We have to create three files for this game -

  • first is index.html - main html file
  • second is snake.js - which is  the main or body of this game
  • third is sketch.js - where we have to create canvas etc

1 . Code of index.html - 
<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Snake Game</title>
  <style>
    body {
      padding: 0;
      margin: 0;
    }
  </style>
  <!-- File -->
  <script src="/p5/p5.js"></script>
  <script src="/p5/addons/p5.sound.min.js"></script>
  <script src="sketch.js"></script>
  <script src="snake.js"></script>
</head>

<body>
  <main>
  </main>
</body>

</html>
2 . Code of sketch.js - 
// sketch main Js file

var s;
var scl = 25;
var fps = 15;

var food;

function setup() {
  createCanvas(900,600);
  s = new Snake();
  frameRate(fps);
  pickLocation();
}

function pickLocation(){
 var cols = floor(width/scl);
 var rows = floor(height/scl);
 food = createVector(floor(random(cols)), floor(random(rows)));
 food.mult(scl);
}

function mousePressed(){
  s.total++;
}

function over(){
 createCanvas(900,600);
}

function draw() {

  if (s.eat(food)){
   pickLocation();
  }
  background(51);
  s.death();
  s.score();
  s.update ();
  s.show();

  fill(225,0,100);
  rect(food.x, food.y, scl ,scl);
}

function keyPressed() {
 if (keyCode === UP_ARROW) {
  s.dir(0,-1);
 }
 else if (keyCode === DOWN_ARROW){
  s.dir(0,1);
 }
 else if (keyCode === RIGHT_ARROW){
  s.dir(1,0);
 }
 else if (keyCode === LEFT_ARROW){
  s.dir(-1,0);
 }
}
3 . Code of snake.js - 
// Snake function Main 

function Snake() {
 this.x = 0;
 this.y = 0;
 this.xspeed = 1;
 this.yspeed = 0;
 this.total = 0;
 this.tail = [];
 let score = 0;

 this.eat = function(pos) {
  var d = dist(this.x, this.y, pos.x , pos.y);
  if (d<1) {
   this.total++;
   return true;
  }
  else{
   return false;
  }
 }

 this.score = function () {
  score = this.total;
  textSize(16);
  fill(355);
  text("Score : "+score, 10, 30);
 }

 this.dir = function(x, y) {
  this.xspeed = x;
  this.yspeed = y;
 }


 this.death = function() {
  for (var i = 0; i < this.tail.length; i++) {
   var pos = this.tail[i];
   var d = dist(this.x, this.y, pos.x, pos.y);
   if (d<1){
    this.total = 0;
    this.tail = [];
    over();
   }     
  }
 }

 this.update = function() {
  if (this.total === this.tail.length){

   for (var i = 0; i<this.tail.length-1;i++){
    this.tail[i] = this.tail[i+1];
   }
  }
  this.tail[this.total-1] = createVector(this.x, this.y);

  this.x = this.x + this.xspeed*scl;
  this.y = this.y + this.yspeed*scl;

  this.x = constrain(this.x, 0 , width-scl);
  this.y = constrain(this.y, 0 , height-scl);
 }
 this.show = function(){

  fill(225);
  for (var i = 0; i < this.tail.length; i++){
   rect(this.tail[i].x,this.tail[i].y, scl ,scl);
  }
  rect(this.x, this.y, scl, scl);
 }
}
Conclusion - 

 Create this game i.e. Snake Game and submit it as your the school project otherwise you can use it on your computer too. And show to your friends. Friends, if you need to get the present day updates of our website, then please join our Coding Surfer, this can maintain you from getting the state-of-the-art updates about our upcoming.

Comments

Post a Comment