对于年轻人们来说，游戏对于他们来说非常喜爱与痴迷，总是陷于游戏，无法自拔。有一天，我突然灵关一闪，我要学习编程，创造一个自己的游戏。我总记得一位名人说过一句话，现在多学一门技能，以后少说一句求人的话。接下来我教大家创造一个属于自己的一个网页游戏，我将每一行代码基本都注释的，只想为大家更好的理解。
改变游戏，需一步一个脚印，接下来就介绍
游戏的规则是栏板接住球，不掉。你仔细看，会发现是童年玩的游戏。
这就是游戏的基本效果，图片用ps做的，这是栏板成功接住的成功的效果
栏板没接住球，失败的效果
把下列代码复制在记事本里面，把文件名改成xxx.html名字形式就可以的，然后下个jq库，就会实现上述效果
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<canvas id="canvas" width="400" height="400" style="border:1px solid black">//设置的画布的大小，也可以理解为在网页上显示游戏的范围大小</canvas>
<script src="//img.17u1u.com/jQuery.js"></script>//jq库的位置
<script>
var c=document.getElementById("canvas");//用dom获取cavas的位置
var ctx=c.getContext("2d");//制作canvas对象
//第一步写一个球的对象，属性有圆心坐标，半径和水平和垂直速度
var ball={
x:100,
y:100,
r:10,
xSpeed:-2,
ySpeed:-2}
//画球
ball.draw=function(){
ctx.beginPath();//开始路径
ctx.arc(this.x,this.y,10,0,Math.PI*2,false);/*第一个值是水平距离，第二个值是垂直距离，第三个值是半径，
第四个值开始画圆的角度，第五个值结束的角度(Math.PI代表180度)，
第六个值代表顺时针(false顺时针，true代表逆时针)*/
ctx.fill();//填充
}
//球移动
ball.move=function(){
this.x=this.x this.xSpeed;//向水平方向退
this.y=this.y this.ySpeed;}//向垂直方向退
//球与边框碰撞问题
ball.checkCanvas=function(panelStart,panelEnd)
{
if(this.x<this.r || this.x>400-this.r)//左右边框的碰撞，如果球离左边的距离小于球的半径，就执行下边条件向用右水平移动；
//如果球离右边距离小于半径，也执行下面条件，向左水平移动
this.xSpeed=-this.xSpeed;
if(this.y<this.r)//上边框的碰撞，如果上面的距离小于球的半径，执行下面条件，向下垂直移动
this.ySpeed=-this.ySpeed;
if(this.y>390-this.r)//下边框的碰撞,如果距离小于球的半径和短板的
{
if(this.x>panelStart && this.x<panelEnd)//表示球的位置在栏板的的范围内，如果碰撞栏板就会执行下边条件，向上反弹
this.ySpeed=-this.ySpeed;
else{alert("game over");//如果没有在栏板的范围内，落地时没有与栏板碰撞，这游戏失败，弹出game over，在初始画游戏，则位置在50，100这个位置
this.x=50;
this.y=100;
}
}
}
//设置档板的离画布的距离和大小
var panel= {
x:200,
y:390,
xSize:50,
ySize:5};
panel.draw=function(){
ctx.fillRect(this.x,this.y,this.xSize,this.ySize);//填充栏板
}
//做动画函数，每50ms执行
setInterval(function(){
ctx.clearRect(0,0,400,400);//清空画布
ball.draw();//执行画球
panel.draw();//执行画栏板
ball.move();//球的移动
ball.checkCanvas(panel.x,panel.x panel.xSize);//执行球与边框碰撞问题
ctx.strokeRect(0,0,400,400);//再画布
},30);
//键盘交互需要有jq库，操控栏杆的左右移动
$("body").keydown(function(event){
if(event.keyCode==37)//如果按键盘的左键向左移动5px
{panel.x=panel.x-5;
if(panel.x<0)//如果移动与左边框碰撞的，就无法向左移动
panel.x=0}
if(event.keyCode==39){
panel.x=panel.x 5;//如果按键盘的右键向右移动5px
if(panel.y>400-panel.xSize)//如果移动与右边框碰撞的，就无法在向右移动
panel.x=400-panel.xSize}});
</script>
</body>
可能上述会出现错误或者图不好看，请谅解。编程，ps虽不是很厉害,但是我能坚持学习，我希望大家能够和我一样，坚持学习。这是我写的第一编文章，希望能得到大家谅解和支持，后期也会不断努力的学习，写出更好的文章，让大家更好的欣赏和学习
