canvas实现弹球的代码示例


本文摘自PHP中文网,作者不言,侵删。

本篇文章给大家带来的内容是关于canvas实现弹球的代码示例,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

效果

4050576798-5c63384c6f19c_articlex.png


代码

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

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

<!DOCTYPE html>

<html lang="zh_CN">

<head>

    <meta charset="UTF-8">

    <title>弹球</title>

    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>

</head>

<body>

<canvas id="canvas" width="400" height="400"></canvas>

<script>

    // 全局canvas

    let canvas = document.getElementById("canvas");

    let context = canvas.getContext("2d");

    // 弹球对象

    class Ball{

        x = 100;

        y = 40;

        xSpeed = -2;

        ySpeed = -2;

        constructor(){};

        getX(){

            return this.x;

        }

        getY(){

            return this.y;

        }

        setX(x){

            this.x = x;

        }

        setY(y){

            this.y = y;

        }

        getXSpeed(){

            return this.xSpeed;

        }

        setXSpeed(xSpeed){

            this.xSpeed = xSpeed;

        }

        getYSpeed(){

            return this.ySpeed;

        }

        setYSpeed(ySpeed){

            this.ySpeed = ySpeed;

        }

        // 绘制小球的方法

        draw = () => {

            context.beginPath();

            context.arc(this.x, this.y, 10, 0, Math.PI * 2, false);

            context.strokeRect(0, 0, 400, 400);

            context.fill();

        };

        // 移动操作

        move = () => {

            this.x = this.x + this.xSpeed;

            this.y = this.y + this.ySpeed;

        };

        // 边缘检测,碰撞检测

        checkCanvas = (panel) => {

            // 左右

            if(this.x < 5 || this.x > 400 - 5){

                this.xSpeed = -this.xSpeed;

            }

            // 上方

            if(this.y < 0){

                this.ySpeed = -this.ySpeed;

            }

            // 下方

            // 碰到挡板

 

            if(this.y > 390 - 10){

                if(this.x > panel.x && this.x < panel.xSize + panel.x){

                    this.ySpeed = -this.ySpeed;

                }else{

                    alert("游戏结束");

                    this.x = 100;

                    this.y = 10;

                }

            }

        }

    }

    // 增加一个挡板对象

    class Panel{

        constructor(){};

        // 左x

        x = 200;

        // 左y

        y = 390;

        // 长度

        xSize = 50;

        // 宽度

        ySize = 5;

        draw(){

            context.fillRect(this.x, this.y, this.xSize, this.ySize);

        }

    }

    // 创建出一个小球对象

    let ball = new Ball();

    // 创建出挡板对象

    let panel = new Panel();

    // 每10秒为一帧

    window.setInterval(() => {

        // 清空画布

        context.clearRect(0, 0, 400, 400);

        // 画出小球

        ball.draw();

        // 画出挡板

        panel.draw();

        // 移动

        ball.move();

        // 进行边界判断

        ball.checkCanvas(panel);

    },10);

    // 控制挡板

    $("body").keydown((event) => {

        if(event.keyCode == 37){

            panel.x = panel.x - 5;

            // 移出边界问题处理

            if(panel.x < 0){

                panel.x = 0;

            }

        }

        if(event.keyCode == 39){

            panel.x = panel.x + 5;

            // 移出边界处理

            if(panel.x + panel.xSize > 400){

                panel.x = 400 - panel.xSize;

            }

        }

    })

</script>

</body>

</html>

思路

这就是俩对象,,一个依赖于另一个。。
碰撞检测时实的坐标判断,碰撞完成以后两个速度分量为取反即可。
事件是左右事件。。移动即可。
需要时实刷新,即,帧的概念

以上就是canvas实现弹球的代码示例的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

javascript怎么判断是否为null

浅谈javascript执行机制

javascript 中的 nan

html5 canvas实现中奖转盘的实例代码

js的dom与事件小结

一文了解javascript中的类型化数组

javascript中对象的介绍(附代码)

javascript中的generator函数的用法介绍(附代码)

如何在网页中引入外部js文件和css样式文件

web程序员必备之 关于<script>标记的一些小知识

更多相关阅读请进入《javascript》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...

    暂无评论...