贪吃蛇碰到自己就会死的html5代码

snake.js

代码如下：：：

复制代码

代码如下:

var canvas

var ctx

var timer

//measures

var x_cnt = 15

var y_cnt = 15

var unit = 48

var box_x = 0

var box_y = 0

var box_width = 15 * unit

var

box_height = 15 * unit

var bound_left = box_x

var bound_right = box_x

+ box_width

var bound_up = box_y

var bound_down = box_y + box_height

//images

var image_sprite

//objects

var snake

var food

var food_x

var food_y

//functions

function Role(sx, sy, sw,

sh, direction, status, speed, image, flag)

{

this.x = sx

this.y =

sy

this.w = sw

this.h = sh

this.direction = direction

this.status = status

this.speed = speed

this.image = image

this.flag = flag

}

function transfer(keyCode)

{

switch

(keyCode)

{

case 37:

return 1

case 38:

return 3

case

39:

return 2

case 40:

return 0

}

}

function addFood()

{

//food_x=box_x+Math.floor(Math.random()*(box_width-unit))

//food_y=box_y+Math.floor(Math.random()*(box_height-unit))

food_x =

unit * Math.floor(Math.random() * x_cnt)

food_y = unit *

Math.floor(Math.random() * y_cnt)

food = new Role(food_x, food_y, unit,

unit, 0, 0, 0, image_sprite, true)

}

function play(event)

{

var

keyCode

if (event == null)

{

keyCode = window.event.keyCode

window.event.preventDefault()

}

else

{

keyCode =

event.keyCode

event.preventDefault()

}

var cur_direction =

transfer(keyCode)

snake[0].direction = cur_direction

}

function

update()

{

//add a new part to the snake before move the snake

if

(snake[0].x == food.x &&snake[0].y == food.y)

{

var length =

snake.length

var tail_x = snake[length - 1].x

var tail_y =

snake[length - 1].y

var tail = new Role(tail_x, tail_y, unit, unit,

snake[length - 1].direction, 0, 0, image_sprite, true)

snake.push(tail)

addFood()

}

//modify attributes

//move the head

switch

(snake[0].direction)

{

case 0: //down

snake[0].y += unit

if

(snake[0].y >bound_down - unit)

snake[0].y = bound_down - unit

break

case 1: //left

snake[0].x -= unit

if (snake[0].x <

bound_left)

snake[0].x = bound_left

break

case 2: //right

snake[0].x += unit

if (snake[0].x >bound_right - unit)

snake[0].x = bound_right - unit

break

case 3: //up

snake[0].y

-= unit

if (snake[0].y <bound_up)

snake[0].y = bound_up

break

}

//move other part of the snake

for (var i = snake.length - 1i

>= 0i--)

{

if (i >0)

//snake[i].direction=snake[i-1].direction

{

snake[i].x = snake[i -

1].x

snake[i].y = snake[i - 1].y

}

}

}

function

drawScene()

{

ctx.clearRect(box_x, box_y, box_width, box_height)

ctx.strokeStyle = "rgb(0,0,0"

ctx.strokeRect(box_x, box_y, box_width,

box_height)

//detection collisions

//draw images

for (var i = 0i

<snake.lengthi++)

{

ctx.drawImage(image_sprite, snake[i].x,

snake[i].y)

}

ctx.drawImage(image_sprite, food.x, food.y)

}

function init()

{

canvas = document.getElementById("scene")

ctx

= canvas.getContext('2d')

//images

image_sprite = new Image()

image_sprite.src = "images/sprite.png"

image_sprite.onLoad = function

()

{}

//ojects

snake = new Array()

var head = new Role(0 *

unit, 0 * unit, unit, unit, 5, 0, 1, image_sprite, true)

snake.push(head)

window.addEventListener('keydown', play, false)

addFood()

setInterval(update, 300)//note

setInterval(drawScene, 30)

}

望采纳！！！！

我从百度知道上了解了很多轻松的网页休闲游戏。

1.贪吃蛇与方块

参加人数：全员参加

游戏规则：贪吃蛇与方块是一款休闲益智的游戏，通过移动贪吃蛇的位置来获得食物并加长贪吃蛇的长度，然后通过方块障碍物，通过的障碍物越多，积分排名越高呢，一起来比一比吧！

2. tomegame水果英雄

参加人数：全员参加

游戏规则：水果英雄是一款反应类的游戏，通过滑动手指切各种水果，但是要注意躲避炸d哦，不小心滑到炸d是会扣除积分的，积分清零游戏就结束啦，大家加油！

3. 兔子快跑

参加人数：全员参加

游戏规则：兔子快跑是一款跑酷类的游戏，通过手指左右滑动来获得宝石，上下滑动跳过障碍物，在这里千万要注意躲避障碍物呀，不然就提前结束游戏啦！

canvas主要是用js在网页上绘制图形的，所以要想用canvas开发小游戏，就要先掌握好js。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。对这些你都要有一定的了解，之后就相当于有了制作游戏的零件，接下来就是组装了。

我研究过也见到过一些别人写的比较不错的用canvas做的小游戏，比如酷炫的倒计时，粒子，贪吃蛇，生成文字图案等等。

给你个别人写的贪吃蛇小例子，在里边我又写了点localStorage：http://sandbox.runjs.cn/show/4aaszv8t

另外再给你个w3school的canvas的页面：http://www.w3school.com.cn/html5/html_5_canvas.asp

---