html5学习-通过鼠标移动的圆球

来源：互联网发布：react setstate 数组编辑：程序博客网时间：2024/04/20 10:55

<!DOCTYPE html>
<html>
<head>
<meta conten="text/html;charset=utf-8"/>
<title></title>
</head>

<body onkeydown="test()">
<h1>小球上下移动</h1>
<canvas id="demo" width="400px" height="300px" style="background-color:black">
</canvas>
<script type="text/javascript">
//1.得到画布
var canvas1 = document.getElementById("demo");
//2.得到上下文
var cxt = canvas1.getContext("2d");
//3.画出红色圆球
var ballX = 30;
var ballY = 30;
drawBall();
function drawBall() {
//这里有一个非常重要的知识点.
//如果你在函数中，没有定义就直接使用变量，就意味子你使用的全局变量
//如果你在函数中，定义了才使用改变量，说明你使用的局部变量
//画出红色圆球
//我们画出圆时，要把路径闭合，否则会出现诡异现象
cxt.beginPath();
cxt.fillStyle = "#FF0000";
cxt.arc(ballX, ballY, 10, -30, 360, true);
cxt.closePath();
cxt.fill();
}
//3.现在我按w-d-s-a可以让小球移动w:上d:右s:下a:左
//当我们按下一个键时，实际上触发了一个事件onkeydown
function test() {
//我怎么知道玩家按下的是什么键
//说明当按下键后，事件--》会产生一个event对象--》会自动传递个时间处理函数
var code = event.keyCode;
switch (code) {
case 87:
//alert("上");
if (ballY>10)
ballY--;
break;
case 68:
//alert("右");
if (ballX<400-10)
ballX++;
break;
case 83:
//alert("下");
if (ballY<300-10)
ballY++;
break;
case 65:
//alert("左");
if (ballX>10)
ballX--;
break;
}
cxt.clearRect(0,0,400,300);//清屏
drawBall();
}
</script>
</body>
</html>

阅读全文

0 0