编程 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 相关文章推荐

JXTree对象，读取外部xml文件数据，生成树的函数

Apr 02 Javascript

JavaScript 学习笔记（五）

Dec 31 Javascript

jQuery对象[0]是什么含义？

Jul 31 Javascript

jquery中ajax函数执行顺序问题之如何设置同步

Feb 28 Javascript

jquery.idTabs 选项卡使用示例代码

Sep 03 Javascript

JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法

May 28 Javascript

自动化测试读写64位操作系统的注册表

Aug 15 Javascript

Vuex2.0+Vue2.0构建备忘录应用实践

Nov 30 Javascript

javascript replace()第二个参数为函数时的参数用法

Dec 26 Javascript

react router4+redux实现路由权限控制的方法

May 03 Javascript

微信小程序自定义多列选择器使用详解

Jun 21 Javascript

Vue h函数的使用详解

Feb 18 Vue.js

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

You might like

免费手机号码归属地API查询接口和PHP使用实例分享

2014/04/10 PHP

PHP面向对象教程之自定义类

2014/06/10 PHP

PHP 面向对象程序设计（oop）学习笔记 (二) - 静态变量的属性和方法及延迟绑定

2014/06/12 PHP

php使用str_replace实现输入框回车替换br的方法

2014/11/24 PHP

smarty表格换行实例

2014/12/15 PHP

PHP删除字符串中非字母数字字符方法总结

2019/01/20 PHP

PHP基于timestamp和nonce实现的防止重放攻击方案分析

2019/07/26 PHP

javaScript checkbox 全选/反选及批量删除

2010/04/28 Javascript

jquery让返回的内容显示在特定div里(代码少而精悍)

2014/06/23 Javascript

jQuery实现渐变下拉菜单的简单方法

2015/03/11 Javascript

JavaScript6 let 新语法优势介绍

2016/07/15 Javascript

jquery配合.NET实现点击指定绑定数据并且能够一键下载

2016/10/28 Javascript

js实现HashTable(哈希表)的实例分析

2016/11/21 Javascript

JavaScript中Math对象的方法介绍

2017/01/05 Javascript

利用Node.js对文件进行重命名

2017/03/12 Javascript

js canvas实现擦除效果示例代码

2017/04/26 Javascript

利用javascript如何随机生成一定位数的密码

2017/09/22 Javascript

Iview Table组件中各种组件扩展的使用

2018/10/20 Javascript

vue axios post发送复杂对象问题

2019/06/04 Javascript

layui layer select 选择被遮挡的解决方法

2019/09/21 Javascript

Vue 刷新当前路由的实现代码

2019/09/26 Javascript

浅谈vue中组件绑定事件时是否加.native

2019/11/09 Javascript

Vue指令实现OutClick的示例

2020/11/16 Javascript

详解微信小程序「渲染层网络层错误」的解决方法

2021/01/06 Javascript

[14:00]DOTA2国际邀请赛史上最长大战赛后专访B神

2013/08/10 DOTA

[05:03]显微镜下的DOTA2第十期——Ti3豪之超神幽鬼

2014/06/23 DOTA

vc6编写python扩展的方法分享

2014/01/17 Python

python使用点操作符访问字典(dict)数据的方法

2015/03/16 Python

python中numpy基础学习及进行数组和矢量计算

2017/02/12 Python

python+opencv 读取文件夹下的所有图像并批量保存ROI的方法

2019/01/10 Python

Python 串口读写的实现方法

2019/06/12 Python

Python flask框架实现浏览器点击自定义跳转页面

2020/06/04 Python

python和php学习哪个更有发展

2020/06/17 Python

北京天润融通.net面试题笔试题

2012/02/20 面试题

婚前财产公证书

2014/04/10 职场文书

庐山导游词

2015/02/03 职场文书