原生JS实现贪吃蛇项目，附源码下载！

最新推荐文章于 2024-02-14 18:57:07 发布
最新推荐文章于 2024-02-14 18:57:07 发布
阅读量3.5k 收藏 6
点赞数
分类专栏： javascript 文章标签： JS函数封装 源码 可扩展 游戏 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sdfujichao/article/details/51329101
版权

运行于谷歌浏览器。主要是利用了函数的封装思想，把每一个小功能分别封装在一个函数中，大大提高了代码的可扩展性！！提高了代码的可维护性！！！提高了代码的可阅读性！！！项目要求：1：有边界，碰到边界就game over。2：猎物没3秒增加一个，而且位置随机产生。3：吃一个猎物自身就增加一个元素。4：按上下左右控制移动方向，按空格决定暂停和前进。

实现思路：主要是一开始就把实现的功能封装在了一个先函数中去了，所以后续的功能增加就比较容易了。1：先画出了边界，就是实现了设置边界的函数。2：实现判断按键功能和根据按下的键盘决定移动的方向，实现了上下左右的移动功能。顺便实现了按下相反方向的键不起作用。避免了掉头自己吃自己。3：实现了猎物的随机生成功能，可以自动添加猎物:4：判断是否吃到了猎物。5：实现吃一个长一个功能，当吃一个类物是就把蛇的自身增加一个元素（都存储在数组中了，就是增加一个数组元素）。6：因为增加了蛇的长度，所以就得移动每一个的元素的位置。7：实现了是否吃到自己的功能。8：最后实现了暂停功能。


<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;}
#divWallId{width: 1000px;height: 600px; background-color: navajowhite;border: 3px #000 solid;}
#divSnId{width: 10px;height: 10px; background-color: darkblue; position: absolute;top:300px; left: 500px;}
</style>
</head>
<body>
<div id="divWallId">
<div id="divSnId"></div>
</div>
</body>
<script type="text/javascript">
var divSn = document.getElementById("divSnId");
var divWall = document.getElementById("divWallId");
//存放生成猎物
var arrFood = [];
var arr = [divSn]; // 存储每个元素
var direction = "top"; // 默认向上移动
var flagStop = true;
var preDire = null;
var prePreDir = "top";
// 总时钟！！
var timerSn = setInterval( main,10);
//随机生成猎物的时钟
var timerRan =  setInterval(random,1000);

// main 函数
function main(){
//console.log(divSn.offsetTop+"    "+divSn.offsetLeft);

keyPressMove(direction);
isEat()
changeLoaction();
border();
isEatIt();
}
 
//判断是否吃到自己
function isEatIt(){
for(var i=2;i<arr.length;i++){

if(Math.abs(divSn.offsetTop-arr[i].offsetTop)<=0 && Math.abs(divSn.offsetLeft-arr[i].offsetLeft)<=0){
alert("GeeeeeAME OVER");
clearInterval(timerSn);
clearInterval(timerRan);
}
}
}
 
//判断是否吃掉
function isEat(){
for(var i=0;i<arrFood.length;i++){
if(Math.abs(divSn.offsetTop-arrFood[i].offsetTop)<=10 && Math.abs(divSn.offsetLeft-arrFood[i].offsetLeft)<=10){
//调用函数 长大
changeBiger(i);
// 移除food
divWall.removeChild(arrFood[i]);
// 移除数组中元素
arrFood.splice(i,1);
// 每个元素位置变化；
}
}
}
 
// 设置边界
function border(){
if(divSn.offsetTop-divWall.offsetTop<=0 || divSn.offsetTop+10-(divWall.offsetTop+divWall.offsetHeight)>=-3){
alert("GAME OVER");
clearInterval(timerSn);
clearInterval(timerRan);
}
if(divSn.offsetLeft-divWall.offsetLeft<=0 || divSn.offsetLeft+10-divWall.offsetLeft-divWall.offsetWidth>=-3){
alert("GAME OVER");
clearInterval(timerSn);
clearInterval(timerRan);
}
}
 
