canvas+js簡単なヘビ食いゲームを実現(進級編)
10860 ワード
+jsで簡単なヘビを食べるゲームを実現することによって、私たちは基本的なヘビを食べるゲームを実現し、ヘビを食べて果実を移動し、食べることができますが、ヘビは今多くのバージョンに多かれ少なかれ内容を追加しています.今日、私は以上のブログを基礎に、ヘビを食べるゲームにいくつかの新しい内容を追加します.容器貫通、障害物の設置、道具の設置.
まず、前のブログの長さと幅が10*10の配列は、より多くの内容を追加するために、ここではまず配列を20*20に拡張します.
これまで実装されていたヘビ食いゲームでは、ヘビを4つぶつけた後に失敗することが多かったが、多くのヘビ食いゲームでは、実は反対方向に現れながら、この効果を実現するために、また異なる人の好みを満たすために、つまりゲームでぶつけたときに失敗するモードと反対方向になるモードを設定し、まずhtmlに対応する選択ボタンを追加することができる.(ここでは自分でゲームのトップページを設定し、各設定とゲーム開始インタフェースの間でジャンプすることができます.ここではジャンププロセスのjsコードは書かれていません)
ここでは、ゲームインタフェースに現在のスコアを表示する追加を行い、以下で別の効果を実現します.
次に、どのラジオボタンが選択されているかを判断することで、現在のモードを判断します.小蛇が一歩一歩動く方法を書き直す.
ここでdocument.getElementsByTagName('input')[1].checkedは、貫通モードが選択されているかどうかを判断し、そうでなければtrueを返し、そうでなければfalseを返します.ヘビの次のステップがコンテナ内にある場合にのみ、次のステップに移動できる条件に加えて、貫通モードを追加するか、選択しました.つまり、ヘビが次のステップでコンテナから出る場合、貫通モードが選択されている場合は、次のステップに進むことができます.そして、次に貫通モードにおいて小蛇の頭部の位置が容器を超えているか否かを判断し、もし、容器の反対側から現れ、これにより片側の縁から反対側に抜ける機能が完了する.
ここで、私は果実を食べるたびに点数を10加算し、後で蛇の長さを変えるので、蛇の長さを速度変化の判断基準とせず、rankを速度変化の判断基準とし、速度変化の方法を書き換えます.
次に障害物の出現に着手し,果実,蛇の出現と同様に,まず配列に障害物の位置を表示し,canvasキャンバスに描く.まず、何枚かの地図を選択できるように、まず地図の中の障害物の位置を配列に保存します.
配列に障害物のx,y座標を保存し,配列を遍歴することで対応する位置を1とし,描画方法で対応する配列を1としたときに描いた内容を書き出した.小蛇の移動中に障害物にぶつかって失敗したと判断する条件、すなわち配列の次の位置を判断する数字が1であるかどうかを判断する.ここでは失敗した処理を1つの方法にカプセル化する.
次に、地図を選択するためにhtmlに対応する内容を追加しますが、新しい地図を追加するたびに画像を再追加する場合は、地図の障害物の位置を変更すると、画像全体を再描画しなければなりません.このような面倒を避けるためにhtmlにdivを追加してcanvasラベルを追加し、jsで障害物の配列を巡ることで、このdivに各地図に対応するcanvasラベルを追加し、イベントを追加して対応するcanvasラベルを選択する際に対応する地図を使用します.
最後に、道具の設定を完了します.私はここにいくつかの比較的簡単に実現できる道具を設置して、加速して、減速して、長さは短くなって、次の食べた果実の点数は倍になります.まずアイテムをランダムに表示するには、4つのアイテムに対応する配列の数字を5,6,7,8に設定し、アイテムをマークするときに乱数Mathを使用します.floor(Math.random(*)*4)+5は、ランダムに5-8の数字を取得し、配列内の対応する位置にその数字をマークします.そしていつ道具を出現させるかを判断し、ここでrankが5の倍数であるか否かを判断して道具を追加するか否かを判断し、小蛇移動に次のステップ5-8で対応する処理方式を追加する.速度の増減はsnakeStateを変える.vの値は効果を達成する.長さが短くなるには、短くなった後の余分な長さの位置に対応する配列を0とマークし、蛇の配列の長さを変更します.次の果実の点数を2倍にして、私は1つのブール型変数でその道具を食べるかどうかを判断して、もし、次の果実の点数を2倍にして、そのブール型変数をリセットします.
ここまで3つの机能はすでに完成して、この博文がみんなに役に立つことを望んで、もし文章の中でどんな间违いが现れたら、万望各位大神は本白を知らせて、とても感谢します.
まず、前のブログの長さと幅が10*10の配列は、より多くの内容を追加するために、ここではまず配列を20*20に拡張します.
var numbers=new Array(20);
for(var i=0;iこれまで実装されていたヘビ食いゲームでは、ヘビを4つぶつけた後に失敗することが多かったが、多くのヘビ食いゲームでは、実は反対方向に現れながら、この効果を実現するために、また異なる人の好みを満たすために、つまりゲームでぶつけたときに失敗するモードと反対方向になるモードを設定し、まずhtmlに対応する選択ボタンを追加することができる.(ここでは自分でゲームのトップページを設定し、各設定とゲーム開始インタフェースの間でジャンプすることができます.ここではジャンププロセスのjsコードは書かれていません)
ここでは、ゲームインタフェースに現在のスコアを表示する追加を行い、以下で別の効果を実現します.
次に、どのラジオボタンが選択されているかを判断することで、現在のモードを判断します.小蛇が一歩一歩動く方法を書き直す.
//
var rank=0;
//
function snakePerMove(x,y)
{
if((snake[0].y+y>=0&&snake[0].y+y<=19&&snake[0].x+x>=0&&snake[0].x+x<=19)||(document.getElementsByTagName('input')[1].checked))
{
numbers[snake[snake.length-1].y][snake[snake.length-1].x]=0;
if(snake[0].y+y>=0&&snake[0].y+y<=19&&snake[0].x+x>=0&&snake[0].x+x<=19){
if(numbers[snake[0].y+y][snake[0].x+x]==4)
{
markApple();
rank++;
score+=10;
myScore.innerHTML=score;
snake[snake.length]={x:'',y:''};
}
for(var i=snake.length-2;i>=0;i--)
{
snake[i+1].x=snake[i].x;
snake[i+1].y=snake[i].y;
}
if((document.getElementsByTagName('input')[1].checked)&&!(snake[0].y+y>=0&&snake[0].y+y<=19&&snake[0].x+x>=0&&snake[0].x+x<=19)){//
if(snake[0].y+y>19)
{
snake[0].y=0;
}
if(snake[0].y+y<0)
{
snake[0].y=19;
}
if(snake[0].x+x>19)
{
snake[0].x=0;
}
if(snake[0].x+x<0)
{
snake[0].x=19;
}
}
else{
snake[0].x=snake[0].x+x;
snake[0].y=snake[0].y+y;
}
}
}ここでdocument.getElementsByTagName('input')[1].checkedは、貫通モードが選択されているかどうかを判断し、そうでなければtrueを返し、そうでなければfalseを返します.ヘビの次のステップがコンテナ内にある場合にのみ、次のステップに移動できる条件に加えて、貫通モードを追加するか、選択しました.つまり、ヘビが次のステップでコンテナから出る場合、貫通モードが選択されている場合は、次のステップに進むことができます.そして、次に貫通モードにおいて小蛇の頭部の位置が容器を超えているか否かを判断し、もし、容器の反対側から現れ、これにより片側の縁から反対側に抜ける機能が完了する.
ここで、私は果実を食べるたびに点数を10加算し、後で蛇の長さを変えるので、蛇の長さを速度変化の判断基準とせず、rankを速度変化の判断基準とし、速度変化の方法を書き換えます.
//
function changeV(){
if(rank==6)
snakeState.v=400;
else if(rank==10)
snakeState.v=350;
else if(rank==15)
snakeState.v=300;
}次に障害物の出現に着手し,果実,蛇の出現と同様に,まず配列に障害物の位置を表示し,canvasキャンバスに描く.まず、何枚かの地図を選択できるように、まず地図の中の障害物の位置を配列に保存します.
var barriers=[
[],//
[
{x:8,y:10},
{x:9,y:10},
{x:10,y:10},
{x:11,y:10},
{x:12,y:10},
{x:10,y:8},
{x:10,y:9},
{x:10,y:11},
{x:10,y:12}
],
[
{x:6,y:10},
{x:7,y:10},
{x:8,y:10},
{x:9,y:10},
{x:10,y:10},
{x:11,y:10},
{x:12,y:10},
{x:13,y:10},
{x:14,y:10},
{x:6,y:6},
{x:7,y:6},
{x:8,y:6},
{x:9,y:6},
{x:10,y:6},
{x:11,y:6},
{x:12,y:6},
{x:13,y:6},
{x:14,y:6},
{x:6,y:14},
{x:7,y:14},
{x:8,y:14},
{x:9,y:14},
{x:10,y:14},
{x:11,y:14},
{x:12,y:14},
{x:13,y:14},
{x:14,y:14}
]
];配列に障害物のx,y座標を保存し,配列を遍歴することで対応する位置を1とし,描画方法で対応する配列を1としたときに描いた内容を書き出した.小蛇の移動中に障害物にぶつかって失敗したと判断する条件、すなわち配列の次の位置を判断する数字が1であるかどうかを判断する.ここでは失敗した処理を1つの方法にカプセル化する.
//
function markBarrier(index){
for(var i=0;i0){
if((snake[0].y==0&&document.getElementsByTagName('input')[0].checked)||numbers[snake[0].y-1][snake[0].x]==3||numbers[snake[0].y-1][snake[0].x]==1)
{
falseHandle();
}
}
if((snake[0].y-1<0)&&(document.getElementsByTagName('input')[0].checked))
{
falseHandle();
}
snakePerMove(0,-1);
resetRct();
}
function snakeMoveDown(){//
if(snakeState.d=='down'){
setDown=setTimeout(function(){snakeMoveDown()},snakeState.v);
}
if(snake[0].y+1<19){
if((snake[0].y==19&&document.getElementsByTagName('input')[0].checked)||numbers[snake[0].y+1][snake[0].x]==3||numbers[snake[0].y+1][snake[0].x]==1)
{
falseHandle();
}
}
if((snake[0].y+1>19)&&(document.getElementsByTagName('input')[0].checked))
{
falseHandle();
}
snakePerMove(0,1);
resetRct();
}
function snakeMoveRight(){
if(snakeState.d=='right'){
setRight=setTimeout(function(){snakeMoveRight()},snakeState.v);
}
if(snake[0].x+1<19){
if((snake[0].x==19&&document.getElementsByTagName('input')[0].checked)||numbers[snake[0].y][snake[0].x+1]==3||numbers[snake[0].y][snake[0].x+1]==1)
{
falseHandle();
}
}
if((snake[0].x+1>19)&&(document.getElementsByTagName('input')[0].checked))
{
falseHandle();
}
snakePerMove(1,0);
resetRct();
}
function snakeMoveLeft(){
if(snakeState.d=='left'){
setLeft=setTimeout(function(){snakeMoveLeft()},snakeState.v);
}
if(snake[0].x-1>0){
if((snake[0].x==0&&document.getElementsByTagName('input')[0].checked)||numbers[snake[0].y][snake[0].x-1]==3||numbers[snake[0].y][snake[0].x-1]==1)
{
falseHandle();
}
}
if((snake[0].x-1<0)&&(document.getElementsByTagName('input')[0].checked))
{
falseHandle();
}
snakePerMove(-1,0);
resetRct();
} 次に、地図を選択するためにhtmlに対応する内容を追加しますが、新しい地図を追加するたびに画像を再追加する場合は、地図の障害物の位置を変更すると、画像全体を再描画しなければなりません.このような面倒を避けるためにhtmlにdivを追加してcanvasラベルを追加し、jsで障害物の配列を巡ることで、このdivに各地図に対応するcanvasラベルを追加し、イベントを追加して対応するcanvasラベルを選択する際に対応する地図を使用します.
//
var picChoose=0;
//
var minLength=5;
//
markBarrier(picChoose);
//
function setMaps(){
var txt=document.createTextNode(' canvas， ');
var canvasArray=[];
var contextArray=[];
for(var i=0;i最後に、道具の設定を完了します.私はここにいくつかの比較的簡単に実現できる道具を設置して、加速して、減速して、長さは短くなって、次の食べた果実の点数は倍になります.まずアイテムをランダムに表示するには、4つのアイテムに対応する配列の数字を5,6,7,8に設定し、アイテムをマークするときに乱数Mathを使用します.floor(Math.random(*)*4)+5は、ランダムに5-8の数字を取得し、配列内の対応する位置にその数字をマークします.そしていつ道具を出現させるかを判断し、ここでrankが5の倍数であるか否かを判断して道具を追加するか否かを判断し、小蛇移動に次のステップ5-8で対応する処理方式を追加する.速度の増減はsnakeStateを変える.vの値は効果を達成する.長さが短くなるには、短くなった後の余分な長さの位置に対応する配列を0とマークし、蛇の配列の長さを変更します.次の果実の点数を2倍にして、私は1つのブール型変数でその道具を食べるかどうかを判断して、もし、次の果実の点数を2倍にして、そのブール型変数をリセットします.
//
var scoreMul=false;
//
function markProp(propRandom){
if(propRandom=='')
propRandom=Math.floor(Math.random()*4)+5;
var propX=Math.floor(Math.random()*20);
var propY=Math.floor(Math.random()*20);
if(!(numbers[propY][propX]>0))
{
numbers[propY][propX]=propRandom;
setTimeout(function(){
if(numbers[propY][propX]==propRandom)
numbers[propY][propX]=0;
},10000);// 10
}
else
markProp(propRandom);
}
//
function drawProp(Alpha,color,i,j){//Alpha
context.arc(10+(j+0.5)*perLength,10+(i+0.5)*perLength,appleR,0,2*Math.PI);
context.fillStyle=color;
context.fill();
context.closePath();
context.beginPath();
context.fillStyle='rgb(0,0,0)';//
context.textAlign='center';
context.textBaseline='middle';
context.font='18px Adobe Ming Std';
context.fillText(Alpha,10+(j+0.5)*perLength,10+(i+0.5)*perLength);
}
// ， ， ，
function drawPic(){
for(var i=0;i=0&&snake[0].y+y<=19&&snake[0].x+x>=0&&snake[0].x+x<=19)||(document.getElementsByTagName('input')[1].checked))
{
numbers[snake[snake.length-1].y][snake[snake.length-1].x]=0;
if(snake[0].y+y>=0&&snake[0].y+y<=19&&snake[0].x+x>=0&&snake[0].x+x<=19){
if(numbers[snake[0].y+y][snake[0].x+x]==4)
{
markApple();
if(rank%5==0&&rank!=0)// 7
{
markProp('');
}
if(!scoreMul)//
score+=10;
else
{
score+=50;
scoreMul=false;
}
rank++;
snake[snake.length]={x:'',y:''};
myScore.innerHTML=score;
}
else if(numbers[snake[0].y+y][snake[0].x+x]==5)
{
snakeState.v=snakeState.v*1.25;// 0.8
}
else if(numbers[snake[0].y+y][snake[0].x+x]==6)
{
snakeState.v=snakeState.v*0.8;// 1.25
}
else if(numbers[snake[0].y+y][snake[0].x+x]==7)
{
for(var i=Math.ceil(snake.length/2);i=0;i--)
{
snake[i+1].x=snake[i].x;
snake[i+1].y=snake[i].y;
}
if((document.getElementsByTagName('input')[1].checked)&&!(snake[0].y+y>=0&&snake[0].y+y<=19&&snake[0].x+x>=0&&snake[0].x+x<=19)){
if(snake[0].y+y>19)
{
snake[0].y=0;
}
if(snake[0].y+y<0)
{
snake[0].y=19;
}
if(snake[0].x+x>19)
{
snake[0].x=0;
}
if(snake[0].x+x<0)
{
snake[0].x=19;
}
}
else{
snake[0].x=snake[0].x+x;
snake[0].y=snake[0].y+y;
}
}
} ここまで3つの机能はすでに完成して、この博文がみんなに役に立つことを望んで、もし文章の中でどんな间违いが现れたら、万望各位大神は本白を知らせて、とても感谢します.