躲避小球的小游戏制作大全资源-CSDN文库

共7个文件

jpg：2个

js：2个

docx：1个

躲避球的游戏

需积分: 50 51 浏览量 2021-08-13 11:08:25 上传评论收藏 1.99MB RAR 举报

资源详情

资源评论

资源推荐

收起资源包目录

ball.rar （7个子文件）

ball

css

A.css 78B

img

2.jpg 66KB

1.jpg 66KB

申优报告.docx 2.15MB

tools.js 2KB

Ball1.js 1KB

ball.html 8KB

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>躲避小球</title> <link rel="stylesheet" type="text/css" href="css/A.css"/> </head> <body> <p><textarea id="log1" cols="40" rows="3"></textarea></p> <canvas id="canvas" width="800" height="600"></canvas> <input type="button" id="first" value="简单" /> <input type="button" id="second" value="中等" /> <input type="button" id="third" value="困难" /> <textarea id="log"></textarea> <script src="js/tools.js"></script> <script src="js/Ball1.js"></script> <script type="text/javascript"> window.onload=function(){ var canvas=document.getElementById('canvas'); var context=canvas.getContext('2d'); var log=document.getElementById("log"); var txt=document.getElementById("txt"); //多物体碰撞 var balls=[]; var ball=new Ball(); var ballB=new Ball(); var n=1; log1.value="简单刚开始只有一个球，每两秒增加一个小球\n中等刚开始有三个球，每两秒增加一个球\n困难刚开始有5个球，每两秒增加两个球"; function click(n){ for (var i=0;i<n;i++){ ball=new Ball(); ball.x=Math.random()*canvas.width; ball.y=Math.random()*canvas.height; ball.radius=Math.random()*15+5; ball.color=tools.getRandomColor(); ball.vx=Math.random()*2; ball.vy=Math.random()*2; //添加到数组balls中 balls.push(ball); } } function click1(n,ballB){ for (var i=0;i<n;i++){ ball=new Ball(); ball.x=Math.random()*canvas.width; ball.y=Math.random()*canvas.height; ball.radius=Math.random()*15+5; ball.color=tools.getRandomColor(); var dx=ballB.x-ball.x, dy=ballB.y-ball.y; var rotation=Math.atan2(dy,dx);//计算角度 ball.vx=Math.cos(rotation)*2; ball.vy=Math.sin(rotation)*2; //添加到数组balls中 balls.push(ball); } } document.getElementById("first").onclick=function(){ context.clearRect(0,0,canvas.width,canvas.height); click(1); var m=0; var k=0; var score=0; //生成n个小球的x、y、color、vx、vy属性的取值都是随机数 var mouse=tools.getMouse(canvas); //不固定的小球ballB，追随鼠标指针移动 var ballB=new Ball(canvas.width/2,canvas.height/2,20,"black"); (function frame(){ window.requestAnimationFrame(frame); context.clearRect(0,0,canvas.width,canvas.height); //碰撞检测 ballB.x=mouse.x; ballB.y=mouse.y; ballB.draw(context); k++; score=k/100; log.value=score+"分"; if (score>2+m&&score<2.02+m){ click1(1,ballB); m=m+2; } if (score==30){ alert("大神级别操作！\n简单模式对你来说太easy了，试试下一关吧！"); window.location="http://127.0.0.1:8848/ball/ball.html"; } for(var i=0;i<balls.length;i++){ var ball=balls[i]; if (tools.checkCircle(ballB,ball)){ alert("撞上了！Game over!\n分数："+score+"\n如果想要回到初始界面请点击确定\n"+"温馨提示：请先刷新页面再点击确定"); window.location="http://127.0.0.1:8848/ball/ball.html"; } } balls.forEach(checkCollision1); //边界检测 balls.forEach(checkBorder); //绘制小球 balls.forEach(drawBall); })(); } document.getElementById("second").onclick=function(){ context.clearRect(0,0,canvas.width,canvas.height); var m=0; click(3); var k=0; var score=0; //生成n个小球的x、y、color、vx、vy属性的取值都是随机数 var mouse=tools.getMouse(canvas); //不固定的小球ballB，追随鼠标指针移动 var ballB=new Ball(canvas.width/2,canvas.height/2,20,"black"); (function frame(){ window.requestAnimationFrame(frame); context.clearRect(0,0,canvas.width,canvas.height); //碰撞检测 ballB.x=mouse.x; ballB.y=mouse.y; ballB.draw(context); k++; score=k/100; log.value=score+"分"; if (score>2+m&&score<2.02+m){ click1(1,ballB); m=m+2; } if (score==35){ alert("大神级别操作！\n中等模式对你来说太easy了，试试下一关吧！"); window.location="http://127.0.0.1:8848/ball/ball.html"; } for(var i=0;i<balls.length;i++){ //for (var j=i;j<balls.length;j++){ var ball=balls[i]; //如果两个小球碰撞，则碰撞后vx、vy都取相反值 if (tools.checkCircle(ballB,ball)){ alert("撞上了！Game over!\n分数："+score+"\n如果想要回到初始界面请点击确定\n"+"温馨提示：请先刷新页面再点击确定"); window.location="http://127.0.0.1:8848/ball/ball.html"; } //} } balls.forEach(checkCollision1); //边界检测 balls.forEach(checkBorder); //绘制小球 balls.forEach(drawBall); })(); } document.getElementById("third").onclick=function(){ context.clearRect(0,0,canvas.width,canvas.height); var m=0; click(5); var k=0; var score=0; //生成n个小球的x、y、color、vx、vy属性的取值都是随机数 var mouse=tools.getMouse(canvas); //不固定的小球ballB，追随鼠标指针移动 var ballB=new Ball(canvas.width/2,canvas.height/2,20,"black"); (function frame(){ window.requestAnimationFrame(frame); context.clearRect(0,0,canvas.width,canvas.height); //碰撞检测 ballB.x=mouse.x; ballB.y=mouse.y; ballB.draw(context); k++; score=k/100; log.value=score+"分"; if (score>2+m&&score<2.02+m){ click1(2,ballB); m=m+2; } if (score==40){ alert("大神级别操作！\n你已经完成所有关卡，太厉害了！"); window.location="http://127.0.0.1:8848/ball/ball.html"; } for(var i=0;i<balls.length;i++){ //for (var j=i;j<balls.length;j++){ var ball=balls[i]; //如果两个小球碰撞，则碰撞后vx、vy都取相反值 if (tools.checkCircle(ballB,ball)){ alert("撞上了！Game over!\n分数："+score+"\n如果想要回到初始界面请点击确定\n"+"温馨提示：请先刷新页面再点击确定"); window.location="http://127.0.0.1:8848/ball/ball.html"; } //} } balls.forEach(checkCollision1); //边界检测 balls.forEach(checkBorder); //绘制小球 balls.forEach(drawBall); })(); } //碰撞检测(小球与小球) 定义函数 function checkCollision1(ballA,i){ for (var j=i+1;j<balls.length;j++){ var ballB=balls[j]; //如果两个小球碰撞，则碰撞后vx、vy都取相反值 if (tools.checkCircle(ballB,ballA)){ ballA.vx=-ballA.vx; ballA.vy=-ballA.vy; ballB.vx=-ballB.vx; ballB.vy=-ballB.vy; if (ballA.vx>0){ ballA.x+=ballA.radius; }else{ ballA.x-=ballA.radius; } if (ballA.vy>0){ ballA.y+=ballA.radius; }else{ ballA.y-=ballA.radius; } if (ballB.vx>0){ ballB.x+=ballB.radius; }else{ ballB.x-=ballB.radius; } if (ballB.vy>0){ ballB.y+=ballB.radius; }else{ ballB.y-=ballB.radius; } } } } //边界检测(小球与边界) function checkBorder(ball){ //碰到左边界 if (ball.x<ball.radius){ ball.x=ball.radius; ball.vx+=2; ball.vx=-ball.vx; } //碰到右边界 if (ball.x>canvas.width-ball.radius){ ball.x=canvas.width-ball.radius; ball.vx+=2; ball.vx=-ball.vx;