贪吃蛇小游戏
1.明确要实现的功能
开始游戏、分数统计、蛇移动定时器、食物随机出现
规则:
蛇头不能碰到身体和地图边框,否则游戏结束
蛇头碰到食物时蛇身增加一格,并且食物重新出现
2.分部实现功能
1. 利用原生js画出地图,食物
//画地图
function Map(){
this.width=750;
this.height=390;
this.position='absolute';
this.top=0;
this.color='#ddd';
this._map=null;
this.show=function(){
this._map=document.createElement('div');
this._map.style.width=this.width+'px';
this._map.style.height=this.height+'px';
this._map.style.position=this.position;
this._map.style.top=this.top+'px';
this._map.style.backgroundColor=this.color;
document.getElementsByTagName('body')[0].appendChild(this._map);
}
}
//画食物
function Food(){
this.width=15;
this.height=15;
this.position='absolute';
this.color='#ffa500';
this.x=0;
this.x=0;
this._food=null;
this.show=function(){
if(this._food==null){
this._food=document.createElement('div');
this._food.style.width=this.width+'px';
this._food.style.height=this.height+'px';
this._food.style.position=this.position;
this._food.style.backgroundColor=this.color;
map._map.appendChild(this._food);
}
// 随机出现食物
this.x = Math.floor(Math.random()*50);
this.y = Math.floor(Math.random()*26);
this._food.style.left =this.x*15+'px';
this._food.style.top = this.y*15 +'px';
}
}
2.画蛇,根据键盘所按键判断蛇的运动方向,蛇头碰到食物后蛇身+1,蛇移动时蛇头与蛇身的位置替换
a. 设置每节蛇身的长宽,规定一格为15像素,并且规定蛇的初始运动方向向右
定义蛇数组:
// 画蛇
function Snake(){
this.width=15;
this.height=15;
this.position='absolute';
this.direct='right';//规定蛇的初始运动方向向右
this.body=[[3,2,'#66d0de',null],[2,2,'#4746bf',null],[1,2,'#4746bf',null]];//蛇的身体的数组
this.show=function(){
var length=this.body.length;
for(var i=0;i<length;i++){
if(this.body[i][3]==null){
this.body[i][3]=document.createElement('div');
this.body[i][3].style.width=this.width+'px';
this.body[i][3].style.height=this.height+'px';
this.body[i][3].style.position=this.position;
this.body[i][3].style.backgroundColor=this.body[i][2];
this.body[i][3].style.left=this.body[i][0]*15+'px';
this.body[i][3].style.top=this.body[i][1]*15+'px';
map._map.appendChild(this.body[i][3]);
}
this.body[i][3].style.left=this.body[i][0]*15+'px';
this.body[i][3].style.top=this.body[i][1]*15+'px';
}
}
}
b. 获取按键码并判断蛇移动的方向
code = window.event.keyCode 获取按下的键盘按键Unicode值
这里用到的按键对应Unicode值,如下:
按键 | Unicode |
---|---|
Left(左) | 37 |
Up(上) | 38 |
Right(右) | 39 |
Down(下) | 40 |
// 获取按键码
document.onkeydown = function(event){
//区别IE和非IE浏览器的不同触发事件
var code;
if (window.event) {
code = window.event.keyCode;
} else{
code = event.keyCode;
}
snake.setDirect(code);//调用判断按键码的方法并传递code参数
}
这里用到switch…case…进行判断,如果Unicode值为37,则改变蛇的运动方向为向左
// 根据按键码判断蛇移动的方向
this.setDirect=function(code){
switch(code){
case 37:
this.direct='left';
break;
case 38:
this.direct='up';
break;
case 39:
this.direct='right';
break;
case 40:
this.direct='down';
break;
}
}
c. 蛇移动时的x,y坐标位置的变化
根据setDirect中判断蛇的移动方向,改变蛇身x,y的坐标
// 判断按键方向,移动蛇
if(this.direct=='left'){
this.body[0][0]-=1;
}
if(this.direct=='right'){
this.body[0][0]+=1;
}
if(this.direct=='up'){
this.body[0][1]-=1;
}
if(this.direct=='down'){
this.body[0][1]+=1;
}
蛇移向下一格时,原本蛇头的位置会变成第一节蛇身的位置,而现在蛇头的位置时原来蛇头位置的x或y值+1
// 获得蛇身长度
var length=this.body.length;
// 蛇移动时,交换蛇头
for(var i=length-1;i>0;i--){
this.body[i][0]=this.body[i-1][0];
this.body[i][1]=this.body[i-1][1];
}
d. 判断蛇头碰到食物时,蛇身+1,然后重新调用食物的方法,出现下一格随机的食物
// 蛇头碰到食物
if(this.body[0][0]==food.x&&this.body[0][1]==food.y){
this.body.push([0,0,'4746bf',null]);//蛇身加一个
food.show();
}
e. 判断游戏结束
蛇头碰到蛇身或四周的地图边界都会结束游戏
// 蛇碰到地图边界和自身时游戏结束
for(var j=1;j<length-1;j++){
if((this.body[0][0]==this.body[j][0]&&this.body[0][1]==this.body[j][1])
||(this.body[0][0]>49||this.body[0][0]<0||this.body[0][1]>25||this.body[0][1]<0)){
alert('游戏结束!您的分数为:'+grade.value+'分');
cleartimer();
}
}
获取当前蛇身的长度,并向input框中传递分数
// 获得蛇身长度
var length=this.body.length;
//传递分数值,蛇初始长度为3,因此在蛇的长度上-3才是真正的分数
var grade=document.getElementById("grade");
document.getElementById('grade').value=length-3;
3.定时器开始和关闭
// 关闭定时器
function cleartimer(){
clearInterval(timer);
}
// 打开定时器
function starttimer(){
// 定时器,蛇自己移动
timer=setInterval('snake.move()',300);
// 初始化分数为0
var grade=document.getElementById("grade");
document.getElementById('grade').value=0;
}
4.文档开始时执行调用map,food,snake方法,绘制地图,食物和蛇
// 文档加载完成后立即执行
window.onload=function(){
map=new Map();
map.show();
food=new Food();
food.show();
snake=new Snake();
snake.show();
}
5.html部分添加开始按钮和input分数输出框
input框需要设置为不可更改 readonly=“readonly”
<style type="text/css">
#nav{position: relative;width:160px;height: 200px;left: 810px;}
#play{float: left;margin-top: 30px;background-color: bisque;cursor: pointer;}
#grade{float:right;width: 100px;cursor: pointer;}
</style>
<div id="nav">
<span id="" style="float:left;cursor: pointer;">分数:</span>
<input type="text" id="grade" readonly="readonly">
<button type="button" id="play" onclick="starttimer()">开始游戏</button>
</div>
3.实现效果展示
游戏界面
当蛇碰到墙壁,提示游戏结束
4.完整代码
<script type="text/javascript">
var map;
var food;
var snake;
var timer;
//画地图
function Map(){
this.width=750;
this.height=390;
this.position='absolute';
this.top=0;
this.color='#ddd';
this._map=null;
this.show=function(){
this._map=document.createElement('div');
this._map.style.width=this.width+'px';
this._map.style.height=this.height+'px';
this._map.style.position=this.position;
this._map.style.top=this.top+'px';
this._map.style.backgroundColor=this.color;
document.getElementsByTagName('body')[0].appendChild(this._map);
}
}
//画食物
function Food(){
this.width=15;
this.height=15;
this.position='absolute';
this.color='#ffa500';
this.x=0;
this.x=0;
this._food=null;
this.show=function(){
if(this._food==null){
this._food=document.createElement('div');
this._food.style.width=this.width+'px';
this._food.style.height=this.height+'px';
this._food.style.position=this.position;
this._food.style.backgroundColor=this.color;
map._map.appendChild(this._food);
}
// 随机出现食物
this.x = Math.floor(Math.random()*50);
this.y = Math.floor(Math.random()*26);
this._food.style.left =this.x*15+'px';
this._food.style.top = this.y*15 +'px';
}
}
// 画蛇
function Snake(){
this.width=15;
this.height=15;
this.position='absolute';
this.direct='right';
this.body=[[3,2,'#66d0de',null],[2,2,'#4746bf',null],[1,2,'#4746bf',null]];//蛇的身体的数组
this.show=function(){
var length=this.body.length;
for(var i=0;i<length;i++){
if(this.body[i][3]==null){
this.body[i][3]=document.createElement('div');
this.body[i][3].style.width=this.width+'px';
this.body[i][3].style.height=this.height+'px';
this.body[i][3].style.position=this.position;
this.body[i][3].style.backgroundColor=this.body[i][2];
this.body[i][3].style.left=this.body[i][0]*15+'px';
this.body[i][3].style.top=this.body[i][1]*15+'px';
map._map.appendChild(this.body[i][3]);
}
this.body[i][3].style.left=this.body[i][0]*15+'px';
this.body[i][3].style.top=this.body[i][1]*15+'px';
}
}
// 按键码判断蛇移动的方向
this.setDirect=function(code){
switch(code){
case 37:
this.direct='left';
break;
case 38:
this.direct='up';
break;
case 39:
this.direct='right';
break;
case 40:
this.direct='down';
break;
}
}
// 蛇移动的方法
this.move=function(){
// 蛇头碰到食物
if(this.body[0][0]==food.x&&this.body[0][1]==food.y){
this.body.push([0,0,'#4746bf',null]);//蛇身加一个
food.show();
}
// 获得蛇身长度
var length=this.body.length;
//传递分数值,蛇初始长度为3,因此在蛇的长度上-3才是真正的分数
var grade=document.getElementById("grade");
document.getElementById('grade').value=length-3;
console.log(length);
// 蛇移动时,交换蛇头
for(var i=length-1;i>0;i--){
this.body[i][0]=this.body[i-1][0];
this.body[i][1]=this.body[i-1][1];
}
// 判断按键方向,移动蛇
if(this.direct=='left'){
this.body[0][0]-=1;
}
if(this.direct=='right'){
this.body[0][0]+=1;
}
if(this.direct=='up'){
this.body[0][1]-=1;
}
if(this.direct=='down'){
this.body[0][1]+=1;
}
this.show();
var length=this.body.length;
// 蛇碰到地图边界和自身时游戏结束
for(var j=1;j<length-1;j++){
if((this.body[0][0]==this.body[j][0]&&this.body[0][1]==this.body[j][1])
||(this.body[0][0]>49||this.body[0][0]<0||this.body[0][1]>25||this.body[0][1]<0)){
alert('游戏结束!您的分数为:'+grade.value+'分');
cleartimer();
}
}
}
}
// 关闭定时器
function cleartimer(){
clearInterval(timer);
}
// 打开定时器
function starttimer(){
// 定时器,蛇自己移动
timer=setInterval('snake.move()',300);
// 初始化分数为0
var grade=document.getElementById("grade");
document.getElementById('grade').value=0;
}
// 文档加载完成后立即执行
window.onload=function(){
map=new Map();
map.show();
food=new Food();
food.show();
snake=new Snake();
snake.show();
var grade=document.getElementById("grade");
document.getElementById('grade').value=0;
// 获取按键码
document.onkeydown = function(event){
var code;
if (window.event) {
code = window.event.keyCode;
} else{
code = event.keyCode;
}
snake.setDirect(code);
}
}
</script>
<style type="text/css">
#nav{position: relative;width:160px;height: 200px;left: 810px;}
#play{float: left;margin-top: 30px;background-color: bisque;cursor: pointer;}
#grade{float:right;width: 100px;cursor: pointer;}
</style>
<div id="nav">
<span id="" style="float:left;cursor: pointer;">分数:</span>
<input type="text" id="grade" readonly="readonly">
<button type="button" id="play" onclick="starttimer()">开始游戏</button>
</div>