100%
|
60楼#
发布于：2018-02-26 14:59
qq617364553：我该去买一本来看吗【还有个缺点，。惧怕数学老师，，】回到原帖啊，这就不知道了 |
|
|
![20天大作战[2015]](https://bbs.jd100.com/attachment/medal/cec543c13f7ea1b.jpg "20天大作战[2015]"){kind=small}
![勇不止步[春]](https://bbs.jd100.com/attachment/medal/f783eb36b20a4e2.jpg "勇不止步[春]"){kind=small}
![20天大作战[2014]](https://bbs.jd100.com/attachment/medal/465e7ccd53045d5.png "20天大作战[2014]"){kind=small}
|
61楼#
发布于：2018-02-26 14:59
|
|
|
|
62楼#
发布于：2018-02-26 15:00
|
|
|
|
63楼#
发布于：2018-02-26 15:33
|
|
|
|
64楼#
发布于：2018-02-26 18:49
语c_(:з」∠)_
大佬_(:з」∠)_ 传说中的程序员_(:з」∠)_ |
|
|
|
65楼#
发布于：2018-02-26 18:50
学长好，怎么称呼
|
|
|
|
66楼#
发布于：2018-02-26 23:20
lsj20030703：生物在我眼里跟本就不是一回事。。。回到原帖多背一背，知识点熟悉了可能会好很多 |
|
|
|
67楼#
发布于：2018-02-26 23:20
fclz2017069：语c_(:з」∠)_啊，今年暑假去实习 |
|
|
|
68楼#
发布于：2018-02-26 23:21
|
|
|
|
69楼#
发布于：2018-02-26 23:38
<!DOCTYPE html>
<html> <head> <meta charset="utf-8" /> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <style type="text/css"> html{ border: 0px solid; height: 99.8%; width: 99.8%; box-sizing: border-box; } body{ border:0px solid; width: 100%; height: 100%; margin: 0px; box-sizing: border-box; } #canvas{ border: 0px solid; box-sizing: border-box; } .gameover{ display: none; position: absolute; border: 0px solid; width: 70%; left: 15%; top: 10%; background-color:rgba(100,100,100,0.4) ; border-radius:6px ; padding: 15px; padding-left: 0px; padding-right: 0px; text-align: center; font-size: 30px; color: red; } .gameover-title > p{ font-size: 20px; color: red; } .gameover > .gameover-body > .gameover-body-item{ padding: 5px; padding-left: 0px; padding-right: 0px; } .gameover > .gameover-body > .gameover-body-item > button{ width: 70%; height: 40px; border-radius: 6px; font-size: 20px; border: 0px solid; color: white; font-family: "微软雅黑"; font-weight: bold; } .orange{ background-color: orange; } .red{ background-color: indianred; } .green{ background-color: dodgerblue; } </style> </head> <body> <canvas id="canvas" width="" height=""></canvas> <div class="gameover"> <div class="gameover-title"> Game Over <p> 当前通过<span class="score"></span>关<br> 召唤小伙伴一起来挑战吧 </p> </div> <div class="gameover-body"> <div class="gameover-body-item"> <button class="orange">分享到朋友圈</button> </div> <div class="gameover-body-item"> <button class="red">保存截图</button> </div> <div class="gameover-body-item"> <button class="green" onclick="restart()">重新开始</button> </div> </div> </div> </body> <script type="text/javascript" src="js/jquery-2.2.4.min.js" ></script> <script type="text/javascript"> $("#canvas").attr("width",$("body").width());//动态检测屏幕宽度给画布设置宽度 $("#canvas").attr("height",$("body").height());//动态检测屏幕高度给画布设置高度 var c = document.getElementById("canvas");//得到画布的对象 var ctx = c.getContext("2d");//通过画布的对象得到绘图的对象（也就是画笔） //图片对象 var img= new Image();//初始化一个图片类型的对象 img.src="付明才.img";//给这个对象添加一张图片 //画图片 function drawPlayer(){ //把图片画到与方块重合的地方 ctx.drawImage(img,niao.x,niao.y,niao.width,niao.height); } //分数 var score=0; //鸟的对象 var niao={}; niao.x=100;//鸟的x坐标 niao.y=c.height/3; //鸟的y坐标 niao.width=50;//鸟的width niao.height=50;//鸟的height niao.down=3;//鸟的下落的速度 niao.up=-5;//鸟的上升的速度 niao.isUp=false;//鸟当前是否是上升状态 niao.upCount=10;//上升持续多久的计数器 //画鸟色块的方法 function drawNiao(){ ctx.fillStyle="red"; ctx.fillRect(niao.x,niao.y,niao.width,niao.height); } var zhangai={};//障碍对象 var zhangAis=[];//障碍对象的数组 for (var i=0;i<10;i++) {//初始化障碍对象的数组 zhangai=new Object();//每次重新初始化对象 zhangai.height=parseInt(Math.random()*50+200);//随机指定通过的洞多高 //随机出障碍物的颜色 zhangai.color="rgb("+(parseInt(Math.random()*255))+","+(parseInt(Math.random()*255))+","+(parseInt(Math.random()*255))+")"; zhangai.x=300;//障碍的x坐标 //障碍的y坐标这里指障碍通道的高度 zhangai.y=parseInt((Math.random()*(c.height-(zhangai.height*2)))+zhangai.height/2); zhangai.jiange=parseInt(Math.random()*200+350);//每个障碍的间隔是多少 zhangai.width=parseInt(Math.random()*20+80);//障碍的宽度是多少 zhangAis=zhangai;//将障碍的对象放到数组中 } //画一个障碍的方法（参数是障碍的对象，障碍对象在数组中的下标） function drawZhangAi(zhangai,i){ ctx.fillStyle=zhangai.color; ctx.fillRect(zhangai.x+zhangai.jiange*i,0,zhangai.width,c.height); ctx.fillStyle="white"; ctx.fillRect(zhangai.x+zhangai.jiange*i,zhangai.y,zhangai.width,zhangai.height); } //写分数的方法 function writeScore(){ ctx.fillStyle="red"; ctx.font="20px 微软雅黑"; ctx.fillText("分数:"+score,20,40); } //游戏主逻辑的定时器(游戏执行需要的方法，间隔多久执行方法（单位是毫秒）) var rn = window.setInterval(function(){ //让每次画图前先清空之前的画布以免出现残影 ctx.clearRect(0,0,c.width,c.height); //判断鸟正在下降还是正在上升 if(niao.isUp&&(niao.upCount<=10&&niao.upCount>=0)){ niao.y+=niao.up; niao.upCount--; }else{ niao.upCount=10; niao.isUp=false; niao.y+=niao.down; } //循环画出每个障碍 for (var i=0;i<zhangAis.length;i++) { //调用画出每个障碍物的方法 drawZhangAi(zhangAis,i); //判断游戏失败(方块掉落到屏幕外) if(niao.y>c.height){ //游戏失败让定时器关闭 window.clearInterval(rn); $(".gameover").show(); } //判断游戏失败(方块刚刚遇到障碍物的时候（从左面撞到柱子的情况）) if((niao.x+niao.width)==(zhangAis.x+zhangAis.jiange*i)){ //判断游戏失败(方块撞到柱子洞口之上部分的时候) if((niao.y+niao.height)<zhangAis.y){ //游戏失败让定时器关闭 window.clearInterval(rn); drawZhangAi(zhangAis,i); drawNiao(); writeScore(); $(".gameover").show(); break; } //判断游戏失败(方块撞到柱子上洞口之下部分的时候) if((niao.y+niao.height)>(zhangAis.y+zhangAis.height)){ //游戏失败让定时器关闭 window.clearInterval(rn); drawZhangAi(zhangAis,i); drawNiao(); writeScore(); $(".gameover").show(); break; } } //判断游戏失败(方块在障碍物通道内部的时候) if((niao.x+niao.width)>(zhangAis.x+zhangAis.jiange*i)&&(niao.x)<(zhangAis.x+zhangAis.jiange*i+zhangAis.width)){ //方块撞到通道上面的情况 if((niao.y)<zhangAis.y){ //游戏失败让定时器关闭 window.clearInterval(rn); drawZhangAi(zhangAis,i); drawNiao(); writeScore(); $(".gameover").show(); break; } //方块落到通道中下面的情况 if((niao.y+niao.height)>(zhangAis.y+zhangAis.height)){ //游戏失败让定时器关闭 window.clearInterval(rn); drawZhangAi(zhangAis,i); drawNiao(); writeScore(); $(".gameover").show(); break; } } //如果方块正好通过就加分数 if(niao.x==(zhangAis.x+zhangAis.jiange*i+zhangAis.width)){ //让分数加 score++; } //如果障碍物出窗口就销毁 if((zhangAis.x+zhangAis.width+zhangAis.jiange*5)==0){ zhangAis.splice(0,5); for(var j=0;i<zhangAis.length;j++){ zhangAis[j].x+=zhangAis[j].jiange*5; } } //控制台打印鸟和障碍物对象的数据 //console.log(niao,zhangAis); //障碍物相左移动 zhangAis.x--; } //如果障碍物的数量不到十个就给数组添加障碍物保证一直会有障碍出现 if(zhangAis.length<10){ zhangai=new Object(); zhangai.height=parseInt(Math.random()*50+130); zhangai.width=50; //障碍间隔 zhangai.jiange=250; zhangai.color="rgb("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+")"; zhangai.x=zhangAis[zhangAis.length-1].x;/*左右位移用*/ zhangai.y=parseInt(Math.random()*(c.height-zhangai.height*2)+zhangai.height/2); zhangAis[zhangAis.length]=zhangai; } //调用画方块的方法 drawNiao(); //调用画图片的方法 drawPlayer(); //调用画分数的方法 writeScore(); // console.log(zhangai.color); },10); //触摸屏幕事件 document.body.addEventListener("touchstart",function(){ if(niao.upCount==10){ niao.isUp=true; } }); //电脑操作时键盘事件 document.body.addEventListener("keypress",function(){ if(niao.upCount==10){ niao.isUp=true; } }); //游戏重新开始的事件 function restart(){ window.location.reload(); } </script> </html> |
|
|