首页 > 程序开发 > 移动开发 > 其他 >

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

2017-09-20

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

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

<!DOCTYPE html>
<html>
<head>
<meta conten="text/html;charset=utf-8"/>
<title></title>
</head>
<!--当按键后去调用test()函数-->
<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>
相关文章
最新文章
热点推荐