首页
所有分类
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 相关文章推荐
web 页面分页打印的实现
Jun 22 Javascript
jquery select(列表)的操作（取值/赋值）
Mar 16 Javascript
js 连接数据库如何操作数据库中的数据
Nov 23 Javascript
js函数在frame中的相互调用详解
Mar 03 Javascript
Javascript中setTimeOut和setInterval的定时器用法
Jun 12 Javascript
JS获取checkbox的个数简单实例
Aug 19 Javascript
自制微信公众号一键排版工具
Sep 22 Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
Feb 22 Javascript
bootstrap+spring boot实现面包屑导航功能(前端代码)
Oct 09 Javascript
vue element upload组件 file-list的动态绑定实现
Oct 11 Javascript
在vue中使用Echarts画曲线图的示例
Oct 03 Javascript
vue实现列表垂直无缝滚动
Apr 08 Vue.js
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) FutureTask(3) 对齐打印(1) ForkJoin(1) 计算器(5) 五子棋(12) CompletableFuture(1) 异步回调(1) format(1) Springboot-cli(1)
You might like
一个oracle+PHP的查询的例子
2006/10/09 PHP
php 调用ffmpeg获取视频信息的简单实现
2017/04/03 PHP
php的命名空间与自动加载实现方法
2019/08/25 PHP
php使用goto实现自动重启swoole、reactphp、workerman服务的代码
2020/04/13 PHP
JavaScript基本对象
2007/01/11 Javascript
JavaScript 实现??打印?理
2007/04/28 Javascript
ExtJS扩展 垂直tabLayout实现代码
2009/06/21 Javascript
基于jquery的弹出提示框始终处于窗口的居中位置（类似于alert弹出框的效果）
2011/09/28 Javascript
js获取对象为null的解决方法
2013/11/21 Javascript
JQuery 控制内容长度超出规定长度显示省略号
2014/05/23 Javascript
js实现div拖动动画运行轨迹效果代码分享
2015/08/27 Javascript
基于Vue.js的表格分页组件
2016/05/22 Javascript
js编写一个简单的产品放大效果代码
2016/06/27 Javascript
BootStrap按钮标签及基本样式
2016/11/23 Javascript
浅谈Vue.js
2017/03/02 Javascript
整理关于Bootstrap排版的慕课笔记
2017/03/29 Javascript
原生JS实现N级菜单的代码
2017/05/21 Javascript
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
2019/05/09 Javascript
小程序新版订阅消息模板消息
2019/12/31 Javascript
详解Nuxt内导航栏的两种实现方式
2020/04/16 Javascript
Python编码时应该注意的几个情况
2013/03/04 Python
python中正则表达式的使用详解
2014/10/17 Python
Django的URLconf中使用缺省视图参数的方法
2015/07/18 Python
pandas 对series和dataframe进行排序的实例
2018/06/09 Python
Python第三方Window模块文件的几种安装方法
2018/11/22 Python
简单了解python高阶函数map/reduce
2019/06/28 Python
OpenCV 模板匹配
2019/07/10 Python
python topk()函数求最大和最小值实例
2020/04/02 Python
python des,aes,rsa加解密的实现
2021/01/16 Python
写给老师的表扬信
2014/01/21 职场文书
区优秀教师事迹材料
2014/02/10 职场文书
MySQL 存储过程的优缺点分析
2021/05/20 MySQL
Pytest中conftest.py的用法
2021/06/27 Python
MySQL 那些常见的错误设计规范,你都知道吗
2021/07/16 MySQL
MySQL中EXPLAIN语句及用法
2022/05/20 MySQL
Python面试不修改数组找出重复的数字
2022/05/20 Python