婷婷综合国产,91蜜桃婷婷狠狠久久综合9色 ,九九九九九精品,国产综合av

主頁 > 知識庫 > HTML5 貪吃蛇游戲實現思路及源代碼

HTML5 貪吃蛇游戲實現思路及源代碼

熱門標簽:怎么做百度地圖標注 小朱地圖標注 百度地圖標注為什么總是封號 400開頭的電話好申請不 咸陽穩定外呼系統軟件 智能芯電話機器人 四川移動電銷外呼客戶管理系統 臨海地圖標注app 地圖標注柱狀圖
 
游戲操作說明

通過方向鍵控制貪吃蛇上下左右移動。貪吃蛇吃到食物之后會變長一個長度。

游戲具體實現

游戲難點是怎么模擬貪吃蛇的移動。如果只是一個方塊的話顯然很簡單。但是當蛇的長度變長之后要怎么樣控制

每個方塊的移動呢?

如果觀察蛇的移動,可以發現,從蛇的頭部到尾部,每個方塊在下一時刻的位置就是它的前一個方塊在當前時刻

的位置。因此我們需要做的只是控制貪吃蛇的頭部的運動。其他部分的位置都可以依次類推。

另外一個值得注意的問題是

貪吃蛇吃下食物之后,新增加的方塊應該放在哪個位置。

答案就是在下一時刻,新增加的方塊應該出現在當前時刻的尾部位置。

因此,在吃下食物之后應該在更新蛇的每個位置之前,增加一個方塊,并且將其位置設定在當前時刻的尾部位置。

然后在當前時刻更新出了新增方塊之外的所有方塊的位置

index.html
 
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 - 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);
}

相關閱讀:html5貪吃蛇游戲使用63行代碼完美實現

標簽:陜西 平涼 黃石 黃石 公主嶺 南平 平頂山 山南

