Catapult Game

Developer
Dave Alger
Size
3,109 Kb
Views
50,600
  1. Catapult Game Previews
  2. Catapult Game HTML Codes
  3. Catapult Game CSS Codes
  4. Catapult Game JS Codes

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 Previews
IQ Test

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; };
})();
Catapult Game - Script Codes
Catapult Game - Script Codes
Home Page Home
Developer Dave Alger
Username run-time
Uploaded August 11, 2022
Rating 3
Size 3,109 Kb
Views 50,600
Do you need developer help for Catapult Game?

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!

Dave Alger (run-time) Script Codes
Name
JavaScript Fingerprint
Slow Motion Shatter
JavaScript water droplet effect
Rainbow Spider
ASCII Tree Logo
Fireflies
Phone Input Field
Simple Yin Yang
A Pen by Dave Alger
03 - CSS Variables
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!