JS+html+css实现的一个小小的贪吃蛇游戏

最新推荐文章于 2024-07-30 10:31:44 发布
最新推荐文章于 2024-07-30 10:31:44 发布
阅读量2.3k 收藏 2
点赞数
文章标签： html css javascript 游戏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yesyes120/article/details/70217582
版权

提前声明，我做的这个游戏有个BUG，目前我无法解决。BUG为，同一个方向连续按两次以上，会使得贪吃蛇或者一种“神功”。

代码如下（阁下如果需要复制粘贴过去试一下效果的话，务必把代码中所有的路径都修改一下，别问为什么。）

思路为：

建立一个大大的div，然后这个div里面有20x30=600个小div。

蛇的走动，是靠一个数组来实现。这个数组储存着蛇身子每个部分所在的div的ID，每走一步，就把前面的传递给后面的。比如把第3号的数据传给第2号，第2号的数据传给第1号，第一号是指蛇头的头部，数组的第一个怎么变？这得看是蛇是向哪个方向动啦！


<!DOCTYPE html>
<html>
<head>
<title>贪吃蛇消除无聊时光！</title>
<meta charset="utf-8">


<style>
div{
height:1.9rem;
width:1.9rem;
padding:0;
margin:0;
border:0.05rem solid purple;
box-sizing:content-box;
float:left;
border-radius:2%;                                    /* 所有的小div的样式在这里*/
}


p,h2{
text-align:center;
font-size:1.2rem;
}


div#map{
position:absolute;
left:15%;
box-sizing:content-box;
border:12px double purple;
background-origin:content-box;
background-repeat:no-repeat;
background-size:100% 100%;
background-image:url(image/snakebackground.jpg);           /*大div的样式在这里，采用绝对定位*/
padding:0;
margin:0;
width:60rem;
height:40rem;
}
#begin{
display:block;
height:3rem;
width:7rem;
font-size:1.5rem;
border:2px solid black;
background-color:yellow;                      /*这是一个button的样式这个button是用来开始游戏的，它的样式没什么卵用，丢掉也不影响游戏*/
border-radius:30%;
}
</style>
</head>




<body bgcolor="#AAA">
<h2>欢迎来玩消磨时光的贪吃蛇！</h2>
<p>W:控制方向上，A：控制方向左，S：控制方向下，D：：控制方向右</p>
<p>按左边的开始游戏按键可以开始游戏</p>






<div id="map">


</div>



<script>


var x=document.getElementById("map");
for(var i=0;i<600;i++){
var onecell=document.createElement("div");
x.appendChild(onecell);
}                                                                                                   //创建600个div子元素


var y=document.getElementsByTagName("div");                              


for(var i=1;i<601;i++){
var temp="";
if((i-1)%30+1<10){
temp="0"+((i-1)%30+1);
y[i].id=Math.ceil(i/30)+"."+temp;}
else{y[i].id=Math.ceil(i/30)+"."+((i-1)%30+1);}
y[i].style.color="gray";
y[i].style.textAlign="center";
y[i].style.lineHeight="2rem";                      //给这600个子元素添加ID名，这个ID名的格式是xx.xx，前面的xx是第×行的意思，后面的xx是第几列的意思，以及一些样式
}






for(var i=1;i<31;i++){
if(i<10){
var z=document.getElementById(1+".0"+i);
z.style.backgroundImage="url(image/boom.jpg)"; }
else{
z=document.getElementById(1+"."+i);
z.style.backgroundImage="url(image/boom.jpg)"; }      
}
for(var i=1;i<31;i++){
if(i<10){
var z=document.getElementById(20+".0"+i);
z.style.backgroundImage="url(image/boom.jpg)";}
else{
var z=document.getElementById(20+"."+i);
z.style.backgroundImage="url(image/boom.jpg)";
}
}
for(var i=2;i<20;i++){
var z=document.getElementById(i+".01");
z.style.backgroundImage="url(image/boom.jpg)";
}
for(var i=2;i<20;i++){
var z=document.getElementById(i+"."+30);
z.style.backgroundImage="url(image/boom.jpg)";
}                                                                                                         //   这4个for循环，目的是给四边放上炸弹，变得好看，表示边界。


