canvas实现弹球的代码示例

来源：懂视网责编：小采时间：2020-11-27 15:03:45

canvas实现弹球的代码示例

canvas实现弹球的代码示例:本篇文章给大家带来的内容是关于canvas实现弹球的代码示例，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。效果代码<!DOCTYPE html> <html lang="zh_CN"> <head> <meta char

推荐度：

点击下载本文 文档为doc格式

导读canvas实现弹球的代码示例:本篇文章给大家带来的内容是关于canvas实现弹球的代码示例，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。效果代码<!DOCTYPE html> <html lang="zh_CN"> <head> <meta char

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

效果

代码

<!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实现弹球的代码示例

推荐度：

点击下载本文 文档为doc格式

标签：代码弹球 canvas

热门焦点

canvas实现弹球的代码示例

canvas实现弹球的代码示例

canvas实现弹球的代码示例

最新推荐

猜你喜欢

热门推荐