首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

js贪吃蛇网页版游戏特效代码分享（挑战十关）

Posted in Javascript onAugust 24, 2015

js贪吃蛇网页版游戏特效，经测试图片切换过程非常酷，相信大家一定都玩过这个经典小游戏吧，但是它是怎么实现的呐，感兴趣的朋友快来学习学习吧

运行效果图：----------------------查看效果-----------------------

js贪吃蛇网页版游戏特效代码分享（挑战十关）

小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。
为大家分享的js贪吃蛇网页版游戏特效代码如下

<body><title>js贪吃蛇网页版游戏特效</title></body>
<script> 
 Star = {
 init:function(){
 var bigDiv = this.appendEle(this.addStyle(this.creatEle(),
 {w:'900',h:'600',p:'absolute',t:10,l:500}));
 for(var i = 0; i<600/30;i++){
 Star.data.arrayAll[i] = [];
 for(var j = 0; j<900/30; j++){
 div = this.addStyle(this.creatEle(),{w:(!+[1,] ? 30 :28),h:(!+[1,] ? 30 :28),f:'left',border:'1px solid #666'});
 div.setAttribute('number', i*30+j)
 this.appendEle(div,bigDiv)
 Star.data.arrayAll[i][j] = div;
 }
 }
 bigDiv = this.appendEle(this.addStyle(this.creatEle(),
 {w:'900',h:'600',p:'absolute',t:10,l:500}));


 this.pushEleInSelect(Star.data.arrayAll[9][15],Star.data.arrayAll[9][14],Star.data.arrayAll[9][13])
 this.keyBoard.apply(this,arguments);
 this.appearPoint();
 this.leftGo();
 },
 appearPoint:function(){
 var arrayIn = [];
 var number;
 for(var i = 0; i<600; i++){
 if(!this.hasInArray(Star.data.arrayAll[parseInt(i/30)][i%30].getAttribute('number'),Star.data.arraySelect)){
 arrayIn.push(Star.data.arrayAll[i])
 }
 }
 Star.data.foodNumber = number = parseInt(Math.random()*arrayIn.length);
 this.giveColor(number)
 },
 giveColor:function(number){
 var div = Star.data.arrayAll[parseInt(number/30)][number%30];
 Star.timeInterval.timeB = setInterval(function(){
 if(div.className == 'shanshuo'){
 div.className = ''
 div.style.backgroundColor = '#fff'
 }
 else{
 div.className = 'shanshuo';
 div.style.backgroundColor = '#f00'
 }
 },500)
 },
 disappearColor:function(){
 clearInterval(Star.timeInterval.timeB);
 Star.data.arrayAll[parseInt(Star.data.foodNumber/30)][Star.data.foodNumber%30].style.backgroundColor = '#f00';
 },
 hasInArray:function(number,array){
 for(var i in array){
 if(array[i] instanceof Array){
 if(this.hasInArray(number,array[i])){
 return true;
 }
 }
 if(array[i].getAttribute && array[i].getAttribute('number') == number) return true;
 }
 return false;
 },
 keyBoard:function(){
 var self = this;
 document.onkeydown = function(e){
 e = e? e : window.event;
 switch(e.keyCode){
 case 37: if(Star.keycode == 37 || Star.keycode == 39){return;}; self.leftGo(); break;
 case 38: if(Star.keycode == 38 || Star.keycode == 40){return;}; self.upGo();break;
 case 39: if(Star.keycode == 37 || Star.keycode == 39){return;}; self.rightGo();break;
 case 40: if(Star.keycode == 38 || Star.keycode == 40){return;}; self.downGo();break;
 }
 }
 },
 leftGo:function(){
 var div, number , self = this;
 Star.keycode = 37;
 clearInterval(Star.timeInterval.timeA)
 Star.timeInterval.timeA = setInterval(function(){
 number = Star.data.arraySelect[0].getAttribute('number');
 if(number%30<=0 || self.hasInArray(number-1,Star.data.arraySelect)){
 self.guanle();
 }
 else{
 if(Star.data.foodNumber == number-1){
 self.pushEleInSelect(Star.data.arrayAll[parseInt(Star.data.foodNumber/30)][Star.data.foodNumber%30]);
 self.disappearColor();
 self.appearPoint();
 }
 else{
 div = Star.data.arraySelect.pop();
 div.style.background = '#fff';

 self.pushEleInSelect(Star.data.arrayAll[parseInt(number/30)][number%30-1]);
 }
 }
 },Star.timeInterval.speed)
 },
 upGo:function(){
 var div, number , self = this;
 Star.keycode = 38;
 clearInterval(Star.timeInterval.timeA)
 Star.timeInterval.timeA = setInterval(function(){
 number = parseInt(Star.data.arraySelect[0].getAttribute('number'));

 if(parseInt(number/30)<=0 || self.hasInArray(number-30,Star.data.arraySelect)){
 self.guanle();
 }
 else{
 if(Star.data.foodNumber == number-30){
 self.pushEleInSelect(Star.data.arrayAll[parseInt(Star.data.foodNumber/30)][Star.data.foodNumber%30]);
 self.disappearColor();
 self.appearPoint();
 }
 else{
 div = Star.data.arraySelect.pop();
 div.style.background = '#fff';
 self.pushEleInSelect(Star.data.arrayAll[parseInt(number/30)-1][number%30]);
 }
 }
 },Star.timeInterval.speed)
 },
 rightGo:function(){
 var div, number , self = this;
 Star.keycode = 39;
 clearInterval(Star.timeInterval.timeA)
 Star.timeInterval.timeA = setInterval(function(){
 number = parseInt(Star.data.arraySelect[0].getAttribute('number'));
 if(parseInt(number%30)>=29 || self.hasInArray(number+1,Star.data.arraySelect)){
 self.guanle();
 }
 else{
 if(Star.data.foodNumber == number+1){
 self.pushEleInSelect(Star.data.arrayAll[parseInt(Star.data.foodNumber/30)][Star.data.foodNumber%30]);
 self.disappearColor();
 self.appearPoint();
 }
 else{
 div = Star.data.arraySelect.pop();
 div.style.background = '#fff';
 self.pushEleInSelect(Star.data.arrayAll[parseInt(number/30)][number%30+1]);
 }
 }
 },Star.timeInterval.speed)
 },
 downGo:function(){
 var div, number , self = this;
 Star.keycode = 40;
 clearInterval(Star.timeInterval.timeA)
 Star.timeInterval.timeA = setInterval(function(){
 number = parseInt(Star.data.arraySelect[0].getAttribute('number'));
 if(parseInt(number/30)>=19 || self.hasInArray(number+30,Star.data.arraySelect)){
 self.guanle();
 }
 else{
 if(Star.data.foodNumber == number+30){
 self.pushEleInSelect(Star.data.arrayAll[parseInt(Star.data.foodNumber/30)][Star.data.foodNumber%30]);
 self.disappearColor();
 self.appearPoint();
 }
 else{
 div = Star.data.arraySelect.pop();
 div.style.background = '#fff';
 self.pushEleInSelect(Star.data.arrayAll[parseInt(number/30)+1][number%30]);
 }
 }
 },Star.timeInterval.speed)
 },
 guanle:function(){
 alert('撞墙了,总分：' + (Star.data.arraySelect.length-3) * parseInt(1000 / Star.timeInterval.speed));
 location.reload();
 },
 creatEle:function(tag){
 var tagName = tag || 'DIV'
 return document.createElement(tagName)
 },
 appendEle:function(ele,father){
 var father = father || document.body || document.documentElement
 father.appendChild(ele)
 return ele;
 },
 addStyle:function(ele,css){
 for(var i in css){
 switch(i){
 case 'b' : ele.style.background = css[i]; break;
 case 'l' : ele.style.left = css[i]+'px'; break;
 case 'r' : ele.style.right = css[i]+'px'; break;
 case 't' : ele.style.top = css[i]+'px'; break;
 case 'd' : ele.style.down = css[i]+'px'; break;
 case 'p' : ele.style.position = css[i]; break;
 case 'w' : ele.style.width = css[i]+'px'; break;
 case 'h' : ele.style.height = css[i]+'px'; break;
 case 'f' : ele.style.cssFloat = css[i]; ele.style.styleFloat = css[i]; break;
 default : ele.style[i] = css[i]; break;
 }
 }
 return ele;
 },
 pushEleInSelect:function(){
 for(var i = 0; i<arguments.length; i++){
 Star.data.arraySelect = [arguments[i]].concat(Star.data.arraySelect)
 this.addStyle(arguments[i],{b:'#f00'})
 }
 }
 }
 Star.data={
 arrayAll : [],
 arraySelect:[],
 newPoint:null,
 foodNumber:0
 }
 Star.timeInterval={
 timeA:null,
 timeB:null
 }
 Star.keycode = 0;


 window.onload = function(){
 var select = Star.creatEle('select');
 var optionDefault = Star.creatEle('option');
 optionDefault.innerHTML = '请选择关卡'
 Star.appendEle(optionDefault,select)
 Star.addStyle(select,{w:200,h:30,p:'absolute',left:'40%',top:'40%'})
 for(var i = 0 ; i <10 ; i++){
 var option = Star.creatEle('option');
 option.innerHTML = '第' + (i+1) + '关'
 Star.appendEle(option,select);
 }
 Star.appendEle(select)
 select.onchange = function(){
 selectValue = select.options[select.selectedIndex].value || select.options[select.selectedIndex].innerHTML
 var number = selectValue.match(/\d+/)[0]
 Star.timeInterval.speed = parseInt(200/number);
 Star.addStyle(select,{display:'none'});
 Star.init();
 }
 }

