Supermarket Catastrophy

Developer
Well Caffeinated
Size
3,781 Kb
Views
64,768
  1. Supermarket Catastrophy Previews
  2. Supermarket Catastrophy HTML Codes
  3. Supermarket Catastrophy CSS Codes
  4. Supermarket Catastrophy JS Codes

How do I make an supermarket catastrophy?

Demo of new javascript physics library, PhysicsJS.http://wellcaffeinated.net/PhysicsJS. What is a supermarket catastrophy? How do you make a supermarket catastrophy? This script and codes were developed by Well Caffeinated on 08 August 2022, Monday.

Supermarket Catastrophy Previews
IQ Test

Supermarket Catastrophy - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Supermarket Catastrophy</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id="viewport"></canvas> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://wellcaffeinated.net/PhysicsJS/assets/scripts/vendor/physicsjs-0.5.0/physicsjs-full-0.5.0.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Supermarket Catastrophy - Script Codes CSS Codes

html, body { background: #121212; margin: 0; height: 100%;
}
.pjs-meta { display: none;
}
#viewport { position: absolute; top:0; left: 0; bottom: 0; right: 0;
}

Supermarket Catastrophy - Script Codes JS Codes

/** * PhysicsJS by Jasper Palfree <wellcaffeinated.net> * http://wellcaffeinated.net/PhysicsJS * * Supermarket catastrophy */
Physics.behavior('demo-mouse-events', function( parent ){ return { init: function( options ){ var self = this; this.mousePos = Physics.vector(); this.mousePosOld = Physics.vector(); this.offset = Physics.vector(); this.el = $(options.el).on({ mousedown: function(e){ var offset = $(this).offset(); self.mousePos.set(e.pageX - offset.left, e.pageY - offset.top); var body = self._world.findOne({ $at: self.mousePos }) ; if ( body ){ // we're trying to grab a body // fix the body in place body.fixed = true; // remember the currently grabbed body self.body = body; // remember the mouse offset self.offset.clone( self.mousePos ).vsub( body.state.pos ); return; } self.mouseDown = true; }, mousemove: function(e){ var offset = $(this).offset(); self.mousePosOld.clone( self.mousePos ); // get new mouse position self.mousePos.set(e.pageX - offset.left, e.pageY - offset.top); }, mouseup: function(e){ var offset = $(this).offset(); self.mousePosOld.clone( self.mousePos ); self.mousePos.set(e.pageX - offset.left, e.pageY - offset.top); // release the body if (self.body){ self.body.fixed = false; self.body = false; } self.mouseDown = false; } }); }, connect: function( world ){ // subscribe the .behave() method to the position integration step world.subscribe('integrate:positions', this.behave, this); }, disconnect: function( world ){ // unsubscribe when disconnected world.unsubscribe('integrate:positions', this.behave); }, behave: function( data ){ if ( this.body ){ // if we have a body, we need to move it the the new mouse position. // we'll also track the velocity of the mouse movement so that when it's released // the body can be "thrown" this.body.state.pos.clone( this.mousePos ).vsub( this.offset ); this.body.state.vel.clone( this.body.state.pos ).vsub( this.mousePosOld ).vadd( this.offset ).mult( 1 / 30 ); this.body.state.vel.clamp( { x: -1, y: -1 }, { x: 1, y: 1 } ); return; } if ( !this.mouseDown ){ return; } // if we don't have a body, then just accelerate // all bodies towards the current mouse position var bodies = data.bodies // use a scratchpad to speed up calculations ,scratch = Physics.scratchpad() ,v = scratch.vector() ,body ; for ( var i = 0, l = bodies.length; i < l; ++i ){ body = bodies[ i ]; // simple linear acceleration law towards the mouse position v.clone(this.mousePos) .vsub( body.state.pos ) .normalize() .mult( 0.001 ) ; body.accelerate( v ); } scratch.done(); } };
});
Physics(function(world){ var $win = $(window) ,viewWidth = $win.width() ,viewHeight = $win.height() ,renderer = Physics.renderer('canvas', { el: 'viewport', width: viewWidth, height: viewHeight, meta: true, // debug:true, styles: { 'circle': { strokeStyle: 'hsla(60, 37%, 17%, 1)', lineWidth: 1, fillStyle: 'hsla(60, 37%, 57%, 0.8)', angleIndicator: 'hsla(60, 37%, 17%, 0.4)' }, 'convex-polygon' : { strokeStyle: 'hsla(60, 37%, 17%, 1)', lineWidth: 1, fillStyle: 'hsla(60, 47%, 37%, 0.8)', angleIndicator: 'none' } } }) ,edgeBounce // bounds of the window ,viewportBounds = Physics.aabb(0, 0, viewWidth, viewHeight) ; // resize events $(window).on('resize', function(){ viewWidth = $win.width(); viewHeight = $win.height(); renderer.el.width = viewWidth; renderer.el.height = viewHeight; renderer.options.width = viewWidth; renderer.options.height = viewHeight; viewportBounds = Physics.aabb(0, 0, viewWidth, viewHeight); edgeBounce.setAABB( viewportBounds ); }); // add the renderer world.add( renderer ); // render on each step world.subscribe('step', function(){ world.render(); }); world.add( Physics.behavior('demo-mouse-events', { el: '#viewport' }) ); // constrain objects to these bounds edgeBounce = Physics.behavior('edge-collision-detection', { aabb: viewportBounds, restitution: 0.2, cof: 0.8 }); var square = [ {x: 0, y: 40}, {x: 40, y: 40}, {x: 40, y: 0}, {x: 0, y: 0} ]; world.subscribe('render', function( data ){ // delay the launching setTimeout(function(){ world.add( projectile ); }, 2000); var squares = []; for ( var i = 0, l = 24; i < l; ++i ){ // projectile projectile = Physics.body('circle', { x: -20, y: viewHeight - 150, vx: 2, mass: 4, radius: 20, restitution: 0.99, angularVelocity: 0 }); // squares squares.push( Physics.body('convex-polygon', { vertices: square, x: 42 * (i / 6 | 0) + viewWidth - 40 * 8, y: 40 * (i % 6) + viewHeight - 6 * 40 + 15, vx: 0, cof: 0.99, restitution: 0.99, fixed: false })); } world.add( squares ); // only run once world.unsubscribe( data.topic, data.handler ); }, null, 100); world.add( Physics.behavior('body-collision-detection', { checkAll: false }) ); world.add( Physics.behavior('sweep-prune') ); world.add( Physics.behavior('body-impulse-response') ); world.add( edgeBounce ); // add gravity world.add( Physics.behavior('constant-acceleration') ); // subscribe to ticker to advance the simulation Physics.util.ticker.subscribe(function( time, dt ){ world.step( time ); }); // start the ticker Physics.util.ticker.start(); $(function(){ $win.trigger('resize'); });
});
Supermarket Catastrophy - Script Codes
Supermarket Catastrophy - Script Codes
Home Page Home
Developer Well Caffeinated
Username wellcaffeinated
Uploaded August 08, 2022
Rating 3
Size 3,781 Kb
Views 64,768
Do you need developer help for Supermarket Catastrophy?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Well Caffeinated (wellcaffeinated) Script Codes
Name
Asm.js Browser Physics
Google Gravity PhysicsJS Style
JS Optimization Example
Google Analytics External Link Tracking
Ball Physics
PhysicsJS Beginner demo
PhysicsJS Sandbox
A Pen by Well Caffeinated
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!