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

ホームページ

ウェブフロントエンド

H5 チュートリアル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:46 PM

html5

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

スヌーカーゲーム
スヌーカーゲーム全体には 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.moving = 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.moving = false;
else {

This.moving = true;

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

コードをコピー

コードは次のとおりです。var dotLine = function(x0,y0, x1,y1 ){ this.x0 = this.x0; this.y0 = this.y0;

this.x1 = this.x1;

this.y1 = this.y1;

this .dotlength = 3;
this.display = false;
}
dotLine.prototype = {
constructor:dotLine,
_ready:function(){
this。 length = Math .sqrt(Math.pow(this.y1 - this.y0 , 2) Math.pow(this.x1 - this.x0 , 2));
this.dotNum = Math.ceil(this.length /this.dotlength);
},
_paint:function(){
this._ready();
xadd = this.dotlength*(this.x1 - this.x0)/this. length;
yadd = this.dotlength*(this.y1 - this.y0)/this.length;
ctx.save();
ctx.beginPath();
for(var i =1; i<=this.dotNum;i ){
if(i%2!==0){
ctx.moveTo(this.x0 (i-1)*xadd , this.y0 (i -1) *yadd);
ctx.lineTo(this.x0 i*xadd , this.y0 i*yadd);
}
}
ctx.ストロークスタイル = "#FFF";
ctx .ストローク();
ctx.beginPath();
ctx.arc(this.x1, this.y1, ballRadius-2, 0, 2*Math.PI);
ctx.ストローク() ;
ctx.restore();
}
}

これは、マウスの位置と白の位置を取得するだけです。ボールを選択し、2 つの線の間に距離を引くと点線になります。

【マルチボール衝突検出】

コードをコピー

コードは次のとおりです。

関数collision(){
for(var i=0;i for(var j=0;j var b1 = ボール[i],b2 = ボール[j];
if(b1 !== b2 && !b1.inhole && !b2.inhole){
var rc = Math.sqrt(Math.pow( b1.x - b2.x , 2) Math.pow(b1.y - b2.y , 2));
if(Math.ceil(rc) < (b1.radius b2.radius)){
if(!b1.moving && !b2.moving) return;
//衝突後の速度増分を取得
var ax = ((b1.vx - b2.vx)*Math.pow((( b1.x - b2.x) , 2) (b1.vy - b2.vy)*(b1.x - b2.x)*(b1.y - b2.y))/Math.pow(rc , 2)
var ay = ((b1.vy - b2.vy)*Math.pow((b1.y - b2.y) , 2) (b1.vx - b2.vx)*(b1.x - b2. x)*(b1.y - b2.y))/Math.pow(rc , 2)
//衝突ボールに速度増分を割り当てる
b1.vx = b1.vx-ax;
b1.vy = b1.vy-ay;
b2.vx = b2.vx ax;
b2.vy = b2.vy ay;
//ボールの衝突距離を修正
var clength = ((b1.radius b2.radius)-rc)/2;
var cx = clength * (b1.x-b2.x)/rc;
var cy = clength * (b1.y- b2. y)/rc;
b1.x = b1.x cx;
b1.y = b1.y cy;
b2.x = b2.x-cx;
b2.y = b2 .y-cy;
}
}
}
}
}

すべてのボールをトラバースし、2 つのボールの中心間の距離を計算します。 2 つのボールの半径の合計より小さい場合、衝突が発生します。両方の小さなボールが静止している場合、衝突検出は実行されません。それ以外の場合、衝突後の速度増加分の計算方法は、小さなボール衝突のアルゴリズム設計で直接確認できます。、これは非常に詳細に説明されており、組み合わせると上記の一連の式が得られます。

衝突ボールに速度増分を割り当てます。フレーム内で 2 つのボールが衝突すると、2 つのボールが部分的に重なるため、位置補正を実行する必要があります。そうしないと、小さなボールが常に衝突してくっついてしまいます。位置補正の原理も簡単です。 2 つのボール間の中心距離、ピタゴラスの定理によって 2 つのボールの重なり合う領域の幅を計算し、その幅を 2 で割って新しい位置をボールに割り当てます。 2 つのボールの距離は、ボールの中心間の距離に正確に等しくなります。

【マウス操作】

コードをコピー

コードは次のとおりです。

canvas.addEventListener("mousedown" , function(){
if(balls[0].moving) return;

document.querySelector(".shotPower").style.display = "block";
document.querySelector(".shotPower").style.top = ball[0].y-60 "px";
document.querySelector(".shotPower").style.left = ball[0].x-40 "px";
document.getElementById("pow").className = "animate";
var x = event.clientX document.body.scrollLeft document.documentElement.scrollLeft - document.querySelector(".view").offsetLeft;
var y =event.clientY document.body.scrollTop document.documentElement.scrollTop - document.querySelector( ".view").offsetTop;
dotline.display = true;
dotline.x0 = ball[0].x;
dotline.y0 = ball[0].y;
ドットライン。 x1 = x;
dotline.y1 = y;

window.addEventListener("mouseup" , muHandle , false);
window.addEventListener("mousemove" , mmHandle , false);

function mmHandle(){
var x =event.clientX document.body.scrollLeft document.documentElement.scrollLeft - document.querySelector(".view").offsetLeft;
var y =event.clientY document.body.スクロールトップ document.documentElement.scrollTop - document.querySelector(".view").offsetTop;
dotline.x1 = x;
dotline.y1 = y;
}
function muHandle(){
var x =event.clientX document.body.scrollLeft document.documentElement.scrollLeft - document.querySelector(".view").offsetLeft;
var y =event.clientY document.body.scrollTop document.documentElement.scrollTop - document.querySelector(".view").offsetTop;

var angle = Math.atan((y - ball[0].y)/(x - ball[0].x));
var h = document.getElementById("pow").offsetHeight/document.getElementById ("powbar").offsetHeight;
var v = 60*h;
document.getElementById("pow").style.height = h*100 "%"

ボール[0].vx = x - ボール[0].x>0 ? v*Math.abs(Math.cos(角度)) : -v*Math.abs(Math.cos(角度));
ボール[0].vy = y - ボール[0].y>0 ? v*Math.abs(Math.sin(角度)) : -v*Math.abs(Math.sin(角度));

document.getElementById("pow").className = "";

window.removeEventListener("mouseup" , muHandle , false);
window.removeEventListener("mousemove" , muHandle , false);
dotline.display = false;
document.querySelector(".shotPower") .style.display = "none";
}
},false);
ネズミ标アニメーション作也比较简单，有js基础的基本都没问题，就是鼠标按下后计算鼠标マウスがマウスを動かしたときに、マウスが移動したときに、マウスがマウスを動かしたときに、マウスがマウスを動かしたときに、マウスがマウスを動かしたときに、マウスがマウスを動かしたときに、マウスがマウスを動かして、マウスを動かしたときに、マウスがマウスを動かして、マウスを動かしたときに、マウスがマウスを動かして、マウスを動かしたときに、マウスがマウスを動かして、マウスを動かしたときに、マウスがマウスを動かして、その終点の位置を修正しました。白球の速度を決定し、その後、マウスの移動およびマウスの動きを取り除き、補助虚勢線および力量を測定して、水平速度および垂直速度に再分解する。

【アニメーション舞台】

复制代码代码如下:

function animate(){
ctx.clearRect(0,0,canvas.width,canvas.height)
var t1 = new Date();
var t = (t1 - t0)/ 1000;

collision();
ball.foreach(function(){
if(!this.inhole) this._run(t);
});
if(dotline.display){
dotline.x0 = ball[0].x;
dotline.y0 = ball[0].y;
dotline._paint();
}

t0 = t1;
if(!animateStop){
if(ウィンドウ内の "requestAnimationFrame"){
requestAnimationFrame(animate);
}
else if(ウィンドウ内の "webkitRequestAnimationFrame"){
webkitRequestAnimationFrame(animate);
}
else if("msRequestAnimationFrame" in window){
msRequestAnimationFrame(animate);
}
else if("mozRequestAnimationFrame" in window){
mozRequestAnimationFrame(animate);
}
else {
setTimeout(animate , 16);
}
}
}

これは游戏每一フレームの中間処理領域では、小球が入った場合、それ以上の制御は実行されず、補助仮想線の表示プロパティが false に設定されている場合、補助仮想線の制御は実行されず、各バンドの時間も計算されます。初期化]

复制代記入

代码如下:

var Canvas = document.getElementById( "cas");
var ctx = Canvas.getContext('2d');
var mcl = 1 、collarg = 0.8 、ballRadius = 15 、t0 = 0 、balls=[] 、tbw = 32 、animateStop = true 、powAnimation = false;
var dotline;
pxpm = Canvas.width/20;

window.onload = function(){
var myball = new Ball(202 , Canvas.height/2 , true);
ball.push(myball);
for(var i=0;i< 6;i ){
for(var j=0;j var other = new Ball(520 i*(ballRadius-2)*2 , (canvas.height-i*2 *ballRadius)/2 ballRadius 2*ballRadius*j , false);
ball.push(other);
}
}
t0 = new Date();
dotline = new dotLine (0,0,0,0);

animateStop = false;
animate();
}

すべての小球を例証し、小球すべてを参照して、適切な時間を取得し、補助仮想線を例証し、アニメーションを開始します。

ソースコード地址：https://github.com/whxaxes/canvas-test/tree/gh-pages/src/Game-demo/snooker

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。