这个项目的灵感来源于童年时期,在黑白手机屏幕上玩的一款游戏,游戏名字记不清楚了只记得游戏的玩法就是将小点分开并困住,使每一个小点都有自己独立的运动范围。并且小点的可移动范围越小那么你得到的分数就会越高。
游戏玩法:
1、通过鼠标在游戏区域划线(按下鼠标向上、向下、向左、向右滑动)可以将水果的移动范围进行分隔
2、一定要等到线段走到边界且长度不再增加时再进行下一条边界的增加
您当前的分数为:
剩余次数:
恭喜你
你的分数为:
游戏结束
您没有将所有的水果分割开
JS代码如下:
// 盒子的宽度和高度
var gamebox = document.querySelector('.game');
var boxwidth = gamebox.clientWidth;
var boxheight = gamebox.clientHeight;
var clickcount = 0;
var ballsAry = []; //定义小球边界的属性
var balls_num = 0; //定义小球的数量
var area = []; //定义面积
var checkpoints = 2; //闯关数
// 创建小球
function createBall() {
for (let i =0; i<checkpoints; i++){
balls_num += 1;
let postion_x = randNum(0,boxwidth);
let postion_y = randNum(0,boxheight);
let size = randNum(50,80);
let r = randNum(0,255);
let g = randNum(0,255);
let b = randNum(0,255);
let z = randNum(1,20);
let imageUrl = `url(/ball/img/${z}.svg) no-repeat`;
let ball_color = `rgb(${r},${g},${b})`;
let ball_div = document.createElement('div');
ball_div.style.left = postion_x + 'px';
ball_div.style.top = postion_y + 'px';
// ball_div.style.backgroundColor = ball_color;
ball_div.style.background = imageUrl;
ball_div.style.width = size + 'px';
ball_div.style.height = size + 'px';
ball_div.className = "ball";
document.querySelector('.game').appendChild(ball_div);
}
//将小球的移动范围属性放入里面
}
// 移动小球
function moveBall() {
let balls = document.querySelectorAll('.ball');
for (let i=0; i<balls_num; i++) {
let speed_X = randNum(5,10);
let speed_Y = randNum(3,8);
let obj = {};
// 定义小球的边界
obj.range_left = 0;
obj.range_right = boxwidth;
obj.range_top = 0;
obj.range_bottom = boxheight;
// 将小球的边界属性添加到数组里面
ballsAry.push(obj);
// 如果触碰到边界则反弹
setInterval(function(){
if(balls[i].offsetLeft < ballsAry[i].range_left || balls[i].offsetLeft > ballsAry[i].range_right) {
speed_X *= -1;
}
if(balls[i].offsetTop < ballsAry[i].range_top || balls[i].offsetTop > ballsAry[i].range_bottom) {
speed_Y *= -1;
}
let x = balls[i].offsetLeft + speed_X;
let y = balls[i].offsetTop + speed_Y;
balls[i].style.left = x + 'px';
balls[i].style.top = y + 'px';
// console.log(i + ':rangeleft' + obj.range_left);
// console.log(i + ':rangeright' + obj.range_right);
},10)
}
}
// 产生随机数
function randNum(min,max) {
return Math.floor(Math.random() * (max - min) + min);
}
// 划分边界
function addLine() {
let startX; //按下鼠标的x坐标
let startY; //按下鼠标的y坐标
let endX; //松开鼠标的x坐标
let endY; //松开鼠标y坐标
let gapX; //鼠标x 滑动距离
let gapY; //鼠标y 滑动距离
let lineleft = 0; //边界左开始滑动位置
let lineright = 0; //边界右侧开始滑动位置
let linetop = 0; //边界上侧开始滑动位置
let linebottom = 0; //边界下侧开始滑动位置
let linewidth = boxwidth; //边界的宽度
let lineheight = boxheight; //边界的长度
gamebox.addEventListener('mousedown',function(e){
startX = e.offsetX;
startY = e.offsetY;
},false);
// gamebox.addEventListener('touchstart',function(e){
// startX = e.offsetX;
// startY = e.offsetY;
// clickcount+=1;
// },false);
gamebox.addEventListener('mouseup',function(e){
endX = e.offsetX;
endY = e.offsetY;
gapX = endX - startX;
gapY = endY - startY;
jgapX = gapX > 0 ? gapX : gapX*-1;
jgapY = gapY > 0 ? gapY : gapY*-1;
let line = document.createElement('div');
clickcount +=1;
if(jgapX>jgapY){
// 向右滑动
if(gapX>0){
for (let i= 0; i< balls_num; i++) {
if(startX > ballsAry[i].range_left && startX<ballsAry[i].range_right){
if(startY > ballsAry[i].range_top && startY < ballsAry[i].range_bottom) {
speedline = 0;
line.id= "line" + clickcount;
line.className = "line X";
gamebox.appendChild(line);
lineleft = ballsAry[i].range_left;
linewidth = ballsAry[i].range_right - ballsAry[i].range_left;
document.getElementById("line"+clickcount).style.height = "2px";
document.getElementById("line"+clickcount).style.background = "red";
document.getElementById("line"+clickcount).style.left = lineleft + "px";
document.getElementById("line"+clickcount).style.top = startY +'px';
change = true; //当线段成功才改变边界
let interval = setInterval(function(){
if(speedline < linewidth){
speedline += 5;
document.getElementById("line"+clickcount).style.width = speedline + 'px';
}
else{
clearInterval(interval);
}
},10)
// 改变小球的边界
let balls = document.querySelectorAll('.ball');
if (balls[i].offsetTop < startY && ballsAry[i].range_bottom > startY) {
ballsAry[i].range_bottom = startY;
ballsAry[i].area = (ballsAry[i].range_bottom - ballsAry[i].range_top) * (ballsAry[i].range_right - ballsAry[i].range_left);
}
else if(balls[i].offsetTop > startY && ballsAry[i].range_top < startY){
ballsAry[i].range_top = startY;
ballsAry[i].area = (ballsAry[i].range_bottom - ballsAry[i].range_top) * (ballsAry[i].range_right - ballsAry[i].range_left);
}
}
}
}
}
// 向左滑动
else{
for (let i= 0; i< balls_num; i++) {
if(startX > ballsAry[i].range_left && startX<ballsAry[i].range_right ){
if(startY > ballsAry[i].range_top && startY < ballsAry[i].range_bottom) {
speedline = 0;
line.id= "line" + clickcount;
line.className = "line X";
gamebox.appendChild(line);
lineright =boxwidth - ballsAry[i].range_right;
linewidth = ballsAry[i].range_right - ballsAry[i].range_left;
document.getElementById("line"+clickcount).style.height = "2px";
document.getElementById("line"+clickcount).style.background = "red";
document.getElementById("line"+clickcount).style.right =lineright + "px";
document.getElementById("line"+clickcount).style.top = startY +'px';
change = true; //当线段成功才改变边界
let interval = setInterval(function(){
if(speedline < linewidth){
speedline += 5;
document.getElementById("line"+clickcount).style.width = speedline + 'px';
}
else{
clearInterval(interval);
}
},10)
// 改变小球的边界
let balls = document.querySelectorAll('.ball');
if (balls[i].offsetTop < startY && ballsAry[i].range_bottom > startY) {
ballsAry[i].range_bottom = startY ;
ballsAry[i].area = (ballsAry[i].range_bottom - ballsAry[i].range_top) * (ballsAry[i].range_right - ballsAry[i].range_left);
}
else if(balls[i].offsetTop > startY && ballsAry[i].range_top < startY){
ballsAry[i].range_top = startY ;
ballsAry[i].area = (ballsAry[i].range_bottom - ballsAry[i].range_top) * (ballsAry[i].range_right - ballsAry[i].range_left);
}
}
}
}
}
}
else if(jgapX < jgapY){
// 向下滑动
if(gapY>0){
for (let i= 0; i< balls_num; i++) {
if(startX > ballsAry[i].range_left && startX<ballsAry[i].range_right){
if(startY > ballsAry[i].range_top && startY < ballsAry[i].range_bottom) {
speedline = 0;
line.id= "line" + clickcount;
line.className = "line Y";
gamebox.appendChild(line);
linetop =ballsAry[i].range_top;
lineheight = ballsAry[i].range_bottom - ballsAry[i].range_top;
document.getElementById("line"+clickcount).style.width = "2px";
document.getElementById("line"+clickcount).style.background = "red";
document.getElementById("line"+clickcount).style.top = linetop + "px";
document.getElementById("line"+clickcount).style.left = startX +'px';
change = true; //当线段成功才改变边界
let interval = setInterval(function(){
if(speedline < lineheight){
speedline += 5;
document.getElementById("line"+clickcount).style.height = speedline + 'px';
}
else{
clearInterval(interval);
}
},10)
// 改变小球的边界
let balls = document.querySelectorAll('.ball');
if (balls[i].offsetLeft < startX && ballsAry[i].range_right > startX) {
ballsAry[i].range_right = startX;
ballsAry[i].area = (ballsAry[i].range_bottom - ballsAry[i].range_top) * (ballsAry[i].range_right - ballsAry[i].range_left);
}
else if(balls[i].offsetLeft > startX &&ballsAry[i].range_left < startX){
ballsAry[i].range_left = startX ;
ballsAry[i].area = (ballsAry[i].range_bottom - ballsAry[i].range_top) * (ballsAry[i].range_right - ballsAry[i].range_left);
}
}
}
}
}
// 向上滑动
else if(gapY<0){
for (let i= 0; i< balls_num; i++) {
if(startX > ballsAry[i].range_left && startX<ballsAry[i].range_right){
if(startY > ballsAry[i].range_top && startY < ballsAry[i].range_bottom) {
speedline = 0;
line.id= "line" + clickcount;
line.className = "line Y";
gamebox.appendChild(line);
linebottom =boxheight - ballsAry[i].range_bottom;
lineheight = ballsAry[i].range_bottom - ballsAry[i].range_top;
document.getElementById("line"+clickcount).style.width = "2px";
document.getElementById("line"+clickcount).style.background = "red";
document.getElementById("line"+clickcount).style.bottom =linebottom + "px";
document.getElementById("line"+clickcount).style.left = startX +'px';
change = true; //当线段成功才改变边界
let interval = setInterval(function(){
if(speedline < lineheight){
speedline += 5;
document.getElementById("line"+clickcount).style.height = speedline + 'px';
}
else{
clearInterval(interval);
}
},10)
// 改变小球的边界
let balls = document.querySelectorAll('.ball');
if (balls[i].offsetLeft < startX && ballsAry[i].range_right > startX) {
ballsAry[i].range_right = startX;
ballsAry[i].area = (ballsAry[i].range_bottom - ballsAry[i].range_top) * (ballsAry[i].range_right - ballsAry[i].range_left);
}
else if(balls[i].offsetLeft > startX &&ballsAry[i].range_left < startX){
ballsAry[i].range_left = startX;
ballsAry[i].area = (ballsAry[i].range_bottom - ballsAry[i].range_top) * (ballsAry[i].range_right - ballsAry[i].range_left);
}
}
}
}
}
}
// 计算最终的面积
for (let i= 0; i< balls_num; i++) {
area.push(ballsAry[i].area);
}
area.sort(function(a,b){
return a-b;
});
if(clickcount >= 3 + balls_num){
let nballAry = ballsAry.sort(objectSort("range_left"));
let gameover;
for(let i =0;i<ballsAry.length-1;i++){
if(nballAry[i].range_left == nballAry[i+1].range_left && nballAry[i].range_bottom == nballAry[i+1].range_bottom){
gameover = true;
}
}
if(gameover){
document.querySelector('.gameover').style.display = "flex";
}
else{
document.querySelector('.next span').innerHTML =Math.round(boxwidth * boxheight / area[0]);
document.querySelector('.next').style.display = "flex";
}
}
lines = document.getElementsByClassName('line');
},false);
gamebox.addEventListener('touchstart',function(e){
let touch = e.touches[0];
startX = Number(touch.pageX);
startY = Number(touch.pageY);
e.preventDefault();
},false);
// gamebox.addEventListener('touchstart',function(e){
// startX = e.offsetX;
// startY = e.offsetY;
// clickcount+=1;
// },false);
gamebox.addEventListener('touchend',function(e){
let touch = e.touches[0];
endX = Number(touch.pageX);
endY = Number(touch.pageY);
gapX = endX - startX;
gapY = endY - startY;
jgapX = gapX > 0 ? gapX : gapX*-1;
jgapY = gapY > 0 ? gapY : gapY*-1;
let line = document.createElement('div');
clickcount +=1;
if(jgapX>jgapY){
// 向右滑动
if(gapX>0){
for (let i= 0; i< balls_num; i++) {
if(startX > ballsAry[i].range_left && startX<ballsAry[i].range_right){
if(startY > ballsAry[i].range_top && startY < ballsAry[i].range_bottom) {
speedline = 0;
line.id= "line" + clickcount;
line.className = "line X";
gamebox.appendChild(line);
lineleft = ballsAry[i].range_left;
linewidth = ballsAry[i].range_right - ballsAry[i].range_left;
document.getElementById("line"+clickcount).style.height = "2px";
document.getElementById("line"+clickcount).style.background = "red";
document.getElementById("line"+clickcount).style.left = lineleft + "px";
document.getElementById("line"+clickcount).style.top = startY +'px';
change = true; //当线段成功才改变边界
let interval = setInterval(function(){
if(speedline < linewidth){
speedline += 5;
document.getElementById("line"+clickcount).style.width = speedline + 'px';
}
else{
clearInterval(interval);
}
},10)
// 改变小球的边界
let balls = document.querySelectorAll('.ball');
if (balls[i].offsetTop < startY && ballsAry[i].range_bottom > startY) {
ballsAry[i].range_bottom = startY;
ballsAry[i].area = (ballsAry[i].range_bottom - ballsAry[i].range_top) * (ballsAry[i].range_right - ballsAry[i].range_left);
}
else if(balls[i].offsetTop > startY && ballsAry[i].range_top < startY){
ballsAry[i].range_top = startY;
ballsAry[i].area = (ballsAry[i].range_bottom - ballsAry[i].range_top) * (ballsAry[i].range_right - ballsAry[i].range_left);
}
}
}
}
}
// 向左滑动
else{
for (let i= 0; i< balls_num; i++) {
if(startX > ballsAry[i].range_left && startX<ballsAry[i].range_right ){
if(startY > ballsAry[i].range_top && startY < ballsAry[i].range_bottom) {
speedline = 0;
line.id= "line" + clickcount;
line.className = "line X";
gamebox.appendChild(line);
lineright =boxwidth - ballsAry[i].range_right;
linewidth = ballsAry[i].range_right - ballsAry[i].range_left;
document.getElementById("line"+clickcount).style.height = "2px";
document.getElementById("line"+clickcount).style.background = "red";
document.getElementById("line"+clickcount).style.right =lineright + "px";
document.getElementById("line"+clickcount).style.top = startY +'px';
change = true; //当线段成功才改变边界
let interval = setInterval(function(){
if(speedline < linewidth){
speedline += 5;
document.getElementById("line"+clickcount).style.width = speedline + 'px';
}
else{
clearInterval(interval);
}
},10)
// 改变小球的边界
let balls = document.querySelectorAll('.ball');
if (balls[i].offsetTop < startY && ballsAry[i].range_bottom > startY) {
ballsAry[i].range_bottom = startY;
ballsAry[i].area = (ballsAry[i].range_bottom - ballsAry[i].range_top) * (ballsAry[i].range_right - ballsAry[i].range_left);
}
else if(balls[i].offsetTop > startY && ballsAry[i].range_top < startY){
ballsAry[i].range_top = startY;
ballsAry[i].area = (ballsAry[i].range_bottom - ballsAry[i].range_top) * (ballsAry[i].range_right - ballsAry[i].range_left);
}
}
}
}
}
}
else if(jgapX < jgapY){
// 向下滑动
if(gapY>0){
for (let i= 0; i< balls_num; i++) {
if(startX > ballsAry[i].range_left && startX<ballsAry[i].range_right){
if(startY > ballsAry[i].range_top && startY < ballsAry[i].range_bottom) {
speedline = 0;
line.id= "line" + clickcount;
line.className = "line Y";
gamebox.appendChild(line);
linetop =ballsAry[i].range_top;
lineheight = ballsAry[i].range_bottom - ballsAry[i].range_top;
document.getElementById("line"+clickcount).style.width = "2px";
document.getElementById("line"+clickcount).style.background = "red";
document.getElementById("line"+clickcount).style.top = linetop + "px";
document.getElementById("line"+clickcount).style.left = startX +'px';
change = true; //当线段成功才改变边界
let interval = setInterval(function(){
if(speedline < lineheight){
speedline += 5;
document.getElementById("line"+clickcount).style.height = speedline + 'px';
}
else{
clearInterval(interval);
}
},10)
// 改变小球的边界
let balls = document.querySelectorAll('.ball');
if (balls[i].offsetLeft < startX && ballsAry[i].range_right > startX) {
ballsAry[i].range_right = startX;
ballsAry[i].area = (ballsAry[i].range_bottom - ballsAry[i].range_top) * (ballsAry[i].range_right - ballsAry[i].range_left);
}
else if(balls[i].offsetLeft > startX &&ballsAry[i].range_left < startX){
ballsAry[i].range_left = startX;
ballsAry[i].area = (ballsAry[i].range_bottom - ballsAry[i].range_top) * (ballsAry[i].range_right - ballsAry[i].range_left);
}
}
}
}
}
// 向上滑动
else if(gapY<0){
for (let i= 0; i< balls_num; i++) {
if(startX > ballsAry[i].range_left && startX<ballsAry[i].range_right){
if(startY > ballsAry[i].range_top && startY < ballsAry[i].range_bottom) {
speedline = 0;
line.id= "line" + clickcount;
line.className = "line Y";
gamebox.appendChild(line);
linebottom =boxheight - ballsAry[i].range_bottom;
lineheight = ballsAry[i].range_bottom - ballsAry[i].range_top;
document.getElementById("line"+clickcount).style.width = "2px";
document.getElementById("line"+clickcount).style.background = "red";
document.getElementById("line"+clickcount).style.bottom =linebottom + "px";
document.getElementById("line"+clickcount).style.left = startX +'px';
change = true; //当线段成功才改变边界
let interval = setInterval(function(){
if(speedline < lineheight){
speedline += 5;
document.getElementById("line"+clickcount).style.height = speedline + 'px';
}
else{
clearInterval(interval);
}
},10)
// 改变小球的边界
let balls = document.querySelectorAll('.ball');
if (balls[i].offsetLeft < startX && ballsAry[i].range_right > startX) {
ballsAry[i].range_right = startX;
ballsAry[i].area = (ballsAry[i].range_bottom - ballsAry[i].range_top) * (ballsAry[i].range_right - ballsAry[i].range_left);
}
else if(balls[i].offsetLeft > startX &&ballsAry[i].range_left < startX){
ballsAry[i].range_left = startX;
ballsAry[i].area = (ballsAry[i].range_bottom - ballsAry[i].range_top) * (ballsAry[i].range_right - ballsAry[i].range_left);
}
}
}
}
}
}
// 计算最终的面积
for (let i= 0; i< balls_num; i++) {
area.push(ballsAry[i].area);
}
area.sort(function(a,b){
return a-b;
});
if(clickcount >= 3 + balls_num){
let nballAry = ballsAry.sort(objectSort("range_left"));
let gameover;
for(let i =0;i<ballsAry.length-1;i++){
if(nballAry[i].range_left == nballAry[i+1].range_left && nballAry[i].range_bottom == nballAry[i+1].range_bottom){
gameover = true;
}
}
if(gameover){
document.querySelector('.gameover').style.display = "flex";
}
else{
document.querySelector('.next span').innerHTML =Math.round(boxwidth * boxheight / area[0]);
document.querySelector('.next').style.display = "flex";
}
}
lines = document.getElementsByClassName('line');
},false);
}
// 点击开始游戏按钮,开始游戏
function startGame(item) {
let btn = document.querySelector('.game button');
btn.style.display = "none";
createBall();
moveBall();
addLine();
}
function init() {
clickcount = 0;
ballsAry = [];
balls_num = 0;
area = [];
}
function clearEl(){
let lines = document.querySelectorAll('.line');
let balls = document.querySelectorAll('.ball');
for (let i = 0;i<lines.length;i++){
lines[i].remove();
}
for (let i = 0;i<balls.length;i++){
balls[i].remove();
}
}
//下一关
function nextChallange(item){
document.querySelector('.next').style.display = "none";
clearEl();
init();
checkpoints += 1;
createBall();
moveBall();
// addLine();
}
//重新开始游戏
function restartGame(item){
document.querySelector('.gameover').style.display = "none";
init();
clearEl();
createBall();
moveBall();
// addLine();
}
// 对对象数组进行排序
function objectSort(item){
return function(obj1,obj2){
return obj1[item]-obj2[item];
}
}
css代码如下:
.main {
width: 70%;
border-radius: 20px;
height: 1000px;
margin: 0 auto;
background: #f3f2f2;
padding: 3%;
position: relative;
}
.game {
width: 100%;
height: 90%;
display: flex;
align-items: center;
background: #0c0c0c;
position: relative;
user-select: none;
}
.game button {
margin: 0 auto;
padding: 10px 15px;
border: 1px solid #2196f3;
border-radius: 5px;
color: white;
background: #2196f3;
}
.ball {
position: absolute;
border-radius: 50%;
background-size: cover;
animation-name: revolve;
animation-duration: 3s;
animation-iteration-count: infinite;
}
.line {
position: absolute;
}
.next,.gameover {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 39%;
align-items: center;
justify-content: center;
background: #00bcd4;
padding: 4%;
display: flex;
display: none;
animation-name: wipeup;
animation-duration: 1s;
}
@keyframes wipeup {
0% {top:70%;}
100% {top:50%;}
}
@keyframes revolve{
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
@media (min-device-width : 375px) and (max-device-width : 736px){
.main {
width: 90vw;
border-radius: 20px;
height: 100vh;
margin: 0 auto;
background: #f3f2f2;
padding: 3%;
position: relative;
}
.game {
width: 100%;
height: 68vh;
display: flex;
align-items: center;
background: #0c0c0c;
position: relative;
user-select: none;
}
}