前端三小时用html和js写一个贪吃蛇游戏，非常简单带讲解，代码可直接用，功能完整 |
您所在的位置：网站首页 › 贪吃蛇网页版js代码 › 前端三小时用html和js写一个贪吃蛇游戏，非常简单带讲解，代码可直接用，功能完整 |
前端三小时用html和js写一个贪吃蛇游戏，非常简单带讲解，代码可直接用，功能完整
|
目录 游戏主体部分--普通模式 游戏主体部分--地狱模式 游戏主页入口 预览图 游戏入口代码 1.html 2.css 3.js 注册页面代码 游戏实现很简单，只写游戏主体的话只要三小时就够了。 话不多说，我们直接来看效果预览。
转成gif图之后有点卡，但是游戏效果并不卡，非常流畅。 简单描述一下这个游戏分为两种模式，普通模式和困难模式。 普通模式里面如果撞到墙会死，或者撞到自己也会死。 困难模式多设置了一些障碍物，如果撞到障碍物也会死，同时速度会更快，难度更大。 每个模式的界面下方都会记录一个当前得分和最高得分。 为了游戏的完整性，我还写了一个游戏的入口界面，和用户的注册界面。 代码的每一块都有注释。 如果需要完整压缩包的友友，请私信我，无偿免费。 游戏主体部分--普通模式 Document .t2{ background-color: black; } .t1{ background-image: url("images/R-C\ \(1\).jfif"); background-size: 650px 600px; } .btn{ position: absolute; top:11px; left:320px; border:4px solid black; } #sore{ margin: 0 auto; width: 505px; height: 60px; background-color: black; border: 3px solid rgb(93, 170, 170); } .mibtn{ height:150px; width:60px; background-color:yellowgreen; font-size: large; cursor: pointer; } /* 地图设计 */ #map { /* 让地图居中显示 */ margin: 0 auto; padding: 10px; width: 485px; height: 485px; background-color: black; border: 3px solid rgb(93, 170, 170); } /* 蛇身设计 */ .snake { width: 20px; height: 20px; margin: 2px; background-color: brown; float: left; } /* 食物设计 */ .food { width: 20px; height: 20px; margin: 2px; background-color: greenyellow; float: left; } /* 地图小格子设计 */ .ditu { width: 20px; height: 20px; margin: 2px; background-color: pink; float: left; } #ss{ font-size: 24px; text-align: center; color:wheat; line-height: 10px; } .deng{ position:absolute; top:250px; } .open{ width:50px; height:50px; cursor: pointer; border:5px solid black } .close{ width:50px; height:50px; cursor: pointer; border:5px solid black; } // 地图数组 var arr = new Array(); // 横向和纵向小格子的数量 var X = 20; var Y = 20; //蛇身数组 var snakeX = [4, 5, 6]; var snakeY = [2, 2, 2]; //判断蛇身的标记数组 var st = new Array(); for (var i = 0; i < X; i++) { st[i] = new Array(); for(var j=0;j 0; i--) { snakeX[i]=snakeX[i - 1]; snakeY[i]=snakeY[i - 1]; } //再次生成食物 createFood(); } //输掉游戏的情况 //超出游戏边框的情况 if (snakeX[snakeX.length - 1] < 0 || snakeX[snakeX.length - 1] > X - 1 || snakeY[snakeY.length - 1] < 0 || snakeY[snakeY.length - 1] > Y - 1) { //取消食物 arr[foodY][foodX].className="ditu"; if(sor>maxsor) { maxsor=sor; document.getElementById("ss").innerHTML="当前得分："+sor+" 最高分："+maxsor; } clearInterval(move); //停止移動 alert("啊哦！撞到墙了！游戏结束"); return; } createSnake(); } //判断用户输入的按键情况 function is() { var key = event.keyCode;//获取按键 //如果与原方向相反 不行 if (direct == 37 && key == 39 || direct == 39 && key == 37 || direct == 38 && key == 40 || direct == 40 && key == 38) return; //符合要求 else if (key >= 37 && key maxsor) { maxsor = sor; document.getElementById("ss").innerHTML = "当前得分：" + sor + " 最高分：" + maxsor; } clearInterval(move); //停止移動 alert("啊哦！撞到自己了！游戏结束"); return; } st[snakeX[i]][snakeY[i]] = 1; } //如果吃到食物了 if (snakeX[snakeX.length - 1] == foodX && snakeY[snakeY.length - 1] == foodY) { //那么食物就成为了身体的一部分 snakeX[snakeX.length] = foodX; snakeY[snakeY.length] = foodY; //分数改变 sor++; sorr = sor + ""; maxsorr = maxsor + ""; document.getElementById("ss").innerHTML = "当前得分：" + sorr + " 最高分：" + maxsorr; //重新组合 for (var i = snakeX.length - 1; i > 0; i--) { snakeX[i] = snakeX[i - 1]; snakeY[i] = snakeY[i - 1]; } //再次生成食物 createFood(); } //输掉游戏的情况 //超出游戏边框的情况 if (snakeX[snakeX.length - 1] < 0 || snakeX[snakeX.length - 1] > X - 1 || snakeY[snakeY.length - 1] < 0 || snakeY[snakeY.length - 1] > Y - 1) { //取消食物 arr[foodY][foodX].className = "ditu"; if (sor > maxsor) { maxsor = sor; document.getElementById("ss").innerHTML = "当前得分：" + sor + " 最高分：" + maxsor; } clearInterval(move); //停止移動 alert("啊哦！撞到墙了！游戏结束"); return; } for (var j = 0; j < snakeX.length; j++) { for (var i = 0; i < stoneX.length; i++) { if (snakeY[j] == stoneY[i] && snakeX[j] == stoneX[i]) { arr[foodY][foodX].className = "ditu"; if (sor > maxsor) { maxsor = sor; document.getElementById("ss").innerHTML = "当前得分：" + sor + " 最高分：" + maxsor; } console.log(snakeY[j]+"***"+snakeX[j]+"****"+stoneY[i]+"****"+stoneX[i]); clearInterval(move); //停止移動 alert("啊哦！撞到石头了！游戏结束"); return; } } } createSnake(); } //判断用户输入的按键情况 function is() { var key = event.keyCode;//获取按键 //如果与原方向相反 不行 if (direct == 37 && key == 39 || direct == 39 && key == 37 || direct == 38 && key == 40 || direct == 40 && key == 38) return; //符合要求 else if (key >= 37 && key以上就是关于贪吃蛇小游戏的全部内容了。 |
【本文地址】
今日新闻 |
推荐新闻 |