</script>

小编还为大家准备了精彩的专题：javascript经典小游戏汇总

以上就是为大家分享的js贪吃蛇网页版游戏特效代码，希望大家可以喜欢。

js贪吃蛇网页版游戏特效代码分享（挑战十关）

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
常用参考资料（手册）下载或者链接
Jul 22 Javascript
javascript 匿名函数的理解（透彻版)
Jan 28 Javascript
jquery 模拟类搜索框自动完成搜索提示功能(改进)
May 24 Javascript
jQuery Ajax提交表单查询获得数据实例代码
Sep 19 Javascript
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
Apr 26 Javascript
JavaScript基于DOM操作实现简单的数学运算功能示例
Jan 16 Javascript
浅析Javascript中双等号(==)隐性转换机制
Oct 27 Javascript
在vue中使用jsx语法的使用方法
Sep 30 Javascript
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
js瀑布流布局的实现
Jun 28 Javascript
vue v-on:click传递动态参数的步骤
Sep 11 Javascript
vue项目打包后请求地址错误/打包后跨域操作
Nov 04 Javascript
jquery马赛克拼接翻转效果代码分享
Aug 24 #Javascript
jquery+CSS实现的水平布局多级网页菜单效果
Aug 24 #Javascript
jQuery实现的背景动态变化导航菜单效果
Aug 24 #Javascript
jquery带下拉菜单和焦点图代码分享
Aug 24 #Javascript
javascript中SetInterval与setTimeout的定时器用法
Aug 24 #Javascript
jQuery仿360导航页图标拖动排序效果代码分享
Aug 24 #Javascript
js实现的黑背景灰色二级导航菜单效果代码
Aug 24 #Javascript
外键(1) 代理(2) 脏读(2) 选择器(1) 克隆(1) #{}(1) S-2000(1) 增删查改(1) IC-R9500(1) SQL注入(2)
You might like
解析php中heredoc的使用方法
2013/06/17 PHP
laravel数据库查询结果自动转数组修改实例
2021/02/27 PHP
PPK 谈 JavaScript 的 this 关键字 [翻译]
2009/09/29 Javascript
Dom操作之兼容技巧分享
2011/09/20 Javascript
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
2012/02/02 Javascript
后台获取ZTREE选中节点的方法
2015/02/12 Javascript
深入分析Cookie的安全性问题
2015/03/01 Javascript
JavaScript设置获取和设置属性的方法
2015/03/04 Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
2015/08/03 Javascript
jquery+css实现的红色线条横向二级菜单效果
2015/08/22 Javascript
JavaScript实现页面跳转的几种常用方式
2015/11/28 Javascript
浅析Javascript匿名函数与自执行函数
2016/02/06 Javascript
jQuery实现放大镜效果实例代码
2016/03/17 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
2017/07/02 Javascript
vue中component组件的props使用详解
2017/09/04 Javascript
Vue 中mixin 的用法详解
2018/04/23 Javascript
vue2.0实现的tab标签切换效果（内容可自定义）示例
2019/02/11 Javascript
vue draggable resizable gorkys与v-chart使用与总结
2019/09/05 Javascript
jQuery开发仿QQ版音乐播放器
2020/07/10 jQuery
Vue proxyTable配置多个接口地址,解决跨域的问题
2020/09/11 Javascript
[51:17]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
Python实现树莓派WiFi断线自动重连的实例代码
2017/03/16 Python
Python 处理数据的实例详解
2017/08/10 Python
Python实现破解猜数游戏算法示例
2017/09/25 Python
详解pyqt5 动画在QThread线程中无法运行问题
2018/05/05 Python
django js实现部分页面刷新的示例代码
2018/05/28 Python
python爬取微信公众号文章
2018/08/31 Python
python命名空间(namespace)简单介绍
2019/08/10 Python
python关于变量名的基础知识点
2020/03/03 Python
泰国网上购物：Shopee泰国
2018/09/14 全球购物
亿企通软件测试面试题
2012/04/10 面试题
2014年计划生育工作总结
2014/11/14 职场文书
教师个人教学反思
2016/02/23 职场文书
如何用JS实现简单的数据监听
2021/05/06 Javascript
vue+echarts实现多条折线图
2022/03/21 Vue.js
MySQL学习必备条件查询数据
2022/03/25 MySQL