贪吃蛇是一个比较老的游戏,但是很有趣。那我们要怎么去实现呢?
用h5+javaScript去实现,实现思路:
1画线条也就是画格子。
2定义蛇,然后初始化,画出一条蛇。
3随机生成食物,并画出。
4定义一个移动函数,使蛇运动起来。
5吃到食物蛇身边长。
6判断蛇是否死掉。
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>贪吃蛇</title>
<meta name="keywords" content="贪吃蛇"/>
<style type="text/css">
*{margin:0;}
.d-canvas{
width:450px;
height:450px;
background:#ffff00;
border:10px solid #00ffff;
}
</style>
</head>
<body>
<div class="d-canvas">
<canvas id="can" width="450" height="450">
</canvas>
</div>
<script type="text/javascript">
var can = document.getElementById("can");
//创建 context 对象
var huabi = can.getContext("2d");
var snake= [];//蛇
var width=15;//宽度
var startwidth=6;//蛇开始的长度
var foodX;//食物X坐标
var foodY;//食物Y坐标
var catlog=3;//表示方向
//画格子
function drawRect(){
for(var i=0;i<=30;i++){
huabi.beginPath();
huabi.moveTo(width*i,0);
huabi.lineTo(width*i,450);
huabi.moveTo(0,width*i);
huabi.lineTo(450,width*i);
huabi.closePath();
huabi.stroke();
}
}
//初始化蛇
function strat(){
for(var i=0;i<startwidth;i++){
snake[i]={x:i*width,y:0};
}
}
//画蛇
function newSnake(){
huabi.fillStyle="#000";
for(var i=0;i<startwidth;i++){
if(i == startwidth-1)
huabi.fillStyle="#f00";
huabi.fillRect(snake[i].x,snake[i].y,15,15);
}
}
//添加食物
function addFood(){
huabi.fillStyle="#00ff33";
foodX=Math.floor(Math.random()*30)*15;
console.log(foodX);
foodY=Math.floor(Math.random()*30)*15;
console.log(foodY);
for(var i=0;i<startwidth;i++){
if(snake[i].x==foodX&&snake[i].y==foodY)
addFood();
}
huabi.fillRect(foodX,foodY,15,15);
}
//蛇移动
function move(){
huabi.fillStyle="#000";
var top;
switch(catlog){
case 1:
snake.push({x:snake[startwidth-1].x-15,y:snake[startwidth-1].y});
huabi.fillRect(snake[startwidth-1].x,snake[startwidth-1].y,15,15);
huabi.fillStyle="#f00";
huabi.fillRect(snake[startwidth].x,snake[startwidth].y,15,15);
isDeath();
if(!isEat()){
top =snake.shift();
huabi.clearRect(top.x,top.y,15,15);
}else{
addFood();
}
break;
case 2:
snake.push({x:snake[startwidth-1].x,y:snake[startwidth-1].y-15});
huabi.fillRect(snake[startwidth-1].x,snake[startwidth-1].y,15,15);
huabi.fillStyle="#f00";
huabi.fillRect(snake[startwidth].x,snake[startwidth].y,15,15);
isDeath();
if(!isEat()){
top =snake.shift();
huabi.clearRect(top.x,top.y,15,15);
}else{
addFood();
}
break;
case 3:
snake.push({x:snake[startwidth-1].x+15,y:snake[startwidth-1].y});
huabi.fillRect(snake[startwidth-1].x,snake[startwidth-1].y,15,15);
huabi.fillStyle="#f00";
huabi.fillRect(snake[startwidth].x,snake[startwidth].y,15,15);
isDeath();
if(!isEat()){
top =snake.shift();
huabi.clearRect(top.x,top.y,15,15);
}else{
addFood();
}
break;
case 4:
snake.push({x:snake[startwidth-1].x,y:snake[startwidth-1].y+15});
huabi.fillRect(snake[startwidth-1].x,snake[startwidth-1].y,15,15);
huabi.fillStyle="#f00";
huabi.fillRect(snake[startwidth].x,snake[startwidth].y,15,15);
isDeath();
if(!isEat()){
top =snake.shift();
huabi.clearRect(top.x,top.y,15,15);
}else{
addFood();
}
break;
}
isDeath();
drawRect();
}
//判断蛇是否吃了食物
function isEat(){
if(foodX==snake[startwidth-1].x&&foodY==snake[startwidth-1].y){
startwidth++;
return true;
}
return false;
}
//判断是否死了
function isDeath(){
//一种是撞墙死,一种自己撞自己死
if(snake[startwidth-1].x>450||snake[startwidth-1].x<0||snake[startwidth-1].y>450||snake[startwidth-1].y<0){
alert("撞墙死了");
window.location.reload();
}
for(var i=0;i<startwidth-1;i++){
if(snake[i].x==snake[startwidth-1].x&&snake[i].y==snake[startwidth-1].y){
alert("自已咬自己,死了");
window.location.reload();
}
}
}
//获取键盘输入值
window.onkeydown =function(e){
switch(e.keyCode){
case 37:catlog=1;break;//左
case 38:catlog=2;break;//上
case 39:catlog=3;break;//右
case 40:catlog=4;break;//下
}
}
//加载页面
window.onload=function(){
strat();
drawRect();
newSnake();
addFood();
setInterval(move,500);
}
</script>
</body>
</html>
大概的基本实现了。
比较好看点的表格:
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
Date of birth: <input type="text">
</fieldset>
需要在html4到html5使用