用HTML5制作一个简单的桌球游戏的教程
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
【球】
代码如下:
[/code]var Ball = function(x , y , ismine){
this.x = x;
this.y = y;
}
else {
b.onload = function(){
这篇文章主要介绍了用HTML5制作一个简单的桌球游戏的教程,主要利用到了HTML5的Canvas API,需要的朋友可以参考下
话说这只是一个简单的DEMO。游戏性,游戏规则什么的我都没怎么考虑,如果有兴趣细化的朋友可以细化一下,比如细化一下规则,游戏开关,加个声音,细化一下进球检测,更严谨甚至可以去查下击球力度、桌面真实摩擦力等来把游戏弄的更像游戏。我只是给个编程思路哈,随便坐个DEMO而已,玩起来估计还是不会很爽快的~~
this.vx = 0;
this.vy = 0;
this.radius = ballRadius;
if(plete) {
ctx.drawImage(b , this.x-this.radius , this.y-this.radius , 2*this.radius , 2*this.radius);
constructor:Ball,
_paint:function(){
var b = this.ismine?document.getElementById("wb") : document.getElementById("yb")
this.ismine = ismine;
this.oldx = x;
this.oldy = y;
this.inhole = false;this.moving = true;
}
Ball.prototype = {
this.vx = Math.abs(this.vx)<0.1? 0 : (this.vx>0? this.vx-mcl*t : this.vx+mcl*t);
this.vy = Math.abs(this.vy)<0.1? 0 : (this.vy>0? this.vy-mcl*t : this.vy+mcl*t);
ctx.drawImage(b , this.x-this.radius , this.y-this.radius , 2*this.radius , 2*this.radius);
_run:function(t){
this.oldx = this.x;
this.oldy = this.y;
整个桌球游戏就两个类,一个是球,一个是辅助瞄准线。如果想把改游戏弄的更复杂,还可以再抽象一个形状类,用于检测球与边角的碰撞以及进球。我做的这个游戏采取了最简单的墙壁碰撞检测,所以没有进行球与不规则形状的碰撞检测,如果想玩更复杂的碰撞,可以戳关于简单的碰撞检测岑安大大讲的还是很好的。好,接下来就一步一步来:
}
}
},
代码如下:
[/code]var Ball = function(x , y , ismine){
this.x = x;
this.y = y;
}
else {
b.onload = function(){
这篇文章主要介绍了用HTML5制作一个简单的桌球游戏的教程,主要利用到了HTML5的Canvas API,需要的朋友可以参考下
话说这只是一个简单的DEMO。游戏性,游戏规则什么的我都没怎么考虑,如果有兴趣细化的朋友可以细化一下,比如细化一下规则,游戏开关,加个声音,细化一下进球检测,更严谨甚至可以去查下击球力度、桌面真实摩擦力等来把游戏弄的更像游戏。我只是给个编程思路哈,随便坐个DEMO而已,玩起来估计还是不会很爽快的~~
this.vx = 0;
this.vy = 0;
this.radius = ballRadius;
if(plete) {
ctx.drawImage(b , this.x-this.radius , this.y-this.radius , 2*this.radius , 2*this.radius);
constructor:Ball,
_paint:function(){
var b = this.ismine?document.getElementById("wb") : document.getElementById("yb")
this.ismine = ismine;
this.oldx = x;
this.oldy = y;
this.inhole = false;this.moving = true;
}
Ball.prototype = {
this.vx = Math.abs(this.vx)<0.1? 0 : (this.vx>0? this.vx-mcl*t : this.vx+mcl*t);
this.vy = Math.abs(this.vy)<0.1? 0 : (this.vy>0? this.vy-mcl*t : this.vy+mcl*t);
ctx.drawImage(b , this.x-this.radius , this.y-this.radius , 2*this.radius , 2*this.radius);
_run:function(t){
this.oldx = this.x;
this.oldy = this.y;
整个桌球游戏就两个类,一个是球,一个是辅助瞄准线。如果想把改游戏弄的更复杂,还可以再抽象一个形状类,用于检测球与边角的碰撞以及进球。我做的这个游戏采取了最简单的墙壁碰撞检测,所以没有进行球与不规则形状的碰撞检测,如果想玩更复杂的碰撞,可以戳关于简单的碰撞检测岑安大大讲的还是很好的。好,接下来就一步一步来:
}
}
},