193.htm
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>小球按键游戏</title>
</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="red";
my_huabi.beginPath();
my_huabi.arc(ball_x,ball_y,ball_r,0,2*Math.PI);
my_huabi.fill();
}
//2.编写一个函数,可以处理按键事件[asdw]
function moveBall(event)
{
//alert(event.keyCode);
//通过switch来判断用户的需求
switch(event.keyCode)
{
case 83://向下
//判断ball_y是否已经到了最下面的边界
if (ball_y<400-ball_r)
{
ball_y++;
}
break;
}
my_huabi.clearRect(0,0,500,400);
drawBall(ball_x,ball_y);
}
//修改case 83中的83这个键值以及再增加几个直接添加几个case为上下左右方向键就可以控制小球的任意方向移动;当然case更多就可以控制8个方向的移动(情况就更复杂了
</script>
</html>
