walls = []; foods = []; var score = 0; function setup() { createCanvas(window.innerWidth, window.innerHeight); player = new Player(); food = new Food(30, 120); /* to add walls, use addWall function with parameters name(string), followed by x position, y position, width, height */ addWall("wall", 30, 320, 200, 20); addWall("wall2", 230, 140, 20, 200); addWall("wall3", 30, 280, 180, 20); addWall("wall4", 10, 120, 20, 220); addWall("wall5", 190, 140, 20, 140); addWall("wall6", 10, 140, 160, 20); addWall("wall7", 10, 100, 200, 20); addWall("wall8", 10, 140, 160, 20); addWall("wall9", 150, 140, 20, 120); addWall("wall10", 110, 180, 20, 120); addWall("wall11", 10, 240, 80, 20); addWall("wall12", 30, 200, 60, 20); } function mouseReleased() { player.x_velocity = 0; player.y_velocity = 0; } function draw() { background(150); player.show(); food.show(); if(food.hits(player)) { score += 1; } text(score, 20,20); //Arrow keys //// // Left rect(20, 380, 40, 40); line(25, 400, 55, 385); line(25, 400, 55, 415); line(55, 415, 55, 385); //Up rect(60, 360, 40, 40); line(65,395, 80,365); line(95,395, 80,365); line(95,395, 65,395); //Down rect(60, 400, 40, 40); line(65, 405, 95, 405); line(80, 435, 65, 405); line(80, 435, 95, 405); //Right rect(100, 380, 40, 40); line(105, 385, 105, 415); line(135, 400, 105, 385); line(135, 400, 105, 415); if(touches.length >= 1) { player.move(); } for(i = 0; i < walls.length; i++) { walls[i].show(); if(player.hits(walls[i]) && player.y_velocity > 0) { player.y = walls[i].y-20; } if(player.hits(walls[i]) && player.y_velocity < 0) { player.y = walls[i].y + walls[i].h; } if(player.hits(walls[i]) && player.x_velocity > 0) { player.x = walls[i].x-20; } if(player.hits(walls[i]) && player.x_velocity < 0) { player.x = walls[i].x + walls[i].w; } } } function Player() { this.x = 30; this.y = 300; this.x_velocity = 0; this.y_velocity = 0; this.move = function() { this.x += this.x_velocity; this.y += this.y_velocity; //Left if ( mouseX > 20 && mouseX < 60 && mouseY > 380 && mouseY < 420 ) { this.x_velocity = -5; } //Right else if ( mouseX > 100 && mouseX < 140 && mouseY > 380 && mouseY < 420 ) { this.x_velocity = 5; } //Up else if ( mouseX > 60 && mouseX < 100 && mouseY > 360 && mouseY < 400 ) { this.y_velocity = -5; } //Down else if(mouseX > 60 && mouseX < 100 && mouseY > 400 && mouseY < 440 ) { this.y_velocity = 5; } } this.show = function() { stroke(0); fill(0, 255, 0); rect(this.x, this.y, 20, 20); } this.hits = function(wall) { if(this.y +20 > wall.y && this.y < wall.y + wall.h && this.x +20 > wall.x && this.x < wall.x + wall.w) { return true; } } } function Wall(x, y, w, h) { this.x = x; this.y = y; this.w = w; this.h = h; this.show = function() { fill(255); //noStroke(); rect(this.x, this.y, this.w, this.h); } } function addWall(name, x, y, w, h) { name = new Wall(x, y, w, h); walls.push(name); } function Food(x, y) { this.x = x; this.y = y; this.size = 20; this.show = function() { fill(255,0,0); rect(this.x, this.y, this.size, this.size); } this.hits = function(player) { if(this.y > player.y && this.y < player.y + player.h && this.x > player.x && this.x < player.x + player.w) { return true; } } }

web p5.js