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

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認(rèn)領(lǐng)

文檔簡介

實操題:一.編寫跳一跳游戲,效果如圖七-五所示,繪制一個圓與長方形當(dāng)棋子,繪制一個圓柱形作為跳板圖七-五題一界面效果<!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;}//判斷動畫是否結(jié)束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('游戲結(jié)束,重新開始');window.location.reload();break;}}}init();</script></html>二.編寫五子棋游戲,效果如圖七-六所示,先用canvas畫五子棋地棋盤,通過鼠標(biāo)獲取鼠標(biāo)點擊地位置,并畫上棋子,每次畫上棋子即可判斷是否贏了。圖七-六題二界面效果參考代碼:<!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=零;//記錄當(dāng)前步數(shù) varflag=false;//判斷游戲是否結(jié)束 //判斷輸贏 varcheckMode=[ [一,零],//水 [零,一],//豎直 [一,一],//左斜 [一,-一],//右斜 ]; //新游戲按鈕響應(yīng)函數(shù) btn.addEventListener("click",function(){ startGame();//開始新游戲 }) //開始新游戲 functionstartGame(){ //初始化棋盤數(shù)組 for(vari=零;i<一四;i++){ chessMapArr[i]=[]; for(varj=零;j<一四;j++){ chessMapArr[i][j]=零; } } //清空棋盤 cleanChessBoard(); //繪制棋盤 drawChessBoard(); //重置游戲是否結(jié)束標(biāo)志 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點擊響應(yīng)函數(shù)) canvas.addEventListener("click",function(e){ //判斷游戲是否結(jié)束 if(flag){ alert("游戲結(jié)束"); 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=一;//記錄分?jǐn)?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("游戲結(jié)束"); flag=true; } } </script> </body></html>三.貪吃蛇小游戲,初始化設(shè)計游戲界面如下,蛇用三個方塊表示,食物用隨機色方塊表示。參考代碼:<!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');//使用構(gòu)造方法創(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()*二五六)+")";//設(shè)置位置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;//結(jié)束}//判斷蛇頭吃到食物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)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論