canvasは簡単なゲームを書きます
前にHTML 5 Canvasの属性と方法のまとめで、
初期化
まず、
それから各种のパラメータに対して、注釈の中ですべて与えて、私は多く言わないで、直接见ます
パッケージングツールの方法
イベントの追加
きょうかいけってい
アニメーションの実行
私はここで直接
これで、このミニゲームの紹介はこれで終わり、簡単にしましょう
Canvas
の各种の属性と方法の说明を绍介して、そして自分で书いたいくつかのCanvas demo
を列挙して、次に1つの简単な小さいゲームを书くようにしましょう、どんなに简単ですか、このように言って、コードは100行未満で、先に効果図をあげます:左侧は私达のコントロールするコントロールボードで、右側は仮想的なコンピュータ制御のコントロールボード体験小ゲームリンク:https://demo.luckyw.cn/code.h... 初期化
まず、
html
ページにcanvas
要素を追加し、id
コードで要素を取得して操作するためのjs
要素を与える.
それから各种のパラメータに対して、注釈の中ですべて与えて、私は多く言わないで、直接见ます
// canvas 2d c, canvas 800x600
var canvas = document.getElementById("canvas"),
c = canvas.getContext("2d"),
W = canvas.width = 800,
H = canvas.height = 600;
var ballX = W / 2, ballY = H / 2, ballR = 10, ballVx = 10, ballVy = 2, // 、 X Y
panelW = 10, panelH = 100, panel1Y = (H - panelH) / 2, panel2Y = (H - panelH) / 2, //
player1Score = 0, player2Score = 0, winnerScore = 3, //
isEnd = 0; // ,0 ,1
パッケージングツールの方法
// ( )
function fillRect(x, y, w, h, style) {
c.fillStyle = style;
c.fillRect(x, y, w, h);
}
// ( )
function fillCircle(x, y, r, style) {
c.fillStyle = style;
c.beginPath();
c.arc(x, y, r, 0, Math.PI * 2);
c.fill();
}
// ( )
function fillText(txt, x, y, font, style) {
c.fillStyle = style || "white";
c.font = font || "40px DejaVu Sans Mono";
c.textAlign = "center";
c.textBaseline = "middle";
c.fillText(txt, x, y);
}
イベントの追加
canvas
の要素にリスニングイベントを追加する必要があります.1つは、終了したisEnd
が1の場合、マウスがcanvas
をクリックしたときにゲームを追加し、プレイヤーの点数をリセットし、アニメーションの描画を再開することです.2つは、左側のコントロールボードの動きを制御する必要がありますが、Y軸で動くだけでいいです.canvas.addEventListener("click", function () {
if (isEnd) {
player1Score = 0;
player2Score = 0;
isEnd = 0;
animate(); //
}
});
// canvas Y
canvas.addEventListener("mousemove", function (e) {
panel1Y = e.clientY - canvas.getBoundingClientRect().top - panelH / 2;
});
きょうかいけってい
//
if (ballX - ballR - panelW < 0) {
if (ballY > panel1Y && ballY < panel1Y + panelH) {
ballVx = -ballVx;
ballVy = (ballY - (panel1Y + panelH / 2)) * .3;
} else {
player2Score++;
ballReset();
}
}
if (ballX + ballR + panelW > W) {
if (ballY > panel2Y && ballY < panel2Y + panelH) {
ballVx = -ballVx;
ballVy = (ballY - (panel2Y + panelH / 2)) * .3;
} else {
player1Score++;
ballReset();
}
}
if (ballY + ballR < 0 || ballY - ballR > H) {
ballVy = -ballVy;
}
//
if (panel2Y + panelH / 2 < ballY - 40) {
panel2Y = panel2Y + 5;
} else if (panel2Y + panelH / 2 > ballY + 40) {
panel2Y = panel2Y - 5;
}
アニメーションの実行
私はここで直接
animate
の方法でrequestAnimationFrame(animate)
を使っています.もっと互換性のある方法は以下のようにすべきです.怠け者を盗むために互換性のある書き方を書いていません.var RAF = (function () {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame || function (callback) {
window.setTimeout(callback, 1000 / 60);
}
})();
RAF(animate);
これで、このミニゲームの紹介はこれで終わり、簡単にしましょう