HTML5-Exercise/demo03.html at master · fatbigbright/HTML5-Exercise · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE HTML>
<html>
    <body>
        <script type="text/javascript">
            var FPS = 30;
            var context;
            var x = 0;
            var y = 0;
            var seedX = 1;
            var seedY = 1;
            function AddX(){
                if(x >= 500) {
                    seedX = -1;
                }
                if(x <= 0) {
                    seedX = 1;
                }
                x += seedX;
                return x;
            }
            function AddY(){
                if(y >= 459){
                    seedY = -1;
                }
                if(y <= 0) {
                    seedY = 1;
                }
                y += seedY;
                return y;
            }
            function draw() {
                context.font = "20px Arial";
                //context.fillText("HTML 5 Testing.", AddX(), AddY());
                context.fillText("HTML 5 Testing.", x, y);
            }
            function clear() {
                context.clearRect(0, 0, 640, 480);
            }
            window.onload = function () {
                var canvas = document.getElementById("myCanvas");
                context = canvas.getContext("2d");
                document.onkeydown = function (oEvent){
                    var keyCode = oEvent.keyCode;
                    if (keyCode == 37 && x > 0)/*Left*/{
                        x -= 1;
                    }
                    if (keyCode == 39 && x < 500)/*Right*/{
                        x += 1;
                    }
                    if (keyCode == 38 && y > 0) /*Up*/{
                        y -= 1;
                    }
                    if (keyCode == 40 && y < 459)/*Down*/{
                        y += 1;
                    }
                };
                setInterval( function () {
                    clear();
                    draw();
                }, 1000/FPS);
            }
        </script>
        <canvas id="myCanvas"  width="640" height="480" style="border: 1px solid #c3c3c3;">
            Your browser do not support Canvas element.
        </canvas>
    </body>
</html>