貪吃蛇怎么用html5增加暫停鍵

以前也很少關(guān)注html5，感覺選擇html已經(jīng)慢慢成為趨勢，想了解下。就找了個(gè)游戲?qū)W習(xí)了，寫完這個(gè)游戲感覺html5和js結(jié)合很緊密，如果js不是特別好。估計(jì)需要先補(bǔ)習(xí)下js，這個(gè)只是個(gè)人的建議，不一定準(zhǔn)確。還有一個(gè)就是，思維和邏輯要特別清楚，不然寫游戲可能很痛苦。

創(chuàng)新互聯(lián)建站公司2013年成立，先為鶴城等服務(wù)建站，鶴城等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為鶴城企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

貪吃蛇，最主要的功能點(diǎn)： 1，蛇的移動(dòng) 2，改變蛇的方向 3，放置食物 4，增加舍身 5,怎么掛的。

第一次寫游戲，第一次寫html5

感覺還是很吃力的。寫完了，給大家分享下。互相交流.............不懂的或者有建議的，可以留言給我。。。代碼很短，就60行。

不過這個(gè)是個(gè)半成品，等寫完成了。再更新下

復(fù)制代碼

代碼如下:

!DOCTYPE HTML

html

body

canvas id="myCanvas" width="400" height="400"

style="border:1px solid #c3c3c3;"/canvas

script

type="text/javascript"

var c=document.getElementById("myCanvas");

var time = 160 ; //蛇的速度

var cxt=c.getContext("2d");

var x = y = 8;

var a = 0; //食物坐標(biāo)

var t = 20; //舍身長

var map = []; //記錄蛇運(yùn)行路徑

var

size = 8; //蛇身單元大小

var direction = 2; // 1 向上 2 向右 0 左 3下

interval =

window.setInterval(set_game_speed, time); // 移動(dòng)蛇

function set_game_speed(){

// 移動(dòng)蛇

switch(direction){

case 1:y = y-size;break;

case 2:x =

x+size;break;

case 0:x = x-size;break;

case 3:y = y+size;break;

}

if(x400 || y400 || x0 || y0){

alert("你掛了，繼續(xù)努力吧!失敗原因：碰壁了.....");window.location.reload();

}

for(var

i=0;imap.length;i++){

if( parseInt(map[i].x)==x

parseInt(map[i].y)==y){

alert("你掛了，繼續(xù)努力吧！失敗原因：撞到自己了.....");window.location.reload();

}

}

if (map.lengtht) { //保持舍身長度

var cl = map.shift(); //刪除數(shù)組第一項(xiàng)，并且返回原元素

cxt.clearRect(cl['x'], cl['y'], size, size);

};

map.push({'x':x,'y':y}); //將數(shù)據(jù)添加到原數(shù)組尾部

cxt.fillStyle =

"#006699";//內(nèi)部填充顏色

cxt.strokeStyle = "#006699";//邊框顏色

cxt.fillRect(x, y,

size, size);//繪制矩形

if((a*8)==x (a*8)==y){ //吃食物

rand_frog();t++;

}

}

document.onkeydown = function(e) { //改變蛇方向

var code = e.keyCode - 37;

switch(code){

case 1 : direction =

1;break;//上

case 2 : direction = 2;break;//右

case 3 : direction =

3;break;//下

case 0 : direction = 0;break;//左

}

}

// 隨機(jī)放置食物

function rand_frog(){

a = Math.ceil(Math.random()*50);

cxt.fillStyle

= "#000000";//內(nèi)部填充顏色

cxt.strokeStyle = "#000000";//邊框顏色

cxt.fillRect(a*8, a*8, 8, 8);//繪制矩形

}

// 隨機(jī)放置食物

rand_frog();

/script

/body

/html

請采納?。。?/p>

基于HTML5的貪吃蛇的設(shè)計(jì)與實(shí)現(xiàn)？

第一個(gè)問題，是缺少引用文件，檢查一下是否本地有個(gè)js文件挪了位置

第二個(gè)問題，是語法格式問題，如果解決了第一個(gè)問題，第二個(gè)問題很可能也解決了。

使用html5開發(fā)貪吃蛇小游戲怎么設(shè)定撞到自己就會(huì)結(jié)束

這個(gè)當(dāng)然要自己檢測。用二維數(shù)組。用不同的數(shù)值來代表身體。頭部?？瞻住Ｊ澄?。判斷下一個(gè)位置。很簡單

貪吃蛇碰到自己就會(huì)死的html5代碼

snake.js

代碼如下：：：

復(fù)制代碼

代碼如下:

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 - 1; i

= 0; i--)

{

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 = 0; i

snake.length; i++)

{

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);

}

望采納?。。?！