内容简介：这就是俩对象，，一个依赖于另一个。。碰撞检测时实的坐标判断，碰撞完成以后两个速度分量为取反即可。
效果
代码
<!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>
思路
这就是俩对象，，一个依赖于另一个。。
碰撞检测时实的坐标判断，碰撞完成以后两个速度分量为取反即可。
事件是左右事件。。移动即可。
需要时实刷新，即，帧的概念
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
大学程序设计课程与竞赛训练教材
吴永辉、王建德 / 机械工业出版社 / 2013-6 / 69.00
本书每章为一个主题，实验内容安排紧扣大学算法和数学的教学，用程序设计竞赛中的算法和数学试题作为实验试题，将算法和数学的教学与程序设计竞赛的解题训练结合在一起；在思维方式和解题策略的训练方面，以问题驱动和启发式引导为主要方式，培养读者通过编程解决问题的能力。 本书特点： 书中给出的234道试题全部精选自ACM国际大学生程序设计竞赛的世界总决赛以及各大洲赛区现场赛和网络预赛、大学程序设计竞......一起来看看 《大学程序设计课程与竞赛训练教材》 这本书的介绍吧!
