没什么玩法, 就是用鼠标去把球托起来, 点击 "效果预览" 可玩, 觉得有点意思的记得留个言哈! 可以再想想怎么增加可玩性
明天把 cursor 换成元素板, 现在有点难操作
1.17 更新: 懒得换操作板了 = =
html 代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- <style>
- * {
- margin: 0;
- padding: 0;
- }
- .info {
- width: 500px;
- margin: 30px auto;
- text-align: center;
- }
- .view {
- width: 500px;
- height: 500px;
- outline: solid 5px #333;
- margin: 50px auto;
- position: relative;
- overflow: hidden;
- cursor: ew-resize;
- }
- .box {
- width: 30px;
- height: 30px;
- border: solid 2px red;
- position: absolute;
- -webkit-border-radius: 50%;
- border-radius: 50%;
- display: -webkit-box;
- display: -webkit-flex;
- display: flex;
- -webkit-box-align: center;
- -webkit-align-items: center;
- align-items: center;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- justify-content: center;
- color: red;
- }
- </style>
- </head>
- <body>
- <div class="info"> 你托起了球共计 <span class="score">0</span> 次 </div>
- <div class="info"> 你的最大连击数: <span class="comb">0</span> 次 </div>
- <div class="view">
- <div class="box">2B</div>
- </div>
- <div class="info">Bug: 球速太快会抓不到的 </div>
- <script>
- (function(global) {
- 'use strict';
- var $box = $('.box');
- var $score = $('.score');
- var $comb = $('.comb');
- var score = 0;
- var comb = 0;
- var maxComb = 0;
- var $dropInter;
- function $update(dom, val) {
- dom.innerHTML = val;
- }
- function $(selector) {
- return document.querySelector(selector);
- }
- function setPos(x, y) {
- // console.log($box);
- $box.style.left = x + 'px';
- $box.style.top = y + 'px';
- }
- function initPos() {
- var x = randomNumber(0, 470),
- y = randomNumber(10, 20);
- setPos(x, y);
- }
- function randomNumber(min, max) {
- return Math.floor(Math.random() * (max - min)) + min;
- }
- var gameSpeed = 16;
- var g = 50 * gameSpeed / 1000; // 重力加速度
- function startDrop() {
- var x = $box.offsetLeft,
- y = $box.offsetTop;
- // console.log(x, y);
- var y_speed = 0; // 初始速度
- var x_speed = 10;
- $dropInter = setInterval(function() {
- y_speed += g;
- y += y_speed;
- x += x_speed;
- setPos(x, y);
- if (y>= 470) {
- comb = 0; // 落地 comb 清零
- y_speed = randomNumber(-25, -5);
- x_speed = randomNumber(-10, 10);
- // clearInterval($dropInter);
- // initPos();
- } else if (y <0) {
- y_speed = randomNumber(1, 5); // 触顶回弹
- x_speed = randomNumber(-10, 10);
- }
- if (x>= 470) {
- x_speed = randomNumber(-10, -3);
- } else if (x <0) {
- x_speed = randomNumber(3, 10);
- }
- }, gameSpeed);
- document.onkeydown = function(e) {
- if (e.keyCode === 32) {
- y_speed = randomNumber(-15, -5);;
- }
- };
- $box.onmouseenter = function() {
- score++;
- comb++;
- console.log(comb, maxComb);
- if (comb> maxComb) {
- maxComb = comb;
- $update($comb, maxComb);
- }
- $update($score, score);
- $box.style.borderColor = 'blue';
- $box.style.color = 'white';
- $box.style.backgroundColor = 'blue';
- y_speed = -15;
- x_speed = randomNumber(-3, 3);
- };
- $box.onmouseleave = function() {
- $box.style.borderColor = 'red';
- $box.style.color = 'red';
- $box.style.backgroundColor = 'white';
- }
- }
- global.setPos = setPos;
- global.initPos = initPos;
- global.startDrop = startDrop;
- initPos();
- startDrop();
- })(window);
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/article/17804/ca3195067b240caa206d7ef1f89aa4e0.html