canvasチュートリアルの「蛇を食いしん坊」
8531 ワード
今回はhtml 5の新しいラベルcanvasでヘビを簡単に食べるゲームを作ります.この章では、canvasの基礎知識とcanvasを使用して中空のブロックを描く方法を理解する必要があります.転送ドア:『canvasチュートリアルの初歩的な使用』.
先に見るのが早い
まずみんなに効果を见せて、やっと动力があってもっと良い学习が下りることができて、先生はすでに蛇をむさぼるゲームを完成して、そしてvpsの上で置いて、下に住所を置きます:蛇をむさぼる
ゲームの原理
ヘビを食いしん坊にするゲームを作るには、まずこのゲームの原理を理解しなければなりません.ゲームの目標:私たちの蛇を操作してもっと多くの食べ物を食べて、蛇が長くなって、それによってもっと高い点数を得ることです. ゲームの対象:蛇、食べ物. ゲームの終わり:蛇が可視領域の縁にぶつかるか、蛇の頭が自分にぶつかる(自分を食べる).
原理:実は私たちが2つのゲームオブジェクトの状態を変えることです.その後、彼らの状態タイミング(フレームレート)を私たちのcanvasに表示します.実はこれが一番簡単なエンジンです.ここではjsのsetInterval関数を用いて,本ゲームの主ループを実現する.
手を出す
まずcanvas、成績表示ラベル、スタートボタンのhtmlドキュメントを作成します.
2つ目は、必要なものを以下のように初期化します.
第3歩では、最も重要なヘビオブジェクトを作成します.ヘビオブジェクトには、以下の方法と属性があります.CurrOri:蛇の現在の進行方向、例えば:right. 2.ori:蛇の方向グループ、左右は1グループ、上下は1グループで、蛇が直接方向を同じグループの方向に変えることができないためです. 3.oriss:left,down,right,upMes:蛇の体の配列、蛇の体の各点の座標を記録する.add方法:1つの食べ物を食べた後、体の最後に1節を追加するために使用されます. 6.move[ori]メソッド:ある方向に1つのグリッドを移動します.例えばmoveUp,moveLeft. 7.moveメソッド:6によって呼び出され、6は頭をある方向のグリッドに移動させ、このメソッドを呼び出して、後ろのすべての体を動かします. 8.changeOriメソッド:ヘビの現在の移動方向、すなわちcurrOriの値を変更し、oriとoriss属性によって合法性を判断します. 9.canChangeOriメソッドは,方向変更の正当性を判断する.8によって呼び出されます. 10.isCrashSelf方法:頭が体を食べているかどうかを判断します. 11.isCrashWellメソッド:壁にぶつかったかどうかを判断します. 12 handleAdd方法:食べ物を自動的に処理し、役割を果たし、現在の頭が食べ物を食べているかどうかを判断し、遅刻したらadd方法を呼び出す.コードと詳細な説明:
ステップ4では、食べ物のコードについて、ここではオブジェクト向けを使用していません.
第五歩、蛇を描く、スクリーンをクリアするコード、蛇を描くコードは自分で蛇の対象にカプセル化することができて、簡単ですよ.
最後に、ゲームとキーボードのコードの傍受を開始しますよ.
ヘビを貪るコードは実際には非常に簡単で、複雑なマトリクスの変幻を使わず、各動作はゲームの住循環の中で描画され、図形を描画し、操作対象の状態と分けられ、実際には最も簡単なゲームエンジンでもある.皆さんにヒントを与えてほしいです.コードは詳しくても、少しも持っていないので、コードをよく見て、実際に書かなければなりません.小さな宿題を残して、この蛇を食いしん坊にする.1.食べ物を対象にする.2.描画方法もオブジェクトにカプセル化します.これにより、ゲームのメインサイクルで描画方法を呼び出すだけでよい.
本文がみんなに啓発することを望んで、goodバイ.
先に見るのが早い
まずみんなに効果を见せて、やっと动力があってもっと良い学习が下りることができて、先生はすでに蛇をむさぼるゲームを完成して、そしてvpsの上で置いて、下に住所を置きます:蛇をむさぼる
ゲームの原理
ヘビを食いしん坊にするゲームを作るには、まずこのゲームの原理を理解しなければなりません.
原理:実は私たちが2つのゲームオブジェクトの状態を変えることです.その後、彼らの状態タイミング(フレームレート)を私たちのcanvasに表示します.実はこれが一番簡単なエンジンです.ここではjsのsetInterval関数を用いて,本ゲームの主ループを実現する.
手を出す
まずcanvas、成績表示ラベル、スタートボタンのhtmlドキュメントを作成します.
2つ目は、必要なものを以下のように初期化します.
var canvas = document.getElementById('gbcanvas'); // gbCanvas canvas
var c = canvas.getContext('2d'); // canvas API context
var s = document.getElementById('score'); //
var mWidth = 300; // ， canvas
var mHeight = 300; // ， canvas
var unit = 5; //
var mwid = mWidth / unit; //
var mhei = mHeight / unit; //
var point = point = {x : 0 , y : 0}; //
var score = 0; //
第3歩では、最も重要なヘビオブジェクトを作成します.ヘビオブジェクトには、以下の方法と属性があります.CurrOri:蛇の現在の進行方向、例えば:right. 2.ori:蛇の方向グループ、左右は1グループ、上下は1グループで、蛇が直接方向を同じグループの方向に変えることができないためです. 3.oriss:left,down,right,upMes:蛇の体の配列、蛇の体の各点の座標を記録する.add方法:1つの食べ物を食べた後、体の最後に1節を追加するために使用されます. 6.move[ori]メソッド:ある方向に1つのグリッドを移動します.例えばmoveUp,moveLeft. 7.moveメソッド:6によって呼び出され、6は頭をある方向のグリッドに移動させ、このメソッドを呼び出して、後ろのすべての体を動かします. 8.changeOriメソッド:ヘビの現在の移動方向、すなわちcurrOriの値を変更し、oriとoriss属性によって合法性を判断します. 9.canChangeOriメソッドは,方向変更の正当性を判断する.8によって呼び出されます. 10.isCrashSelf方法:頭が体を食べているかどうかを判断します. 11.isCrashWellメソッド:壁にぶつかったかどうかを判断します. 12 handleAdd方法:食べ物を自動的に処理し、役割を果たし、現在の頭が食べ物を食べているかどうかを判断し、遅刻したらadd方法を呼び出す.コードと詳細な説明:
// ， ， ，
//
var shake = {
startX : 3, // x
startY : 0, // y
currOri : 'right', //
ori : [['left' , 'right'] , ['up' , 'down']], //
oriss : ['left' , 'right' , 'up' , 'down'], // ， ， canChangeOri
mes : [{x : 3 , y : 0} , {x : 2 , y : 0} , {x : 1 , y : 0}], // ， 3
//
//
add : function(){
//
var last = this.mes[this.mes.length - 1]; //
var plast = this.mes[this.mes.length - 2]; //
var px = last.x - plast.x;
var py = last.y - plast.y; // ，
//
var newEle = {x : last.x + px , y : last.y + py}; //
this.mes.push(newEle); //
},
// ， ，
moveup : function(){
var pre = this.mes[0]; // ，
this.mes[0] = {x : pre.x , y : pre.y - 1}; //
this.move(pre); //
},
movedown : function(){
var pre = this.mes[0];
this.mes[0] = {x : pre.x , y : pre.y + 1};
this.move(pre);
},
moveleft : function(){
var pre = this.mes[0];
this.mes[0] = {x : pre.x - 1 , y : pre.y};
this.move(pre);
},
moveright : function(){
var pre = this.mes[0];
this.mes[0] = {x : pre.x + 1 , y : pre.y};
this.move(pre);
},
//
move : function(pre){// ，
var tmp;
for(var i = 1 ; i < this.mes.length ; i++){ //
tmp = this.mes[i];
this.mes[i] = pre;
pre = tmp;
} // ，
},
//
changeOri : function(ori){
if(this.oriss.indexOf(ori) == -1){ //
return;
}
if(!this.canChangeOri(ori)){ //
return;
}
this.currOri = ori; // ，
},
//
canChangeOri : function(ori){ // ：left
if(ori == this.currOri){ // ，
return false;
}
var oris = null;
for(var i in this.ori){ //
if(this.ori[i].indexOf(this.currOri) != -1){
oris = this.ori[i];
break;
}
}
if(oris.indexOf(ori) != -1){
return false;
}
return true;
},
//
isCrashSelf : function(){
var head = this.mes[0]; //
for(var i = 1 ; i < this.mes.length ; i++){ //
if(this.mes[i].x == head.x && this.mes[i].y == head.y){ //
return true;
}
}
return false;
},
//
isCrashWell : function(width , height){ //
var head = this.mes[0]; //
if(head.x < 0 || head.y < 0){ //
return true;
}
if(head.x > (width - 1) || head.y > (height - 1)){ //
return true;
}
return false;
},
//
handleAdd : function(){
var head = this.mes[0]; //
if(head.x == point.x && head.y == point.y){ // ，
this.add(); //
getPoint(); //
setPoint(); //
score++; //
s.innerHTML = score; //
}
}
}
ステップ4では、食べ物のコードについて、ここではオブジェクト向けを使用していません.
//
function getPoint(){
point.x = Math.floor(Math.random(0 , mwid)*60);
point.y = Math.floor(Math.random(0 , mhei)*60);
}
//
function setPoint(){
c.rect(point.x * unit , point.y * unit , unit , unit);
}
第五歩、蛇を描く、スクリーンをクリアするコード、蛇を描くコードは自分で蛇の対象にカプセル化することができて、簡単ですよ.
//
function setShake(){
for(var i = 0 ; i < shake.mes.length ; i++){
c.fullStyle = '#ffffff';
c.lineStyle = '#000000';
c.rect(shake.mes[i].x * unit , shake.mes[i].y * unit , unit ,unit);
}
c.stroke();
}
//
function clear(){
c.clearRect(0 , 0 , mWidth , mHeight);
}
最後に、ゲームとキーボードのコードの傍受を開始しますよ.
//
function startGame(){
clearInterval(window.looper); //
//
shake.mes = [{x : 3 , y : 0} , {x : 2 , y : 0} , {x : 1 , y : 0}];
shake.currOri = 'right';
c.beginPath(); //
getPoint(); //
setPoint();
setShake(); //
//
c.stroke();
//
window.looper = setInterval(function(){
var method = 'move' + shake.currOri + '()'; //
eval('shake.' + method); //
clear(); //
c.beginPath(); //
shake.handleAdd(); //
setPoint(point); //
setShake(); //
if(shake.isCrashWell(mwid , mhei)){ // ， 。 shake.isCrashSelf 。
clearInterval(window.looper);
console.log('you die');
alert('you die , and your score is ' + score);
}
} , 200);
}
//
window.onkeyup = function(key){
var ori = '';
switch(key.keyCode){
case 65:
ori = 'left';
break;
case 68:
ori = 'right';
break;
case 87:
ori = 'up';
break;
case 83:
ori = 'down';
break;
}
if(ori == ''){
return;
}
//
shake.changeOri(ori);
}
ヘビを貪るコードは実際には非常に簡単で、複雑なマトリクスの変幻を使わず、各動作はゲームの住循環の中で描画され、図形を描画し、操作対象の状態と分けられ、実際には最も簡単なゲームエンジンでもある.皆さんにヒントを与えてほしいです.コードは詳しくても、少しも持っていないので、コードをよく見て、実際に書かなければなりません.小さな宿題を残して、この蛇を食いしん坊にする.1.食べ物を対象にする.2.描画方法もオブジェクトにカプセル化します.これにより、ゲームのメインサイクルで描画方法を呼び出すだけでよい.
本文がみんなに啓発することを望んで、goodバイ.