注
源码来自
<<HTML5 Games Development by Example_ Beginner’s Guide>>一书
程序运行截图
index.html
|
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head> <meta charset="utf-8" /> <title>Ping Pong</title> <style type="text/css"> /*<![CDATA[*/ #playground{ background: #e0ffe0; width: 400px; height: 200px; position: relative; overflow: hidden; } #ball { background: #fbb; position: absolute; width: 20px; height: 20px; left: 150px; top: 100px; border-radius: 10px; } .paddle { background: #bbf; left: 50px; top: 70px; position: absolute; width: 30px; height: 70px; } #paddleB { left: 320px; } /*]]>*/ </style> </head> <body> <h1>Ping Pong</h1> <div id="game"> <div id="playground"> <div id="paddleA" class="paddle"></div> <div id="paddleB" class="paddle"></div> <div id="ball"></div> </div> <div id="spectators"></div> </div>This is an example to show basic control of Ping Pong. Press W/S to move the left paddle. Press Up/Down to move the right paddle. <script src="js/jquery-1.4.3.js" type="text/javascript"> </script><script src="js/html5games.pingpong.js" type="text/javascript"> </script> </body> </html> |
html5games.pingpong.js
|
var KEY =
{ UP : 38, DOWN : 40, W : 87, S : 83 } // a global object to store all global variable we use for the game var pingpong = {} // an array to remember which key is pressed and which is not. pingpong.pressedKeys = []; pingpong.ball = { speed : 5, x : 150, y : 100, directionX : 1, directionY : 1 } $(function () { // set interval to call gameloop every 30 milliseconds pingpong.timer = setInterval(gameloop, 30); // mark down what key is down and up into an array called "pressedKeys" $(document).keydown(function (e) { pingpong.pressedKeys[e.which] = true; } ); $(document).keyup(function (e) { pingpong.pressedKeys[e.which] = false; } ); } ); // this function is called every 30 milliseconds function gameloop() { moveBall(); movePaddless(); } function moveBall() { // move the ball in every 30 milliseconds // reference useful varaibles var playgroundHeight = parseInt($("#playground").height()); var playgroundWidth = parseInt($("#playground").width()); var ball = pingpong.ball; // check playground boundary // check bottom if (ball.y + ball.speed * ball.directionY > playgroundHeight) { ball.directionY = -1; } // check top if (ball.y + ball.speed * ball.directionY < 0) { ball.directionY = 1; } // check right edge if (ball.x + ball.speed * ball.directionX > playgroundWidth) { // player B lost. // reset the ball; ball.x = 250; ball.y = 100; $("#ball").css( { "left" : ball.x, "top" : ball.y } ); ball.directionX = -1; } // check left edge if (ball.x + ball.speed * ball.directionX < 0) { // player A lost. // reset the ball; ball.x = 150; ball.y = 100; $("#ball").css( { "left" : ball.x, "top" : ball.y } ); ball.directionX = 1; } // check moving paddle here, later. // check left paddle var paddleAX = parseInt($("#paddleA").css("left")) + parseInt($("#paddleA").css("width")); var paddleAYBottom = parseInt($("#paddleA").css("top")) + parseInt($("#paddleA").css("height")); var paddleAYTop = parseInt($("#paddleA").css("top")); if (ball.x + ball.speed * ball.directionX < paddleAX) { if (ball.y + ball.speed * ball.directionY <= paddleAYBottom && ball.y + ball.speed * ball.directionY >= paddleAYTop) { ball.directionX = 1; } } // check right paddle var paddleBX = parseInt($("#paddleB").css("left")); var paddleBYBottom = parseInt($("#paddleB").css("top")) + parseInt($("#paddleB").css("height")); var paddleBYTop = parseInt($("#paddleB").css("top")); if (ball.x + ball.speed * ball.directionX >= paddleBX) { if (ball.y + ball.speed * ball.directionY <= paddleBYBottom && ball.y + ball.speed * ball.directionY >= paddleBYTop) { ball.directionX = -1; } } ball.x += ball.speed * ball.directionX; ball.y += ball.speed * ball.directionY; // actually move the ball with speed and direction $("#ball").css( { "left" : ball.x, "top" : ball.y } ); } function movePaddless() { // use our custom timer to continuously check if a key is pressed. if (pingpong.pressedKeys[KEY.UP]) // arrow up { // move the paddle B up 5 pixels var top = parseInt($("#paddleB").css("top")); $("#paddleB").css("top", top - 5); } if (pingpong.pressedKeys[KEY.DOWN]) // arrow down { // move the paddle B down 5 pixels var top = parseInt($("#paddleB").css("top")); $("#paddleB").css("top", top + 5); } if (pingpong.pressedKeys[KEY.W]) // w { // move the paddle A up 5 pixels var top = parseInt($("#paddleA").css("top")); $("#paddleA").css("top", top - 5); } if (pingpong.pressedKeys[KEY.S]) // s { // move the paddle A down 5 pixels var top = parseInt($("#paddleA").css("top")); $("#paddleA").css("top", top + 5); } } |
相关知识
|
页面加载完毕之后执行指定的javascript代码
jQuery(document).ready(function() { }); 用'$'代替jQuery $(document）.ready(function() { }); 更简化 $(function() { }); |
关于在哪里放置javascript代码
通常javascript代码放在<head></head>标签之间
但是这里把javascript代码在</body>之前插入
理由是浏览器是按照从上到下的顺序解释执行代码的。
如果把javascript代码放在中间，那么要等javascript代码加载完毕之后才可以加载页面内容。
所以这样做有助于提高页面加载与执行的效率。
使用jQuery
使用jQuery来拾取和操作页面元素
键盘事件响应
响应键盘事件可以有2种模式
第一种方式是即时地响应键盘事件
第二种方式是键盘事件发生时先把对应的按键状态保存起来，然后按照一定的时间间隔进行响应。
这里采用的是第二种方式。
调用了函数setInterval(expression，milliseconds)
parseInt函数的使用
作者：foreverkoking 发表于2013-8-2 16:58:31 原文链接
阅读：39 评论：0 查看评论