HTML5应用开发课后习题题库期末考试试卷及答案.pdf

实操题：1.编写跳一跳游戏，效果如图7-5所示,绘制一个圆与长方形当棋子，绘制一个圆柱形作为跳板五子小am图 7-5习题1 界面效果 跳一跳/title)*padding:0;margin:0;bodymargin:50px;hl color:orange;text-shadow:lpx Ipx 3px rgba(0,0,0,.6);text-align:center;-game(position:relative;width:800px;height:400px;border:3px double orange;margin:0 auto;.game.contentposition:absolute;width:700px;height:400px;left:0;top:0;).game#chessposition:absolute;width:40px;height:48px;overflow:hidden;z-index:99;transition-property:all;.cylinderposition:relative;width:70px;height:101px;float:left;transform-origin:center bottom;.cylinder.topposition:absolute;width:70px;height:35px;border-radius:50%;background:yellow;z-index:4;.cylinder.frontposition:absolute;width:70px;height:70px;background:black;margin-top:17px;z-index:3;).cylinder.bottomposition:absolute;width:70px;height:35px;border-radius:50%;background:black;margin-top:65px;z-index:4;buttonposition:absolute;width:80px;height:30px;outline:none;color:#fff;font-size:16px;text-shadow:lpx lpx 3px#000;text-align:center;line-height:30px;border-radius:15px;background:orange;bottom:10px;right:10px;font-size:16px;font-weight:bold;).moveanimation-name:jump;/*跳棋运动动画*/keyfnames jump0%transform:rotate(Odeg);10%transform:20%transform:30%transform:40%transform:50%transform:60%transform:70%transform:80%transform:90%transform:rotate(36deg);rotate(72deg);rotate(108deg);)rotate(144deg);rotate(180deg);rotate(216deg);rotate(252deg);rotate(288deg);rotate(324deg);100%transform:rotate(360deg);)五子棋小游戏!-小柱子按住/button)var time=0 score=0?prev=1;var cylinders=document.getElementsByClassName(cylinder);var chess=document.getElementById(chess);var arrLeft=10,20,30,50;var arrTop=210,290;/初始化function in it()draw();BindEvent();；/生成地图function draw()var str=;for(var n=0;n 7;n+)var colorl=rgb(+Math.floor(Math.random()*256)+“J1+Math.floor(M ath.random()*256)+Math.floor(M ath.random()*256)+var color2=,rgb(+Math.flo o r(Math.random()*256)+Math.floor(M ath.random()*256)+Math.floor(M ath.random()*256)+str+=u)document.getElementsByClassName(content)0.innerHTML=str;for(var m =0;m cylindersprev.offsetTop)var dx=setTran(prev-lprev);chess.style.marginLeft=chess.offsetLeft+time*15+px;chess.style.marginTop=chess.offsetTop+time*15*dx+px；else if(cylindersprev-1.offsetTop next)var d_Top=cylindersprev.offsetTop-cylindersnext.offsetTop;var d_Left=cylindersprev.offsetLeft-cylindersfnext.offsetLeft;return d_Top/d_Left;)/判断动画是否结束function getTransition()var t;var transitions=transition:transitionend,Transition1:oTransitionEnd,MozTransition :transitionend,WebkitTransition:webkitTransitionEnd；for(t in transitions)if(chess.stylet!=undefined)return transitionst;)；/判断是否跳出边界function judeg()for(;prev cylindersprev.offsetLeft-20&chess.offsetLeft cylindersprev.offsetTop&chess.offsetTop+48=cylinders.length)prev=1;elseprev+;break;elsea le rt(,游戏结束，重新开 始,);w indow.location.reload();break;)in it();2.编写五子棋游戏，效果如图7-6所示，先用canvas画五子棋地棋盘，通过鼠标事件获取鼠标点击地位置，并画上棋子，每次画上棋子即可判断是否赢了。五 子 鲍 丽开始游戏图7-6习题2界面效果参考代码：五子棋h l co lo r:orange;text-shadow:lpx lpx 3px rgba(0,0,0,.6);te x t-a lig n:center;)#btn display:block;margin:20px auto;font-size:16px;font-weight:bold;text-shadow:lpx lpx 3px#000;width:100px;padding:10px 10px;background-color:orange;font-family:Arial;color:white;outline:none;border-radius:10px;text-decoration:none;)canvas display:block;margin:30px auto;background-color:orange;box-shadow:lpx lpx 3px#000;)五子棋小游戏开始游戏“buttonvar btn=document.getElementByld(btn);var canvas=document.getElementByld(chessboard);var context=canvas.getContext(2d);var chessMapArr=;记录棋子排版var chessColor=black,white;var step=0;记录当前步数var flag=false;判断游戏是否结束判断输赢var checkMode=1,0,水平0 1,竖直1,1,左斜1,-1,右斜；/新游戏按钮响应函数btn.addEventListener(click4 function()startGame();开始新游戏)开始新游戏function startGame()初始化棋盘数组for(var i=0;i 14;i+)chessMapArri=;for(var j=0;j 14;j+)chessMapArrfij=0;)清空棋盘cleanChessBoard();/绘制棋盘drawChessBoard();/重置游戏是否结束标志over=false;)绘制棋盘function drawChessBoard()for(var i=0;i 14;i+)context.beginPath();context.moveTo(i+1)*30,30);context.lio(i+1)*30,canvas.height-30);context.closePath();context.stroke();context.beginPath();context.moveTo(30,(i+1)*30);context.Iio(canvas.width-30,(i+1)*30);context.closePath();context.stroke();)清空棋盘function cleanChessBoard()context.fillstyle=orange;context.fillRect(0,0,canvaswidth,canvas.height);)绘制棋子function drawChess(x,y,color)context.beginPath();context.arc(x,y,15,0,Math.PI*2,false);context.closePath();context.fillstyle=color;c o n t e x t);)/下棋子(canvas点击响应函数)canvas.addEventListener(click?function(e)判断游戏是否结束if(flag)alert(“游戏结束”)；return;)判断点击范围是否越出棋盘if(e.offsetX 420|e.offsetY 420)return;)var dx=Math.floor(e.offsetX+15)/30)*30;var dy=Math.floor(e.offsetY+15)/30)*30;if(chessMapArrdx/30-1dy/30-1=0)drawChess(dx,dy,chessColorstep%2);下棋chessMapArrdx/30-1dy/30-1 =chessColorstep%2;for(var i=0;i 4;i+)checkWin(dx/30-1,dy/30-1,chessColorstep%2,checkModei);)step+;)；输赢判断函数function checkWin(x,y,color,mode)var count=1;记录分数for(var i=1;i 5;i+)if(chessMapArrfx+i*mode0)if(chessMapArrx+i*mode0y+i*model=color)count+;else break;)for(var j=1;j=5)alert(“游戏结束”)；flag=true;)3.贪吃蛇小游戏，初始化设计游戏界面如下，蛇用三个方块表示，食物用随机色方块表示。参考代码：Documentbody(margin:50px;padding:0;).main width:1200px;height:600px;margin:50px auto;)hlcolor:orange;text-shadow:lpx lpx 3px rgba(0,0,0,6);text-align:center;.btn width:100px;height:40px;display:block;margin:auto;font-size:16px;color:#fff;text-shadow:lpx lpx 3px#2D9900;background:orange;border-radius:5px;.map position:relative;width:1200px;height:600px;margin:50px;border:2px dotted red;贪吃蛇小游戏开始游戏/button)var map=document.getElementByld(map);/使用构造方法创建蛇，function Snake()this.width=15;this.height=15;this.direction=*right;/初始为3个方块为一个蛇，this.body=x:0,y:2,/蛇头位置x：0,y：l,x:0,y:0)/蛇尾位置；/显示蛇this.display=function()/蛇for(var i=0;i0;i-)this.bodyi.x=this.bodyi-l.x;this.bodyi.y=this.bodyi-l.y;)/根据方向处理蛇头switch(this.direction)case“left”：this.body0.x-=1;break;case right:this.body0.x+=1;break;case up:this.body0.y-=1;break;case down:this.body0.y+=1;break;)/判断是否出界，出界就gameover,回到初态if(this.body0.x 79|this.body0.y 39)clearlnterval(timer);/删除旧地for(van i=0;ithis.body.length;i+)if(this.bodyi.flag!=null)map.removeChild(this.bodyi.flag);)this.body=/回到初状x:2,y:0),x：l,y：。,x:0,y:0)；this.direction=right,;this.display();/显示return false;/结束/判断蛇头吃到食物if(this.body0.x=food.x&this.body0.y=food.y)this.body.push(x:null,y:null4 flag:null);map removechild(food.flag);food.display();)for(var i=4;ithis.body.length;i+)if(this.body0.x=this.bodyfi.x&this.body0.y=this.bodyi.y)clearlnterval(timer);for(var i=0;ithis.body.length;i+)if(this.bodyfi.flag!=null)map.removeChild(this.bodyi.flag);)this.body=/位置x:2,y:0,x:l,y:0,x：0,y：0；this.direction=right1;this.display();return false;for(var i=0;ithis.body.length;i+)if(this.bodyi.flag!=null)map.removeChild(this.bodyi.flag);/刷新显75this.display();)构造食物function Food()this.w idth=20;this.height=20;this.display=function()var f =document.createElement(div);th is.fla g =f;f.style.w idth=this.w idth+px*;f.style.heig ht=this.height+p x;f.style.background=rgbC+Math.floor(M ath.random()*256)+J +Math.flo o r(Math.random()*256)+Math.floor(M ath.random()*256)+f.style.borderRadius=50%;f.style.p o sitio n =absolute,;th is.x=Math.floor(M ath.random()*40);th is.y=Math.floor(M ath.random()*20);f.s ty le.le ft=th is.x*this.w idth+p x,;f.style.to p =th is.y*this.height+p x,;map.appendChild(f);)var snake=new Snake();var food=new Food();snake.display();food.display();/上下左右地方向键控制document.body.onkeydown=function(e)var ev=e|window.event;switch(ev.keyCode)(case 38:i f (snake.direction!=down)snake.direction=up;break;case 40:i f (snake.direction!=up)snake.direction=down;)break;case 37:i f (snake.direction!=rig h t)snake.direction=left;break;case 39:if(snake.direction!=left)snake.direction=right;)break;)；/点击开始游戏时启动var begin=document.getElementById(begin);van timer;begin.onclick=function()clearlnterval(timer);timer=setinterval(snake.run(),500);；