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

贪吃蛇碰到自己就会死的html5代码,第1张

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、游戏画面显示不正常:可能是由于HTML或CSS代码错误导致的。解决方法是检查代码并进行修正。

2、 *** 作体验不佳:可能是由于JavaScript代码逻辑错误或优化不足导致的。解决方法包括优化算法,减少运算量等。

3、碰撞检测失效:碰撞检测是贪吃蛇游戏中非常关键的一环,如果实现不好,可能会导致游戏无法正常进行。解决方法是仔细调试代码,确保每个元素的位置和大小都被正确计算和记录。

4、性能问题:当贪吃蛇长度增加时,游戏的运行速度可能会变慢,影响游戏的流畅性。解决方法包括优化代码,减少不必要的 *** 作等。


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/zaji/6277598.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-19
下一篇 2023-03-19

发表评论

登录后才能评论

评论列表(0条)

保存