js贪吃蛇

最新推荐文章于 2024-05-23 22:21:26 发布

未羽出衫

最新推荐文章于 2024-05-23 22:21:26 发布

阅读量405

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_16590151/article/details/44624249

本文介绍了一个简单的蛇形游戏实现过程，使用HTML与JavaScript构建。通过键盘控制蛇的方向，蛇会根据方向移动并尝试吃到随机生成的食物，每吃一个食物蛇身会增长。文章详细展示了如何创建游戏界面、蛇的移动逻辑及碰撞检测。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>auto:maomao</title>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.1.min.js"></script>
<script>
var shenumber=0;
var shemaxnumber=9;
var interval; //调度器对象。
var flag=false;
var sudu=100;
$(function (){
for(var i=0;i<=30;i++){
$("#tableroom").append("<tr id='tr"+i+"'></tr>");
for(var j=0;j<=30;j++){
if(i==0&&j<10){
$("#tr"+i).append("<td id="+i+"_"+j+" onclick='cktd("+i+","+j+")' class='she backco she"+j+"'>  </td>");
}else{
$("#tr"+i).append("<td id="+i+"_"+j+" onclick='cktd("+i+","+j+")'>  </td>");
}
}
}
for(var a=0;a<6;a++){
getshiwu()
}
})
var fangxiang=1;
$(document).keydown(function(event){
if(event.keyCode == 37){
//左
fangxiang=2;
}else if (event.keyCode == 39){
//右
fangxiang=1;
}else if (event.keyCode == 38){
//上
fangxiang=3;
}else if (event.keyCode == 40){
//下
fangxiang=4;
}else if (event.keyCode == 32){
run();
}
});
function run(){
interval = setInterval("fun()",sudu);
}
function fun(){
flag=false;
var shelength=$(".she").length;
var shewei=$(".she"+shenumber);
var shetou=$(".she"+(shemaxnumber));
var toubu=$(shetou).attr("id");
var touindex;
//根据方向确定蛇头增加的位置
var x=0;
var y=0;
if(fangxiang==1){
x=(toubu.split("_")[0]);
y=(parseInt(toubu.split("_")[1])+1);
}else if(fangxiang==4){
x=(parseInt(toubu.split("_")[0])+1);
y=(toubu.split("_")[1]);
}else if(fangxiang==3){
x=(parseInt(toubu.split("_")[0])-1);
y=(toubu.split("_")[1]);
}else if(fangxiang==2){
x=(toubu.split("_")[0]);
y=(parseInt(toubu.split("_")[1])-1);
}
checkadd(x,y);
if(!flag){
$(shewei).removeClass("she");
$(shewei).removeClass("she"+shenumber);
$(shewei).removeClass("backco");
shenumber=shenumber+1;
}
shemaxnumber=shemaxnumber+1;
}
function checkadd(xx,yy){
if(xx>30||xx<0||yy>30||yy<0){
if(xx>30){
xx=0;
}
if(xx<0){
xx=30;
}
if(yy>30){
yy=0;
}
if(yy<0){
yy=30;
}
touindex=xx+"_"+yy;
}else{
touindex=xx+"_"+yy;
}
if($("#"+touindex).hasClass("backco")&&!$("#"+touindex).hasClass("she")){
flag=true;
$("#"+touindex).addClass("she");
$("#"+touindex).addClass("she"+(shemaxnumber+1));
getshiwu();
}else if($("#"+touindex).hasClass("backco")&&$("#"+touindex).hasClass("she")){
alert("自杀");
clearInterval(interval);
}else{
$("#"+touindex).addClass("she");
$("#"+touindex).addClass("she"+(shemaxnumber+1));
$("#"+touindex).addClass("backco");
}
}
//生成食物
function getshiwu(){
var mathone=Math.ceil(Math.random()*30);
var mathtwo=Math.ceil(Math.random()*30);
($("#"+mathone+"_"+mathtwo)).addClass("backco");
}
function updsudu(sdval){
sudu=sdval;
clearInterval(interval);
run();
}
</script>
<style>
.backco{background-color:black}
</style>
</head>
<body>
<p>Author:maomao,空格开始/结束,键盘↑↓←→控制方向</p>
<input id="sudu" onblur="updsudu(this.value)"/>控制速度请输入大于0的数字
<table id="tableroom" style="border: 1px solid #000;">
</table>
</body>
</html>