原生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程序设计有所帮助。

Javascript 相关文章推荐
node.js中的fs.readFile方法使用说明
Dec 15 Javascript
深入浅出ES6之let和const命令
Aug 25 Javascript
百度多文件异步上传控件webuploader基本用法解析
Nov 07 Javascript
详解webpack进阶之loader篇
Aug 23 Javascript
使用node.js对音视频文件加密的实例代码
Aug 30 Javascript
JavaScript代码执行的先后顺序问题
Oct 29 Javascript
JS数组转字符串实现方法解析
Sep 04 Javascript
Vue实现开关按钮拖拽效果
Sep 22 Javascript
jquery简易手风琴插件的封装
Oct 13 jQuery
ant-design-vue中tree增删改的操作方法
Nov 03 Javascript
vue 使用rules对表单字段进行校验的步骤
Dec 25 Vue.js
详解JS WebSocket断开原因和心跳机制
May 07 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
You might like
PHP简单系统数据添加以及数据删除模块源文件下载
2008/06/07 PHP
PHP中MD5函数使用实例代码
2008/06/07 PHP
浅谈web上存漏洞及原理分析、防范方法(安全文件上存方法)
2013/06/29 PHP
php判断手机访问还是电脑访问示例分享
2014/01/20 PHP
关于PHP通用返回值设置方法
2017/03/31 PHP
客户端脚本中常常出现的一些问题和调试技巧
2007/01/09 Javascript
javascript学习笔记(十三) js闭包介绍(转)
2012/06/20 Javascript
jquery必须知道的一些常用特效方法及使用示例(整理)
2013/06/24 Javascript
js页面跳转的常用方法整理
2013/10/18 Javascript
JavaScript显示表单内元素数量的方法
2015/04/02 Javascript
javascript中传统事件与现代事件
2015/06/23 Javascript
js随机生成字母数字组合的字符串 随机动画数字
2015/09/02 Javascript
jQuery+PHP+MySQL实现无限级联下拉框效果
2016/02/19 Javascript
由简入繁实现Jquery树状结构的方法(推荐)
2016/06/10 Javascript
功能强大的jquery.validate表单验证插件
2016/11/07 Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
2016/12/02 Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
2017/01/04 Javascript
JS 调试中常见的报错问题解决方法
2017/05/20 Javascript
JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
2017/06/23 Javascript
vue多页面开发和打包正确处理方法
2018/04/20 Javascript
Vue仿支付宝支付功能
2018/05/25 Javascript
JavaScript ES6常用基础知识总结
2019/02/09 Javascript
vue项目查看vue版本及cli版本的实现方式
2020/10/24 Javascript
Django1.3添加app提示模块不存在的解决方法
2014/08/26 Python
Python装饰器入门学习教程(九步学习)
2016/01/28 Python
Python3使用requests包抓取并保存网页源码的方法
2016/03/15 Python
十行代码使用Python写一个USB病毒
2019/06/21 Python
基于HTML5 audio元素播放声音jQuery小插件
2011/05/11 HTML / CSS
Urban Outfitters美国官网:美国生活方式品牌
2016/08/26 全球购物
施华洛世奇日本官网:SWAROVSKI日本
2018/05/04 全球购物
香港演唱会订票网站:StubHub香港
2019/10/10 全球购物
大学生精神文明先进个人事迹材料
2014/05/02 职场文书
竞选班干部演讲稿400字
2014/08/20 职场文书
求职推荐信范文
2015/03/27 职场文书
初中生物教学反思
2016/02/20 职场文书
2016年庆“七一”主题党日活动总结
2016/04/05 职场文书