HTML5应用开发课后习题题库期末考试试卷及答案 (4).docx

《HTML5应用开发课后习题题库期末考试试卷及答案 (4).docx》由会员分享，可在线阅读，更多相关《HTML5应用开发课后习题题库期末考试试卷及答案 (4).docx（14页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、实操题：1.编写跳一跳游戏，效果如图7-5所示,绘制一个圆与长方形当棋子，绘制一个圆柱形作为跳 板五子一小 am图7-5习题1界面效果 it le 跳一跳 /title)*padding: 0;margin: 0;) bodymargin: 50px;)hl color: orange;text-shadow: lpx lpx 3px rgba(0) 0, 0, .6); text-align: center;.gameposition: relative;width: 800px;height: 400px;border: 3px double orange;margin: 0 auto;)

2、.game .contentposition: absolute;width: 700px;height: 400px;left: 0;top: 0;/绘制棋子function drawChess(xJ y, color) context.beginPath();context.arc(x y, 15, 0, Math.PI * 2, false);context.closePath();context.fillstyle = color; context/下棋子(canvas点击响应函数)canvas .addE vent Listener (Mc lickfunction(e) /判断游戏

3、是否结束if(flag) alert (游戏结束”)； return;)/判断点击范围是否越出棋盘if(e.offsetX 420 | | e.offsetY 420) return;)van dx = Math.floor(e.offsetX + 15) / 30) * 30;van dy = Mathfloor(e.offsetY + 15) / 30) * 30;if(chessMapArrdx / 30 - 1dy / 30 - 1 = 0) drawChess(dxJ dy, chessColor step % 2); 下棋 chessMapArrdx / 30 - 1dy / 30

4、 - 1= chessColorstep % 2;for(var i = 0; i 4; i+) checkWin(dx / 3。- 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(chessMapArrx + i * mode0) if(chessMapArrx + i * mode0y + i * model=color) count+;els

5、e break;for(var j = 1； j = 5) alert(游戏结束“);flag = true;) 3 ,贪吃蛇小游戏，初始化设计游戏界面如下，蛇用三个方块表示，食物用随机色方块表示贪电卧翔t开始游戏参考代码：Documentbody margin: 50px;padding: 0;).main width: 1200px;height: 600px;margin: 50px auto;hlcolor: orange;text-shadow: lpx lpx 3px rgba(00,0J .6); text-align: center;.btn width: 100px;heig

6、ht: 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;)贪吃蛇小游戏开始游戏/buttonvar map = document.getElementById(ap1);/使用构造方法创立蛇，functio

7、n Snake()(this.width = 15;this.height = 15;this.direction = 1 right1;/初始为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-1.x; this.bodyi.y = this.bodyi-1.y;)/根据方向处理蛇头switch(this.direction)(case left:this.body0

8、.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 (var i=0; ithis.body.length; i+) if (this.bodyi.flag != null) map.removeChild(this

9、bodyi.flag);)this.body = / 回到初状x:2, y:0,x:l, y:0,x:0j y:0；this.direction = 1 right1;this.display(); / 显示 return false; / 结束 )/判断蛇头吃到食物if (this.body0.x = food.x & this.body0.y = food.y) this.body.push(x:nully:null flag: null);map removechild(food flag); food.display();)for (var i=4; ithis.body.length

10、; i+) if (this.body。.x = this.bodyi.x & this.body0.y = this.bodyi.y) clearlnterval(timer);for (var 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:0, x:0, y:0)；this.direction = 1 right1;this.display();return false;)for (var i=0

11、; ithis.body.length; i+) if (this.bodyi.flag != null) map.removeChild(this.bodyi.flag);)/刷新显示 this.display();)构造食物 function Food() this.width = 20;this.height = 20;this.display = function() var f = document.createElement(iv*); this.flag = f;f. style.vjidth = this .width + 1 px1;f.style.height = this

12、.height + 1px1;f.style.background = Mrgb(n + Math.floor(Math.random()*256) + Math. floor (Math. random () *256) + “J +Math.floor(Math.random()*256) + )；f.style.borderRadius = 50%;f.style.position = absolute;this.x = Math.floor(Math.random()*40);this.y = Math.floor(Math.random()*20);f.style.left = th

13、is.x * this.width + 1px1;f.style.top = this.y * this.height + 1px1; 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:if (snake.direction != down)

14、snake.direction = up;) break; case 40:if (snake.direction != up) snake.direction = down;) break; case 37:if (snake.direction != right) snake.direction = left”；)break;case 39:if (snake.direction != left) snake.direction = right;)break;)；/点击开始游戏时启动var begin = document.getElementByld(1 begin*);var time

15、r;begin.onclick = function() clearlnterval(timer);timer = setInterval(snake.run()500);.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;).cylin

