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

原生js实现的贪吃蛇网页版游戏完整实例

Posted in Javascript onMay 18, 2015

本文实例讲述了原生js实现的贪吃蛇网页版游戏。分享给大家供大家参考。具体实现方法如下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生js写的贪吃蛇网页版游戏</title>
</head>
<body>
</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>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

原生js实现的贪吃蛇网页版游戏完整实例

- Author -

休闲生活文化

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

Javascript 相关文章推荐
javascript小数计算出现近似值的解决办法
Feb 06 Javascript
from 表单提交返回值用post或者是get方法实现
Aug 21 Javascript
jquery复选框checkbox实现删除前判断
Apr 20 Javascript
用js传递value默认值的示例代码
Sep 11 Javascript
AngularJS优雅的自定义指令
Jul 01 Javascript
ES6使用Set数据结构实现数组的交集、并集、差集功能示例
Oct 31 Javascript
JS获取并处理php数组的方法实例分析
Sep 04 Javascript
在vue中多次调用同一个定义全局变量的实例
Sep 25 Javascript
小程序文字跑马灯效果
Dec 28 Javascript
Vue指令指令大全
Feb 09 Javascript
使用node.JS中的url模块解析URL信息
Feb 06 Javascript
使用webpack和rollup打包组件库的方法
Feb 25 Javascript
JQuery中层次选择器用法实例详解
May 18 #Javascript
Jquery中基本选择器用法实例详解
May 18 #Javascript
Jquery注册事件实现方法
May 18 #Javascript
jquery中map函数遍历数组用法实例
May 18 #Javascript
jquery使用each方法遍历json格式数据实例
May 18 #Javascript
Jquery使用css方法改变样式实例
May 18 #Javascript
Jquery使用val方法读写value值
May 18 #Javascript
SRF-22W(1) ICF-F10(1) PR-D3L(1) YH-R296(1) SRF-40W(1) ICF-SW100(1) 德劲1107(1) 德生1994(1) 华普R-96(1) 上海永华(1)
You might like
php木马攻击防御之道
2008/03/24 PHP
php、java、android、ios通用的3des方法(推荐)
2016/09/09 PHP
js基于qrcode.js生成二维码的方法【附demo插件源码下载】
2016/12/28 PHP
yii2 resetful 授权验证详解
2017/05/18 PHP
jquery.validate使用攻略 第五步 正则验证
2010/07/01 Javascript
js读取配置文件自写
2014/02/11 Javascript
JS字符串拼接在ie中都报错的解决方法
2014/03/27 Javascript
javascript字母大小写转换的4个函数详解
2014/05/09 Javascript
javascript动态修改Li节点值的方法
2015/01/20 Javascript
JS仿Windows开机启动Loading进度条的方法
2015/02/26 Javascript
深入解析jQuery中Deferred的deferred.promise()方法
2016/05/03 Javascript
JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
2016/06/17 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
2016/12/08 Javascript
浅谈jQuery中事情的动态绑定
2017/02/12 Javascript
获取本机IP地址的实例(JavaScript / Node.js)
2017/11/24 Javascript
jquery绑定事件 bind和on的用法与区别分析
2020/05/22 jQuery
跟老齐学Python之使用Python查询更新数据库
2014/11/25 Python
python每隔N秒运行指定函数的方法
2015/03/16 Python
Python实现扫描局域网活动ip（扫描在线电脑）
2015/04/28 Python
Python基于二分查找实现求整数平方根的方法
2016/05/12 Python
详解Python文本操作相关模块
2017/06/22 Python
python json.loads兼容单引号数据的方法
2018/12/19 Python
Python3中lambda表达式与函数式编程讲解
2019/01/14 Python
Python Matplotlib实现三维数据的散点图绘制
2019/03/19 Python
Django中在xadmin中集成DjangoUeditor过程详解
2019/07/24 Python
ubuntu 18.04 安装opencv3.4.5的教程(图解)
2019/11/04 Python
HTML5新特性之语义化标签
2017/10/31 HTML / CSS
商超业务员岗位职责
2014/03/12 职场文书
优秀少先队大队辅导员事迹材料
2014/05/04 职场文书
安全责任书怎么写
2014/07/28 职场文书
作风年建设汇报材料
2014/08/14 职场文书
放假通知范文
2015/04/14 职场文书
中秋晚会致辞
2015/07/31 职场文书
大学校园招聘会感想
2015/08/10 职场文书
《称赞》教学反思
2016/02/17 职场文书
Python中的嵌套循环详情
2022/03/23 Python