PhysicsJS Asteroids Game Tutorial (v2)

Developer
Well Caffeinated
Size
3,639 Kb
Views
58,696
  1. PhysicsJS Asteroids Game Tutorial (v2) Previews
  2. PhysicsJS Asteroids Game Tutorial (v2) HTML Codes
  3. PhysicsJS Asteroids Game Tutorial (v2) CSS Codes
  4. PhysicsJS Asteroids Game Tutorial (v2) JS Codes

How do I make an physicsjs asteroids game tutorial (v2)?

(not final product) From the tutorial Building a 2D Asteroids Game with PhysicsJS on flippinawesome.. What is a physicsjs asteroids game tutorial (v2)? How do you make a physicsjs asteroids game tutorial (v2)? This script and codes were developed by Well Caffeinated on 08 August 2022, Monday.

PhysicsJS Asteroids Game Tutorial (v2) Previews
IQ Test

PhysicsJS Asteroids Game Tutorial (v2) - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>PhysicsJS Asteroids Game Tutorial (v2)</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="info"> From the tutorial: <a href="http://flippinawesome.org/2013/12/02/building-a-2d-browser-game-with-physicsjs/">Building a 2D Browser Game with PhysicsJS</a> on flippinawesome. (<a href="http://codepen.io/wellcaffeinated/pen/znsiB">See the final version here</a>).
</div> <script src='http://requirejs.org/docs/release/2.1.9/minified/require.js'></script>
<script src='https://gist.github.com/wellcaffeinated/267878cc641639d475bf/raw/fbb40f96dcc66e1c283c1c30021e5693557c8912/require-config.js'></script> <script src="js/index.js"></script>
</body>
</html>

PhysicsJS Asteroids Game Tutorial (v2) - Script Codes CSS Codes

html, body { padding: 0; margin: 0; width: 100%; height: 100%; overflow: hidden;
}
body:after { font-size: 30px; line-height: 140px; text-align: center; color: rgb(60, 16, 11); background: rgba(255, 255, 255, 0.6); position: absolute; top: 50%; left: 50%; width: 400px; height: 140px; margin-left: -200px; margin-top: -70px; border-radius: 5px;
}
body.before-game:after { content: 'press "z" to start';
}
body.lose-game:after { content: 'press "z" to try again';
}
body.win-game:after { content: 'Win! press "z" to play again';
}
/* spaceship from: http://millionthvector.blogspot.ca/p/free-sprites.html */
/* starfield from: http://gamedevtuts.s3.amazonaws.com/043_freeShmupSprites/Free_Shmup_Sprites_Starfield.png */
body { background: url(https://raw.github.com/wellcaffeinated/PhysicsJS/ship-demo/examples/spaceship/images/starfield.png) 0 0 repeat;
}
.info { display: none; position: absolute; z-index: 2; top: 0; left: 0; font-size: 20px; color: #ffd; padding: 4px;
}
.info a { color: #ffd;
}
body.before-game .info { display: block;
}

PhysicsJS Asteroids Game Tutorial (v2) - Script Codes JS Codes

// main.js begins
require( { baseUrl: 'http://wellcaffeinated.net/PhysicsJS/examples/spaceship/', packages: [{ name: 'physicsjs', location: 'http://wellcaffeinated.net/PhysicsJS/assets/scripts/vendor/physicsjs-0.5.2/', main: 'physicsjs-0.5.2.min' }] }, [ 'require', 'physicsjs', // custom modules 'js/player', 'js/player-behavior', // official modules 'physicsjs/renderers/canvas', 'physicsjs/bodies/circle', 'physicsjs/bodies/convex-polygon', 'physicsjs/behaviors/newtonian', 'physicsjs/behaviors/sweep-prune', 'physicsjs/behaviors/body-collision-detection', 'physicsjs/behaviors/body-impulse-response'
], function( require, Physics
){ document.body.className = 'before-game'; var par = parent; try { par && par.innerWidth; } catch( e ){ par = window; } var inGame = false; document.addEventListener('keydown', function( e ){ if (!inGame && e.keyCode === 90){ document.body.className = 'in-game'; inGame = true; newGame(); } }); var renderer = Physics.renderer('canvas', { el: 'viewport', width: par.innerWidth, height: par.innerHeight, // meta: true, // debug:true, styles: { 'circle': { strokeStyle: 'rgb(0, 30, 0)', lineWidth: 1, fillStyle: 'rgb(100, 200, 50)', angleIndicator: false }, 'convex-polygon' : { strokeStyle: 'rgb(60, 0, 0)', lineWidth: 1, fillStyle: 'rgb(60, 16, 11)', angleIndicator: false } } }); window.addEventListener('resize', function(){ renderer.el.width = par.innerWidth; renderer.el.height = par.innerHeight; }); var init = function init( world, Physics ){ var ship = Physics.body('player', { x: 400, y: 100, vx: 0.08, radius: 30 }); var playerBehavior = Physics.behavior('player-behavior', { player: ship }); // bodies var planet = Physics.body('circle', { // fixed: true, // hidden: true, mass: 10000, radius: 140, x: 400, y: 300 }); planet.view = new Image(); planet.view.src = require.toUrl('images/planet.png'); // render on every step world.subscribe('step', function(){ // middle of canvas var middle = { x: 0.5 * par.innerWidth, y: 0.5 * par.innerHeight }; // follow player renderer.options.offset.clone( middle ).vsub( ship.state.pos ); world.render(); }); // add things to the world world.add([ ship, playerBehavior, planet, Physics.behavior('newtonian', { strength: 1e-4 }), Physics.behavior('sweep-prune'), Physics.behavior('body-collision-detection'), Physics.behavior('body-impulse-response'), renderer ]); }; var world = null; var newGame = function newGame(){ if (world){ world.destroy(); } world = Physics( init ); world.subscribe('lose-game', function(){ document.body.className = 'lose-game'; inGame = false; }); world.subscribe('win-game', function(){ world.pause(); document.body.className = 'win-game'; inGame = false; }); }; // subscribe to ticker and start looping Physics.util.ticker.subscribe(function( time ){ if (world){ world.step( time ); } }).start();
});
PhysicsJS Asteroids Game Tutorial (v2) - Script Codes
PhysicsJS Asteroids Game Tutorial (v2) - Script Codes
Home Page Home
Developer Well Caffeinated
Username wellcaffeinated
Uploaded August 08, 2022
Rating 3
Size 3,639 Kb
Views 58,696
Do you need developer help for PhysicsJS Asteroids Game Tutorial (v2)?

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
A Pen by Well Caffeinated
Supermarket Catastrophy
JS Optimization Example
Google Analytics External Link Tracking
PhysicsJS Sandbox
Asm.js Browser Physics
PhysicsJS Beginner demo
Ball Physics
Google Gravity PhysicsJS Style
Create amazing SEO 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!