スネークゲームのアイデアを実現するためのJavaScript

JavaScriptゲームSnakeの実装アイデア（完全なコード実装）を参考までに説明します。具体的な内容は次のとおりです。

効果プロセス

1.まずキャンバスを操作する必要があります

<!doctypehtml>
<html>
<ヘッド>
<メタ文字セット="utf-8">
<title>ヘビ</title>
</head>
 
<本文>
 <canvas id="canvas"></canvas> <!-- 操作するキャンバス -->
 <input type="button" value="ゲームを開始" /><!-- ゲーム開始ボタン -->
<スクリプト>
//要素を取得する var canvas = document.getElementById("canvas"); //操作したいキャンバスを見つける
var context = canvas.getContext("2d"); // キャンバス上の操作環境が 2d であることを指定します
var but = document.getElementsByTagName("input")[0]; //スタートボタンを見つける</script>

2. 初期化中

canvas.width = 500; //キャンバスの幅を定義します canvas.height = 500; //キャンバスの高さを定義します canvas.style.border = "5px solid #000"; //キャンバスの境界線を定義します var times = 100; //デフォルトの時間 200 ミリ秒 var long = 10; //歩幅に対する蛇の体の数 var x = y =8; //蛇の初期座標 var direction = 3; // 1 上 2 右 3 下 0 左 var size = 8; //蛇の各動きの長さ (歩幅)
var map = []; // ヘビの各動きの座標を記録するために使用されます var foodx = 0; // 食べ物の初期 X 軸座標 var foody = 0; // 食べ物の初期 Y 軸座標 var onOff = true; 
var foodT = true;
var タイマー = null;

3. 方向に応じてヘビの座標を制御し、ヘビの座標がキャンバスの境界を超えているかどうかを判断し、ヘビが自分自身に触れたかどうかを判断します。

 //方向に応じてヘビの座標を制御する switch(direction){
 
        ケース 1: y = y - size; break; //大文字 2: x = x + size; break; //右 ケース 3: y = y + size; break; //小文字 0: x = x - size; break; //左}
 
    // ヘビの座標がキャンバスの境界を超えているかどうかを判断します。超えている場合は、壁衝突プロンプトが表示され、ゲームが終了します if(x>500 || x<0 || y>500 || y<0){
 
// alert("壁にぶつかりました! 挑戦し続けてください...");
        ウィンドウの位置を再読み込みします。   
    }
 
    //ヘビがあなたに触れたかどうかを判断します。ヘビがあなたに触れた場合はゲームが終了します for(var i=0; i<map.length; i++){
        if(parseInt( map[i].x ) == x && parseInt( map[i].y ) == y){
// alert("あなたは自分自身を殴って死にました！ 挑戦し続けてください...");
            window.location.reload(); // 再読み込み}
    }

4. 次に蛇を描きます

//蛇を描く if(map.length>long){ 
        var cl = map.shift();
        コンテキストをクリアする矩形(cl['x'],cl['y'],サイズ,サイズ)。
    }
    map.push({'x':x,'y':y}); 
    context.fillStyle = "#777"; // ヘビの色を塗りつぶす context.fillRect(x,y,size,size); // ヘビを描く

5. 食べ物の座標がヘビの座標と等しいとき（ヘビが食べ物を食べる）

//食べ物の座標がヘビの座標と等しいと判断した場合（ヘビが食べ物を食べる）
    foodx*8 == x && foody*8 == y の場合
        food(); // 食べ物をもう一度描画します long++; // ヘビの長さが増加します times = times - 10; // 速度を上げます clearInterval(timer);
        オンオフ = true;
        setTimeout(goto,times); //新しいラウンドを開始する}

6.食べ物のランダムな表示座標を決定し、食べ物を描画する

//食べ物のランダムな表示座標を決定し、食べ物を描画する function food(){
    foodx = Math.ceil(Math.random()*40); //X軸上の食べ物のランダム座標 foody = Math.ceil(Math.random()*40); //Y軸上の食べ物のランダム座標 context.fillStyle = "mediumvioletred"; //食べ物の色を塗りつぶす context.fillRect(foodx*8,foody*8,8,8); //食べ物を描画する }

7. 方向キーを押す音を聞いて、ヘビが動いている方向を確認します。

// 押された方向キーを聞いてスネークの方向を取得します document.onkeydown = function(ev){
    var ev = ev || イベント;
    var cod = ev.keyCode - 37;
 
    スイッチ(cod){
        case 1: direction = 1; break; //上 case 2: direction = 2; break; //右 case 3: direction = 3; break; //下 case 0: direction = 0; break; //左 }   
}

