キャンバス ゲーム 貪欲な蛇
直接上效果图：
这个贪食蛇关键地方在于数组，它的长度增加其实是数组的增长，就是数组的向前追加等操作，核心就是数组的操作。
完整代码：
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="240" height="240" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
//r数组表示蛇 ； co表示蛇前进的方向，默认向下 ； e表示食物
var ctx = document.getElementById("myCanvas").getContext("2d"),
r = [{
x: 10,
y: 9
}, {
x: 10,
y: 8
}],
co = 40,
e = null;
/*为了避免按键太快，使定时器没有反应过来，出现bug*/
var offOn=true;
/*这是关卡的开关*/
var offOn01=true;
/*关卡倒计开始值*/
var num=3;
//循环，间隔为200毫秒
var timer=setInterval(doMove, 200);
function doMove() {
//给蛇加上阴影效果
ctx.shadowBlur = 20, ctx.shadowColor = "black";
//游戏是否已经结束
if (check(r[0], 0) || r[0].x < 0 || r[0].x >= 24 || r[0].y < 0 || r[0].y >= 24) return;
//如果有食物，则根据蛇前进的方向判断是否吃到了食物，并且将蛇数组中最后一个元素换到首部
e != null && ((co == 40 && r[0].x == e.x && r[0].y + 1 == e.y) ||
(co == 38 && r[0].x == e.x && r[0].y - 1 == e.y) ||
(co == 37 && r[0].x - 1 == e.x && r[0].y == e.y) ||
(co == 39 && r[0].x + 1 == e.x && r[0].y == e.y)) ?
(r.unshift(e), e = null, r.unshift(r.pop())) : (r.unshift(r.pop()));
//根据方向，重新设定蛇数组首元素的坐标，从而进行移动
(co == 40 || co == 38) ? (r[0].x = r[1].x, r[0].y = r[1].y + (co == 40 ? 1 : -1)) : (r[0].x = r[1].x + (co == 39 ? 1 : -1), r[0].y = r[1].y);
//清空屏幕
ctx.clearRect(0, 0, 240, 240);
//如果有食物，则绘制食物
if (e) ctx.fillRect(e.x * 10, e.y * 10, 10, 10);
//绘制蛇
for (var i = 0; i < r.length; i++) ctx.fillRect(r[i].x * 10, r[i].y * 10, 10, 10);
//如果没有食物，则在随机位置上加入一粒食物
while (e == null || check(e)) e = {
y: (Math.floor(Math.random() * 24)),
x: (Math.floor(Math.random() * 24))
};
/*分数*/
ctx.shadowBlur=0;
ctx.font="12px Arial";
ctx.fillText("分数:"+(r.length - 2),10,10);
ctx.textBaseline="top";
//判断游戏是否结束
if (check(r[0], 0) || r[0].x < 0 || r[0].x >= 24 || r[0].y < 0 || r[0].y >= 24)
alert("game over\n你获得：" + (r.length - 2) + "分");
/*设置一个关卡，就是分数到10分后进入下一关，只设置一个关卡*/
if((r.length-2)==10){
if(offOn01){
clearInterval(timer);
offOn01=false;
var timer0=setInterval(function(){
if(num<=0){
clearInterval(timer0);
}
ctx.clearRect(0, 0, 240, 240);
ctx.font="20px Arial";
ctx.textBaseline="middle";
ctx.textAlign="center";
ctx.fillText("下一关:"+num,120,120);
num=--num<0?0:num;
},1000);
setTimeout(function(){
timer=setInterval(doMove, 100);
},4000);
}
}
offOn=true;
}
//加入键盘事件，用方向键来控制蛇前进的方向
/*(Math.abs(event.keyCode - co) != 2判断不能向后走
left:37,top:38,right:39,bottom:40
反方向刚刚好是相差2
*/
document.onkeydown = function(event) {
if(offOn){
offOn=false;
co = event.keyCode >= 37 &&
event.keyCode <= 40 &&
(Math.abs(event.keyCode - co) != 2) ? event.keyCode : co;
}
}
//判断指定位置是否与蛇重叠
/*这是为了检测自己撞到自己或检测食物在贪食蛇里面的*/
function check(e, j) {
for (var i = 0; i < r.length; i++)
if (j != i && r[i].x == e.x && r[i].y == e.y) return true;
return false;
}</script>
</body>
</html>可以直接复制上面代码看效果；
上面的核心代码：
//如果有食物，则根据蛇前进的方向判断是否吃到了食物，并且将蛇数组中最后一个元素换到首部
e != null && ((co == 40 && r[0].x == e.x && r[0].y + 1 == e.y) ||
(co == 38 && r[0].x == e.x && r[0].y - 1 == e.y) ||
(co == 37 && r[0].x - 1 == e.x && r[0].y == e.y) ||
(co == 39 && r[0].x + 1 == e.x && r[0].y == e.y)) ?
(r.unshift(e), e = null, r.unshift(r.pop())) : (r.unshift(r.pop()));
//根据方向，重新设定蛇数组首元素的坐标，从而进行移动
(co == 40 || co == 38) ? (r[0].x = r[1].x, r[0].y = r[1].y + (co == 40 ? 1 : -1)) : (r[0].x = r[1].x + (co == 39 ? 1 : -1), r[0].y = r[1].y);这是贪食蛇的核心代码，就是数组长度添加，和数组里的值怎么改变。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7555
15
1382
52
83
11
28
96
＆lt; Progress＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:34 PM
この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合
＆lt; datalist＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:33 PM
この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。
＆lt; meter＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:35 PM
この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex
ビューポートメタタグとは何ですか？レスポンシブデザインにとってなぜそれが重要なのですか？
Mar 20, 2025 pm 05:56 PM
この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。
＆lt; iframe＆gt;の目的は何ですか タグ？使用する際のセキュリティ上の考慮事項は何ですか？
Mar 20, 2025 pm 06:05 PM
この記事では、＆lt; iframe＆gt;外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。
HTMLは初心者のために簡単に学ぶことができますか？
Apr 07, 2025 am 12:11 AM
HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。
HTML、CSS、およびJavaScriptの役割：コアの責任
Apr 08, 2025 pm 07:05 PM
HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。
HTMLでの開始タグの例は何ですか？
Apr 06, 2025 am 12:04 AM
Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。
