html,css,js,貪吃蛇網頁遊戲
遊戲效果如圖：
實現代碼如下：
<!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,貪吃蛇網頁遊戲