HTML5應用開發(fā)課后習題題庫期末考試試卷及答案_第1頁
HTML5應用開發(fā)課后習題題庫期末考試試卷及答案_第2頁
HTML5應用開發(fā)課后習題題庫期末考試試卷及答案_第3頁
HTML5應用開發(fā)課后習題題庫期末考試試卷及答案_第4頁
HTML5應用開發(fā)課后習題題庫期末考試試卷及答案_第5頁
已閱讀5頁，還剩12頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

實操題:一.編寫跳一跳游戲,效果如圖七-五所示,繪制一個圓與長方形當棋子,繪制一個圓柱形作為跳板圖七-五題一界面效果<!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';}//綁定函數(shù)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=零;//記錄當前步數(shù) varflag=false;//判斷游戲是否結束 //判斷輸贏 varcheckMode=[ [一,零],//水 [零,一],//豎直 [一,一],//左斜 [一,-一],//右斜 ]; //新游戲按鈕響應函數(shù) btn.addEventListener("click",function(){ startGame();//開始新游戲 }) //開始新游戲 functionstartGame(){ //初始化棋盤數(shù)組 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點擊響應函數(shù)) 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++; } }); //輸贏判斷函數(shù) functioncheckWin(x,y,color,mode){ varcount=一;//記錄分數(shù) 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');//使用構造方法創(chuàng)建蛇,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;}//根據(jù)方向處理蛇頭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,回到初態(tài)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. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論