Catapult Game
How do I make an catapult game?
Matter.js. What is a catapult game? How do you make a catapult game? This script and codes were developed by Dave Alger on 11 August 2022, Thursday.
Catapult Game - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Catapult Game</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="stage"></div> <script src='http://davealger.com/apps/matter-0.7.0.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Catapult Game - Script Codes CSS Codes
/** http://davealger.info **/
Catapult Game - Script Codes JS Codes
(function () { var Engine = Matter.Engine, Gui = Matter.Gui, World = Matter.World, Bodies = Matter.Bodies, Body = Matter.Body, Composite = Matter.Composite, Composites = Matter.Composites, Common = Matter.Common, Constraint = Matter.Constraint, RenderPixi = Matter.RenderPixi, Events = Matter.Events, Bounds = Matter.Bounds, Vector = Matter.Vector, Vertices = Matter.Vertices, MouseConstraint = Matter.MouseConstraint; var CAT = {}; var _engine, _gui, _sceneName, _mouseConstraint; CAT.init = function () { var container = document.getElementById('stage'); var options = { positionIterations: 6, velocityIterations: 4, enableSleeping: false }; _engine = Engine.create(container, options); // add a mouse controlled constraint _mouseConstraint = MouseConstraint.create(_engine); _mouseConstraint.constraint.render.visible = false; World.add(_engine.world, _mouseConstraint); // run the engine Engine.run(_engine); CAT.catapult(); }; // call the init function above once the page has loaded fully if (window.addEventListener) { window.addEventListener('load', CAT.init); } else if (window.attachEvent) { window.attachEvent('load', CAT.init); } CAT.catapult = function () { var _world = _engine.world; CAT.reset(); var catapult = Bodies.rectangle(400, 520, 330, 20, { density: 0.005, render: { lineWidth: 1, strokeStyle: '#396AB1', fillStyle: '#396AB1' } }); var stopper = Bodies.rectangle(250, 565, 25, 70, { isStatic: true, render: { lineWidth: 1, strokeStyle: 'transparent', fillStyle: '#909595' } }); var fulcrum = Bodies.trapezoid(400, 565, 95, 70, 0.9, { isStatic: true, render: { lineWidth: 1, strokeStyle: 'transparent', fillStyle: '#909595' } }); var fodder = Bodies.rectangle(250, 255, 44, 44, { density: 0.004, render: { lineWidth: 1, strokeStyle: '#3E9651', fillStyle: '#3E9651' } }); var ball = Bodies.circle(560, 100, 50, { density: 0.80, render: { lineWidth: 1, strokeStyle: '#922428', fillStyle: '#922428' } }); var basket_L = Bodies.rectangle(600, 200, 25, 100, { isStatic: true, render: { lineWidth: 1, strokeStyle: 'transparent', fillStyle: '#dadada' } }); var basket_R = Bodies.rectangle(700, 200, 25, 100, { isStatic: true, render: { lineWidth: 1, strokeStyle: 'transparent', fillStyle: '#dadada' } }); var basket_B = Bodies.rectangle(650, 250, 125, 25, { isStatic: true, render: { lineWidth: 1, strokeStyle: 'transparent', fillStyle: '#dadada' } }); World.add(_world, [ basket_L, basket_R, basket_B, fodder, catapult, stopper, ball, fulcrum, Constraint.create({ bodyA: catapult, pointB: { x: 350, y: 600 }, render: { visible: false } }), Constraint.create({ bodyA: catapult, pointB: { x: 450, y: 600 }, render: { visible: false } }) ]); var renderOptions = _engine.render.options; renderOptions.wireframes = false; renderOptions.showDebug = false; renderOptions.showBroadphase = false; renderOptions.showBounds = false; renderOptions.showVelocity = false; renderOptions.showCollisions = false; renderOptions.showAxes = false; renderOptions.showPositions = false; renderOptions.showAngleIndicator = false; renderOptions.showIds = false; renderOptions.showShadows = false; renderOptions.background = '#fff'; renderOptions.showAngleIndicator = false; renderOptions.showCollisions = false; renderOptions.showSleeping = false; renderOptions.showVelocity = false; }; CAT.reset = function () { var _world = _engine.world; World.clear(_world); Engine.clear(_engine); // clear scene graph (if defined in controller) var renderController = _engine.render.controller; if (renderController.clear) renderController.clear(_engine.render); if (Events) { // clear all events Events.off(_engine); // add event for deleting bodies and constraints with right mouse button Events.on(_engine, 'mousedown', function (event) { var mouse = event.mouse, engine = event.source, bodies = Composite.allBodies(engine.world), constraints = Composite.allConstraints(engine.world), i; if (mouse.button === 2) { // find if a body was clicked on for (i = 0; i < bodies.length; i++) { var body = bodies[i]; if (Bounds.contains(body.bounds, mouse.position) && Vertices.contains(body.vertices, mouse.position)) { // remove the body that was clicked on Composite.remove(engine.world, body, true); } } // find if a constraint anchor was clicked on for (i = 0; i < constraints.length; i++) { var constraint = constraints[i], bodyA = constraint.bodyA, bodyB = constraint.bodyB; Composite.remove(engine.world, constraint, true); } } }); } _engine.enableSleeping = false; _engine.world.gravity.y = 1; var offset = 0; World.add(_world, [ Bodies.rectangle(400, -offset, 800.5 + 2 * offset, 1, { isStatic: true }), Bodies.rectangle(400, 600 + offset, 800.5 + 2 * offset, 1, { isStatic: true }), Bodies.rectangle(800 + offset, 300, 1, 600.5 + 2 * offset, { isStatic: true }), Bodies.rectangle(-offset, 300, 1, 600.5 + 2 * offset, { isStatic: true }) ]); _mouseConstraint = MouseConstraint.create(_engine); _mouseConstraint.constraint.render.visible = false; World.add(_world, _mouseConstraint); var renderOptions = _engine.render.options; };
})();
Developer | Dave Alger |
Username | run-time |
Uploaded | August 11, 2022 |
Rating | 3 |
Size | 3,109 Kb |
Views | 50,600 |
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!
Name | Size |
Basic FAQ | 2,365 Kb |
Fireflies | 2,940 Kb |
Download Speed Calculator | 3,412 Kb |
Slow Motion Shatter | 3,326 Kb |
ASCII Tree Logo | 4,202 Kb |
Easy to understand paginator | 3,647 Kb |
Color Picker | 3,410 Kb |
A Pen by Dave Alger | 272,032 Kb |
Editable Fire Text | 3,997 Kb |
Chat Room Demo | 3,277 Kb |
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!
Name | Username | Size |
A Pen by Gregory Potdevin | GregoryPotdevin | 1,713 Kb |
Simple, flat contact form | Zeaklous | 2,719 Kb |
Transition | Shayhowe | 1,632 Kb |
JavaScript constructors | Simboonlong | 2,415 Kb |
Light Switch | Bartuc | 4,933 Kb |
Pure CSS Read More Arrow | Zephyr | 1,747 Kb |
CSS- UI Element States Pseudo-Classes | Tesla809 | 2,206 Kb |
Savemedia1.1 | EdsonAlcala | 2,148 Kb |
A Pen by Ash | Littleginger | 2,386 Kb |
Social buttons | Flacu | 2,022 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!