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

本来一心一意学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();
}

function render() {
   drawFrame();
   draw_ball(ball1);
   draw_ball(ball2);
}

main(0);

</script>

</body>
</html>

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

浪潮服务器nf5270m5做raid_服务器安装第一步RAID配置——企业服务器常用RIAD技术介绍及配置...
其实服务器安装第一步是打开包装箱,呵呵,第二步是安装导轨,第三步服务器上机架,第四步接上显示器,第五步通电开机-为啥我说服务器安装第一步是RAID配置,因为它相当重要!这是你在服务器安装相关系统之前的 ...
虚幻引擎创建游戏的第一步，人类的一大步
制作第一步,输入映射前为正后为负,左为负右为正设置鼠标控制旋转映射 Horizontal mouse movement为鼠标水平移动 Vertical mouse movement为鼠标竖直移动 ...
unity 角度限制_喵的Unity游戏开发之路推球：游戏中的物理
前言很多童鞋没有系统的Unity3D游戏开发基础,也不知道从何开始学.为此我们精选了一套国外优秀的Unity3D游戏开发教程,翻译整理后放送给大家,教您从零开始一步一步掌握Unity3D游戏开发. 本 ...
喵的Unity游戏开发之路 - 推球：游戏中的物理
很多童鞋没有系统的Unity3D游戏开发基础,也不知道从何开始学.为此我们精选了一套国外优秀的Unity3D游戏开发教程,翻译整理后放送给大家,教您从零开始一步一步掌握Unity3D游戏开发. 本文不 ...
单人扑克游戏：地城恶棍的Python实现（附实现代码）
基于Numpy的单人扑克游戏:地城恶棍 [!] 本项目为原创内容,若有错误之处还需批评指正由于篇幅过长,本文全代码文件位于另一个博客中:传送门文章目录基于Numpy的单人扑克游戏:地城恶棍 1. ...
unity java游戏大全_3D unity 滚球小游戏
3D unity 滚球小游戏 1.打开unity,创建一个新的项目(或在已创建的项目里创建一个新的场景). 2.制作平台创建一个Plane和四个cube模型,附上相应的材质,调整大小和位置,形成一个 ...
unity3d，跟着大佬做自己的第一个游戏（第一步，游戏模型制作）
网址http://www.bilibili.com/video/av5814699/当然我不会全部按照他的来首先下载了一个magicavoxel 某乎介绍https://zhuanlan.zhihu ...
lua 学习笔记---游戏开发第一步
lua 学习笔记-从数组开始数组数组大小范围不一定需要在声明是确定,可以改变一维数组例 > array = {"Lua", "lualu"} &g ...
桌球游戏java_JAVA 第一个小项目桌球游戏（桌球小程序练习）
标签: 今天装了Eclipse 学习第一个小程序'' #加载窗口 #画窗口 import java.awt.*; import javax.swing.*; public class BallGame ...

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

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

最新文章

热门文章