tofacebook.com -专业IT技术社区 【百家号】脸书百科,html,css,js,贪吃蛇网页游戏 Web程序 - tofacebook.com-专业IT技术社区
78°

【百家号】脸书百科,html,css,js,贪吃蛇网页游戏 Web程序

标签:页游   ext   title   dir   win   length   begin   javascrip   oct   

游戏效果如图:

技术分享图片

 

实现代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>贪吃蛇游戏</title>
</head>
<body>
<h1>石健涛</h1>
<div id="gameBox" style="text-align: center;">
<canvas id="game" width="450" height="450" style="border: 1px solid #666;"> </canvas>
<script type="text/javascript">
var c=document.getElementById("game");
var cxt=c.getContext("2d");
var width=15;
for(var i=0;i<30;i++)
{
cxt.strokeStyle="black";
cxt.beginPath();
cxt.moveTo(0,i*width);
cxt.lineTo(450,i*width);
cxt.closePath();
cxt.stroke();//将路径绘2到面板
}
for(var i=0;i<30;i++)
{
cxt.strokeStyle="black";
cxt.beginPath();
cxt.moveTo(i*width,0);
cxt.lineTo(i*width,450);
cxt.closePath();
cxt.stroke();//将路径绘2到面板
}
function Cell(x,y,f){
this.x=x;
this.y=y;
this.f=f;
}
function Food(x,y){
this.x=x;
this.y=y;
}
var snake=[];
var length=6;
var speed=300;
var food=new Food(15,15);
// var food=new Food(15,15);
for(var i=0;i<length;i++){
snake[i]=new Cell(i,0,-1);
}

function draw(){
cxt.clearRect(0,0,450,450);
// for(var i=0;i<snake.length;i++){
// cxt.fillStyle="royalblue"
// cxt.beginPath();
// if(i==snake.length-1){
// cxt.fillStyle="darkgoldenrod";
// }
// cxt.rect(snake[i].x*width,snake[i].y*width,width,width);
// cxt.closePath();
// cxt.fill();

cxt.fillStyle="aqua"
cxt.beginPath();
cxt.rect(food.x*width,food.y*width,width,width);
cxt.closePath();
cxt.fill();
var head=snake[snake.length-1];
if(head.x==food.x&&head.y==food.y){
cxt.fillStyle="darkgoldenrod";
cxt.beginPath();
cxt.rect(food.x*width,food.y*width,width,width);
cxt.closePath();
cxt.fill();
var newCell=new Cell(head.x,head.y,head.f);
switch(newCell.f){
case 1:newCell.x--;break;
case -1:newCell.x++;break;
case 2:newCell.y--;break;
case -2:newCell.y++;break;
}
snake[snake.length]=newCell;
randFood();
}
for(var i=0;i<snake.length;i++){
cxt.fillStyle="royalblue"
cxt.beginPath();
if(i==snake.length-1){
cxt.fillStyle="darkgoldenrod";
}
cxt.rect(snake[i].x*width,snake[i].y*width,width,width);
cxt.closePath();
cxt.fill();
}

}
function randFood(){
food.x=Math.ceil(Math.random()*28)+1;
food.y=Math.ceil(Math.random()*28)+1;
for (var i=0;i<snake.length;i++) {
if(food.x==snake[i].x&&food.y==snake[i].y){
randFood();
break;
}

}
}
draw();
document.onkeydown=function(e){
var code=e.keyCode;
// var head=snake[snake.length-1];
// var newCell=new Cell(head.x,head.y,head.f);

console.log("键值"+code);
var direction=0;
switch(code){
case 37:direction=1;break;
case 38:direction=2;break;
case 39:direction=-1;break;
case 40:direction=-2;break;
}
var head=snake[snake.length-1];
if(direction!=0&&(head.f+direction)!=0){
moveSnake(direction);
}
}
function moveSnake(direction){
var head=snake[snake.length-1];
if(!direction){
direction=head.f;
}
var newSnake=[];
var head=snake[snake.length-1];
var newCell=new Cell(head.x,head.y,head.f);
for(var i=1;i<snake.length;i++){
newSnake[i-1]=snake[i];

}
newSnake[snake.length-1]=newCell;
newCell.f=direction;
// head.f=direction;
switch(direction){
case 1:newCell.x--;break;
case -1:newCell.x++;break;
case 2:newCell.y--;break;
case -2:newCell.y++;break;
}
snake=newSnake;
checkGameover();
draw();
}
function checkGameover(){
var head=snake[snake.length-1];
if(head.x>=30||head.y>=30||head.x<0||head.y<0){
alert("撞墙!!!");
window.location.reload();

}
for(var i=0;i<snake.length-1;i++){
if(snake[i].x==head.x&&snake[i].y==head.y){
alert("太血腥!咬到自己了!");
window.location.reload();

}
}

}
var autoRun=setInterval(moveSnake,speed);
</script>
</div>
</body>
</html>

 

html,css,js,贪吃蛇网页游戏

标签:页游   ext   title   dir   win   length   begin   javascrip   oct   

原文地址:https://www.cnblogs.com/taoda/p/9368910.html


本文由百家号/熊掌号作者上传并发布,百家号仅提供信息发布平台。文章仅代表作者个人观点,不代表百度立场。

已有 0 条评论

    我有话说: