js实现贪吃蛇小游戏
2014-12-25 19:31
821 查看
<html>
<head>
<script type="text/javascript">
var map = null;
//面板
function Map(){
this.width = 800;
this.height = 400;
this.color = 'lightblue';
this.showmap = function(){
var ban = document.createElement('div');
ban.style.width = this.width+'px';
ban.style.height = this.height+'px';
ban.style.position ='absolute';
ban.style.left =0;
ban.style.top = 0;
ban.style.backgroundColor = this.color;
document.body.appendChild(ban);
}
}
//食物
function Food(){
this.width = 20;
this.color = "red";
this.shiwu = null;
this.showfood = function(){
if(this.shiwu == null){
this.shiwu = document.createElement('div');
this.shiwu.style.width = this.width+'px';
this.shiwu.style.height = this.width+'px';
this.shiwu.style.position ='absolute';
}
this.shiwux = Math.floor(Math.random()*40);
this.shiwuy = Math.floor(Math.random()*20);
this.shiwu.style.left = this.shiwux*this.width+"px";
this.shiwu.style.top = this.shiwuy*this.width+"px";
this.shiwu.style.backgroundColor = this.color;
document.body.appendChild(this.shiwu);
}
}
//绘制小蛇
function Snake(){
this.direct = "right";
this.range = 20;
this.color = "green";
this.duans = [[0,1,this.color,null],[1,1,this.color,null],[2,1,this.color,null],[3,1,'red',null]];
//显示小蛇
this.showsnake = function(){
for(var i in this.duans){
if(this.duans[i][3]==undefined){
this.duans[i][3] = document.createElement('div');
this.duans[i][3].style.width = this.range+'px';
this.duans[i][3].style.height = this.range+'px';
this.duans[i][3].style.backgroundColor = this.duans[i][2];
}
this.duans[i][3].style.position = 'absolute';
this.duans[i][3].style.left =this.range*this.duans[i][0]+'px';
this.duans[i][3].style.top = this.range*this.duans[i][1]+'px';
document.body.appendChild(this.duans[i][3]);
}
}
//移动小蛇
this.movesnake = function(){
for(i=0;i<this.duans.length-1;i++){
this.duans[i][0] = this.duans[i+1][0];
this.duans[i][1] = this.duans[i+1][1];
}
if(this.direct=='right')
this.duans[this.duans.length-1][0] +=1;
if(this.direct=='left')
this.duans[this.duans.length-1][0] -=1;
if(this.direct=='up')
this.duans[this.duans.length-1][1] -=1;
if(this.direct=='down')
this.duans[this.duans.length-1][1] +=1;
//判断蛇是否吃到食物
if( this.duans[this.duans.length-1][0]==food.shiwux&&
this.duans[this.duans.length-1][1]==food.shiwuy){
var newduan = [this.duans[0][0], this.duans[0][1],this.color,null];
this.duans.unshift(newduan);
food.showfood();
}
//判断是否出界 0,0 40,0 0,20 40,20
if( this.duans[this.duans.length-1][0]<0
||this.duans[this.duans.length-1][0]>39||
this.duans[this.duans.length-1][1]<0||
this.duans[this.duans.length-1][1]>19){
alert('game over');
clearInterval(mytime);
return false;
}
//判断是否吃到自己
for(var i=0;i<this.duans.length-1;i++){
if( this.duans[i][0] == this.duans[this.duans.length-1][0]&&
this.duans[i][1] == this.duans[this.duans.length-1][1]){
alert('game over by yourself');
clearInterval(mytime);
return false;
}
}
this.showsnake();
}
}
window.onload = function(){
map = new Map();
map.showmap();
food = new Food();
food.showfood();
snake = new Snake();
snake.showsnake();
mytime = setInterval("snake.movesnake()",200);
document.body.onkeydown = function(evt){
if(evt.keyCode == 38){
snake.direct = "up";
}
if(evt.keyCode == 40){
snake.direct = "down";
}
if(evt.keyCode == 37){
snake.direct = "left";
}
if(evt.keyCode == 39){
snake.direct = "right";
}
}
}
</script>
</head>
<body>
</body>
</html>
<head>
<script type="text/javascript">
var map = null;
//面板
function Map(){
this.width = 800;
this.height = 400;
this.color = 'lightblue';
this.showmap = function(){
var ban = document.createElement('div');
ban.style.width = this.width+'px';
ban.style.height = this.height+'px';
ban.style.position ='absolute';
ban.style.left =0;
ban.style.top = 0;
ban.style.backgroundColor = this.color;
document.body.appendChild(ban);
}
}
//食物
function Food(){
this.width = 20;
this.color = "red";
this.shiwu = null;
this.showfood = function(){
if(this.shiwu == null){
this.shiwu = document.createElement('div');
this.shiwu.style.width = this.width+'px';
this.shiwu.style.height = this.width+'px';
this.shiwu.style.position ='absolute';
}
this.shiwux = Math.floor(Math.random()*40);
this.shiwuy = Math.floor(Math.random()*20);
this.shiwu.style.left = this.shiwux*this.width+"px";
this.shiwu.style.top = this.shiwuy*this.width+"px";
this.shiwu.style.backgroundColor = this.color;
document.body.appendChild(this.shiwu);
}
}
//绘制小蛇
function Snake(){
this.direct = "right";
this.range = 20;
this.color = "green";
this.duans = [[0,1,this.color,null],[1,1,this.color,null],[2,1,this.color,null],[3,1,'red',null]];
//显示小蛇
this.showsnake = function(){
for(var i in this.duans){
if(this.duans[i][3]==undefined){
this.duans[i][3] = document.createElement('div');
this.duans[i][3].style.width = this.range+'px';
this.duans[i][3].style.height = this.range+'px';
this.duans[i][3].style.backgroundColor = this.duans[i][2];
}
this.duans[i][3].style.position = 'absolute';
this.duans[i][3].style.left =this.range*this.duans[i][0]+'px';
this.duans[i][3].style.top = this.range*this.duans[i][1]+'px';
document.body.appendChild(this.duans[i][3]);
}
}
//移动小蛇
this.movesnake = function(){
for(i=0;i<this.duans.length-1;i++){
this.duans[i][0] = this.duans[i+1][0];
this.duans[i][1] = this.duans[i+1][1];
}
if(this.direct=='right')
this.duans[this.duans.length-1][0] +=1;
if(this.direct=='left')
this.duans[this.duans.length-1][0] -=1;
if(this.direct=='up')
this.duans[this.duans.length-1][1] -=1;
if(this.direct=='down')
this.duans[this.duans.length-1][1] +=1;
//判断蛇是否吃到食物
if( this.duans[this.duans.length-1][0]==food.shiwux&&
this.duans[this.duans.length-1][1]==food.shiwuy){
var newduan = [this.duans[0][0], this.duans[0][1],this.color,null];
this.duans.unshift(newduan);
food.showfood();
}
//判断是否出界 0,0 40,0 0,20 40,20
if( this.duans[this.duans.length-1][0]<0
||this.duans[this.duans.length-1][0]>39||
this.duans[this.duans.length-1][1]<0||
this.duans[this.duans.length-1][1]>19){
alert('game over');
clearInterval(mytime);
return false;
}
//判断是否吃到自己
for(var i=0;i<this.duans.length-1;i++){
if( this.duans[i][0] == this.duans[this.duans.length-1][0]&&
this.duans[i][1] == this.duans[this.duans.length-1][1]){
alert('game over by yourself');
clearInterval(mytime);
return false;
}
}
this.showsnake();
}
}
window.onload = function(){
map = new Map();
map.showmap();
food = new Food();
food.showfood();
snake = new Snake();
snake.showsnake();
mytime = setInterval("snake.movesnake()",200);
document.body.onkeydown = function(evt){
if(evt.keyCode == 38){
snake.direct = "up";
}
if(evt.keyCode == 40){
snake.direct = "down";
}
if(evt.keyCode == 37){
snake.direct = "left";
}
if(evt.keyCode == 39){
snake.direct = "right";
}
}
}
</script>
</head>
<body>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JS实现简单的贪吃蛇小游戏
- js实现一个贪吃蛇的小游戏（已经没有Bug了，已经完善）
- js实现贪吃蛇小游戏（容易理解）
- js实现贪吃蛇小游戏代码（源码）
- js实现贪吃蛇小游戏
- JS实现贪吃蛇小游戏
- js实现的贪吃蛇的小游戏
- 用JS实现贪吃蛇游戏
- java swing 实现贪吃蛇小游戏
- Java ，实现贪吃蛇小游戏
- JavaScript， 实现贪吃蛇小游戏
- 使用C++语言模拟实现贪吃蛇小游戏
- 用JS实现简单的猜数小游戏
- js实现贪吃蛇
- 初学JS——实现基于计时器的小游戏。
- 随机网格JS写怀旧小游戏系列（四）贪吃蛇
- 用js实现猜数字小游戏
- 用JS做了一个贪吃蛇小游戏,求顶贴..
- 学JS写小游戏——贪吃蛇