canvas+js簡単なヘビの小さなゲームを実現
7777 ワード
ヘビを食いしん坊にするのは古典的なゲームとして、今でも多くの人が游んでいますが、他の人のゲームを游ぶよりも、自分のゲームを游ぶほうが达成感があります.このブログでは、+jsで简単なヘビを食いしん坊にする方法を教えています.canvasのAPIを知らない人は、canvasの基础知识を学んでから本文を読んでください.
私はまだ穴の先端に入って間もないので、何か悪いことがあったら、大神さんに指摘してください.
まず、ゲームを書くときから、簡単なhtmlファイルを書きます.ここでは美観の設定を考えません(主に本白さんは審美があまりにも悪いです.).したがってcanvasラベルは1つだけで、cssでレイアウトを考慮しません.jsでcanvasラベルを呼び出すために、canvasにid=「canvas」を追加しました.
なhtmlファイルを いた 、コアのjsファイルを き めました.まず、 に を り てます.
ろで の を する はdocumentを する.onkeydownなので、ここの キーは するASCIIコードを しており、 のキーの も です. の さは で され、snake[0]は の として、x,yは の の に する.このゲームは に の を して する に や を き、0の は を めないので、ここではまず をすべて0に します.
を した 、 たちは を するブロックを る があります.ここには な で い を き、5つのパラメータを して、ブロックの のx,y 、ブロックの 、ブロックの の の 、ブロック の の を します.
い が すると、 は たちの が を いしん にする です.
キャンバスに を するために、 の を す をマークする markSnake()を し、 の を する を り、iが0の は の 、 の の する に2、 の に3と する. を する にランダムに のx,y を し, する に する の が0 の にはその を4と し,その に する が0より きい にはその に が するという を び し, に されていない を つけるまでその を4と する.
タグ け 、drawPic()メソッドを して する に する を き、0の は しない.2の 、 の を きます.3の 、 の を きます(ここでは の と を なる で します).4の 、 を きます.( のパソコンには1 が と かれていますが、ここには の であるバリアフリーの が に かれているだけなので、1は いませんでしたが、 さんはこのようにして う を くことができます)
ここまで くと、ゲームの な が てきて、 は を かしました.ゲーム が と の を に させ、 を み ることで と を くので、 を させるには、 に されている を え、 が を べたときに の さを くすることがゲームの だと います.この をどうするか えてから、 のコードを てみましょう.
まず、 が にぶつかるかどうかを します.できない 、 の のステップが であれば、 たちは を し、 の さを やします.そうしないと、 の の の の を0とマークし、この を にします.その 、 の の ろから を し、 の の の を の の に しくし、snake[0]の を の に することで、 の を することができる. えば、 の の がsnake[{x:6,y:5},{x:5,y:5},{x:4,y:5}],{x:5,{x:4,y:5}],( が(6,5)) のステップで が べられなかった 、 ボタンを すとsnake[2]=snake[1],snake[1]=snake[0],snake[0]がxに1つ され、 がsnake[{x:7,y:5},{x:6,{x:5},{x:5,{x:5,y:5}]となり、 の シフトが される.
にキーボードイベントを してヘビの を します.
するたびに い や 、 を する があるので、 、これらの を じ resetDraw()に れます.
キーを した 、まず した が が している (snakeState.d)またはその に がっているかどうかを し、もしそうであれば の を えず、そうでなければ のメソッドを び し、 の を える.ヘビが のステップで や の にぶつかると、ゲームに し、ゲームオーバーの ウィンドウをポップアップし、キーボードイベントを します.
ここでは4つのコーナーで に2つの キーを すと2つの ウィンドウがポップアップされるので、judgeFalseが ウィンドウがポップアップされたかどうかを し、 したときにポップアップウィンドウが1つしかないように しました.
ここまでの は に わりますが、もちろん の で、 が さが に すると が くなり、 にはいつ し、どれだけ くなるかは、みんなで で きます.
の が さんに に つことを んで、 が の を して、みんなが に することを んでいます.
私はまだ穴の先端に入って間もないので、何か悪いことがあったら、大神さんに指摘してください.
まず、ゲームを書くときから、簡単なhtmlファイルを書きます.ここでは美観の設定を考えません(主に本白さんは審美があまりにも悪いです.).したがってcanvasラベルは1つだけで、cssでレイアウトを考慮しません.jsでcanvasラベルを呼び出すために、canvasにid=「canvas」を追加しました.
なhtmlファイルを いた 、コアのjsファイルを き めました.まず、 に を り てます.
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
canvas.width=600;
canvas.height=600;
//
var left=37;
var up=38;
var right=39;
var down=40;
var numbers=new Array(10);
for(var i=0;iろで の を する はdocumentを する.onkeydownなので、ここの キーは するASCIIコードを しており、 のキーの も です. の さは で され、snake[0]は の として、x,yは の の に する.このゲームは に の を して する に や を き、0の は を めないので、ここではまず をすべて0に します.
を した 、 たちは を するブロックを る があります.ここには な で い を き、5つのパラメータを して、ブロックの のx,y 、ブロックの 、ブロックの の の 、ブロック の の を します.
//
drawRct(0,0,520,10,'rgb(204,204,204)');//
drawRct(10,10,500,0,'rgba(0,0,0,0.8)');//
//
function drawRct(x,y,l,r,color)
{
context.beginPath();
context.moveTo(x+r,y);
context.lineTo(x+l-r,y);
context.arcTo(x+l,y,x+l,y+r,r);
context.lineTo(x+l,y+l-r);
context.arcTo(x+l,y+l,x+l-r,y+l,r);
context.lineTo(x+r,y+l);
context.arcTo(x,y+l,x,y+l-r,r);
context.lineTo(x,y+r);
context.arcTo(x,y,x+r,y,r);
context.fillStyle=color;
context.closePath();
context.fill();
context.stroke();
}い が すると、 は たちの が を いしん にする です.
//
function markSnake(){
for(var i=0;i0))
{
numbers[appleY][appleX]=4;
}
else
markApple();
}
// ，
function drawPic(){
for(var i=0;i キャンバスに を するために、 の を す をマークする markSnake()を し、 の を する を り、iが0の は の 、 の の する に2、 の に3と する. を する にランダムに のx,y を し, する に する の が0 の にはその を4と し,その に する が0より きい にはその に が するという を び し, に されていない を つけるまでその を4と する.
タグ け 、drawPic()メソッドを して する に する を き、0の は しない.2の 、 の を きます.3の 、 の を きます(ここでは の と を なる で します).4の 、 を きます.( のパソコンには1 が と かれていますが、ここには の であるバリアフリーの が に かれているだけなので、1は いませんでしたが、 さんはこのようにして う を くことができます)
ここまで くと、ゲームの な が てきて、 は を かしました.ゲーム が と の を に させ、 を み ることで と を くので、 を させるには、 に されている を え、 が を べたときに の さを くすることがゲームの だと います.この をどうするか えてから、 のコードを てみましょう.
//
function snakePerMove(x,y)//x,y x,y
{
if(snake[0].y+y>=0&&snake[0].y+y<=9&&snake[0].x+x>=0&&snake[0].x+x<=9)//
{
if(numbers[snake[0].y+y][snake[0].x+x]==4)//
{
markApple();//
snake[snake.length]={x:'',y:''};//
}
else
numbers[snake[snake.length-1].y][snake[snake.length-1].x]=0;
for(var i=snake.length-2;i>=0;i--)
{
snake[i+1].x=snake[i].x;
snake[i+1].y=snake[i].y;
}
snake[0].x=snake[0].x+x;
snake[0].y=snake[0].y+y;
}
}まず、 が にぶつかるかどうかを します.できない 、 の のステップが であれば、 たちは を し、 の さを やします.そうしないと、 の の の の を0とマークし、この を にします.その 、 の の ろから を し、 の の の を の の に しくし、snake[0]の を の に することで、 の を することができる. えば、 の の がsnake[{x:6,y:5},{x:5,y:5},{x:4,y:5}],{x:5,{x:4,y:5}],( が(6,5)) のステップで が べられなかった 、 ボタンを すとsnake[2]=snake[1],snake[1]=snake[0],snake[0]がxに1つ され、 がsnake[{x:7,y:5},{x:6,{x:5},{x:5,{x:5,y:5}]となり、 の シフトが される.
にキーボードイベントを してヘビの を します.
//
function resetDraw(){
context.clearRect(0,0,canvas.width,canvas.height);
drawRct(0,0,520,10,'rgb(204,204,204)');
drawRct(10,10,500,0,'rgba(0,0,0,0.8)');
markSnake();
drawPic();
}
var judgeFalse=0;//
//
function snakeMove(){
document.onkeydown=function(){//
var e=event||window.event;
if(e.keyCode==left)
{
if(snakeState.d!='right'&&snakeState.d!='left')
{
snakeState.d='left';
setLeft=setTimeout(function(){snakeMoveLeft()},snakeState.v);
}
}
if(e.keyCode==right)
{
if(snakeState.d!='right'&&snakeState.d!='left')
{
snakeState.d='right';
setRight=setTimeout(function(){snakeMoveRight()},snakeState.v);
}
}
if(e.keyCode==up)
{
if(snakeState.d!='down'&&snakeState.d!='up')
{
snakeState.d='up';
setUp=setTimeout(function(){snakeMoveUp()},snakeState.v);
}
}
if(e.keyCode==down)
{
if(snakeState.d!='down'&&snakeState.d!='up')
{
snakeState.d='down';
setDown=setTimeout(function(){snakeMoveDown()},snakeState.v);
}
}
}
}
//
function snakeMoveUp(){
if(snakeState.d=='up'){
setUp=setTimeout(function(){snakeMoveUp()},snakeState.v);
}
if(snake[0].y==0||numbers[snake[0].y-1][snake[0].x]==3)
{
clearTimeout(setUp);
clearTimeout(setRight);
clearTimeout(setDown);
clearTimeout(setLeft);
if(judgeFalse==0){
judgeFalse=1;
alert('game over');
}
document.onkeydown=null;//
}
snakePerMove(0,-1);
resetRct();
}
//
function snakeMoveDown(){
if(snakeState.d=='down'){
setDown=setTimeout(function(){snakeMoveDown()},snakeState.v);
}
if(snake[0].y==9||numbers[snake[0].y+1][snake[0].x]==3)
{
clearTimeout(setUp);
clearTimeout(setRight);
clearTimeout(setDown);
clearTimeout(setLeft);
if(judgeFalse==0){
judgeFalse=1;
alert('game over');
}
document.onkeydown=null;//
}
snakePerMove(0,1);
resetRct();
}
//
function snakeMoveRight(){
if(snakeState.d=='right'){
setRight=setTimeout(function(){snakeMoveRight()},snakeState.v);
}
if(snake[0].x==9||numbers[snake[0].y][snake[0].x+1]==3)
{
clearTimeout(setUp);
clearTimeout(setRight);
clearTimeout(setDown);
clearTimeout(setLeft);
if(judgeFalse==0){
judgeFalse=1;
alert('game over');
}
document.onkeydown=null;//
}
snakePerMove(1,0);
resetRct();
}
//
function snakeMoveLeft(){
if(snakeState.d=='left'){
setLeft=setTimeout(function(){snakeMoveLeft()},snakeState.v);
}
if(snake[0].x==0||numbers[snake[0].y][snake[0].x-1]==3)
{
clearTimeout(setUp);
clearTimeout(setRight);
clearTimeout(setDown);
clearTimeout(setLeft);
if(judgeFalse==0){
judgeFalse=1;
alert('game over');
}
document.onkeydown=null;//
}
snakePerMove(-1,0);
resetRct();
}
snakeMove();するたびに い や 、 を する があるので、 、これらの を じ resetDraw()に れます.
キーを した 、まず した が が している (snakeState.d)またはその に がっているかどうかを し、もしそうであれば の を えず、そうでなければ のメソッドを び し、 の を える.ヘビが のステップで や の にぶつかると、ゲームに し、ゲームオーバーの ウィンドウをポップアップし、キーボードイベントを します.
ここでは4つのコーナーで に2つの キーを すと2つの ウィンドウがポップアップされるので、judgeFalseが ウィンドウがポップアップされたかどうかを し、 したときにポップアップウィンドウが1つしかないように しました.
ここまでの は に わりますが、もちろん の で、 が さが に すると が くなり、 にはいつ し、どれだけ くなるかは、みんなで で きます.
//
function changeV(){
if(snake.length==6)
snakeState.v=400;
else if(snakeState.length==10)
snakeState.v=350;
else if(snakeState.v==15)
snakeState.v=300;
}
changeV();の が さんに に つことを んで、 が の を して、みんなが に することを んでいます.