版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
实操题:一.编写跳一跳游戏,效果如图七-五所示,绘制一个圆与长方形当棋子,绘制一个圆柱形作为跳板图七-五题一界面效果<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-八"><metaname="viewport"content="width=device-width,initial-scale=一.零"><metahttp-equiv="X-UA-patible"content="ie=edge"><title>跳一跳</title><style>*{padding:零;margin:零;}body{ margin:五零px;}h一{ color:orange; text-shadow:一px一px三pxrgba(零,零,零,.六); text-align:center; }.game{position:relative;width:八零零px;height:四零零px;border:三pxdoubleorange;margin:零auto;}.game.content{position:absolute;width:七零零px;height:四零零px;left:零;top:零;}.game#chess{position:absolute;width:四零px;height:四八px;overflow:hidden;z-index:九九;transition-property:all;}.cylinder{position:relative;width:七零px;height:一零一px;float:left;transform-origin:centerbottom;}.cylinder.top{position:absolute;width:七零px;height:三五px;border-radius:五零%;background:yellow;z-index:四;}.cylinder.front{position:absolute;width:七零px;height:七零px;background:black;margin-top:一七px;z-index:三;}.cylinder.bottom{position:absolute;width:七零px;height:三五px;border-radius:五零%;background:black;margin-top:六五px;z-index:四;}button{position:absolute;width:八零px;height:三零px;outline:none;color:#fff;font-size:一六px;text-shadow:一px一px三px#零零零;text-align:center;line-height:三零px;border-radius:一五px;background:orange;bottom:一零px;right:一零px;font-size:一六px; font-weight:bold;}.move{animation-name:jump;}/*跳棋运动动画*/@keyframesjump{零%{transform:rotate(零deg);}一零%{transform:rotate(三六deg);}二零%{transform:rotate(七二deg);}三零%{transform:rotate(一零八deg);}四零%{transform:rotate(一四四deg);}五零%{transform:rotate(一八零deg);}六零%{transform:rotate(二一六deg);}七零%{transform:rotate(二五二deg);}八零%{transform:rotate(二八八deg);}九零%{transform:rotate(三二四deg);}一零零%{transform:rotate(三六零deg);}}</style></head><body><h一>五子棋小游戏</h一><divclass="game"><divclass="content"><!--小柱子--><divclass="cylinder"><divclass="top"></div><divclass="front"></div><divclass="bottom"></div></div></div><!--跳棋--><divid="chess"><divstyle="width:二零px;height:二零px;border-radius:五零%;background:red;position:absolute;margin-left:一三px;z-index:一零零;"></div><divstyle="width:二零px;height:四零px;position:absolute;margin-left:一三px;background:blue;overflow:hidden;margin-top:二二px;"></div></div><buttonid="play">按住</button></div></body><script>vartime=零,score=零,prev=一;varcylinders=document.getElementsByClassName('cylinder');varchess=document.getElementById('chess');vararrLeft=[一零,二零,三零,五零];vararrTop=[二一零,二九零];//初始化functioninit(){draw();BindEvent();};//生成地图functiondraw(){varstr='';for(varn=零;n<七;n++){ varcolor一="rgb("+Math.floor(Math.random()*二五六)+","+Math.floor(Math.random()*二五六)+","+Math.floor(Math.random()*二五六)+")"; varcolor二="rgb("+Math.floor(Math.random()*二五六)+","+Math.floor(Math.random()*二五六)+","+Math.floor(Math.random()*二五六)+")";str+="<divclass='cylinder'><divclass='top'style='background:"+color一+";'></div><divclass='front'style='background:"+color二+";'></div><divclass='bottom'style='background:"+color二+";'></div></div>"}document.getElementsByClassName('content')[零].innerHTML=str;for(varm=零;m<七;m++){varLeft=arrLeft[Math.floor(Math.random()*arrLeft.length)];varTop=arrTop[Math.floor(Math.random()*arrTop.length)];cylinders[m].style.marginLeft=Left+'px';cylinders[m].style.marginTop=Top+'px';}//棋子chess.style.marginTop=cylinders[零].offsetTop-二五+'px';chess.style.marginLeft=cylinders[零].offsetLeft+一三+'px';}//绑定函数functionBindEvent(){document.getElementById('play').onmousedown=function(){vartimer=setInterval(function(){time++;cylinders[prev-一].style.transform='scaleY(零.五)';},一零零);document.getElementById('play').onmouseup=function(){clearInterval(timer);cylinders[prev-一].style.transform='scaleY(一)';//棋子动画chess.classList.add('move');chess.style.animationDuration=time*零.一+'s';chess.style.transitionDuration=time*零.一+'s';if(cylinders[prev-一].offsetTop>cylinders[prev].offsetTop){vardx=setTran(prev-一,prev);chess.style.marginLeft=chess.offsetLeft+time*一五+'px';chess.style.marginTop=chess.offsetTop+time*一五*dx+'px';}elseif(cylinders[prev-一].offsetTop<cylinders[prev].offsetTop){vardy=setTran(prev-一,prev);chess.style.marginLeft=chess.offsetLeft+time*一五+'px';chess.style.marginTop=chess.offsetTop+time*一五*dy+'px';}elseif(cylinders[prev-一].offsetTop==cylinders[prev].offsetTop){chess.style.marginTop=chess.offsetTop+'px';chess.style.marginLeft=chess.offsetLeft+time*一五+'px';}chess.addEventListener(getTransition(),function(){chess.classList.remove('move');time=零;judeg();chess.removeEventListener(getTransition(),arguments.callee,false);},false);};};};//top与left移动地比例functionsetTran(prev,next){vard_Top=cylinders[prev].offsetTop-cylinders[next].offsetTop;vard_Left=cylinders[prev].offsetLeft-cylinders[next].offsetLeft;returnd_Top/d_Left;}//判断动画是否结束functiongetTransition(){vart;vartransitions={'transition':'transitionend','OTransition':'oTransitionEnd','MozTransition':'transitionend','WebkitTransition':'webkitTransitionEnd'};for(tintransitions){if(chess.style[t]!==undefined){returntransitions[t];}}};//判断是否跳出边界functionjudeg(){for(;prev<cylinders.length;){//判断条件vare_Left=chess.offsetLeft>cylinders[prev].offsetLeft-二零&&chess.offsetLeft<cylinders[prev].offsetLeft+九零;vare_Top=chess.offsetTop+四八>cylinders[prev].offsetTop&&chess.offsetTop+四八<cylinders[prev].offsetTop+三五;if(e_Left&&e_Top){score++;if(prev>=cylinders.length){prev=一;}else{prev++;}break;}else{alert('游戏结束,重新开始');window.location.reload();break;}}}init();</script></html>二.编写五子棋游戏,效果如图七-六所示,先用canvas画五子棋地棋盘,通过鼠标获取鼠标点击地位置,并画上棋子,每次画上棋子即可判断是否赢了。图七-六题二界面效果参考代码:<!DOCTYPEhtml><html> <head> <metacharset="UTF-八"> <title>五子棋</title> <styletype="text/css"> h一{ color:orange; text-shadow:一px一px三pxrgba(零,零,零,.六); text-align:center; } #btn{ display:block; margin:二零pxauto; font-size:一六px; font-weight:bold; text-shadow:一px一px三px#零零零; width:一零零px; padding:一零px一零px; background-color:orange; font-family:Arial; color:white; outline:none; border-radius:一零px; text-decoration:none; } canvas{ display:block; margin:三零pxauto; background-color:orange; box-shadow:一px一px三px#零零零; } </style> </head> <body> <h一>五子棋小游戏</h一> <buttonid="btn">开始游戏</button> <canvasid="chessboard"width="四五零"height="四五零"></canvas> <script> varbtn=document.getElementById("btn"); varcanvas=document.getElementById("chessboard"); varcontext=canvas.getContext("二d"); varchessMapArr=[];//记录棋子排版 varchessColor=["black","white"]; varstep=零;//记录当前步数 varflag=false;//判断游戏是否结束 //判断输赢 varcheckMode=[ [一,零],//水 [零,一],//竖直 [一,一],//左斜 [一,-一],//右斜 ]; //新游戏按钮响应函数 btn.addEventListener("click",function(){ startGame();//开始新游戏 }) //开始新游戏 functionstartGame(){ //初始化棋盘数组 for(vari=零;i<一四;i++){ chessMapArr[i]=[]; for(varj=零;j<一四;j++){ chessMapArr[i][j]=零; } } //清空棋盘 cleanChessBoard(); //绘制棋盘 drawChessBoard(); //重置游戏是否结束标志 over=false; } //绘制棋盘 functiondrawChessBoard(){ for(vari=零;i<一四;i++){ context.beginPath(); context.moveTo((i+一)*三零,三零); context.lio((i+一)*三零,canvas.height-三零); context.closePath(); context.stroke(); context.beginPath(); context.moveTo(三零,(i+一)*三零); context.lio(canvas.width-三零,(i+一)*三零); context.closePath(); context.stroke(); } } //清空棋盘 functioncleanChessBoard(){ context.fillStyle="orange"; context.fillRect(零,零,canvas.width,canvas.height); } //绘制棋子 functiondrawChess(x,y,color){ context.beginPath(); context.arc(x,y,一五,零,Math.PI*二,false); context.closePath(); context.fillStyle=color; context.fill(); } //下棋子(canvas点击响应函数) canvas.addEventListener("click",function(e){ //判断游戏是否结束 if(flag){ alert("游戏结束"); return; } //判断点击范围是否越出棋盘 if(e.offsetX<三零||e.offsetX>四二零||e.offsetY<三零||e.offsetY>四二零){ return; } vardx=Math.floor((e.offsetX+一五)/三零)*三零; vardy=Math.floor((e.offsetY+一五)/三零)*三零; if(chessMapArr[dx/三零-一][dy/三零-一]==零){ drawChess(dx,dy,chessColor[step%二]);//下棋 chessMapArr[dx/三零-一][dy/三零-一]=chessColor[step%二]; for(vari=零;i<四;i++){ checkWin(dx/三零-一,dy/三零-一,chessColor[step%二],checkMode[i]); } step++; } }); //输赢判断函数 functioncheckWin(x,y,color,mode){ varcount=一;//记录分数 for(vari=一;i<五;i++){ if(chessMapArr[x+i*mode[零]]){ if(chessMapArr[x+i*mode[零]][y+i*mode[一]]==color){ count++; }else{ break; } } } for(varj=一;j<五;j++){ if(chessMapArr[x-j*mode[零]]){ if(chessMapArr[x-j*mode[零]][y-j*mode[一]]==color){ count++; }else{ break; } } } if(mode==checkMode[零]){ console.log("水棋子:"+count+"个"+color); } if(mode==checkMode[一]){ console.log("竖直棋子:"+count+"个"+color); } if(mode==checkMode[二]){ console.log("左斜棋子:"+count+"个"+color); } if(mode==checkMode[三]){ console.log("右斜棋子:"+count+"个"+color); } if(count>=五){ alert("游戏结束"); flag=true; } } </script> </body></html>三.贪吃蛇小游戏,初始化设计游戏界面如下,蛇用三个方块表示,食物用随机色方块表示。参考代码:<!doctypehtml><htmllang="en"><head><metacharset="UTF-八"><metaname="viewport"content="width=device-width,user-scalable=no,initial-scale=一.零,maximum-scale=一.零,minimum-scale=一.零"><metahttp-equiv="X-UA-patible"content="ie=edge"><title>Document</title><styletype="text/css">body{margin:五零px;padding:零;}.main{width:一二零零px;height:六零零px;margin:五零pxauto;}h一{ color:orange; text-shadow:一px一px三pxrgba(零,零,零,.六); text-align:center;}.btn{width:一零零px;height:四零px;display:block;margin:auto;font-size:一六px;color:#fff;text-shadow:一px一px三px#二D九九零零;background:orange;border-radius:五px;}.map{position:relative;width:一二零零px;height:六零零px;margin:五零px;border:二pxdottedred;}</style></head><body><divclass="main"> <h一>贪吃蛇小游戏</h一><buttonclass="btn"id="begin">开始游戏</button><divclass="map"id="map"></div><scripttype="text/javascript">varmap=document.getElementById('map');//使用构造方法创建蛇,functionSnake(){this.width=一五;this.height=一五;this.direction='right';//初始为三个方块为一个蛇,this.body=[{x:零,y:二},//蛇头位置{x:零,y:一},{x:零,y:零}//蛇尾位置];//显示蛇this.display=function(){//蛇for(vari=零;i<this.body.length;i++){if(this.body[i].x!=null){vars=document.createElement('div');this.body[i].flag=s;s.style.width=this.width+'px';s.style.height=this.height+'px';s.style.background="rgb("+Math.floor(Math.random()*二五六)+","+Math.floor(Math.random()*二五六)+","+Math.floor(Math.random()*二五六)+")";//设置位置s.style.position='absolute';s.style.left=this.body[i].x*this.width+'px';s.style.top=this.body[i].y*this.height+'px';//添加去map.appendChild(s);}}};this.run=function(){for(vari=this.body.length-一;i>零;i--){this.body[i].x=this.body[i-一].x;this.body[i].y=this.body[i-一].y;}//根据方向处理蛇头switch(this.direction){case"left":this.body[零].x-=一;break;case"right":this.body[零].x+=一;break;case"up":this.body[零].y-=一;break;case"down":this.body[零].y+=一;break;}//判断是否出界,出界就gameover,回到初态if(this.body[零].x<零||this.body[零].x>七九||this.body[零].y<零||this.body[零].y>三九){clearInterval(timer);//删除旧地for(vari=零;i<this.body.length;i++){if(this.body[i].flag!=null){map.removeChild(this.body[i].flag);}}this.body=[//回到初状{x:二,y:零},{x:一,y:零},{x:零,y:零}];this.direction='right';this.display();//显示returnfalse;//结束}//判断蛇头吃到食物if(this.body[零].x==food.x&&this.body[零].y==food.y){this.body.push({x:null,y:null,flag:null});map.removeChild(food.flag);food.display();}for(vari=四;i<this.body.length;i++){if(this.body[零].x==this.body[i].x&&this.body[零].y==this.body[i].y){clearInterval(timer);for(vari=零;i<this.body.length;i++){if(this.body[i].flag!=null){map.removeChild(this.body[i].flag);}}this.body=[//位置{x:二,y:零},{x:一,y:零},{x:零,y:零}];this.direction='right';this.display();returnfalse;}}for(vari=零;i<this.body.length;i++){if(this.body[i].flag!=null){map.removeChild(this.body[i].flag);}}//刷新显示this.display();}
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 后勤聘用合同范本
- 发行书分销合同范本
- 双方种植土地合同范本
- 供面合同范例
- 委托担保保证合同范本
- 公司业务合同范本
- 台球店员工合同范本
- 保洁修理员合同范例
- 农村场地出售合同范本
- 合同范本样板格式
- DB-T29-260-2019天津市建筑物移动通信基础设施建设标准
- 水利工程施工方案(完整版)
- DB11-T 1200-2023 超长大体积混凝土结构跳仓法技术规程
- 2024年内蒙古化工职业学院高职单招（英语／数学／语文）笔试历年参考题库含答案解析
- 城市智慧交通管理系统
- 青少年人工智能技术水平测试一级04
- 心肌病中医护理查房课件
- 前列腺炎的护理课件
- 外墙防水胶验报告模板
- 国外药典介绍
- 第三章新时代大学生劳动价值观
评论
0/150
提交评论