HTML5 Game 01

来源：互联网发布：java爬虫抓取微博数据编辑：程序博客网时间：2024/06/06 07:44

学习 HTML5 GMAE 的笔记！

1. 乒乓游戏布局

<!doctype html><html><head><meta charset="utf-8"><title>HTML5 Game</title><style>h1{ text-align:center}#box1{ background:#9FC; width:400px; height:300px; position:relative; margin:30px auto}.paddle{ background:#C93; width:10px; height:60px; position:absolute; left:20px; top:20px;}#paddleB{ left:370px; top:200px;}#ball{ background:#F00; height:20px; width:20px; position:absolute; left:190px; top:140px; border-radius:10px;}</style><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script></head><body><h1><span id="s1">0</span> : <span id="s2">0</span></h1><div id="box1"><div id="paddleA" class="paddle"></div>    <div id="paddleB" class="paddle"></div>    <div id="ball"></div></div><script src="pingpang.js"></script></body></html>

02：新建 pingpang.js

//使用简单的模式- 不能支持同时按键;var KEY={w:87, s:83, up:38, down:40};$(function(){$(document).keydown(function(e){//在控制台上显示按键//console.log(e.which);switch(e.which){case KEY.w:var top=parseInt($("#paddleA").css("top"));$("#paddleA").css("top",top-5);break;case KEY.s:var top=parseInt($("#paddleA").css("top"));$("#paddleA").css("top",top+5);break;case KEY.up:var top=parseInt($("#paddleB").css("top"));$("#paddleB").css("top",top-5);break;case KEY.down:var top=parseInt($("#paddleB").css("top"));$("#paddleB").css("top",top+5);break;}})})

03: 重置 pingpang.js

//生成一个游戏主轴， 不断的检测相关的按钮var KEY={w:87, s:83, up:38, down:40};// 生成一个全局对象;var pingpang={};pingpang.press=[];pingpang.timer=setInterval(gameGo,30);//判断 按键状态!$(function(){$(document).keydown(function(e){pingpang.press[e.which]=true;})$(document).keyup(function(e){pingpang.press[e.which]=false;})})function gameGo(){movePaddle();}function movePaddle(){if(pingpang.press[KEY.w]){var top=parseInt($("#paddleA").css("top"));top==0?$("#paddleA").css("top",0):$("#paddleA").css("top",top-5)}if(pingpang.press[KEY.s]){var top=parseInt($("#paddleA").css("top"));top==240?$("#paddleA").css("top","240px"):$("#paddleA").css("top",top+5)}if(pingpang.press[KEY.up]){var top=parseInt($("#paddleB").css("top"));top==0?$("#paddleB").css("top",0):$("#paddleB").css("top",top-5)}if(pingpang.press[KEY.down]){var top=parseInt($("#paddleB").css("top"));top==240?$("#paddleB").css(" bottom",0):$("#paddleB").css("top",top+5)}}

04: 让小球跑起来！

var ballDiameter=20;pingpang.ball={speed:5, x:190, y:140, directionX:1, directionY:1};//在游戏主循环里加入 moveBall()function gameGo(){movePaddle();moveBall();}function moveBall(){var ball=pingpang.ball;var boxWidth=parseInt($("#box1").css("width"));var boxHeight=parseInt($("#box1").css("height"));if(ball.x+ballDiameter+ball.speed>boxWidth){ball.directionX=-1;}if(ball.x-ball.speed<0){ball.directionX=1;}if(ball.y+ballDiameter+ball.speed>boxHeight){ball.directionY=-1;}if(ball.y-ball.speed<0){ball.directionY=1;}ball.x+=ball.speed*ball.directionX;ball.y+=ball.speed*ball.directionY;$("#ball").css({"left":ball.x,"top":ball.y})}

最后：

//生成一个游戏主轴， 不断的检测相关的按钮var KEY={w:87, s:83, up:38, down:40};var ballDiameter=20;var s1=0,s2=0;// 生成一个全局对象;var pingpang={};pingpang.press=[];pingpang.ball={speed:5, x:190, y:140, directionX:1, directionY:1};pingpang.timer=setInterval(gameGo,30);//判断 按键状态!$(function(){$(document).keydown(function(e){pingpang.press[e.which]=true;})$(document).keyup(function(e){pingpang.press[e.which]=false;})})function gameGo(){movePaddle();moveBall();}function movePaddle(){if(pingpang.press[KEY.w]){var top=parseInt($("#paddleA").css("top"));top==0?$("#paddleA").css("top",0):$("#paddleA").css("top",top-5)}if(pingpang.press[KEY.s]){var top=parseInt($("#paddleA").css("top"));top==240?$("#paddleA").css("top","240px"):$("#paddleA").css("top",top+5)}if(pingpang.press[KEY.up]){var top=parseInt($("#paddleB").css("top"));top==0?$("#paddleB").css("top",0):$("#paddleB").css("top",top-5)}if(pingpang.press[KEY.down]){var top=parseInt($("#paddleB").css("top"));top==240?$("#paddleB").css(" bottom",0):$("#paddleB").css("top",top+5)}}function moveBall(){var ball=pingpang.ball;var boxWidth=parseInt($("#box1").css("width"));var boxHeight=parseInt($("#box1").css("height"));var falseLeft=parseInt($("#paddleA").css("left"))+parseInt($("#paddleA").width());var falseTop=parseInt($("#paddleA").css("top"));var falseBottom=parseInt($("#paddleA").css("height"))+falseTopvar falseLeftB=parseInt($("#paddleB").css("left"));var falseTopB=parseInt($("#paddleB").css("top"));var falseBottomB=parseInt($("#paddleB").css("height"))+falseTopBif(ball.x-ball.speed<falseLeft){if(ball.y>falseTop && ball.y<falseBottom){ball.directionX=1;}if(ball.x-ball.speed<0){s1++;$("#s2").html(s1)ball.x=190ball.y=140ball.directionX=1}}if(ball.x+ball.speed+ballDiameter>falseLeftB){if(ball.y>falseTopB && ball.y<falseBottomB){ball.directionX=-1;}if(ball.x+ballDiameter+ball.speed>boxWidth){s2++;$("#s1").html(s2)ball.x=190ball.y=140ball.directionX=-1;}}if(ball.y+ballDiameter+ball.speed>boxHeight){ball.directionY=-1;}if(ball.y-ball.speed<0){ball.directionY=1;}ball.x+=ball.speed*ball.directionX;ball.y+=ball.speed*ball.directionY;$("#ball").css({"left":ball.x,"top":ball.y})}

0 0