HTML5_html5 チュートリアルのヒントを使用して簡単な卓球ゲームを作成するチュートリアル

ちなみに、これは単なるデモです。ゲームプレイやゲームルールなどについてはあまり考えていません。改良に興味がある場合は、ルールの改良、ゲームの切り替え、サウンドの追加、ゴール検出の改良、さらに厳密な調整など、改良することができます。 . ショットの強さ、テーブルの実際の摩擦などを確認して、よりゲームらしくしてください。私はプログラミングのアイデアをいくつか紹介しているだけです。デモをしてみるだけでは、プレイするのはあまり楽しいものではありません~~

スヌーカー ゲーム
スヌーカー ゲーム全体には 2 つのカテゴリーがあり、1 つはボール、もう 1 つは補助照準ラインです。ゲームをより複雑にしたい場合は、シェイプ クラスを抽象化して、ボールとコーナーおよびゴールの間の衝突を検出することもできます。私が作成したゲームは最も単純な壁衝突検出を使用しているため、ボールと不規則な形状の間の衝突検出はありません。より複雑な衝突をプレイしたい場合は、単純な衝突検出について を尋ねることができます。まだとても良いです。さて、段階的にやってみましょう:

[/code]var Ball = function(x, y, ismine){
this.x = x;
this.y = y;
this。 ismine = ismine;
this.oldx = x;
this.oldy = y;
this.vx = 0;
this.vy = 0;
this.radius = ballRadius;
this.inhole = false;this.movi​​ng = true;
}
Ball.prototype = {
constructor:Ball,
_paint:function(){
var b = this. ismine ?document.getElementById("wb") : document.getElementById("yb")
if(b.complete) {
ctx.drawImage(b , this.x-this.radius , this.y- this .radius 、 2*this.radius 、 2*this.radius);
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;

this.vx = Math.abs(this.vx)0? this.vx-mcl*t : this.vx mcl*t);
this.vy = Math.abs(this.vy)0? this.vy-mcl*t : this.vy mcl*t);
// this.vx = this.vx> ; 0？

this.x = t * this.vx * pxpm;
this.y = t * this.vy * pxpm;

if((this.x370 && this.x 758 && this .y this.inhole = true;
if(this.ismine){
var that = this;
setTimeout(function(){
それ。 x = 202;
that.y = Canvas.height/2;
that.vx = 0;
that.vy = 0;
that.inhole = false;
} , 500 )
}
else {
document.getElementById("shotNum").innerHTML = parseInt(document.getElementById("shot Num").innerHTML) 1
}
}
else {
if(this.y > Canvas.height - (ボール半径 tbw) ||これ.y this.y = this.y < (ボール半径 tbw) ? (ballRadius tbw) : (canvas.height - (ballRadius tbw));
this.derectionY = !this.derectionY;
this.vy = -this.vy*0.6;
}
if (this.x > Canvas.width - (ballRadius tbw) || this.x < (ballRadius tbw)){
this.x = this.x < (ボール半径 tbw) ? (ballRadius tbw) : (canvas.width - (ballRadius tbw));
this.derectionX = !this.derectionX;
this.vx = -this.vx*0.6;
                                                                                                                                                                                                            
this.movi​​ng = false;
else {

}
}
}[/code]
ボール属性: x、y ボール位置、vx、vy ボールの水平速度と垂直速度、ismine はそれが白いボールか別のボールかを表します (異なるボールは _paint メソッドで異なる絵を描画します)、oldx、oldy は前のボールの位置を保存するために使用されます。フレームですが、まだ使用されていないので、役立つはずです。 _paint メソッドについては特に言うことはありません。_run メソッドはボールの位置を追跡し、ボールの各フレームの時間に基づいてボールの変位増分と速度増分を計算します。mcl と pxpm は両方とも定数です。 、mcl は摩擦力、pxpm はおおよそのピクセルとリアリティの変換率を計算します。 。 。 。次に、衝突検出です。これは、ボールの位置が境界を超えるかどうかを計算します。ただし、この種の衝突検出は非常に緩いので、本当にゲームを作成したい場合は、より複雑なものを使用することをお勧めします。ボールの速度に応じて止める方法もあります。





コードをコピー

コードをコピー