实现简易贪吃蛇
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>贪吃蛇游戏-盲鹰</title>
<meta name="Keywords" content="关键字,关键字">
<meta name="description" content="">
<style type="text/css">
*{margin:0px;padding:0px;}
body{background:#65777D;color:#FFF;font-family:"楷体";}
h1{width:50%;margin:0 auto;text-align:center;text-shadow:2px 2px 5px #000;}
.info{width:450px;height:450px;border:1px solid #000;background:#FFF;box-shadow:2px 2px 5px #000;margin:0 auto;}
</style>
</head>
<body>
<!--
canvas 标签 结合 JavaScript
1.游戏界面
2.一条蛇
3.产生一个食物
4.让蛇动起来
5.让蛇吃食物，蛇增长
6.产生新的食物
7.判断游戏结束
-->
<h1>贪吃蛇游戏-盲鹰</h1>
<!--盒子，区域-->
<div class="info">
<!--格子-->
<canvas width="450" height="450" style="background:#89B5B3;" id="myCanvas">
</canvas>
</div>
<script type="text/javascript">
//拿到画布对象
var canvas = document.getElementById("myCanvas");
//画图工具 上下文
var ctx = canvas.getContext("2d");
//数组
var snake = new Array();//蛇的每个节点
var width = 15;//行宽
var len = 6;//蛇的长度
var speed = 500;//蛇爬行速度
//定义好蛇的节点
//x，y：坐标 f：有方向(1左，-1右，2上，-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 food = new Food(15, 15);
for (var i = 0; i < len; i++) {
snake\[i\] = new Cell(i, 0, -1);
}
/* 绘制网格
//指定画笔颜色
ctx.strokeStyle = "white";
for (var i = 0; i < 30; i++) {
ctx.beginPath();
ctx.moveTo(0, i * width);
ctx.lineTo(450, i * width);
ctx.closePath();
ctx.stroke();
}
for (var i = 0; i < 30; i++) {
ctx.beginPath();
ctx.moveTo(i * width, 0);
ctx.lineTo(i * width, 450);
ctx.closePath();
ctx.stroke();
}
*/
function draw() {
ctx.clearRect(0, 0, 450, 450);
//蛇的长度是6个单位 6个格子 6*15
ctx.fillStyle = "black";
for (var i = 0; i < len; i++) {
if (i == len - 1) {
ctx.fillStyle = "red";
}
ctx.beginPath();
ctx.rect(snake\[i\].x * width, snake\[i\].y * width, width, width);
ctx.closePath();
ctx.fill();
}
var head = snake\[len - 1\];
//吃到食物
if (head.x == food.x && head.y == food.y) {
//产生随机食物
initFood();
var newCell = new Cell(head.x, head.y, head.f);
switch (newCell.f) {
case 1 : newCell.x--; break;
case 2 : newCell.y--; break;
case -1 :newCell.x++; break;
case -2 : newCell.y++; break;
}
snake\[len\] = newCell;
len++;
speed -= 10;
}
//绘制食物
ctx.fillStyle = "green";
ctx.beginPath();
ctx.rect(food.x * width, food.y * width, width, width);
ctx.closePath();
ctx.fill();
}
draw();
//按照方向指定蛇的移动方向
function moveSnake(direction) {
var head = snake\[len - 1\];
var newHead = new Cell(head.x, head.y, head.f);
var newSnake = \[\];
for (var i = 1; i < len; i++) {
newSnake\[i - 1\] = snake\[i\];
}
newSnake\[len - 1\] = newHead;
//修改头部方向
newHead.f = direction;
switch (direction) {
case 1 : newHead.x--; break;
case 2 : newHead.y--; break;
case -1 :newHead.x++; break;
case -2 : newHead.y++; break;
}
snake = newSnake;
isGameOver();
draw();
}
//产生随机食物
function initFood() {
var x = Math.ceil(Math.random() * 28) + 1;
var y = Math.ceil(Math.random() * 28) + 1;
food = new Food(x, y);
for (var i = 0; i < len; i++) {
if (x == snake\[i\].x && y == snake\[i\].y) {
initFood();
break;
}
}
food.x = x;
food.y = y;
}
document.onkeydown = function(event) {
var code = event.keyCode;
//左：37，上：38.右：39，下：40
var direction;
switch (code) {
case 37 : direction = 1; break;
case 38 : direction = 2; break;
case 39 : direction = -1; break;
case 40 : direction = -2; break;
}
moveSnake(direction);
}
function isGameOver() {
var head = snake\[len - 1\];
//不能咬到自己
for (var i = 0; i < len - 1; i++) {
if (head.x == snake\[i\].x && head.y == snake\[i\].y) {
alert("Game Over");
window.location.reload();
}
}
//判断是否超出边框
if (head.x >= 30 || head.y >= 30 || head.x < 0 || head.y < 0) {
alert("Game Over");
window.location.reload();
}
}
//蛇自动前进
function snakeMove() {
moveSnake(snake\[len - 1\].f);
setTimeout("snakeMove()", speed);
}
//延时500ms执行
setTimeout("snakeMove()", speed);
</script>
</body>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017/02/21 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读