# Creating a game in P5JS

**URL:** <https://discourse.processing.org/t/creating-a-game-in-p5js/9885>\
**Category:** Coding Questions\
**Created:** [April 2, 2019, 4:56pm UTC](https://discourse.processing.org/t/creating-a-game-in-p5js/9885 "2019-04-02T16:56:05Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ziomix](https://avatars.discourse-cdn.com/v4/letter/z/6bbea6/32.png) [@Ziomix](https://discourse.processing.org/u/Ziomix)\
**Post date:** [April 2, 2019, 4:56pm UTC](https://discourse.processing.org/t/creating-a-game-in-p5js/9885/1 "2019-04-02T16:56:05Z")

</div>

Good morning, everyone,

I would like to have some help in my project. My project is as follows: Create a game in P5JS ( of your choice).

I already have the basis of the script and I know what I want to do next but unfortunately I don’t know how to do it! 😕

The game I claim to create is simply a kind of “shooting game”. In the Canvas, I would like to see random targets/zombies appear every 2 or 3 seconds where the goal is to shoot them to eliminate them. When they are affected, I would like them to disappear.

I already have a background, a “Crosshair” instead of the mouse cursor, and now I have to animate the game, it’s at this level that I block: /

I would therefore like to know if my project is feasible thanks to the P5JS. If so, I would like to have solutions/examples of codes that I could use! 🙂

To summarize:

- To make targets appear randomly in the Canvas every 2 3 seconds.

- When the target is hit, make it disappear.

Thank you in advance,

Ziomix,

Here is the code I have for the moment (script):

```auto
const CANVAS_WIDTH=666;
const CANVAS_HEIGHT=500;
var img;
var cross;
var cible;

function preload() {
img=loadImage("asset/background.jpg");
}

function setup() {
createCanvas(CANVAS_WIDTH,CANVAS_HEIGHT);
img=loadImage("asset/background.jpg");
cross=loadImage("asset/crosshair.png");
cible=loadImage("asset/cible.png");
//zombie=loadImage("asset/zombie211x384.png");

}

function draw() {

noCursor(); // enlever le curseur
image(img, 0, 0);
image(cible, 333, 250, height / 7, cross.width / 7, cross.height / 7);
imageMode(CENTER); // permet de centrer le pointeur au centre ^^ ( CORNER par défaut )
image(cross, mouseX, mouseY, height / 10, cross.width / 10, cross.height / 10);

}

```

---

<div class="post-metadata">

**Author:** ![zenemig](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/zenemig/32/4418_2.png) [@zenemig](https://discourse.processing.org/u/zenemig)\
**Post date:** [April 2, 2019, 5:40pm UTC](https://discourse.processing.org/t/creating-a-game-in-p5js/9885/2 "2019-04-02T17:40:57Z")

</div>

Hi, I think your project is totally feasible!  
I recommend you to take a look at this library:

> **[p5.play - a game library for p5.js](http://molleindustria.github.io/p5.play/)**
>
> Make online games and playful applications with this library

The site have a lot of examples that maybe can help you.

---

<div class="post-metadata">

**Author:** ![Ziomix](https://avatars.discourse-cdn.com/v4/letter/z/6bbea6/32.png) [@Ziomix](https://discourse.processing.org/u/Ziomix)\
**Post date:** [April 3, 2019, 10:31pm UTC](https://discourse.processing.org/t/creating-a-game-in-p5js/9885/3 "2019-04-03T22:31:15Z")

</div>

Hi, , thank you for answering me and giving me your help, I have indeed visited this site before and I had not discovered all the features of this site. But now, I have been able to discover a lot of things and different tips and tricks thanks to this site! Thank you very much for your help, I am gradually moving forward in my project