Blood Typing Game Notes and examples

test008

Collision Detection example

test007 for Android

https://educationalgames.nobelprize.org/educational/medicine/bloodtypinggame/index.html

https://molleindustria.github.io/p5.play/

//mouse states and mouse events on sprites
//click and hold the mouse button while hovering on the sprites

Sprites: http://molleindustria.github.io/p5.play/docs/classes/Sprite.html

https://molleindustria.github.io/p5.play/examples/index.html?fileName=collisions.js

p5.play is a p5.js library for the creation of games and playthings.

p5.play provides a Sprite class to manage visual objects in 2D space and features such as animation support, basic collision detection and resolution, sprite grouping, helpers for mouse and keyboard interactions, and a virtual camera.

The game running in the background was made with p5.play and it's about 100 lines of code. Check all the examples/tutorials.

p5.play extends p5.js, a javascript library (and a community) that aims to make coding accessible for artists, designers, educators, and beginners. If you are not familiar with p5.js, you should start here.

p5.play is built for accessibility and simplicity, not performance. It is designed to be understood and possibly modified by intermediate programmers. It is not a box2D-based physics engine, it doesn't use events, nor supports 3D. If you are looking for robust (but more complex) game frameworks I suggest phaser.io or easel.js.

p5.play is still in beta! To contribute or report bugs go to the github page.

Initiated by Paolo Pedercini | molleindustria.org | @molleindustria

My local copy of the Examples

test002 This is working! It's an editied version of the first Animation

• onMouseOver (when the mouse cursor moves over the object)
• onMouseOut (when the mouse cursor leaves the object)
• onMousePressed (when the user presses the mouse button, and the mouse cursor is over the object)
• onMouseReleased (when the user releases the mouse button, after an onMousePressed event)

https://ecomputernotes.com/js/javascript-tutorial/javascript-switch

https://www.geeksforgeeks.org/p5-js-loadimage-function/

let img;
let url =
'https://media.geeksforgeeks.org/wp-content/uploads/20190314004249/sample-image.png';

function setup() {
createCanvas(400, 200);

textSize(18)
text("The image would be loaded below:", 20, 20);

loadImage(url, img => {
image(img, 20, 40, 100, 100);
},
(event) => {
fill("red")
text("Error: The image could not be loaded.", 20, 40);
console.log(event);
}
);
}