代码如下：：：
复制代码
代码如下:
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)
}
望采纳！！！！
我从百度知道上了解了很多轻松的网页休闲游戏。
参加人数：全员参加
游戏规则：贪吃蛇与方块是一款休闲益智的游戏，通过移动贪吃蛇的位置来获得食物并加长贪吃蛇的长度，然后通过方块障碍物，通过的障碍物越多，积分排名越高呢，一起来比一比吧！
2. tomegame水果英雄
参加人数：全员参加
游戏规则：水果英雄是一款反应类的游戏，通过滑动手指切各种水果，但是要注意躲避炸d哦，不小心滑到炸d是会扣除积分的，积分清零游戏就结束啦，大家加油！
3. 兔子快跑
参加人数：全员参加
游戏规则：兔子快跑是一款跑酷类的游戏，通过手指左右滑动来获得宝石，上下滑动跳过障碍物，在这里千万要注意躲避障碍物呀，不然就提前结束游戏啦！
最后的那个 <body>请改为 </body>并把前面的 <script>xxx</script>这大块放到 </body>前面。
因为你在执行 js 的时候 dom 都没有加载呢，所以要放到后面，或者把整个 js 放到 window.onload = function(){xxx}里面
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）