16、der topposition: absolute;width: 70px;height: 35px;border-radius: 50%;background: yellow;z-index: 4;).cylinder .front position: absolute; width: 70px; height: 70px; background: black; margin-top: 17px; z-index: 3;) cylinder . bottom( position: absolute; width: 70px;height: 35px;border-radius: 50%;ba

17、ckground: 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-wei

18、ght: bold; ) .moveanimation-name: jump;)/*跳棋运动动画*/keyfnames jump 0%transform: 10%transform: 20%transform: 30%transform: 40%transform: 50%transform: 60%transform: 70%transform: 80%transform: 90%transform:keyfnames jump 0%transform: 10%transform: 20%transform: 30%transform: 40%transform: 50%transform:

19、 60%transform: 70%transform: 80%transform: 90%transform:100%transform:rotate(Odeg);) rotate(36deg); rotate(72deg);) rotate(108deg);) rotate(144deg); rotate(180deg);) rotate(216deg); rotate(252deg); rotate(288deg); rotate(324deg);rotate(360deg);)五子棋小游戏div class=content”)按住/button)var time = 0,score =

20、 Q,prev = 1;var cylinders = document.getElementsByClassName(1 cylinder1);var chess = document.getElementById(1 chess*);var arrLeft = 10,20,30,50;var arrTop = 210,290;/初始化function init()draw();BindEvent();；/生成地图function draw()var str =;for(var n = 0; n 7; n+)var colorl=rgb( + Math.floor(Math.random()

21、*256) +Math.floor(Math.random()*256) + J + Math.floor(Math.random()*256) +var color2=rgb( + Math.floor(Math.random()*256) + “J + Math.floor(Math.random()*256) + Math.floor(Math.random()*256) +str +=H )document.getElementsByClassName(Content*)0.innerHTML = str; for(var m = 0; m cylindersprev.offsetTo

22、p) 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 cylindersprev.offsetTop) var dy = setTran(prev - 1, prev);chess.style.marginLeft = chess.offsetLeft + time

23、* 15 + px;chess.style.marginTop = chess.offsetTop + time * 15 * dy + px；else if(cylindersprev - 1.offsetTop = cylindersprev.offsetTop)chess.style.marginTop = chess.offsetTop + px;chess.style.marginLeft = chess.offsetLeft + time * 15 + px;)chess . addEventListener(getTransition(), function () chess.c

24、lassList.remove(move1);time = 0;judeg();chess.removeEventListener(getTransition()arguments.callee.false);, false);；/ top与left移动地比例function setTran(prevnext) var d_Top = cylindersprev.offsetTop - cylindersnext.offsetTop;var d_Left = cylindersprev.offsetLeft - cylindersnext.offsetLeft;return d_Top/d_L

25、eft;)/判断动画是否结束function getTransition() var t;var transitions = transition1: * transitionend,Transition: TransitionEnd1,MozTransition: 1 transitionend 1WebkitTransition1: 1webkitTransitionEnd1;for (t in transitions) if (chess.stylet != undefined) return transitionst;)；/判断是否跳出边界function judeg() for(;

26、prev cylindersprev.offsetLeft -20 & chess.offsetLeft cylindersprev.offsetTop & chess.offsetTop + 48 = cylinders.length) prev = 1;else prev+;) break; elsealert (1游戏结束，重新开始1);window.location.reload();break;)2,编写五子棋游戏，效果如图7-6所示，先用canvas画五子棋地棋盘，通过鼠标事件获取鼠标点击地 位置，并画上棋子，每次画上棋子即可判断是否赢了。五子，小曲IS开始游戏图7-6习题2界面效

27、果参考代码： 五子棋 /title)hl color: orange;text-shadow: lpx lpx 3px rgba(0) 0, 0,6); text-align: 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

28、;border-radius: 10px;text-decoration: none;canvas display: block;margin: 30px auto;background-color: orange;box-shadovj： lpx lpx 3px #000;)五子棋小游戏开始游戏/button)var btn = document.getElementById(btn);var canvas = document. get Element By Id (chessboa rd11);var context = canvas.getContext(2dH);var chessM

29、apArr = ; /记录棋子排版var chessColor = blackwhite;var step = 0; 记录当前步数var flag = false; /判断游戏是否结束/判断输赢var checkMode =1, 0 水平0, 1, /竖直1, 1, /左斜1, -1, /右斜；/新游戏按钮响应函数btnaddEventListener(clickfunction() startGame(); /开始新游戏)/开始新游戏function startGame() /初始化棋盘数组for(var i = 0; i 14; i+) chessMapArri=;for(var j =

30、0; j 14; j+) chessMapArrij = 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.moveT0(30., (i + 1) * 30);context.Iio(canvas.width - 30, (i + 1) * 30);context. closePath();context.stroke();)/清空棋盘function cleanChessBoard() context.fillstyle = orange;context.fillRect(0J 0, canvas.width, canvas.height);