Forked from: maemaeshun's Matter.jsで崩壊 View Diff (135) forked: Matter.jsで崩壊 ohisama1 Follow 2017-12-17 08:30:59 License: MIT License Fork0 Fav1 View416 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 91 lines HTML 6 lines CSS 12 lines forked: Matter.jsで崩壊 // forked from maemaeshun's "Matter.jsで崩壊" http://jsdo.it/maemaeshun/6X1I var testCanvas = { init: function() { this.World = Matter.World; this.Bodies = Matter.Bodies; this.Engine = Matter.Engine; var Render = Matter.Render; this.canvasWidth = 450; this.canvasHeight = 420; this.titleLetters = 24; this.titleBlockWidth = 20; this.titleBlockHeight = 20; this.letters = 326; this.blockWidth = 22; this.blockHeight = 16; this.lineBlocks = 16; this.engine = this.Engine.create(); var render = Render.create({ element: document.getElementById("container"), engine: this.engine, options: { wireframes: false, width: this.canvasWidth, height: this.canvasHeight, background: "rgba(255, 255, 255, 0)" } }) this.addFrame(); this.initTitle(); this.initLetter(); Render.run(render); }, engineRun: function() { this.Engine.run(this.engine); }, addFrame: function() { var left = this.Bodies.rectangle(-10, this.canvasHeight / 2, 10, this.canvasHeight, { isStatic: true }); var right = this.Bodies.rectangle(this.canvasWidth + 10, this.canvasHeight / 2, 10, this.canvasHeight, { isStatic: true }); var ground = this.Bodies.rectangle(this.canvasWidth / 2, this.canvasHeight + 10, this.canvasWidth, 10, { isStatic: true, render: { fillStyle: "#ffffff", strokeStyle: "#ffffff" } }); this.World.add(this.engine.world, [ground, left, right]); }, initTitle: function(breakLetter) { var blocks = []; for (var i = 0; i < this.titleLetters; i++) { var blockOption = { density: 0.8, restitution: 0.0, render: { sprite: { } } } blocks.push(this.Bodies.rectangle(this.titleBlockWidth * i + 55, 20, this.titleBlockWidth, this.titleBlockHeight / 2, blockOption)); } this.World.add(this.engine.world, blocks); }, initLetter: function(onclick) { var blocks = []; for (var i = 0; i < this.letters; i++) { var lineNum = parseInt(i / this.lineBlocks); var blockNum = i % this.lineBlocks; var blockOption = { density: 0.005, restitution: 1.0, render: { sprite: { } } } blocks.push(this.Bodies.rectangle(this.blockWidth * blockNum + 63, this.blockHeight * lineNum + 60, this.blockWidth, this.blockHeight / 2, blockOption)); } this.World.add(this.engine.world, blocks); } } testCanvas.init(); <button id="button" onclick="testCanvas.engineRun()">bom!</button> <div id="container"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.10.0/matter.min.js"></script> forked: Matter.jsで崩壊 * { margin: 0; padding: 0; border: 0; } body { } canvas { border: solid 1px #999; } // forked from maemaeshun's "Matter.jsで崩壊" http://jsdo.it/maemaeshun/6X1I var testCanvas = { init: function() { this.World = Matter.World; this.Bodies = Matter.Bodies; this.Engine = Matter.Engine; var Render = Matter.Render; this.canvasWidth = 450; this.canvasHeight = 420; this.titleLetters = 24; this.titleBlockWidth = 20; this.titleBlockHeight = 20; this.letters = 326; this.blockWidth = 22; this.blockHeight = 16; this.lineBlocks = 16; this.engine = this.Engine.create(); var render = Render.create({ element: document.getElementById("container"), engine: this.engine, options: { wireframes: false, width: this.canvasWidth, height: this.canvasHeight, background: "rgba(255, 255, 255, 0)" } }) this.addFrame(); this.initTitle(); this.initLetter(); Render.run(render); }, engineRun: function() { this.Engine.run(this.engine); }, addFrame: function() { var left = this.Bodies.rectangle(-10, this.canvasHeight / 2, 10, this.canvasHeight, { isStatic: true }); var right = this.Bodies.rectangle(this.canvasWidth + 10, this.canvasHeight / 2, 10, this.canvasHeight, { isStatic: true }); var ground = this.Bodies.rectangle(this.canvasWidth / 2, this.canvasHeight + 10, this.canvasWidth, 10, { isStatic: true, render: { fillStyle: "#ffffff", strokeStyle: "#ffffff" } }); this.World.add(this.engine.world, [ground, left, right]); }, initTitle: function(breakLetter) { var blocks = []; for (var i = 0; i < this.titleLetters; i++) { var blockOption = { density: 0.8, restitution: 0.0, render: { sprite: { } } } blocks.push(this.Bodies.rectangle(this.titleBlockWidth * i + 55, 20, this.titleBlockWidth, this.titleBlockHeight / 2, blockOption)); } this.World.add(this.engine.world, blocks); }, initLetter: function(onclick) { var blocks = []; for (var i = 0; i < this.letters; i++) { var lineNum = parseInt(i / this.lineBlocks); var blockNum = i % this.lineBlocks; var blockOption = { density: 0.005, restitution: 1.0, render: { sprite: { } } } blocks.push(this.Bodies.rectangle(this.blockWidth * blockNum + 63, this.blockHeight * lineNum + 60, this.blockWidth, this.blockHeight / 2, blockOption)); } this.World.add(this.engine.world, blocks); } } testCanvas.init(); <button id="button" onclick="testCanvas.engineRun()">bom!</button> <div id="container"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.10.0/matter.min.js"></script> * { margin: 0; padding: 0; border: 0; } body { } canvas { border: solid 1px #999; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author ohisama1 Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/ILeT/js"></script> canvas javascript library&test matter.js Discussion Questions on this code? Tags canvas javascript library&test matter.js Favorite by tjoen
