javascript食いしん坊蛇のシングルバージョン
11424 ワード
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- <meta charset="UTF-8"> -->
<title></title>
<link charset="utf-8" href="style.css" rel="stylesheet" rev="stylesheet" type="text/css" />
<style type="text/css">
html,body
{
font:12px/1.5 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
#box{
width:400px;
height:400px;
position:absolute;
left:100px;
top:100px;
border:1px solid #000;
overflow:hidden;
background:#000;
}
.snake{
width:8px;
height:8px;
border:1px solid #d2d2d2;
overflow:hidden;
position:absolute;
background:#fff;
}
.food{
position:absolute;
width:9px;
height:9px;
border:1px solid red;
background:red;
overflow:hidden;
display:inline-block;
}
#result{
position:absolute;
left:100px;
top:510px;
}
#operate{
position:absolute;
left:520px;
top:100px;
}
</style>
</head>
<body>
<div id="box">
</div>
<div id="result"> ：1</div>
<div id="operate">
<select id="selectLevel">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
</select>
<input type="button" value=" " id="start" />
</div>
<script>
function snake(){
this.wrap = document.getElementById('box'); //
this.ele = this.wrap.getElementsByTagName('div'); // snake
this.head = this.ele[this.ele.length-1] || null; //head
this.direction = 'right'; //
this.initNum = 3;
this.food = null;
this.over = false;
this.level = 1;
this.eatNum = 0;
this.result = document.getElementById('result');
this.t = null;
}
snake.prototype.init = function(){
this.wrap.innerHTML="";
for(var m = 0;m < this.initNum;m++){
var ss = this.creatEl();
ss.className="snake";
}
this.head = this.ele[this.ele.length-1];
var _this = this;
for(var i = 0,j = _this.ele.length;i < j;i++){
_this.ele[i].style.left=_this.ele[i].offsetWidth*i+"px";
_this.ele[i].style.top="0px";
}
_this.food = _this.createFood();
document.onkeydown = function(e){
var e = e|| window.event;
if(e.keyCode=='37'&&_this.direction!='left'&&_this.direction!='right'){
_this.direction='left';
}else if(e.keyCode=='38'&&_this.direction!='top'&&_this.direction!='bottom'){
_this.direction='top';
}else if(e.keyCode=='39'&&_this.direction!='left'&&_this.direction!='right'){
_this.direction='right';
}else if(e.keyCode=='40'&&_this.direction!='top'&&_this.direction!='bottom'){
_this.direction='bottom';
}
}
}
snake.prototype.run = function(){
this.checkRule();
this.eat();
if(this.over){
alert('game is over');
return false;
}
var el = this.ele;
for(var i = 0,j = el.length;i < j-1;i++){
el[i].style.left = el[i+1].style.left;
el[i].style.top = el[i+1].style.top;
}
var head = this.head;
switch(this.direction){
case 'left':head.style.left=parseInt(head.style.left)-head.offsetWidth+"px";break;
case 'right' :head.style.left=parseInt(head.style.left)+head.offsetWidth+"px";break;
case 'top' :head.style.top=parseInt(head.style.top)-head.offsetHeight+"px";break;
case 'bottom' :head.style.top=parseInt(head.style.top)+head.offsetHeight+"px";break;
}
}
snake.prototype.begin = function(){
clearInterval(this.t);
this.t = null;
if(this.over){
this.over = false;
this.food = null;
this.direction = 'right';
this.eatNum = 0;
this.init();
}
var _this = this;
_this.t = setInterval(function(){_this.run();},200/_this.level);
}
snake.prototype.createFood=function(){
var food = this.food || null;
if(!this.food){
food = document.createElement('span');
this.wrap.appendChild(food);
food.className="food";
}
food.style.left=Math.floor(Math.random()*Math.floor(this.wrap.offsetWidth/this.head.offsetWidth))*this.head.offsetWidth+"px";
food.style.top =Math.floor(Math.random()*Math.floor(this.wrap.offsetHeight/this.head.offsetHeight))*this.head.offsetHeight+"px";
var el = this.ele;
for(var i = 0,j = el.length;i < j-1;i++){
while(el[i].style.left == food.style.left && el[i].style.top == food.style.top){
food.style.left=Math.floor(Math.random()*Math.floor(this.wrap.offsetWidth/this.head.offsetWidth))*this.head.offsetWidth+"px";
food.style.top =Math.floor(Math.random()*Math.floor(this.wrap.offsetHeight/this.head.offsetHeight))*this.head.offsetHeight+"px";
}
}
return food;
}
snake.prototype.eat=function(){
if(this.food && this.head.style.left == this.food.style.left && this.head.style.top == this.food.style.top){
this.wrap.insertBefore(this.ele[0].cloneNode(true),this.ele[0]);
this.food = this.createFood();
this.eatNum++;
if(this.eatNum==this.level*5){
this.level++;
this.result.innerHTML=' ：'+this.level;
}
}
}
snake.prototype.checkRule=function(){
var head = this.head,
overRule = {
'hitLeft' : (this.direction == 'left' && parseInt(this.head.style.left) <= 0),
'hitRight' : (this.direction == 'right' && parseInt(this.head.style.left) >= this.wrap.offsetWidth - parseInt(getStyle(this.wrap,'border-left-width')) - parseInt(getStyle(this.wrap,'border-right-width')) - this.head.offsetWidth),
'hitTop' : (this.direction == 'top' && parseInt(this.head.style.top) <= 0),
'hitBottom' : (this.direction == 'bottom' && parseInt(this.head.style.top) >= this.wrap.offsetHeight - parseInt(getStyle(this.wrap,'border-top-width')) - parseInt(getStyle(this.wrap,'border-bottom-width')) - this.head.offsetHeight)
}
if(overRule['hitLeft'] || overRule['hitRight'] || overRule['hitTop'] || overRule['hitBottom']){
clearInterval(s.t);
s.t = null;
this.over = true;
return false;
}
var el = this.ele;
for(var i = 0,j = el.length;i < j-1;i++){
if(this.head.style.left == el[i].style.left && this.head.style.top == el[i].style.top){
clearInterval(s.t);
s.t = null;
this.over = true;
return false;
}
}
}
snake.prototype.creatEl=function(){
var el = document.createElement('div');
this.wrap.appendChild(el);
return el;
}
function getStyle(obj,pro){
if(obj.currentStyle){
return obj.currentStyle[pro];
}else{
var pro = pro.replace(/([A-Z])/g, "-$1").toLowerCase();
return window.getComputedStyle(obj,null).getPropertyValue(pro);
}
}
var s = new snake();
s.init();
document.getElementById('start').onclick=function(){
var selectLevel = document.getElementById('selectLevel');
s.level = selectLevel.options[selectLevel.selectedIndex].text;
s.begin();
}
document.getElementById('selectLevel').onchange=function(){
s.result.innerHTML=' ：'+this.options[this.selectedIndex].text;;
}
</script>
</body>
</html>