<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>小球撞墙小游戏</title>
<style>
body{
background-color: black;
}
</style>
</head>
<body onkeydown="moveBall(event)">
<canvas id="my-canvas" width="500px" height="400px" style="border:1px solid red">
</body>
<script>
//1.先得到这个画布,然后画出红色的小球
var my_canvas=document.getElementById("my-canvas");
var my_huabi=my_canvas.getContext("2d");
//需要定义两个变量,分别是小球的横坐标和纵坐标
var ball_x=50;
var ball_y=50;
var ball_r=20;
//调用一下画出小球的函数
drawBall(ball_x,ball_y);
function drawBall(x,y)
{
//给画笔颜色
my_huabi.fillStyle="blue";
my_huabi.beginPath();
my_huabi.arc(ball_x,ball_y,ball_r,0,2*Math.PI);
my_huabi.fill();
}
//3.让小球自动移动
var ball_x_fx=true;//当ball_x为true表示,小球向x的正向移动
var ball_y_fx=true;//当ball_y为true表示,小球向xy的正向移动
var ball_speed=1;
//使用定时器不停的移动
window.setInterval("moveBall()",10);
function moveBall()
{
//判断当前小球x的运动方向
if (ball_x_fx)
{
ball_x+=ball_speed;
if (ball_x>=500-ball_r)
{
//如果碰到边界了,请换方向
ball_x_fx=false;
}
}else
{
ball_x-=ball_speed;
if (ball_x<=ball_r)
{
ball_x_fx=true;
}
}
//判断当前小球y的运动方向
if (ball_y_fx)
{
ball_y+=ball_speed;
if (ball_y>=400-ball_r)
{
//如果碰到边界了,请换方向
ball_y_fx=false;
}
}else
{
ball_y-=ball_speed;
if (ball_y<=ball_r)
{
ball_y_fx=true;
}
}
//清屏
my_huabi.clearRect(0,0,500,400);
drawBall(ball_x,ball_y);
}
//目前是跟着视频慢慢走,但是我写出来的和老韩讲的会有一点出入,但代码是没问题的,该页面无法在ie6及ie6以下版本运行,目前我一直用的火狐浏览器
</script>
</html>
网友评论