当前位置:首页 > 日记 > 正文

javascript实现一个简单的贪吃蛇游戏

javascript实现一个简单的贪吃蛇游戏
javascript实现的一个简单的贪吃蛇游戏,功能很简单,代码也很实用,也不多废话,合作伙伴参考注释。
贪吃蛇

var映射;
毒蛇;蛇
无价值食品;
var定时器
无功initspeed = 200; / /初始时间间隔(毫秒),间接代表蛇的移动速度
无功nowspeed = initspeed; / /当游戏贪吃蛇的移动速度
var等级=0;
var标志= 1;(间接作为水平)
映射
函数映射(){
这个宽度= 800;
这个高度= 400;
这个位置=绝对的;
这颜色=# eeeeee;
这_map = null;
映射
这个=函数(){
这个_map = document.createelement('div);
这个_map。风格。宽度=这宽度+ 'px;
这个_map。风格。高度=这高度+ 'px;
这个_map位置= this.position。风格;
这个_map。风格。背景颜色= this.color;
document.getelementsbytagname('body){ 0 }。appendChild(这个。_map);
}
}
食物
功能食品(){
这个宽度= 20;
这个高度= 20;
这个位置=绝对的;
这颜色=# 00ff00;
这个,x=0;
这个,y=0;
这_food;
生成食物
这个=函数(){
这个_food = document.createelement('div);
这个_food。风格。宽度=这宽度+ 'px;
这个_food。风格。高度=这高度+ 'px;
这个_food位置= this.position。风格;
这个_food。风格。背景颜色= this.color;
这个X = math.floor(Math.random()*地图。宽/本。宽度);
这math.floor。Y =(Math.random()*地图。身高 /本。宽度);
这个_food。风格。左= X * this.width本;
这个_food。风格。=这this.height Y *;

地图。_map.appendchild(这个。_food);
}
}

函数蛇(){
这个宽度= 20;
这个高度= 20;
这个位置=绝对的;
这个,直接= NULL;移动方向。
初始蛇
这个主体=新数组(
{ 3,2,',零}, / /头
{零} 2,2,'蓝色',
{零} 1,2,'蓝色',
);
蛇/代
这个=函数(){
对于(var i = 0;i < this.body.length;i++){
如果(这个主体{ { 3 } = NULL){
这个身体{我} { 3 } = document.createelement('div);
这个身体{我} { 3 }。风格。宽度= this.width;
这个身体{我} { 3 }。风格。高度= this.height;
这个身体{我} { 3 }。位置= this.position风格;
这个身体{我} { 3 }。风格。背景颜色=本。体{我} { 2 };
地图。_map.appendchild(这个身体{我} { 3 });
}
这个身体{我} { 3 }。风格。左=本。体{我} { 0 } *宽度+ 'px;
这个身体{我} { 3 }。风格。=这。体{我} { 1 } *高度+ 'px;
}
}
蛇形移动控制
移动=函数(){

VaR的长度= this.body.length-1;
对于(var i =长度;i 0;i){
这个身体{我} { 0 } = { },身体:{ 0 };
这个身体{我} { 1 } = { },身体:{ 1 };
}

开关(这个。直接){
case'right:
这个。{ { 0 } { 0 } }。。{ { 0 } { 0 } } + 1;
打破;
case'left:
这个。{ { 0 } { 0 } }。。{ { 0 } { 0 } - 1;
打破;
case'up:
这个。{ { 0 } { 1 } }。。{ { 0 } { 1 } - 1;
打破;
case'down:
这个。{ { 0 } { 1 } }。。{ { 0 } { 1 } } + 1;
打破;
}

this.condition();
This.show();
}
计时器,在游戏开始时,调用
这个速度=函数(){
定时器= setInterval('()',snake.move initspeed);
}
条件
这个条件=函数(){
/吃食物
如果(这个身体{ 0 } { 0 } = =食物。这体{ 0 } { 1 } = =食物。Y){
年级+;
这个体{ { } }。身体长度= {零} 0,0,'蓝色';
地图。_map.removechild(食品。_food)
food.show();
}
以确定是否墙壁 /。
如果(这个身体{ 0 } { 0 } =地图。宽/本。宽度| |本。体{ 0 } { 1 } =地图。身高 /本。高度){
警报(游戏结束);
ClearInterval(定时器);
返回;
}
确定是否命中其
对于(var i = 1;i < this.body.length;i++){
如果(这个{ { 0 } { 0 } =这个。{ { 0 } }这个。正文{ 0 } { 1 } } =这个。主体{ 1 }){){
警报(游戏结束);
ClearInterval(定时器);
返回;
}
}
速度,积分各有2分,速度加倍。
如果(等级 2 =标志){
ClearInterval(定时器);
旗帜+;
nowspeed = initspeed /标志;
定时器= setInterval('()',snake.move nowspeed);
}
文件标题= 'snake积分+年级+速度级+ initspeed / nowspeed;

}
}

文档化函数(事件){
按任意键开始游戏。
如果(蛇=直接= NULL){
蛇直接=左;
Snake.speed();
}
控制方向,右边是一个站。
开关(窗口。eventwindow。事件。关键词:事件。键码){ / /浏览器兼容
案例87:
蛇。直接=蛇。体{ 0 } { 0 } = =蛇。体{ 1 } { 0 }蛇。直接向上'; / /避免反向移动,引发死亡的bug
打破;
案例83:
蛇。直接=蛇。体{ 0 } { 0 } = =蛇。体{ 1 } { 0 }蛇直接:Down;
打破;
案例68:
蛇。直接=蛇。体{ 0 } { 1 } = =蛇。体{ 1 } { 1 }蛇。直接:左;
打破;
案例65:
蛇。直接=蛇。体{ 0 } { 1 } = =蛇。体{ 1 } { 1 }蛇。直接:右;
打破;
}
}
自动加载/游戏
窗口。指针函数(){
映射=新映射();
Map.show();
食物=新食物();
food.show();
蛇=新蛇();
Snake.show();

}
以上是本文的全部内容,希望大家能喜欢。

相关文章

PS的一个简单方法使粗糙的头发变得

PS的一个简单方法使粗糙的头发变得

方法,柔软,简单,电脑软件,PS,本教程是一个简单的方法,让朋友和粗发变得符合ps教程,效果很漂亮,很简单,新手可以在这里学习,希望大家喜欢这个教程。 我听说你可以高兴,或者海飞丝可以把头发…今天萧边介绍PS方法简单、粗糙的头发变得柔顺,带着! 原…

防止浏览器返回按钮的Javascript方法

防止浏览器返回按钮的Javascript方法

返回按钮,方法,浏览器,电脑软件,Javascript,本文演示Javascript阻止浏览器返回按钮的方式: 下面的js代码可以防止用户单击返回按钮。这是非常有用的,你需要的朋友可以收集它。 window.history.forward(); 功能stopback(){ window.history.forward();} onp…

PS图象处理软件让美丽的中性红褐色

PS图象处理软件让美丽的中性红褐色

红褐色,图象,树林里,处理软件,美丽,素材图片主色为黄绿色,同时先减少中性色饱和度,然后用曲线增加暗红色棕色,高光浅绿色可以增加。 素材图片主色为黄绿色,同时先减少中性色饱和度,然后用曲线增加暗红色棕色,高光浅绿色可以增加。 原 最终效果 …

为CKEditor取消逃生方法

为CKEditor取消逃生方法

方法,取消,电脑软件,CKEditor,程序员的博客总是想用着色代码贴一堆代码在前标签。因为WordPress CKEditor总是觉得很烦,在HTML标签写一些代码,在Visual转身离开。例如,>和 在ckeditor.config.js ckeditor插件目录配置文件,并添加以下行。 复…

PS教你做好吃的煎饼蜂蜜字体

PS教你做好吃的煎饼蜂蜜字体

字体,煎饼,教你做,好吃,电脑软件,本文主要介绍了PS教你做一个好吃的煎饼蜂蜜的字体效果,效果很好,喜欢的朋友可以一起学习一起走。 最终效果: 要创建一个新文档,我使用900×800像素。 新图层,命名为背景;图层设置图层样式,设置如下: 煎饼的材料,放…

情况在InDesignCS介绍插件的图形

情况在InDesignCS介绍插件的图形

插件,图形,情况,电脑软件,InDesignCS,本教程介绍InDesign CS设计插件,该工具将帮助您加快出版完成,简化工作步骤,它由几个小的功能,虽然很小,但你的工作会有很大的帮助,推荐给大家,希望对你有帮助 本教程介绍InDesign CS设计插件,该工具将帮助您加…

烟花设计水晶质感媒体播放器南志勋

烟花设计水晶质感媒体播放器南志勋

媒体播放器,质感,烟花,水晶,电脑软件,本教程是向您展示如何使用焰火设计媒体播放器播放器图标的晶体纹理。设计的图标非常精美和立体。这个教程很好。希望通过本教程能充分掌握烟花软件的使用技巧。 本教程是向您展示如何使用焰火设计媒体…

PS图象处理软件创造了一种动态流体

PS图象处理软件创造了一种动态流体

动态,流体,图象,处理软件,花艺,本教程介绍给朋友谁使用PS图象处理软件创建动态闪花艺术造型方法。这个教程制作的花真漂亮。作者详细地介绍了它,并推荐它。喜欢的朋友可以和教程一起学习。 我们教你打造PS图象处理软件花的动态建模方法液飞…

PS图象处理软件使用的图形渐变层的

PS图象处理软件使用的图形渐变层的

渐变,软件使用,图象处理,图形,按钮,对于各行各业的用户来说,纽扣的生产无疑是不可或缺的一部分。但是当你使用多个图层来叠加漂亮的效果时,修改起来非常不方便。 最终效果 1,新大小的自定文档,背景充满绿色。用钢笔设置路径,如下所示。 2、创…

画家画了一个堕落女孩的油画。

画家画了一个堕落女孩的油画。

画了,画家,女孩,电脑软件,本教程是介绍利用画家绘制的一幅吸烟堕落女孩绘画,手绘方法并不难,主要介绍了绘画教程的方法,适合初学者,非常适合学习,提出,希望本教程对大家有帮助。 本教程是介绍利用画家绘制的一幅吸烟堕落女孩绘画,手绘方法并不难,主…

烟火使用历史面板制作连续的背景效

烟火使用历史面板制作连续的背景效

连续,效果图,烟火,面板,背景,本教程介绍了一个朋友,利用烟花使用历史面板创建连续的背景渲染方法。本教程比较简单,很适合初学者学习。让我们一起工作。我希望你能帮助你。 本教程的主要方法是创建一个连续的背景,用烟花面板来介绍,这个教程对…

浅谈设计师的自我修养与自我提升

浅谈设计师的自我修养与自我提升

提升,自我,浅谈,修养,设计师,本文论述了设计师的自我修养和自我提升,作者更详细,并用几组实例来表达它们,非常好,推荐朋友,希望能帮助设计师朋友们。 今天的分享是绝对好的,每个人都应该学习。你可以很快地找出设计师和设计总监之间的区别。特别…