<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Author" content="kzm">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
body{background:#c7e2e7;}
.box{
width:450px;
height:450px;
margin:0px auto;
pandding:1px auto;
box-shadow:2px 2px 5px 1px #000;
color:#252b34;
}
</style>
</head>
<body>
<div class="box" width=455px height=455px>
<!--画布-->
<canvas id="mycanvas" width=450px height=450px style="background:#00ffff;border:1px solid #000000" ></canvas>
</div>
<script type="text/javascript">
var direction=0;//方向
var speed=500;//初始速度500ms
//拿到画板
var canvas = document.getElementById("mycanvas");
//拿到画图工具
var ctx = canvas.getContext("2d");
//假定格子 15*15 450/15=30个
//for
ctx.strokeStyle="white";//颜色
for(var i=0;i<30;i++){
//开始路径
ctx.beginPath();
ctx.moveTo(0,i*15);//移动到哪里
ctx.lineTo(450,i*15)
ctx.moveTo(i*15,0);//移动到哪里
ctx.lineTo(i*15,450)
ctx.closePath();
ctx.stroke();//画线
}
//蛇 节点 x-x坐标,y-y坐标,f-方向
//上1 下 -1 左 2 右-2
function Cell(x,y,f){
//this 当前对象
this.x=x;
this.y=y;
this.f=f;
}
//食物
function Food(x,y){
this.x=x;
this.y=y;
}
//蛇对象数组
var snake = [];
var width = 15;
var head;//头
var food =new Food(15,15)
for(var i=0;i<5;i++){
//初始化蛇的身体
snake[i] =new Cell(i,0,-2);
}
//画蛇
function drawSnake(){
ctx.clearRect(0,0,450,450);
//填充颜色
for(var i=0;i<snake.length;i++){
ctx.fillStyle="black";
if(i==snake.length-1){
ctx.fillStyle="red";
}
ctx.beginPath();
ctx.rect(snake[i].x*15,snake[i].y*15,width,width);//矩形
ctx.closePath();
ctx.fill();
}
head = snake[snake.length-1];
//是否吃到食物
if(head.x==food.x&&head.y==food.y){
var newCell=new Cell(head.x,head.y,head.f);
switch(head.f){
case 1:newCell.y--;break;
case 2:newCell.x--;break;
case -1:newCell.y++;break;
case -2:newCell.x++;break;
}
snake[snake.length]=newCell;
//重新生成食物
initFood();
}
//取出蛇的头
drawFood();
}
//食物
function drawFood(){
ctx.fillStyle="red";
ctx.beginPath();
ctx.rect(food.x*15,food.y*15,width,width);//矩形
ctx.closePath();
ctx.fill();
}
drawSnake();
//生成随机食物
function initFood(){
var x= Math.ceil(Math.random()*28)+1;
var y= Math.ceil(Math.random()*28)+1;
food.x=x;
food.y=y;
for(var i=0;i<snake.length;i++){
//食物与身体重合
if(snake[i].x==x&& snake[i].y==y){
initFood();
}
}
}
//监听键盘事件
document.οnkeydοwn=function(e){
//左 37 右 39
var cade=e.keyCode;
var dir=0;//方向
//上1 下 -1 左 2 右-2
switch(cade){
case 38:dir=1;break;
case 39:dir=-2;break;
case 40:dir=-1;break;
case 37:dir=2;break;
}
//当方向确定了,做移动
if(dir!=0){
if(parseInt(head.f)+dir!=0){//不准上走时下走
//移动蛇
//moveSnake();
direction=dir;
//按键方向相同,每次加速100ms
if(speed>100&&head.f==dir){
speed-=100;
window.clearInterval(timer);
timer=window.setInterval(autoMove,speed);
}
}else{
direction=0;
}
}
}
//移动蛇
function moveSnake(){
var newCell=new Cell(head.x,head.y,head.f);//新蛇
newCell.f=direction;
//循环蛇的身体 蛇的单元格往前动 把下标为0的丢弃
var newSnake=[];
for(var i=1;i<snake.length;i++){
newSnake[i-1]=snake[i];
}
newSnake[snake.length-1]=newCell;
switch(direction){
case 1:newCell.y--;break;
case 2:newCell.x--;break;
case -1:newCell.y++;break;
case -2:newCell.x++;break;
}
snake=newSnake;
head=snake[snake.length-1];
if(head.x>30||head.x<0||head.y>30||head.y<0){
alert("游戏结束");
//刷新页面
window.location.reload();
}
drawSnake();
}
//自动移动蛇
function autoMove(){
if(direction!=0){
moveSnake();
}
}
//定时自动移动
var timer=window.setInterval(autoMove,500);
</script>
</body>
</html>
html5+js 贪吃蛇
最新推荐文章于 2023-04-06 14:31:10 发布