账号注册找回密码
  微信登录

奇瑰网社区

[编程与开发] (完整源码)H5贪吃蛇小游戏——HTML+CSS+JavaScript实现

[复制链接]

655

主题

846

帖子

2万

积分

网站民审组

Rank: 7Rank: 7Rank: 7

G币
550
信用
16
体力
10110
发表于 2020-10-13 21:41:14 | 显示全部楼层 |阅读模式
免费G币领取活动中
(完整源码)H5贪吃蛇小游戏——HTML+CSS+JavaScript实现

最近因为帮助大一的学妹做网页,又接触了一下前端方面的知识。(学妹已经成了女朋友!!!,嘻嘻)感谢自己当年认真学习,大三了好多东西还能拾起来,哈哈。我翻出了我当年写的代码,还真不少呢。今天复习复习,看一看那时候写的一个贪吃蛇的代码。当时用了一整天,跟着今日头条上推送给我的一个视频一点一点手敲的…… 两年半了,我记得这么清楚,是因为写这个太痛苦了,记忆犹新啊!!!大一手敲着不知道为什么的代码,一遍一遍的报错,一遍一遍的改错误……

现在感觉起来,装好插件的VS code配合上Chrome调试,真的是爽到爆啊。当时太年轻,不知道这么先进的工具,可能有人会说Sublime Text更好用,我承认,我选择VS code 仅仅因为是插件安装方便。

大概看了看这个贪吃蛇的代码,主要用了HTML5中的canvas(画布)实现游戏界面,蛇的控制逻辑用JavaScript。定时调用函数使得蛇动起来。代码简单易懂,分享出来,供初学者参考学习。省的手敲代码,遇到各种错误,学习的热情被各种八阿哥拒之门外,先让程序跑起来,带有兴趣的研究代码,效率应该更高吧。(个人观点,纯属扯淡)话不多说,直接上代码:

HTML页面内容:



  • <!DOCTYPE html>



  • <html>



  • <head>



  •         <title>贪吃蛇</title>



  •         <meta charset="UTF-8">



  •         <meta name="keywords" content="贪吃蛇">



  •         <meta name="Description" content="这是一个初学者用来学习的小游戏">



  •         <style type="text/css">



  •         *{margin:0;}



  •         .map{margin:100px auto;



  •                 height:600px;



  •                 width:900px;



  •                 background:#00D0FF;



  •                 border:10px solid #AFAEB2;



  •                 border-radius:8px;



  •         }



  •         </style>















  • </head>







  • <body>



  • <div class="map">



  • <canvas id="canvas" height="600" width="900">







  • </canvas>



  • </div>







  • <script src="javascript/snake.js">







  • </script>



  • </body>



  • </html>


javascript代码:







  •         //获取绘制工具



  •         /*



  •         var canvas = document.getElementById("canvas");



  •         var ctx = canvas.getContext("2d");//获取上下文



  •         ctx.moveTo(0,0);



  •         ctx.lineTo(450,450);*/



  •         var c=document.getElementById("canvas");



  •     var ctx=c.getContext("2d");



  •     /*ctx.beginPath();



  •     ctx.moveTo(0,0);



  •     ctx.lineTo(450,450);



  •     ctx.stroke();



  •     */







  •     var snake =[];//定义一条蛇,画蛇的身体



  •     var snakeCount = 6;//初始化蛇的长度



  •         var foodx =0;



  •         var foody =0;



  •     var togo =0;



  •     function drawtable()//画地图的函数



  •     {











  •             for(var i=0;i<60;i++)//画竖线



  •             {



  •                     ctx.strokeStyle="black";



  •                     ctx.beginPath();



  •                     ctx.moveTo(15*i,0);



  •                     ctx.lineTo(15*i,600);



  •                     ctx.closePath();



  •                     ctx.stroke();



  •             }



  •         for(var j=0;j<40;j++)//画横线



  •             {



  •                     ctx.strokeStyle="black";



  •                     ctx.beginPath();



  •                     ctx.moveTo(0,15*j);



  •                     ctx.lineTo(900,15*j);



  •                     ctx.closePath();



  •                     ctx.stroke();



  •             }







  •             for(var k=0;k<snakeCount;k++)//画蛇的身体



  •                         {



  •                         ctx.fillStyle="#000";



  •                         if (k==snakeCount-1)



  •                         {



  •                                 ctx.fillStyle="red";//蛇头的颜色与身体区分开



  •                         }



  •                         ctx.fillRect(snake[k].x,snake[k].y,15,15);//前两个数是矩形的起始坐标,后两个数是矩形的长宽。







  •                         }



  •                         //绘制食物       



  •                     ctx.fillStyle ="black";



  •              ctx.fillRect(foodx,foody,15,15);



  •              ctx.fill();







  •     }











  •     function start()//定义蛇的坐标



  •     {



  •             //var snake =[];//定义一条蛇,画蛇的身体



  •         //var snakeCount = 6;//初始化蛇的长度







  •                 for(var k=0;k<snakeCount;k++)



  •                     {



  •                             snake[k]={x:k*15,y:0};







  •             }







  •                   drawtable();



  •           addfood();//在start中调用添加食物函数







  •     }







  •     function addfood()



  •         {



  •         foodx = Math.floor(Math.random()*60)*15; //随机产生一个0-1之间的数



  •         foody = Math.floor(Math.random()*40)*15;







  •                 for (var k=0;k<snake;k++)



  •                 {



  •                         if (foodx==snake[k].x&&foody==sanke[k].y)//防止产生的随机食物落在蛇身上



  •                         {       



  •                         addfood();



  •                         }



  •                 }











  •         }       







  •    function move()



  •    {



  •         switch (togo)



  •         {



  •         case 1: snake.push({x:snake[snakeCount-1].x-15,y:snake[snakeCount-1].y}); break;//向左走



  •         case 2: snake.push({x:snake[snakeCount-1].x,y:snake[snakeCount-1].y-15}); break;



  •         case 3: snake.push({x:snake[snakeCount-1].x+15,y:snake[snakeCount-1].y}); break;



  •         case 4: snake.push({x:snake[snakeCount-1].x,y:snake[snakeCount-1].y+15}); break;



  •         case 5: snake.push({x:snake[snakeCount-1].x-15,y:snake[snakeCount-1].y-15}); break;



  •         case 6: snake.push({x:snake[snakeCount-1].x+15,y:snake[snakeCount-1].y+15}); break;



  •         default: snake.push({x:snake[snakeCount-1].x+15,y:snake[snakeCount-1].y});



  •         }



  •     snake.shift();//删除数组第一个元素



  •            ctx.clearRect(0,0,900,600);//清除画布重新绘制



  •            isEat();



  •         isDead();



  •         drawtable();



  •    }                        







  •    function keydown(e)



  •    {



  •    switch(e.keyCode)



  •                 {



  •          case 37: togo=1; break;



  •                  case 38: togo=2; break;



  •                  case 39: togo=3; break;



  •                  case 40: togo=4; break;



  •                  case 65: togo=5; break;



  •                  case 68: togo=6; break;



  •                 }



  •    }







  •    function isEat()//吃到食物后长度加1



  •    {



  •     if(snake[snakeCount-1].x==foodx&&snake[snakeCount-1].y==foody)



  •    {



  •                 addfood();



  •                 snakeCount++;



  •                 snake.unshift({x:-15,y:-15});



  •    }







  •    }







  •    function isDead()



  •    {



  •     if (snake[snakeCount-1].x>885||snake[snakeCount-1].y>585||snake[snakeCount-1].x<0||snake[snakeCount-1].y<0)



  •                 {



  •                 alert("You are dead,GAME OVER!!!");



  •                 window.location.reload();



  •                 }



  •    }







  •     document.onkeydown=function(e)



  • {



  •         keydown(e);







  • }



  • window.onload = function()//调用函数



  • {



  •         start();



  •         setInterval(move,150);



  •         drawtable();















  • }











