js实现贪吃蛇小游戏代码源码（编程贪吃蛇小游戏）
本文目录一览：
JavaScript制作贪吃蛇游戏代码
蛇的身体：数组
食物：在规定范围内生成的随机数
蛇的身体累加：数组元素个数增加
蛇碰墙死：数组首个元素的x值或y值小于0或者大于地图的宽度活高度
蛇咬自己死：数组首个元素的x值和y值和其他元素值重复
移动速度：在指定的时间内调用移动方法
开始：开始调用方法
暂停：暂停调用方法
积分：蛇没吃一个食物，全局变量加1
自己做吧，很简单，做完进步很大
用js做一个贪吃蛇的游戏，谢谢，最好有注释
以前做js实现贪吃蛇小游戏代码源码的一个 部分注释 核心部分由注释 其实就是一个最后一个跟随前面一个位置js实现贪吃蛇小游戏代码源码的算法
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
title/title
style type="text/css"
.body{width:600px;margin:100px auto;text-align:center;}
#main{height:300px;border:1px solid #f00;position:relative;}
#main div{width:20px;height:20px;background-color:green;position:absolute;}
#main div.snake{background-color:#ff0;}
.score{font-size:14px;}
.score strong{color:Red;}
/style
script type="text/javascript"
window.onload = function () {
var omain = document.getElementById("main");
var r = 15, c = 30;
var asnake = [];
var speed = 150;
var odiv = document.createElement("div");
asnake.push({ l: Math.floor(Math.random() * c), t: Math.floor(Math.random() * r), div: odiv, d: "l" });
omain.appendChild(odiv);
setPosition(asnake[0]);
//设置位置
function setPosition(obj) {
obj.div.style.left = obj.l * 20 + "px";
obj.div.style.top = obj.t * 20 + "px";
}
var aEat = null;
var d = "l";
//创建吃的
function createEat() {
var l = Math.floor(Math.random() * c);
var t = Math.floor(Math.random() * r);
var isexist = false;
//判断是否存在在设数组里面
for (var i = 0; i asnake.length; i++) {
if (l == asnake[i].l t == asnake[i].t) {
isexist = true;
break;
}
}
//如果存在再创建一个蛇
if (isexist) {
createEat();
return;
}
var onewdiv = document.createElement("div");
onewdiv.className = "snake";
aEat = { l: l, t: t, div: onewdiv, d: "l" };
omain.appendChild(onewdiv);
setPosition(aEat);
}
createEat();
var obtn = document.getElementById("btn");
var oscore = document.getElementById("score");
var oaddspeed = document.getElementById("addspeed");
var otimer = null;
var isitem = true;
oaddspeed.onclick = function () {
clearInterval(otimer);
speed = speed 50 ? 50 : speed - 20;
setasnke();
}
obtn.onclick = function () {
if (!isitem) {
clearInterval(otimer);
obtn.value = "继续游戏";
isitem = true;
return false;
}
obtn.value = "暂停游戏";
setasnke();
isitem = false;
}
function setasnke() {
otimer = setInterval(function () {
for (var i = asnake.length - 1; i 0; i--) {
asnake[i].l = asnake[i - 1].l;
asnake[i].t = asnake[i - 1].t;
asnake[i].d = asnake[i - 1].d;
}
switch (d) {
case "l":
asnake[0].l--;
break;
case "r":
asnake[0].l++;
break;
case "t":
asnake[0].t--;
break;
case "b":
asnake[0].t++;
break;
}
//判断蛇是否撞墙js实现贪吃蛇小游戏代码源码了
if (asnake[0].l 0 || asnake[0].l = c || asnake[0].t 0 || asnake[0].t = r) {
alert("js实现贪吃蛇小游戏代码源码你死掉了");
clearInterval(otimer);
return;
}
//判断蛇是否撞到自己了
for (var n = 1; n asnake.length; n++) {
if (asnake[0].l == asnake[n].l asnake[0].t == asnake[n].t) {
alert("你已经死掉了");
clearInterval(otimer);
return;
}
}
//判断蛇是否吃到东西了
if (asnake[0].l == aEat.l asnake[0].t == aEat.t) {
aEat.div.className = "";
oscore.innerHTML = parseInt(oscore.innerHTML) + 1;
asnake.push(aEat);
createEat();
}
//重新设置蛇的位置
for (var j = 0; j asnake.length; j++) {
setPosition(asnake[j]);
}
}, speed);
}
//键盘改变蛇的方向
document.onkeydown = function (event) {
var oEn = event || window.event;
var oCode = oEn.keyCode;
switch (oCode) {
case 37:
d = "l";
break;
case 38:
d = "t";
break;
case 39:
d = "r";
break;
case 40:
d = "b";
break;
}
}
}
/script
/head
body
div class="ce6c-0793-3c12-41b7 body"
input type="button" value="加速" id="addspeed" / input type="button" id="btn" value="开始游戏" /nbsp;nbsp;span class="0793-3c12-41b7-abd2 score"积分js实现贪吃蛇小游戏代码源码：strong id="score"0/strong/span
div id="main"
/div
/div
/body
/html
20行js代码实现的贪吃蛇大战？
稍等，我先留个坑，一会儿上电脑看看
!DOCTYPE html
html lang="en"
head
meta charset="UTF-8"title贪吃蛇重构/titlestyle
body {display: flex;height: 100vh;margin: 0;padding: 0;justify-content: center;align-items: center;}/style
/head
body
canvas id="can" width="400" height="400" style="background-color: black"对不起，您的浏览器不支持canvas/canvas
scriptvar snake = [41, 40], //snake队列表示蛇身，初始节点存在但不显示direction = 1, //1表示向右，-1表示向左，20表示向下，-20表示向上
food = 43, //食物的位置
n, //与下次移动的位置有关box = document.getElementById('can').getContext('2d');//从0到399表示box里[0~19]*[0~19]的所有节点，每20px一个节点function draw(seat, color) {box.fillStyle = color;box.fillRect(seat % 20 *20 + 1, ~~(seat / 20) * 20 + 1, 18, 18);//用color填充一个矩形，以前两个参数为x，y坐标，后两个参数为宽和高。}
document.onkeydown = function(evt) {//当键盘上下左右键摁下的时候改变directiondirection = snake[1] - snake[0] == (n = [-1, -20, 1, 20][(evt || event).keyCode - 37] || direction) ? direction : n;};
!function() {snake.unshift(n = snake[0] + direction);//此时的n为下次蛇头出现的位置，n进入队列 if(snake.indexOf(n, 1) 0 || n 0 || n 399 || direction == 1 n % 20 == 0 || direction == -1 n % 20 == 19) {//if语句判断贪吃蛇是否撞到自己或者墙壁，碰到时返回，结束程序return alert("GAME OVER!");}draw(n, "lime"); //画出蛇头下次出现的位置if(n == food) { //如果吃到食物时，产生一个蛇身以外的随机的点，不会去掉蛇尾while (snake.indexOf(food = ~~(Math.random() * 400)) = 0);draw(food, "yellow");} else { //没有吃到食物时正常移动，蛇尾出队列draw(snake.pop(),"black");}setTimeout(arguments.callee, 150);//每隔0.15秒执行函数一次，可以调节蛇的速度
}();
/script
/body
/html
这不是我写的，是我看见的那个网址里面写的详细的。这个提交是电脑端，我发现一提交就自动压缩，乱了。
贪吃蛇游戏的源代码
？
贪吃蛇源码：
!doctype html
html
body style='overflow:hidden'
canvas id="can" width="400" height="400" style="background:Black;display: block;margin:20px auto;"/canvas
script
var sn = [ 42, 41 ], dz = 43, fx = 1, n, ctx = document.getElementById("can").getContext("2d");
function draw(t, c) {
ctx.fillStyle = c;
ctx.fillRect(t % 20 * 20 + 1, ~~(t / 20) * 20 + 1, 18, 18);
}
document.onkeydown = function(e) {
fx = sn[1] - sn[0] == (n = [ -1, -20, 1, 20 ][(e || event).keyCode - 37] || fx) ? fx : n
};
!function() {
sn.unshift(n = sn[0] + fx);
if (sn.indexOf(n, 1) 0 || n0||n399 || fx == 1 n % 20 == 0 || fx == -1 n % 20 == 19)
return alert("GAME OVER");
draw(n, "Lime");
if (n == dz) {
while (sn.indexOf(dz = ~~(Math.random() * 400)) = 0);
draw(dz, "Yellow");
} else
draw(sn.pop(), "Black");
setTimeout(arguments.callee, 130);
}();
/script
/body
/html
