Html/Javascript 做游戏的第一步： 2球碰撞游戏（附全部代码）

北京维多

于 2021-12-21 22:37:47 发布

阅读量3.7k

点赞数 3

文章标签： html javascript 前端

本文链接：https://blog.csdn.net/m0_60558800/article/details/122074699

版权

本来一心一意学Python, 结果在做爬虫的时候，发现如果不懂Html/Javascript 的话，很难做好。好吧， Html/Javascript 确实很枯燥，只好先做个小游戏： 2 球动态碰撞，碰撞后自动分开。这样，学习起来应该更有趣一些。

代码如下：

<!DOCTYPE html>
<html>

<body>
<canvas id="myCanvas" width="300" height="280"></canvas>

var ctx = document.getElementById('myCanvas').getContext('2d');
var lastframe = 0;

var Box={x:1,y:1,width:myCanvas.width-2,height:myCanvas.height-2};

class Ball {
   constructor(x,y,r,speed) {
       this.x=x;
       this.y=y;
       this.r=r;
       this.xdir=1;
       this.ydir=1;
       this.speed=speed;
       }
   update(dt) {
       this.x+=dt*this.speed*this.xdir;
       this.y+=dt*this.speed*this.ydir;
if (this.y+this.r> Box.height+Box.y){
           this.ydir=-1;}
       if (this.x+this.r>Box.width+Box.x) {
           this.xdir=-1;}
if (this.y-this.r< Box.y){
           this.ydir=1;}
       if (this.x-this.r<Box.x) {
           this.xdir=1;}

       }
   }

const ball1=new Ball(12,23,20,200);
const ball2=new Ball(150,210,35,150);

function collide(b1,b2) {
   dist=Math.sqrt((b1.y-b2.y)*(b1.y-b2.y)+(b1.x-b2.x)*(b1.x-b2.x));
   if (dist<b1.r+b2.r) return 1;
   return 0;}

function main(tframe) {
// Request animation frames
window.requestAnimationFrame(main);
//document.write(tframe)
// Update and render the game
update(tframe);
render();
}