（完整源码）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();}

下面是程序运行截图：

（完整源码）H5贪吃蛇小游戏——HTML+CSS+JavaScript实现相关推荐

C语言小游戏大全，C语言贪吃蛇小游戏（附源码）
一.C语言小游戏大全,C语言贪吃蛇小游戏(附源码) 贪吃蛇小游戏源码和更多C语言课设项目小游戏源码免费下载链接如下: c语言项目课设小游戏源码资料压缩包.zip-C文档类资源-CSDN下载 ...
Python贪吃蛇小游戏_完整源码免费分享
文章目录 Python 贪吃蛇小游戏 1. 导包 2. 配置初始化参数 3. 主函数及运行主体 4. 画食物的函数 5. 画贪吃蛇的函数 6. 画网格的函数(非必选,觉得多余的可以忽略此项) 7. 操 ...
Java实现贪吃蛇小游戏（附完整源码）
今天我就从零开始来完成这个小游戏,完成的方式也是一步一步的添加功能这样的方式来实现. 第一步完成的功能:写一个界面大家见到的贪吃蛇小游戏,界面肯定是少不了的.因此,第一步就是写一个小界面. 实现代码 ...
基于stm32、0.96寸OLED实现的贪吃蛇小游戏（详细源码注释）
简介:本实验基于stm32最小系统.0.96寸OLED(68*128)和摇杆实现一个经典的贪吃蛇小游戏.项目源码地址:点击下载. 硬件设计: 普通摇杆,0.96寸OLED 单色屏幕(SPI协议通讯), ...
学生学python编程---实现贪吃蛇小游戏+源码
学生学python编程---实现贪吃蛇小游戏+源码前言主要设计 1.蛇的表示 2.蛇怎么移动? 3.玩家控制小蛇移动功能的实现 4.如何判定游戏结束? 应用知识点 1.python知识点 1.1 ...
【180928】美女贪吃蛇小游戏源码
本源码是一个简单的c#版美女贪吃蛇小游戏源码,基于winform技术制作.控制方向键即可.右侧有记分板,每走一步都记加分.贪吃蛇身体掠过的地方就会显示背景图片,身体越长,显示的越多,玩家可以将图片换成 ...
贪吃蛇小游戏源码分享
创建2个文件夹,一个是放源码还有一个文件夹是发图片的. 然后创建三个实体类. package com.Bubbles.snake; import javax.swing.*; import java. ...
c语言小游戏精简_一个简易的贪吃蛇小游戏C语言源码
/* *程序名称:贪吃蛇v2.1 *程序描述:一个简易的贪吃蛇小游戏 *版本信息:v2.1 *v1.1版本更新:1:加入菜单选择项 *v1.2版本更新:1:修复菜单选择bug *v1.3班本更新:1: ...
前端技术搭建贪吃蛇小游戏（内含源码）
The sand accumulates to form a pagoda ✨ 写在前面 ✨ 功能介绍 ✨ 页面搭建 ✨ 样式设置 ✨ 逻辑部分 ✨ 写在前面上周我们实通过前端基础实现了井字游戏,今 ...

（完整源码）H5贪吃蛇小游戏——HTML+CSS+JavaScript实现

（完整源码）H5贪吃蛇小游戏——HTML+CSS+JavaScript实现相关推荐

最新文章

热门文章