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 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>
思路
这就是俩对象,,一个依赖于另一个。。
碰撞检测时实的坐标判断,碰撞完成以后两个速度分量为取反即可。
事件是左右事件。。移动即可。
需要时实刷新,即,帧的概念
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanfehcj
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01