この記事では、ウェブページのスネークゲームを実装するためのJavaScriptの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。 <!DOCTYPE html> <html> <head><title>ヘビ</title> </head> <本文> <キャンバスid="キャンバス" 幅="400" 高さ="400"></キャンバス> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> <スクリプト> var canv = document.getElementById("キャンバス"); var ctx = canv.getContext("2d"); var スコア = 0; //ブロックコンストラクタを定義する var Block = function (col, row, size) { 列は、 行番号 this.size=サイズ; }; //Block 関数のプロトタイプ メソッド draw を定義します。 Block.prototype.draw = 関数() { ctx.fillRect(この列*このサイズ、この行*このサイズ、このサイズ、このサイズ) } //オブジェクトsnakeを定義するvar snake = { 体:[ 新しいブロック(20,20,10) 新しいブロック(20,21,10) 新しいブロック(20,22,10) ]、 方向:"右", }; // ヘビを描画する関数を定義する snake.draw=function() { (var i=0;i<this.body.length;i++) の場合 { this.body[i].draw(); } }; snake.move = 関数() { var head = this.body[0]; if(snake.direction=="right") { var newhead = 新しいブロック (head.col + 1、head.row、head.size) } if(snake.direction == "左") { var newhead = 新しいブロック(head.col-1、head.row、head.size); } if(snake.direction=="上") { var newhead = 新しいブロック (head.col、head.row-1、head.size) } if(snake.direction=="down") { var newhead = 新しいブロック (head.col、head.row+1、head.size) } 新しいヘッド列<0 || 新しいヘッド列>39 の場合 { 間隔をクリアします(間隔ID); ゲームオーバー(); } 新しいヘッド行が<0 || 新しいヘッド行が>39の場合 { 間隔をクリアします(間隔ID); ゲームオーバー(); } (var i=0;i<this.body.length;i++) の場合 { this.body[i].col==newhead.col &&this.body[i].row==newhead.row の場合 { 間隔をクリアします(間隔ID); ゲームオーバー(); } } this.body.unshift(新しいヘッド); newhead.col==apple.posX &&newhead.row==apple.posY の場合 { スコア=スコア+100; (真)の間 { var checkApple =false; apple.posX=Math.floor(Math.random()*40); apple.posY=Math.floor(Math.random()*40); (var i=0; i<this.body.length; i++) の場合 { this.body[i].col==apple.posX &&this.body[i].row==apple.posY の場合 checkApple=true; } if(!checkApple) 壊す; } } それ以外{ this.body.pop(); } }; //リンゴオブジェクトを作成する var apple={ posX:Math.floor(Math.random()*40)、 posY:Math.floor(Math.random()*40)、 サイズR:5 } //リンゴを描く function apple.draw=function() { ctx.fillStyle="緑"; ctx.beginPath(); ctx.arc(this.posX*10+5,this.posY*10+5,5,0,Math.PI*2,false); ctx.fill(); ctx.fillStyle="黒"; }; //終了 var gameover = function() { ctx.font="60px Comic Sans MS"; ctx.textAlign="中央"; ctx.textBaseline="中央"; ctx.fillText("ゲームオーバー!",200,200) }; // タイミング関数 var intervalId = setInterval (function () { ctx.clearRect(0,0,400,400); ctx.font="20px Arial"; ctx.fillText("スコア:"+score,5,15); スネークを描画します。 スネークを移動します。 apple.draw(); ctx.strokeRect(0,0,400,400); },200); //スネークキーコントロール $("body").keydown(function(event) { console.log(イベント.キーコード); if(event.keyCode==37 &&snake.direction!="right") { snake.direction="左"; } if(event.keyCode==38 &&snake.direction!="down") { snake.direction="上"; } if(event.keyCode==39 &&snake.direction!="left") { snake.direction="右"; } if(event.keyCode==40 &&snake.direction!="上") { snake.direction="下"; } } ); </スクリプト> </本文> </html> 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: Raspberry Pi 4 に Ubuntu 19.10 をインストールするための詳細なチュートリアル
広告を閉じるまでのカウントダウンを実装するために JavaScript を使用するまだフロントエンド...
序文プロジェクトのリリースでは、常に特定の状況に応じたパッケージ化が必要です。Angular CLI...
1. 概要MySQL データベースの日常的な操作とメンテナンスにおいて、ユーザーが誤ってデータを削...
誤って source.list の内容を変更し、一連のエラーが発生した場合は、デフォルトのソース フ...
まず、ページ分割クエリを使用する理由を明確にする必要があります。データが膨大なため、すべてのデータを...
jsx/tsxファイルを直接作成できます今回のプロジェクト構成は以下のとおりです。 vueファイルで...
序文パスワードを忘れることは、よく遭遇する問題です。MySQL または MariaDB データベース...
IPツールを取得 lombok.extern.slf4j.Slf4j をインポートします。 org....
Mysql マスタースレーブ サービスの実装例を構成する### メインデータベースmy.cnfを構成...
1. 入力・貼り付けできるのは中国語のみ<input onkeyup="value=...
Oracle データベースから MySQL データベースへの移行では、Oracle データベース モ...
目次序文1. batがjsを実行する2. ターミナルにバージョン番号を入力してパッケージ化コマンドを...
エラー: Connection to blog0@localhost failed. [08001]...
実施原則メイングラフィックは、背景と前景の 2 つの要素で構成されています。次のサンプルコードでは、...
この記事では、音楽プレーヤーを実装するためのVue.jsの具体的なコードを参考までに共有します。具体...