巨人網絡通訊聲明:本文標題《HTML5 貪吃蛇游戲實現思路及源代碼》,本文關鍵詞  HTML5,貪吃,蛇,游戲,實現,;如發現本文內容存在版權問題,煩請提供相關信息告之我們,我們將及時溝通與處理。本站內容系統采集于網絡,涉及言論、版權與本站無關。
  • 相關文章
  • 下面列出與本文章《HTML5 貪吃蛇游戲實現思路及源代碼》相關的同類信息!
  • 本頁收集關于HTML5 貪吃蛇游戲實現思路及源代碼的相關信息資訊供網民參考!
  • 推薦文章
    婷婷综合国产,91蜜桃婷婷狠狠久久综合9色 ,九九九九九精品,国产综合av
    香蕉久久一区二区不卡无毒影院 | 日韩限制级电影在线观看| 中文字幕一区二区三区色视频| 蜜臀av亚洲一区中文字幕| 欧美中文字幕一区二区三区| 国产精品久久久久久久岛一牛影视 | 国产一区高清在线| 欧美大胆一级视频| 激情深爱一区二区| 久久久久久久久久电影| 成人午夜av在线| 成人欧美一区二区三区白人 | 成人做爰69片免费看网站| 国产精品污网站| 欧美在线你懂得| 天天综合天天综合色| 日韩免费在线观看| 成人国产精品免费观看视频| 亚洲精品欧美在线| 日韩一区二区三区观看| 国内成人精品2018免费看| 国产精品美女久久久久aⅴ| 欧美午夜电影网| 国产精品一二三四五| 国产精品区一区二区三| 日韩一区二区三区视频| 播五月开心婷婷综合| 麻豆精品在线看| 成人欧美一区二区三区在线播放| 欧美另类高清zo欧美| 波多野结衣欧美| 国产一区二区调教| 日韩精彩视频在线观看| 亚洲欧美日韩中文播放| 国产农村妇女毛片精品久久麻豆| 欧美在线不卡视频| 国产宾馆实践打屁股91| 蜜桃一区二区三区在线观看| 亚洲精品国产高清久久伦理二区| 91精品国产免费| 6080国产精品一区二区| 欧美在线观看你懂的| 成人97人人超碰人人99| 国产在线一区观看| 国产一区二区三区四区五区美女| 日本sm残虐另类| 三级一区在线视频先锋| 性感美女极品91精品| 天堂成人国产精品一区| www.色综合.com| 99久久国产综合色|国产精品| 成人av免费在线观看| 99精品偷自拍| 国产欧美精品一区| 日韩一区在线免费观看| 亚洲免费观看高清完整版在线 | 午夜精品123| 视频一区视频二区在线观看| 婷婷综合另类小说色区| 日韩中文字幕一区二区三区| 蜜臀va亚洲va欧美va天堂| 国产在线播精品第三| 成人av午夜影院| 欧美日韩高清不卡| 久久久九九九九| 亚洲综合一区在线| 久久成人羞羞网站| av高清久久久| 91精品国产欧美一区二区成人| 久久综合国产精品| 洋洋av久久久久久久一区| 美女网站色91| 欧美三级日本三级少妇99| 日韩欧美中文一区二区| 国产精品成人一区二区艾草 | 亚洲综合一区二区三区| 国内精品免费**视频| 欧美三级一区二区| 国产女人水真多18毛片18精品视频 | 日韩亚洲国产中文字幕欧美| 亚洲天堂中文字幕| 国产一区二区三区四区在线观看| 欧美日韩综合一区| 亚洲婷婷综合色高清在线| 国产自产v一区二区三区c| 欧美日韩激情在线| 一个色妞综合视频在线观看| 成人深夜福利app| 国产亚洲人成网站| 美女视频黄 久久| 69堂成人精品免费视频| 亚洲成人av一区| 欧美日韩精品免费| 亚洲成av人片在线观看无码| 91麻豆国产福利精品| 国产精品国产精品国产专区不蜜| 国产乱对白刺激视频不卡 | 91免费视频网址| 日韩美女精品在线| 欧美日韩精品一区视频| 亚洲一区影音先锋| 欧美精品三级日韩久久| 日本va欧美va瓶| 精品av久久707| 成人精品鲁一区一区二区| 国产精品你懂的在线欣赏| 99久久婷婷国产| 亚洲大片精品永久免费| 日韩欧美国产高清| 成人自拍视频在线| 亚洲一区成人在线| 日韩精品一区二区三区四区| av不卡在线观看| 三级一区在线视频先锋| 国产精品久久久久影院| 在线中文字幕不卡| 国内精品写真在线观看 | 久久综合色综合88| 色婷婷综合五月| 狠狠色狠狠色综合日日91app| 国产精品日产欧美久久久久| 欧美亚洲日本国产| 成人国产精品免费观看| 蜜臀精品一区二区三区在线观看 | 色婷婷综合在线| 韩日精品视频一区| 五月婷婷激情综合| 中文字幕一区二| 国产亚洲成aⅴ人片在线观看 | 成人av资源在线| 国产伦精品一区二区三区免费| 亚洲欧美一区二区久久| 中文乱码免费一区二区| 在线播放中文字幕一区| 欧美视频一二三区| 色婷婷av一区二区| 色视频成人在线观看免| 懂色中文一区二区在线播放| 久久99久久99| 免费久久99精品国产| 麻豆成人免费电影| 日产欧产美韩系列久久99| 日韩中文字幕1| 久久疯狂做爰流白浆xx| 久久福利视频一区二区| 精品亚洲aⅴ乱码一区二区三区| 日日夜夜免费精品视频| 全国精品久久少妇| 久久精品99国产国产精| 国产一区二区剧情av在线| 国产精品自拍三区| 不卡高清视频专区| 色综合激情五月| 欧美精品粉嫩高潮一区二区| 欧美福利视频导航| 欧美mv日韩mv国产网站app| 久久男人中文字幕资源站| 国产亚洲一区字幕| 亚洲美女一区二区三区| 午夜电影一区二区三区| 美国三级日本三级久久99| 成人午夜视频在线观看| 91国内精品野花午夜精品| 538在线一区二区精品国产| 国产日韩v精品一区二区| 伊人色综合久久天天| 国内外精品视频| 在线观看91精品国产入口| 日韩精品中文字幕一区 | 一级中文字幕一区二区| 日韩精品一卡二卡三卡四卡无卡| 国产91精品在线观看| 91精品国产福利在线观看| 中文字幕一区二区三区精华液| 亚洲国产成人高清精品| 国产成人在线视频网址| 欧美精品乱码久久久久久| 国产精品天干天干在线综合| 人人爽香蕉精品| 7777精品伊人久久久大香线蕉的 | 国产精品麻豆视频| 国产一区91精品张津瑜| 欧美精选一区二区| 亚洲国产日日夜夜| 色视频欧美一区二区三区| 国产精品久久久久永久免费观看 | 亚洲欧洲成人自拍| 国产二区国产一区在线观看| 欧美一区二区视频观看视频| 一区二区三区四区视频精品免费| 99re视频精品| 亚洲综合一区二区三区| 欧洲精品在线观看| 亚洲精品成人精品456| 色婷婷久久综合| 亚洲国产三级在线| 欧美精选一区二区| 久久国产精品露脸对白| 26uuu亚洲| 91小视频免费观看|