完全なコード実装

<!doctypehtml>
<html>
<ヘッド>
<メタ文字セット="utf-8">
<title>ヘビ</title>
</head>
 
<本文>
 <canvas id="canvas"></canvas> <!-- 操作するキャンバス -->
 <input type="button" value="ゲームを開始" /><!-- ゲーム開始ボタン -->
<スクリプト>
//要素を取得する var canvas = document.getElementById("canvas"); //操作したいキャンバスを見つける
var context = canvas.getContext("2d"); // キャンバス上の操作環境が 2d であることを指定します
var but = document.getElementsByTagName("input")[0]; //スタートボタンを見つける//初期化 canvas.width = 500; //キャンバスの幅を定義する canvas.height = 500; //キャンバスの高さを定義する canvas.style.border = "5px solid #000"; //キャンバスの境界線を定義する var times = 100; //デフォルトの時間 200 ミリ秒 var long = 10; //歩幅に対する蛇の体の数 var x = y =8; //蛇の初期座標 var direction = 3; // 1 上 2 右 3 下 0 左 var size = 8; //蛇の各動きの長さ (歩幅)
var map = []; // ヘビの各動きの座標を記録するために使用されます var foodx = 0; // 食べ物の初期 X 軸座標 var foody = 0; // 食べ物の初期 Y 軸座標 var onOff = true; 
var foodT = true;
var タイマー = null;
関数スター(){
 
    //方向に応じてヘビの座標を制御する switch(direction){
 
        ケース 1: y = y - size; break; //大文字 2: x = x + size; break; //右 ケース 3: y = y + size; break; //小文字 0: x = x - size; break; //左}
 
    // ヘビの座標がキャンバスの境界を超えているかどうかを判断します。超えている場合は、壁衝突プロンプトが表示され、ゲームが終了します if(x>500 || x<0 || y>500 || y<0){
 
// alert("壁にぶつかりました! 挑戦し続けてください...");
        ウィンドウの位置を再読み込みします。   
    }
 
    //ヘビがあなたに触れたかどうかを判断します。ヘビがあなたに触れた場合はゲームが終了します for(var i=0; i<map.length; i++){
        if(parseInt( map[i].x ) == x && parseInt( map[i].y ) == y){
// alert("あなたは自分自身を殴って死にました！ 挑戦し続けてください...");
            window.location.reload(); // 再読み込み}
    }
 
    //蛇を描く if(map.length>long){ 
        var cl = map.shift();
        コンテキストをクリアする矩形(cl['x'],cl['y'],サイズ,サイズ)。
    }
    map.push({'x':x,'y':y}); 
    context.fillStyle = "#777"; // ヘビの色を塗りつぶす context.fillRect(x,y,size,size); // ヘビを描画する // 餌の座標がヘビの座標と等しいとき (ヘビが餌を食べる)
    foodx*8 == x && foody*8 == y の場合
        food(); // 食べ物をもう一度描画します long++; // ヘビの長さが増加します times = times - 10; // 速度を上げます clearInterval(timer);
        オンオフ = true;
        setTimeout(goto,times); //新しいラウンドを開始する}
 
 
}
 
//食べ物のランダムな表示座標を決定し、食べ物を描画する function food(){
    foodx = Math.ceil(Math.random()*40); //X軸上の食べ物のランダム座標 foody = Math.ceil(Math.random()*40); //Y軸上の食べ物のランダム座標 context.fillStyle = "mediumvioletred"; //食べ物の色を塗りつぶす context.fillRect(foodx*8,foody*8,8,8); //食べ物を描画する }
//ゲームを開始する function goto(){
    if(オンオフ){
        タイマー = setInterval(star,times);
        オンオフ = false;
    }
    if(foodT){
        食べ物（）;
        食べ物T = false;
    }   
}
//ボタンをクリックしてゲームを開始しますbut.onclick = goto;//ボタンをクリックしてゲームを開始します//方向キーが押された方向を聞いて、ヘビが移動する方向を取得しますdocument.onkeydown = function(ev){
    var ev = ev || イベント;
    var cod = ev.keyCode - 37;
 
    スイッチ(cod){
        case 1: direction = 1; break; //上 case 2: direction = 2; break; //右 case 3: direction = 3; break; //下 case 0: direction = 0; break; //左 }   
}
</スクリプト>
</本文>
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: