javascript写金典贪吃蛇小游 …
浏览 : 1602
时间 : 2019-06-05 14:53
标签 : javascript,贪吃蛇,小游戏
概述 :javascript写金典贪吃蛇小游戏 使用canvas来绘制金典小游戏"贪吃蛇"。
javascript写金典小游戏"贪吃蛇",这里使用canvas来绘制的,有人也用表格或者直接使用html元素块。
不过,原理都是大同小异.思路就是; 用一个数组来表示蛇的身体,里面就是小方块了,可以是二维数组也可以用对象表示每一块的x,y坐标.每次吃到一个就加一个块.移动是拆掉尾巴,装在头部,看起来像是在移动了..............
此处省略 1000 字...........
到这里,大体上就完成了。至于怎么吃和碰壁检测都是些看似繁琐但思路简单的步骤了。
具体代码如下：
var snake=[],ct=document.querySelector('canvas').getContext('2d');
var fs=0,x,y,fx=39,stop=false,egg={x:0,y:0},long=22,over=false;
var bb=document.querySelector('span b');
//初始化
function inintail(){
fs=0;fx=39;stop=false;long=document.querySelector('.in').value;
over=false;snake=[];
//初始长度
for(var i=long;i>=0;i--){
snake.push({x:20*i,y:180});
}
}
//开始
document.querySelector('.btn').onclick=function(){
over=true;
inintail();
move();
this.disabled='null';
}
function draw(){
ct.clearRect(0,0,600,400);
//蛇
for(var i=0;i<snake.length;i++){
if(i==0){ct.fillStyle="#B0C0D7"}
else{ct.fillStyle="#6080B0";}
ct.fillRect(snake[i].x,snake[i].y,20,20);
}
//食物
ct.fillStyle="#C6BB8E";
ct.fillRect(egg.x,egg.y,20,20);
//网格
ct.strokeStyle="#555555";
for(var i=0;i<=30;i++){
ct.beginPath();
ct.moveTo(20*i,0);
ct.lineTo(20*i,400);
ct.stroke();
if(i<=20){
ct.beginPath();
ct.moveTo(0,20*i);
ct.lineTo(600,20*i);
ct.stroke();
}
}
}
function eggMove(){
var x=Math.round(Math.random()*29);
var y=Math.round(Math.random()*19);
egg.x=x*20;
egg.y=y*20;
}
eggMove();
function move(){
x=snake[0].x,y=snake[0].y;
if(!over) {setTimeout(move,200);}
if(!stop){
var last=snake[snake.length-1];
snake.pop();
switch(fx){
case 38:
snake.unshift({x:x,y:y-20});
break;
case 40:
snake.unshift({x:x,y:y+20});
break;
case 37:
snake.unshift({x:x-20,y:y});
break;
case 39:
snake.unshift({x:x+20,y:y});
break;
}
//吃蛋
if((snake[0].x==egg.x)&&(snake[0].y==egg.y)){
eggMove();
fs++;
bb.innerHTML=fs;
snake.push(last);
}
}
//碰撞停止
if(!(snake[0].x<0||snake[0].x>580||snake[0].y<0||snake[0].y>380))
{
draw();
//自碰撞
for(var i=1;i<snake.length;i++){
if((snake[0].x==snake[i].x)&&(snake[0].y==snake[i].y)){
over=true;
}
}
}else{return;}
}
document.onkeydown=function(e){
if(e.keyCode==32){
if(stop)
{
stop=false;
console.log("继续");
}else{
stop=true
console.log("暂停");
}
}
if(36<e.keyCode && e.keyCode<41){
fx=e.keyCode;
}
}
下一篇：html图片编辑工具
分类: 学习分享
评论：
我想说几句:
验证码
暂无评论