HTML5重力下落2048游戏代码.zip资源-CSDN文库

共2个文件

js：1个

html：1个

网页特效

jQuery特效

CSS特效

JavaScript特效

194 浏览量 2023-10-05 23:33:20 上传评论收藏 29KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

HTML5重力下落2048游戏代码.zip （2个子文件）

jiaoben8650

matter.min.js 84KB

index.html 9KB

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="user-scalable=0"> <title>HTML5重力下落2048游戏代码 - 站长素材</title> </head> <body> <canvas id="box"> 你的浏览器可能太古老了…… </canvas> </body> <script src="js/matter.min.js"></script> <script> var box = document.getElementById("box"); Ma = Matter; // module aliases var Engine = Ma.Engine, Render = Ma.Render, World = Ma.World, Composite = Ma.Composite, Detector = Ma.Detector, Events = Ma.Events, Body = Ma.Body, Bodies = Ma.Bodies; // create an engine var engine = Engine.create(); var a = 38; // var a=40/(1+Math.sqrt(2)) var octagon = [ { x: -a, y: 46 }, { x: a, y: 46 }, { x: 46, y: a }, { x: 46, y: -a }, { x: a, y: -46 }, { x: -a, y: -46 }, { x: -46, y: -a }, { x: -46, y: a }, ]; function new_block(x, y, label, angle = 0) { var options = { label: label, friction: 0.2, frictionStatic: 0.25, angle: angle, density: 0.001 * Math.log(Number(label)), restitution: 0.7 }; return Bodies.fromVertices(x,y,octagon,options); } var colors = ["#DEB887", "#FFD700", "#FFA500", "#B8860B", "#CD853F", "#8B4513"]; var wall_options = { isStatic: true, label: "wall" }; var floor = Bodies.rectangle(300, 550, 600, 100, wall_options); var ceil = Bodies.rectangle(300, 50, 600, 100, wall_options); var wall_left = Bodies.rectangle(50, 300, 100, 400, wall_options); var wall_right = Bodies.rectangle(550, 300, 100, 400, wall_options); var Beg2 = new_block(200, 200, "2"); var Beg4 = new_block(400, 400, "4"); // add all of the bodies to the world World.add(engine.world, [Beg2, Beg4, floor, ceil, wall_left, wall_right]); // run the engine Engine.run(engine); var canvas = box, context = canvas.getContext("2d"); canvas.width = 800; canvas.height = 600; var gravity = Math.PI / 2; var score = 0, over = false, wei = false, wei_begin; var wall_coll = [0, 0, 0, 0, 0]; Events.on(engine, 'collisionStart', function (event) { var pairs = event.pairs; var merged = false; for (var i = 0; i < pairs.length; i++) { var pair = pairs[i]; var minId = Math.min(pair.bodyA.id, pair.bodyB.id); if (minId <= 4) { wall_coll[minId]++; } else if (!merged) { var a = pair.bodyA, b = pair.bodyB; if (a.label == b.label) { var blk = new_block( (a.position.x + b.position.x) / 2, (a.position.y + b.position.y) / 2, String(Number(a.label) + Number(b.label)), (a.angle + b.angle) / 2); World.remove(engine.world, a); World.remove(engine.world, b); World.add(engine.world, blk); score += Number(a.label) + Number(b.label); merged = 1; // Or everything will go wrong if several bloks appers in one place } } } }); Events.on(engine, 'collisionEnd', function (event) { var pairs = event.pairs; for (var i = 0; i < pairs.length; i++) { var pair = pairs[i]; var minId = Math.min(pair.bodyA.id, pair.bodyB.id); if (minId <= 4) { wall_coll[minId]--; } } }); (function render() { var bodies = Composite.allBodies(engine.world); now=new Date(); window.requestAnimationFrame(render); context.fillStyle = "#BDB76B"; context.fillRect(0, 0, 600, 600); // Show the direction of the gravity context.fillStyle = "#CEC87C"; context.moveTo(300, 300); context.beginPath(); context.arc(300, 300, 600, gravity - Math.PI / 30, gravity + Math.PI / 30); context.lineTo(300, 300); context.fill(); context.save(); context.strokeStyle = "#CEC87C"; context.lineWidth = 10; context.rotate(gravity); for (var i = -1200; i <= 1200; i += 75) { context.beginPath(); // context.moveTo(-1200, i); // context.lineTo(1200, i); context.moveTo(i, -1200); context.lineTo(i, 1200); context.stroke(); } context.restore(); context.fillStyle = "#FAFAD2"; context.fillRect(100, 100, 400, 400); // Sidebar context.textAlign = "center"; context.textBaseline = "middle"; context.fillStyle = "#FFF8DC"; context.fillRect(600, 0, 200, 600); context.fillStyle = "#AAA"; context.font = "48px Clear Sans"; context.fillText("分数", 700, 100); context.fillStyle = "#333"; context.font = "48px Clear Sans"; context.fillText(String(score), 700, 200); if(wei&&!over){ context.save(); context.fillStyle = "red"; context.font = "24px Clear Sans"; context.fillText(((now.getTime()-wei_begin)/1000).toFixed(3), 700, 500); context.restore(); } context.lineJoin = "round"; context.lineWidth = 2; context.strokeStyle = "#999"; var wallcnt = 0; for (var i = 0; i < bodies.length; i += 1) { var body = bodies[i] if (body.label == "wall") continue; context.beginPath(); var vertices = body.vertices; context.moveTo(vertices[0].x, vertices[0].y); for (var j = 1; j < vertices.length; j += 1) { context.lineTo(vertices[j].x, vertices[j].y); } context.lineTo(vertices[0].x, vertices[0].y); context.fillStyle = colors[Math.round(Math.log2(Number(body.label) - 1)) % 6]; context.fill(); context.save(); context.translate(body.position.x, body.position.y); context.rotate(body.angle); context.fillStyle = "#FFF"; context.fillText(body.label, 0, 0); context.restore() } if (over) { context.fillStyle = "rgba(128,128,128,0.5)"; context.fillRect(0, 0, 600, 600); context.font = "48px Clear Sans"; context.fillStyle = "#FFF"; context.fillText("游戏结束", 300, 300); } var gg = true; for (var i = 1; i <= 4; i++)if (wall_coll[i] == 0) gg = false; if (gg && !wei) { wei = true; wei_begin = now.getTime(); } else if (!gg && wei) { wei = false; } else if (gg) { if (now.getTime() - wei_begin > 2000) over = true; } })(); function clk(e) { if (over) return; var e = e || window.event; var x = e.clientX - 300, y = e.clientY - 300; if ((x > -200 && x < 200 && y > -200 && y < 200) || (x < -300 || y < -300 || x > 300 || y > 300)) return; gravity = Math.atan2(y, x); engine.world.gravity.x = Math.cos(gravity); engine.world.gravity.y = Math.sin(gravity); for (var i = 0; i < 20; i++) { var newx = Math.random() * 300 + 150, newy = Math.random() * 300 + 150; var blk = new_block(newx, newy, (Math.random() < 0.2 ? "4" : "2")); if (Ma.Query.collides(blk, engine.world.bodies).length == 0) { World.add(engine.world, [blk]); retur

评论收藏

内容反馈