下面是程序运行截图:

watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmdvY29kZXI=,size_16,color_FFFFFF,t_70.jpg

watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmdvY29kZXI=,size_16,color_FFFFFF,t_70.jpg


本文转载自:https://blog.csdn.net/bingocoder/article/details/85868814






上一篇:Discuz提示“密码错误次数过多,请15分钟后重新登陆”问题...
下一篇:WordPress企业主题:企业一号 V 1.2.2

0

主题

117

帖子

190

积分

资深会员

Rank: 2

G币
5
信用
0
体力
27
发表于 2020-10-13 22:18:00 | 显示全部楼层
马上来领取免费的邀请码加入奇瑰吧
我要看看这是咋回事
回复

使用道具 举报

0

主题

270

帖子

269

积分

中级会员

Rank: 3Rank: 3

G币
10
信用
0
体力
-4
发表于 2020-10-13 22:18:50 | 显示全部楼层
我也是坐沙发的
回复

使用道具 举报

1

主题

128

帖子

179

积分

资深会员

Rank: 2

G币
0
信用
0
体力
22
发表于 2020-10-13 22:30:06 | 显示全部楼层
马上来领取免费的邀请码加入奇瑰吧
支持你哈...................................
回复

使用道具 举报

0

主题

41

帖子

100

积分

资深会员

Rank: 2

G币
0
信用
0
体力
26
发表于 2020-10-13 22:30:08 | 显示全部楼层
fshgsgsczfcafhf
回复

使用道具 举报

0

主题

14

帖子

138

积分

资深会员

Rank: 2

G币
0
信用
0
体力
53
发表于 2020-10-13 22:30:37 | 显示全部楼层
马上来领取免费的邀请码加入奇瑰吧
谢谢分享,下载下来试试,希望一切好用
回复

使用道具 举报

0

主题

270

帖子

283

积分

中级会员

Rank: 3Rank: 3

G币
10
信用
0
体力
0
发表于 2020-10-13 22:37:18 | 显示全部楼层
呵呵。。。
回复

使用道具 举报

0

主题

13

帖子

135

积分

资深会员

Rank: 2

G币
18
信用
0
体力
47
发表于 2020-10-13 22:39:56 | 显示全部楼层
马上来领取免费的邀请码加入奇瑰吧
very good
回复

使用道具 举报

0

主题

7

帖子

105

积分

资深会员

Rank: 2

G币
0
信用
0
体力
38
发表于 2020-10-13 22:41:56 | 显示全部楼层
2715425121
回复

使用道具 举报

使用高级回帖 (可批量传图、插入视频等)

发表回复

您需要登录后才可以回帖 登录 | 账号注册   微信登录

本版积分规则   Ctrl + Enter 快速发布  

发帖时请遵守我国法律,网站会将有关你发帖内容、时间以及发帖IP地址等记录保留,只要接到合法请求,即会将信息提供给有关政府机构。
Powered by Discuz! X3.4 ( 粤ICP备20013252号-1  
Copyright © 2014-2020 奇瑰网 All Rights Reserved.
快速回复 返回顶部 返回列表