js实现web贪吃蛇小游戏

本是古典何须时尚 2022-03-21 08:10 276阅读 0赞

js实现web贪吃蛇小游戏

效果图见下，[效果展示地址][Link 1]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd3ZWlyZW5fZ2V0_size_16_color_FFFFFF_t_70][]

首先需要实现游戏系统函数，让蛇和食物去动

function System(){
    	this.timer=null;//定义定时器变量
    	this.argument=arguments[0];//保存传入的参数
    	this.flag=0;//计数变量	
    	this.state=true;//系统是否在暂停状态,默认正常
    	//系统开始功能
    	this.start=function(){
    		if(!this.timer){
    			this.timerEvent();
    		}		
    	}
    	//系统暂停功能
    	this.pause=function(){
    		if(this.state){
    			this.state=false;
    		}
    	}
    	//系统继续功能
    	this.goOn=function(){
    		if(!this.state){
    			this.state=true;
    		}	
    	}
    	//系统结束功能
    	this.finish=function(){
    		
    	}
    	//系统的定时器
    	this.timerEvent=function(){
    		var that=this
    		that.timer=setInterval(function(){
    			if(that.state){
    				that.AdditionalRun();
    				that.flag++;
    			}		
    		},50)
    	}
    	//处理传入的参数
    	/*//要传入的数据类型如下
    	 *[ {subject:Object,rule:[{method:move,multiple:1}]},... ]
    	 */
    	this. processingData=function(){
    		
    	}
    }

然后实现创建蛇对象和创建食物的函数

function CreateSnake(){}
    function CreateFood(obj){}

具体代码戳[这里][Link 2]

thanks

[Link 1]: https://wwr1234567.github.io/dailydemo/snake/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd3ZWlyZW5fZ2V0_size_16_color_FFFFFF_t_70]: /images/20220321/366d7a28be3e48f7b3210a13ec3c656d.png
[Link 2]: https://github.com/WWR1234567/dailydemo/blob/master/snake/js/snake.js

发表评论取消回复

表情：

评论列表（有 0 条评论，276人围观）

还没有评论，来说两句吧...

相关阅读

相关 javascript实现小游戏贪吃蛇

贪吃蛇 style <style> .face{ height: 400px;

朱雀/ 2023年05月30日 06:08/ 0 赞/ 199 阅读

相关贪吃蛇小游戏

贪吃蛇游戏是一款比较经典的休闲游戏，文章包括项目的部分源码以及运行界面的一些图片，项目也参考学习了许多大佬的文章，会在文章最后面贴出参考文章，有什么问题也请大家指正。一、

谁借莪１个温暖的怀抱￠/ 2023年01月02日 08:28/ 0 赞/ 269 阅读

相关 JS小功能：贪吃蛇游戏简单的实现

实现思路在贪吃蛇游戏的实现中，主要创建了五个对象来实现游戏的搭建，分别为： Tools：工具对象，产生随机数 Food：食物对象，在地图上随机产生食物 Sn

约定不等于承诺〃/ 2022年11月25日 00:52/ 0 赞/ 167 阅读

相关 Javascript实现贪吃蛇小游戏

![这里写图片描述][SouthEast] 黑色背景是一个900px\600px的相对定位的一个div（obox）,我们在其内部动态生成一系列的小div，内部的开始游戏按钮，

秒速五厘米/ 2022年06月12日 06:23/ 0 赞/ 440 阅读

相关小游戏：贪吃蛇

功能描述： 1.蛇初始长度为5，随着吃食物变长，速度也变快 2.速度有上限，当速度达到上限，不再增速 3.可长按方向键加速 4.吃一个食物加一分三个文件：S

淡淡的烟草味﹌/ 2022年06月03日 03:44/ 0 赞/ 359 阅读

相关 js小游戏贪吃蛇

介绍一个由本人制作的贪吃蛇小游戏。这个游戏采用了前端BootStrap框架和jQuery框架，因此移动端和电脑端都能兼容。虽然界面比较简陋，但是基本功能比较齐全，如果有bug欢

蔚落/ 2022年05月27日 07:26/ 0 赞/ 307 阅读

相关贪吃蛇小游戏总论

引言：一个月前完成了贪吃蛇小游戏，作为一个用来练手的项目，自己的确成长了不少，打算就这个项目写点东西，后来工作太忙，再加上一些原因，一直到现在才有空写下来，贪吃蛇小游戏分为总论

比眉伴天荒/ 2022年04月10日 07:18/ 0 赞/ 1095 阅读

相关 js实现web贪吃蛇小游戏

js实现web贪吃蛇小游戏效果图见下，[效果展示地址][Link 1] ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_te

本是古典何须时尚/ 2022年03月21日 08:10/ 0 赞/ 277 阅读

相关 js小游戏案例（贪吃蛇）

> 贪吃蛇是我们都玩过的游戏，也是一代人的回忆。今天就带大家用原生js实现贪吃蛇游戏功能。基本思路：随机创建地图；利用top和left值，利用坐标的传递使蛇动起来；随机在地

ゝ一世哀愁。/ 2022年03月18日 09:24/ 0 赞/ 489 阅读

相关 react实现贪吃蛇小游戏

之前看别人写小游戏觉得很厉害，正好最近闲来无聊，就写了个入门级的小游戏，贪吃蛇。当你开始实现的时候，会发现其实并没有你想的那么难。下面进入正题。项目源码见：[https

雨点打透心脏的1/2处/ 2022年03月01日 17:28/ 0 赞/ 365 阅读