js实现一个待办事项碎片管理工具效果代码
代码语言:html
所属分类:其他
代码描述:js实现一个待办事项碎片管理工具效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *, *:before, *:after { box-sizing: border-box; margin: 0; } html { font-family: Futura, "Trebuchet MS", Arial, sans-serif; font-size: 18px; overflow: hidden; } .wrapper { position: absolute; padding: 20px; max-width: 350px; background: rgba(255, 255, 255, 0.9); box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1); border-radius: 5px; } h2 { text-align: center; margin: 0.5rem 0; font-weight: 200; } button { border-radius: 5px; background: #e1341e; color: white; border: none; font-size: 18px; } button:hover { transition: all 1s; transform: scale(1.1); } .items { margin: 0; padding: 0; text-align: left; list-style: none; } .items li { border-bottom: 1px solid rgba(0, 0, 0, 0.2); padding: 10px 0; font-weight: 100; display: flex; } .items label { flex: 1; cursor: pointer; } .items input { display: none; } .items input:checked + label:before { content: attr(data-before); } .add-items { margin-top: 20px; } .add-items button, .add-items input { padding: 10px; outline: 0; } button:hover { cursor: pointer; } .input-container { display: flex; } .input-container button { margin-left: 0.5rem; background-color: #1ECBE1; } .submit-btn { border: 1px solid black; } .submit-btn:hover { border-radius: 5px; } .all-btns { margin: 10px; } .message { padding: 0.5rem 0; color: red; } .delete-all-container { text-align: center; } </style> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.1.4.0.js"></script> </head> <body> <div class="wrapper"> <h2>Completed TODO's</h2> <p></p> <ul class="items"> <li>Loading TODOs...</li> </ul> <form class="add-items"> <div class="input-container"> <input type="text" name="item" placeholder="Item Name" required maxlength="25"> <button type="submit">Add Item</button> </div> <div class="message"></div> <div class="delete-all-container"> <button type="button" class="delete-all">Delete All</button> </div> </form> </div> <script > ////////////// sketch ///////////// var ship; var asteroids = []; var lasers = []; function setup() { createCanvas(windowWidth, windowHeight); ship = new Ship(); for (var i = 0; i < todos.length; i += 1) { asteroids.push(new Asteroid(null, null, todos[i].text)); } } // always runs function draw() { background(0); for (let i = 0; i < asteroids.length; i += 1) { if (ship.hits(asteroids[i])) { ship.isHit = true; setTimeout(function() { ship.isHit = false; }, 300); } asteroids[i].render(); asteroids[i].update(); asteroids[i].edges(); } for (let i = lasers.length - 1; i >= 0; i -= 1) { lasers[i].render(); lasers[i].update(); // collision detection // problem: looping through astroids and adding new ones at same time when they breakup // solution - loop backwards for (let j = asteroids.length - 1; j >= 0; j -= 1) { if (lasers[i].hits(asteroids[j])) { // make very small pieces disappear if (asteroids[j].r > 12) { var newAsteroids = asteroids[j].breakup(); asteroids.push(...newAsteroids); } asteroids.splice(j, 1); lasers.splice(i, 1); break; } } } ship.render(); ship.turn(); ship.update(); ship.edges(); } function windowResized() { resizeCanvas(windowWidth, windowHeight); } function keyReleased() { ship.setRotation(0); ship.boosting(false); } function keyPressed() { if (keyCode === CONTROL ) { lasers.push(new Laser(ship.pos, ship.heading)); } else if (keyCode === RIGHT_ARROW) { ship.setRotation(0.1); } else if (keyCode === LEFT_ARROW) { ship.setRotation(-0.1); } else if (keyCode === UP_ARROW) { ship.boosting(true); } } ////////////// ship ///////////// function Ship() { // starting pos vector this.pos = createVector(width / 2, height / 2); this.r = 20; this.heading = 0; this.rotation = 0; this.vel = createVector(0,0); this.isBoosting = false; this.isHit = false; this.boosting = function(b) { this.isBoosting = b; } this.update = function() { if (this.isBoosting) { this.boost(); } this.pos.add(this.vel); // dampening - reduce vel by 1% each frame this.vel.mult(0.99); if (this.isHit) { this.boost(true); ship.setRotation(random(-0.3, 0.3)); ship.turn(); } } this.boost = function(randomMult = false) { // get vector that points in direction of heading var force = p5.Vector.fromAngle(this.heading); // slow down boost force.mult(randomMult ? random(-0.4, 0.4) : 0.1); this.vel.add(force); } this.hits = function(asteroid) { // dist btn laser and asteroid pos var d = dist(this.pos.x, this.pos.y, asteroid.pos.x, asteroid .pos.y); if (d < this.r + asteroid.r) { // hit return true; } else { return false; } } this.render = function() { // push and pop makes sure ship translation and rotation does not affect asteroid or other things on the canvas push(); // save current rotation and translation state // position by vector values translate(this.pos.x, this.pos.y); // create triangle by plotting points // PI / 2 = conversion of 90 deg to radians rotate(this.heading + PI / 2); fill(this.isHit ? 'red' : 0); stroke(255); triangle(-this.r, this.r, this.r, this.r, 0, -this.r); pop() // restore rotation and translation state } // allow wrap around if it goes off screen this.edges = function() { if (this.pos.x > width + this.r) { this.pos.x = -this.r; } else if (this.pos.x < -this.r) { this.pos.x = width + this.r; } if (this.pos.y > height + this.r) { this.pos.y = -this.r; } else if (this.pos.y < -this.r) { this.pos.y = height + this.r; } } this.setRotation = function(a) { this.rotation = a; } this.turn = function() { this.heading += this.rotation; } } ////////////// asteroid ///////////// function Asteroid(pos, r, todo) { if (pos) { this.pos = pos.copy(); this.todo = ''; } else { this.pos = createVector(random(width), random(height)); this.todo = todo; } if (r) { this.r = r * 0.5; } else { this.r = random(15, 50); } this.vel = p5.Vector.random2D(); if (this.todo === '') { this.vel.mult(random(0.1, 5)); } this.total = floor(random(5, 15)); this.offset = []; for (let i = 0; i < this.total; i += 1) { this.offset[i] = random(-this.r * 0.5, this.r * 0.5); } this.update = function() { this.pos.add(this.vel); .........完整代码请登录后点击上方下载按钮下载查看
网友评论0