30/12/2017
11/12/2017
Code slither.io pour P5js
Un petit bout de code pour p5.js, inspiré de slither.io, pour les CM1 /CM2 de l'école la Rédemption qui apprennent à coder.
Allez voir le tutoriel, pour comprendre la logique de ce code et pouvoir l'adapter selon vos envies .
code à copier dans l'interface p5js editor :
Allez voir le tutoriel, pour comprendre la logique de ce code et pouvoir l'adapter selon vos envies .
code à copier dans l'interface p5js editor :
- sélectionnez tout le code ci-dessous
- Ctrl+C pour copier
- rendez-vous ensuite sur l'éditeur p5js editor :
- Ctrl+V pour coller
- puis lancez en cliquant sur le triangle.
- vous pouvez ensuite modifier ce code pour adapter le jeu selon vos envies, n'oubliez pas le site p5.js pour quelques explications sur les fonctions utilisées : P5JS / Référence
var serpent;
var positions = [];
var nourriture;
//var mechantSerpent; //pour créer un adversaire ?
function setup() {
fullscreen();
createCanvas(800, 600);
serpent = new Serpent();
// mechantSerpent = new Serpent();
nourriture = new Nourriture();
positions[positions.length] = {mouseX,mouseY};
textSize(32);
}
function draw() {
background(0);
tick();
serpent.move();
serpent.display();
nourriture.display();
nourriture.croque();
fill(0, 102, 153);
text( serpent.corps.boules.length-1, width-100, 30);
}
// serpent
function Serpent() {
this.x = random(width);
this.y = random(height);
// positions[0].x = this.x;
// positions[0].y = this.y;
this.diameter = random(10, 30);
this.speed = 1;
this.corps = new Corps();
var tete = new Boule(mouseX, mouseY, color(random(0,255),random(0,255),random(0,255)));
this.corps.boules[0] = tete;
console.log(this.corps);
this.move = function() {
var boules = this.corps.boules;
for (var i = 0; i < boules.length; i++) {
var b = boules[i];
if (i == 0){
b.x = positions[0].x;
b.y = positions[0].y;
if (positions.length > 1 ){
positions.shift();
}
}else{
var precedente = boules[i-1];
var d = int(dist(b.x, b.y, precedente.x, precedente.y));
if(d > 10){
if(b.x - precedente.x > 0){
b.x = (3*b.x+ precedente.x)/4 ; // b.x-1-(d/20);
}else if (b.x - precedente.x < -0) {
b.x = (3*b.x+precedente.x)/4; //b.x+1+(d/20);
}
if (b.y - precedente.y > 0){
b.y = (3*b.y + precedente.y)/4; //b.y-1-(d/20);
}else if(b.y - precedente.y < -0){
b.y = (3*b.y+precedente.y)/4; //b.y+1+(d/20);
}
}
}
}
};
this.display = function() {
var boules = this.corps.boules;
for (var i = 0; i < boules.length; i++) {
var b = boules[i];
fill(b.color);
ellipse(b.x, b.y, this.diameter, this.diameter);
}
fill(boules[0].color);
strokeWeight(1);
stroke(color(0));
ellipse(boules[0].x, boules[0].y, this.diameter*1.2, this.diameter*1.2);
ellipse(boules[0].x, boules[0].y+this.diameter/4, this.diameter/3, this.diameter/4);
}
}
function Corps(){
this.boules = [];
}
function Boule(_x,_y, _color){
this.x = _x;
this.y = _y;
this.color = _color;
}
function tick(){
var longueurPos = 40;
if (positions.length > longueurPos ){
positions.shift();
}
if ((positions[positions.length-1].x != mouseX)&& (positions[positions.length-1].y != mouseY)){
var pos = {};
pos.x = mouseX;
pos.y = mouseY;
positions[positions.length] = pos;
}else{
if (positions.length > 1 ){
positions.shift();
}
}
}
function Nourriture(){
this.x = random (10, width-10);
this.y = random (10, height-10);
this.color = color(random(0,255),random(0,255),random(0,255));
this.display = function(){
stroke(color(random(0,255),random(0,255),random(0,255)));
strokeWeight(1);
fill(this.color);
rect(this.x, this.y, 5,5);
noStroke();
}
this.croque = function(){
var serpentTete = serpent.corps.boules[0];
var d = int(dist(this.x, this.y, serpentTete.x, serpentTete.y));
if (d < 10 ){
var nouveau = new Boule(mouseX, mouseY, this.color);
var longueur = serpent.corps.boules.length;
serpent.corps.boules[longueur] = nouveau;
nourriture = new Nourriture();
}
}
}
Libellés :
cm1,
cm2,
code,
cours,
école,
editeur,
javascipt,
p5js,
Processing,
programmation,
scratch
Pays/territoire :
Lyon, France
Inscription à :
Articles (Atom)