前置条件:官网下载jQuery或者直接link一波jQuery。
逻辑部分:
每30毫秒小球判断方向并位移一次。
处理了多按键同时按下的情况。
编写了边界处理:触碰到边界就改变方向,并记录得分。
编写了碰撞事件:触碰到挡板就会改变方向。
样式部分:
没啥特色。简单的渐变色。
HTML源码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>PingPongGame</title>
</head>
<body>
<header>
<h1>Ping Pong</h1>
</header>
<footer>
<span>This is a n example of creating a Ping Pong Game.</span>
</footer>
<div id="game">
<div id="playground">
<div clas