//随机生成猎物
function random(){
var foodTop = Math.floor(Math.random()*590)+3+"px";
var foodLeft = Math.floor(Math.random()*990)+3+"px";

var subFood = document.createElement("div");
subFood.style.width = "10px";
subFood.style.height = "10px";
subFood.style.backgroundColor = "red";
subFood.style.position = "absolute";
subFood.style.top = foodTop;
subFood.style.left = foodLeft;

divWall.appendChild(subFood);
arrFood.push(subFood);
}

// 移动每一个元素的位置
function changeLoaction(){

for(var i=arr.length-1;i>0;i--){
arr[i].style.top= arr[i-1].offsetTop+"px";
arr[i].style.left = arr[i-1].offsetLeft+"px";
}
}

// 吃一个长一个
function changeBiger(num){
var arrLen = arr.length;
var subFood = document.createElement("div");
subFood.style.width = "10px";
subFood.style.height = "10px";
subFood.style.backgroundColor = "darkblue";
subFood.style.position = "absolute";
subFood.style.top = arrFood[num].offsetTop+"px";
subFood.style.left = arrFood[num].offsetLeft+"px";
// 添加到数组中
arr.push(subFood);
divWall.appendChild(subFood);
//alert(arr.length);
}


//判断按键
document.onkeydown = function (event){
switch(event.keyCode){
case 37:{
if(direction!="right"){
direction = "left";
}
break;
}
case 38:{
if(direction!="bottom"){
direction = "top";
}
break;
}
case 39:{
if(direction!="left"){
direction = "right";
}
break;
}
case 40:{
if(direction!="top"){
direction = "bottom";
}
break;
}
case 32:{
if(direction!="space"){
preDire = direction;
}
direction = "space";
break;
}
}
}

// 暂停功能
document.onkeypress = function (event){
if(event.keyCode==32){
if(flagStop == true){
clearInterval(timerSn);
clearInterval(timerRan);
flagStop = false;
//alert(flagStop);
}else{
// 总时钟！！
direction = preDire;
//alert(direction);
timerSn = setInterval( main,10);
timerRan =setInterval(random,1000);
flagStop = true;
}
}
}

// 根据按下的键盘决定移动的方向
function keyPressMove(fangXiang){
//alert(fangXiang)
//console.log(divSn.offsetTop+"    "+divSn.offsetLeft);
switch(fangXiang){
case "top":{
divSn.style.top = divSn.offsetTop-1+"px";
break;
}
case "left":{
divSn.style.left = divSn.offsetLeft-1+"px";
break;
}
case "right":{
divSn.style.left = divSn.offsetLeft+1+"px";
break;
}
case "bottom":{
divSn.style.top = divSn.offsetTop+1+"px";
break;
}

}
}

</script>

</html>