var mySnake=new Array();
mySnake[0]="11.07";
mySnake[1]="11.06";
mySnake[2]="11.05";
var snakeHead=document.getElementById(mySnake[0]);
snakeHead.style.backgroundImage="url(image/huaji.jpg)";
var snakeBody1=document.getElementById(mySnake[1]);
snakeBody1.style.backgroundColor="red";
var snakeBody2=document.getElementById(mySnake[2]);
snakeBody2.style.backgroundColor="red";                                             //初始化蛇的位置


function startright(){
document.getElementById(mySnake[0]).style.backgroundImage="";
for(var i=1;i<mySnake.length;i++){
document.getElementById(mySnake[i]).style.backgroundColor="";
}
for(var i=mySnake.length;i>=2;i--){
mySnake[i-1]=mySnake[i-2];
}
mySnake[0]=((mySnake[0]*100+1)/100).toFixed(2)+'';         //一定要保留两位数字，比如11.20变成11.2，找不到ID
if(mySnake[0]*100%100>29){
clearInterval(right);
alert("Game Over!"+" "+" "+'你的战绩为:'+mySnake.length);
document.write("<a href='../贪吃蛇/index.html'>重新开始</a>");
}
document.getElementById(mySnake[0]).style.backgroundImage="url(image/huaji.jpg)";
for(i=1;i<mySnake.length;i++){
document.getElementById(mySnake[i]).style.backgroundColor="red";                                                  //  这是控制蛇向右走的函数，并且触碰边界，会死..
}
}


function startleft(){
document.getElementById(mySnake[0]).style.backgroundImage="";
for(var i=1;i<mySnake.length;i++){
document.getElementById(mySnake[i]).style.backgroundColor="";
}
for(var i=mySnake.length;i>=2;i--){
mySnake[i-1]=mySnake[i-2];
}
mySnake[0]=((mySnake[0]*100-1)/100).toFixed(2)+'';                                //一定要保留两位数字，不然11.20会变成11.2，找不到ID
if(mySnake[0]*100%100<2){
clearInterval(left);
alert("Game Over!"+" "+" "+'你的战绩为:'+mySnake.length);
document.write("<a href='../贪吃蛇/index.html'>重新开始</a>");
}
document.getElementById(mySnake[0]).style.backgroundImage="url(image/huaji.jpg)";                                   //  这是控制蛇向左走的函数，并且触碰边界，会死..
for(i=1;i<mySnake.length;i++){
document.getElementById(mySnake[i]).style.backgroundColor="red";
}
}


function startup(){
document.getElementById(mySnake[0]).style.backgroundImage="";
for(var i=1;i<mySnake.length;i++){
document.getElementById(mySnake[i]).style.backgroundColor="";
}
for(var i=mySnake.length;i>=2;i--){
mySnake[i-1]=mySnake[i-2];
}
mySnake[0]=(parseFloat(mySnake[0])-1).toFixed(2)+''; //一定要保留两位数字，不然11.20会变成11.2，找不到ID
if(mySnake[0]<2){
clearInterval(up);
alert("Game Over!"+" "+" "+'你的战绩为:'+mySnake.length);
document.write("<a href='../贪吃蛇/index.html'>重新开始</a>");
}
document.getElementById(mySnake[0]).style.backgroundImage="url(image/huaji.jpg)";
for(i=1;i<mySnake.length;i++){
document.getElementById(mySnake[i]).style.backgroundColor="red";                                               //  这是控制蛇向上走的函数，并且触碰边界，会死..
}
}


function startdown(){
document.getElementById(mySnake[0]).style.backgroundImage="";
for(var i=1;i<mySnake.length;i++){
document.getElementById(mySnake[i]).style.backgroundColor="";
}
for(var i=mySnake.length;i>=2;i--){
mySnake[i-1]=mySnake[i-2];
}
mySnake[0]=(parseFloat(mySnake[0])+1).toFixed(2)+''; //一定要保留两位数字，不然11.20会变成11.2，找不到ID
if(mySnake[0]>20){
clearInterval(down);
alert("Game Over!"+" "+" "+'你的战绩为:'+mySnake.length);                                                                        //  这是控制蛇向下走的函数，并且触碰边界，会死..
document.write("<a href='../贪吃蛇/index.html'>重新开始</a>");
}
document.getElementById(mySnake[0]).style.backgroundImage="url(image/huaji.jpg)";
for(i=1;i<mySnake.length;i++){
document.getElementById(mySnake[i]).style.backgroundColor="red";
}
}


