您的位置：首页 > Web前端 > HTML5

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

2017-09-19 07:26 288 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html5学习

相关文章推荐

新的分享

章节导航