sdfujichao
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js小项目练习
11-16
使用jquery写的一些小例子，比如菜单，星级评分，轮播图，拖拽上传等效果源码。
原生JS 实现小游戏 贪吃蛇
m0_64191440的博客
08-16 3029
JS 超详细 贪吃蛇 案例 速速围观
贪吃蛇项目
2301_78913125的博客
02-14 824
Win32 API 的相关知识 ， 的本地化，贪吃蛇思路，以及代码实现
【JavaScript】实战训练小项目-WebAPI
Carefree_State的博客
05-21 2822
本文章是结合之前的知识，学习jQuery框架，和一些其中的API，实现一些互动性强的小项目！
用js实现小项目
szdbjyx的博客
09-23 2967
一.js实现注册账号 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script action="#"> function checkFrom() { ...
JavaScript实现贪吃蛇小游戏
leihao-lester
11-05 1万+
JavaScript实现贪吃蛇小游戏 功能概述 本程序实现了如下功能： 贪吃蛇的基本功能 统计得分 开始与暂停 选择难度等级 设置快捷键 5.1 通过ijkl，wsad也能实现方向的切换 5.2 通过“P” 表示暂停，“C”表示开始或继续，"R"表示重新开始 实现过程 最开始的实现原理其实是参考的csdn的一位大神，他用JavaScript20行就实现了贪吃蛇的基本功能，难等可贵的是还没有bug，链接在此 要实现贪吃蛇大概有以下几个步骤： 画一个蛇的移动区域 画一条蛇 画食物 让蛇
基于原生JS实现的贪吃蛇小游戏源码(浏览器直接运行).zip
01-11
基于原生JS实现的贪吃蛇小游戏源码(浏览器直接运行).zip基于原生JS实现的贪吃蛇小游戏源码(浏览器直接运行).zip基于原生JS实现的贪吃蛇小游戏源码(浏览器直接运行).zip基于原生JS实现的贪吃蛇小游戏源码(浏览器直接...
原生js贪吃蛇源码，采用canvas实现
最新发布
03-20
蛇的移动和食物的生成都是通过 JavaScript 代码实现的。玩家可以通过方向键控制蛇的移动方向。游戏循环通过 setInterval 函数实现，每隔一定时间更新一次游戏状态并重新绘制游戏画面。总共有五关，每关对应不同的...
原生js+canvas实现贪吃蛇效果
11-19
本文实例为大家分享了canvas实现贪吃蛇效果的具体代码，供大家参考，具体内容如下 效果展示： 源码展示： 页面布局展示：worm.html <!DOCTYPE html> <html> <head> <meta charset="utf-8">...
原生javascript网页贪吃蛇小游戏源码
08-24
javascript 面向对象的编程方法写的一个贪吃蛇小游戏，旨在锻炼自己的编程思想。编程的路上，思想更重要！
原生js贪吃蛇源码
11-10
一个用js做的小项目仅供参考，分享资源使我快乐带着不用谢。
原生Javascript贪吃蛇代码
12-29
原生Javascript贪吃蛇代码
JavaScript实现贪吃蛇
Sunblogy的博客
09-26 1211
用js实现一个贪吃蛇游戏， 要求： 1. 不能撞墙 2. 不能撞自己 3. 每吃一个食物就会加一分 4. 相撞后就结束游戏
用JavaScript写的贪吃蛇游戏（很简单，很详细）
热门推荐
编程界明世隐的博客
02-05 2万+
效果 编写外部框架 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } #box{ width:620px; height:450px; position:absolute; margin:0 auto
【JS】原生js实现极简版贪吃蛇，附全部代码
小安驾到的博客
02-15 1053
原生js实现贪吃蛇小游戏，包括小蛇的移动、吃食物、检测是否撞到自己等功能
html5 canvas+js贪吃蛇网页小游戏代码
wjh091225的博客
03-28 7840
html5 canvas+js贪吃蛇网页小游戏代码 注解都在代码里了,自己理解吧 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" conte.
js实现贪吃蛇
deasec的博客
03-28 5063
很久没有打过js了，所以我翻出以前用画布(Canvas)标签做的贪吃蛇来复习一下顺便讲解一下执行原理。 实现思路：主要用到canvas标签来作为动画，采用逐帧运动法：先画一张之后销毁上一张，擦除->重绘（循环） 需要利用定时器每隔一小段时间就擦除->重绘。运动产生的原理就是：每次运动过程中在前面加一个头然后判断是否吃到食物。如果没有吃到食物就删除尾部(这样就产生前进的效果)，吃到了就不用删除：这样就比原来长度长了一段。边界判定就是获取当前蛇头位置的x,y乘以像素值n 判断是否达到了边界，还有头
购物车——js小项目实例
u013430418的博客
09-08 4570
短短几周，js阶段的学习已然结束，结课作业就是实现一个购物车功能
JS学习——贪吃蛇代码（简易版）
awwwwmman的博客
05-17 3762
贪吃蛇目录页面游戏页面开始页面暂停页面代码html代码css代码js代码素材目录结构图片素材说明方块的构造函数方块原型上的方法蛇的构造函数蛇的初始化方法蛇的下一个位置方法（重点）这个方法用于获取蛇头的下一个位置对应的元素，并根据元素做不同的事情。处理碰撞后要做的事的方法move（重点）eatdie创建蛇的实例对象创建食物创建游戏逻辑游戏实例的初始化方法游戏的开始，暂停，结束方法游戏的开始start游戏的暂停pause游戏的结束over开始游戏和按钮暂停游戏和暂停游戏按钮 页面 游戏页面 开始页面 暂停页
贪吃蛇java项目实现下载源代码
12-16
贪吃蛇项目是一个经典的游戏，通过Java语言实现这个项目是一个非常好的学习机会。要下载贪吃蛇项目的源代码可以通过以下步骤： 首先，打开您的网络浏览器，进入GitHub网站。 在GitHub的搜索栏输入“贪吃蛇Java项目源...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值