right=setInterval("startright()",300);
left=setInterval("startleft()",300);
down=setInterval("startdown()",300);
up=setInterval("startup()",300);
clearInterval(up);
clearInterval(left);
clearInterval(down);
clearInterval(right);
 
function start(){
up=setInterval("startup()",300);
var bb=document.getElementById("begin");
bb.style.backgroundColor="red";
setInterval("createFood()",3000);
document.οnkeydοwn=function(event){
var e = event || window.event || arguments.callee.caller.arguments[0];
if(e && e.keyCode==68){   // 按 D/d 那就往右走
right=setInterval("startright()",300);
clearInterval(up);
clearInterval(left);
clearInterval(down);
}else if(e && e.keyCode==65){             // 按 A/a 那就往左走
left=setInterval("startleft()",300);
clearInterval(right);
clearInterval(up);
clearInterval(down);}
else if(e && e.keyCode==83){            // 按 S/s 那就往下走
down=setInterval("startdown()",300);
clearInterval(right);
clearInterval(left);
clearInterval(up);}
else if(e && e.keyCode==87){            // 按 W/w 那就往上走
up=setInterval("startup()",300);
clearInterval(right);
clearInterval(left);
clearInterval(down);}
};
}


function back(){
var bb=document.getElementById("begin");
bb.style.backgroundColor="yellow";                  //这个是控制button的样式的JS代码，没什么卵用，可以不看
}



var checking=new Array();
checking[0]="useless";
function createFood(){
var idone=Math.floor(Math.random()*18+2);
var idtwo=Math.floor(Math.random()*28+2);
if(idtwo<10){
idtwo="0"+idtwo;
}                                                                                             //  随机生成食物的函数
var idAll=idone+"."+idtwo;
var food=document.getElementById(idAll);
food.style.backgroundImage="url(image/food.jpg)";
checking[checking.length]=idAll;
}




function check(){
for(i=1;i<checking.length;i++){
if(mySnake[0]==checking[i]){
mySnake[mySnake.length]=checking[i];         //检查头部有没有碰到生成的食物，碰到就是吃到的意思。
checking[i]='';}
}
setTimeout("check()",50);
}
check();


</script>


<button οnmοusedοwn="start()" id="begin" οnmοuseup="back()">开始游戏</button>
</body>
</html>

Cookie1997
关注
【酷炫 贪吃蛇——由“前端“实现___效果 + 全部代码】
追光者♂：记录、分享、总结、提升，现象级专栏《Python从入门到人工智能》作者，无惧黑暗，坚信曙光
01-14 3159
目录一、游戏效果展示（运行）二、全部代码三、说明 一、游戏效果展示（运行） 这是带有调整速度的游戏运行展示： 这是带有"重新游戏"的展示：这速度我还不能驾驭哈哈~ 测试一下你最好得多少分数？ 注意： 背景图片、游戏格子、提示语言等都可以根据需要进行更改哦~ 二、全部代码 index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>贪吃蛇——CSDN追
贪吃蛇网页版-HTML版
01-06
使用HTML实现的网页版贪吃蛇，实现较为简单，纯属用来娱乐！
php开发h5游戏开发,HTML5制作贪吃蛇游戏
weixin_42315706的博客
03-10 475
本篇文章主要介绍了H5 canvas实现贪吃蛇小游戏，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧本文介绍了H5 canvas实现贪吃蛇小游戏，分享给大家，具体如下：实现效果如下实现思路：ps：这个只是思路，详细可看代码注释一、先把蛇画出来定义一下蛇的结构，用一个数组保存一堆矩形，包含蛇头(红)和蛇身(灰)。画蛇(初始状态)二、蛇能动(重点)蛇移动方式：自始至终都只有...
web端使用HTML5开发《贪吃蛇》小游戏教程【附源码】
最新发布
m0_73367097的博客
07-30 1668
web端使用HTML5开发《贪吃蛇》小游戏教程
HTML做一个贪吃蛇小游戏
ZTLJQ的博客
06-06 1万+
☄️爬虫JS逆向系列专栏 -☄️python系列专栏 -
HTML实现简单的贪吃蛇小游戏（附完整源码）
热门推荐
m0_56417836的博客
07-04 2万+
项目简介： 贪吃蛇作为我们儿时经典的游戏之一，它是一款单机而又好玩的小游戏。今天，就让我们用html5技术实现一个简单的贪吃蛇小游戏！项目核心技术： html5的canvas技术+js技术操作步骤： 游戏玩家通过操作键盘的方向键（上下左右键）来控制小蛇的方向，使小蛇吃到红色的食物，然后促使小蛇长大。并且，如果得到的分数在不断上涨，游戏的难度也会不断的上升（小蛇的移动速度会越来越快）。如果小蛇头部撞到墙壁或蛇自身体，就会判定游戏失败。......
只使用HTML 和 CSS，JavaScript开发贪食蛇游戏
weixin_34415923的博客
01-04 229
欢迎上车。今天我们将开始一场激动人心的冒险，在这里我们将开发属于我们自己的贪食蛇游戏。通过将其分解为一个个简短的步骤来学习如何解决问题。在这段旅程结束时，你会学到一些新东西，并且有信心能独立探索更多。 开始吧 首先新建一个文件“snake.html”，它将包含全部代码。 因为这是一个 HTML 文件，所以要做的第一件事就是申明 <!...
HTML+js实现贪吃蛇小游戏（内含完整代码）
m0_67392409的博客
03-03 174
案例分析 看图拆解游戏 首先我们根据图片上的内容把这个游戏拆解成几个部分去单独看： 最外面的大盒子包裹着内容加边框限制蛇的活动范围，整个范围可以看成由许多小方格排列构成的，例如这样子的：； 两个按钮，一个控制开始游戏，一个控制游戏中途的暂停继续功能； 盒子里面有可以移动的蛇，最开始状态的蛇分为蛇头、蛇身、蛇尾三个部分，蛇只能走直线，通过上下左右的功能键去控制蛇的走向； 还有一个随机产生在限制区域内的食物； 这个游戏是当点击开始游戏按钮才显示蛇和食物的，所以最开始我们不在结构里面书写，后面通过js构造函
js小游戏之贪吃蛇
06-23
总的来说，这个"js小游戏之贪吃蛇"项目展示了JavaScript作为动态语言的强大能力，通过简单的代码就能实现一个互动性强、趣味性高的游戏。对于学习JavaScript的初学者来说，这是一个很好的实践项目，可以帮助他们理解...
贪吃蛇JS实现(超详细,万字解析版)
Prototype__God的博客
01-11 5386
本文是对B站尚硅谷TypeScript贪吃蛇项目的超详细解析。 原视频TypeScript讲的很好,很建议有时间去观看。对于时间不充裕的小伙伴。此文的目的就是让大家以少的时间得到大的收获。
html+CSS+js贪吃蛇
07-10
HTML+CSS+JS实现一个简单贪吃蛇的功能，一百多行的代码
html贪吃蛇
10-28
html网页版的贪吃蛇大战，独特而犀利。虽然样式简便，但是具有一定体验感！
用html做贪吃蛇
02-06
贪吃蛇html版！目前虽然有些卡顿，但是挺好玩的，想想还是挺划算的，双击index.html即可开始贪吃蛇，加油！！！
HTML简易版贪吃蛇
09-14
用JavaScript和 HTML写了一个简易版扫雷游戏，大神勿喷，
贪吃蛇JS代码
06-06
原声JS贪吃蛇　点击我删除div
前端搭建打字通游戏（内附源码）
官方推荐
04-03 1万+
通过前端基础技术实现一个打字通并计算成绩
【贪吃蛇-----html实现（附源代码）】| 网络工程师面试题：什么是网络隧道？它在网络中的作用和应用场景是什么？
追光者♂：记录、分享、总结、提升，现象级专栏《Python从入门到人工智能》作者，无惧黑暗，坚信曙光
12-21 3206
【贪吃蛇-----html实现（附源代码）】网络工程师面试题：什么是网络隧道？它在网络中的作用和应用场景是什么？
Html贪吃蛇游戏 手把手（简易版）
qq_44640575的博客
03-29 2091
游戏最终效果的样子，其实并不难，组成部分有游戏区域，蛇，食物,重新开始按钮、游戏规则。
JS+HTML5+CSS实现的俄罗斯方块游戏详解
本文将详细介绍如何使用JavaScript (JS), HTML5以及CSS来实现一款经典的俄罗斯方块游戏。俄罗斯方块是一款著名的益智游戏，通过控制不同形状的方块下落并填充行以消除得分，考验玩家的空间思维和反应速度。本文将...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值