精华内容
下载资源
问答
  • 科技常识:HTML5 贪吃蛇游戏实现思路及源代码
    2021-06-10 02:56:56

    科技常识:HTML5 贪吃蛇游戏实现思路及源代码

    2021-05-12 07:05:31

    互联网

    今天小编跟大家讲解下有关HTML5 贪吃蛇游戏实现思路及源代码 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关HTML5 贪吃蛇游戏实现思路及源代码 的相关资料,希望小伙伴们看了有所帮助。

    游戏操作说明 通过方向键控制贪吃蛇上下左右移动。贪吃蛇吃到食物之后会变长一个长度。 游戏具体实现 游戏难点是怎么模拟贪吃蛇的移动。如果只是一个方块的话显然很简单。但是当蛇的长度变长之后要怎么样控制 每个方块的移动呢 如果观察蛇的移动 可以发现 从蛇的头部到尾部 每个方块在下一时刻的位置就是它的前一个方块在当前时刻 的位置。因此我们需要做的只是控制贪吃蛇的头部的运动。其他部分的位置都可以依次类推。 另外一个值得注意的问题是 贪吃蛇吃下食物之后 新增加的方块应该放在哪个位置。 答案就是在下一时刻 新增加的方块应该出现在当前时刻的尾部位置。 因此 在吃下食物之后应该在更新蛇的每个位置之前 增加一个方块 并且将其位置设定在当前时刻的尾部位置。 然后在当前时刻更新出了新增方块之外的所有方块的位置 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贪吃蛇

    2014-01-18 15:47:42
    详尽的注释,HTML5画布+JS的贪吃蛇
  • 游戏难点是怎么模拟贪吃蛇的移动。如果只是一个方块的话显然很简单。但是当蛇的长度变长之后要怎么样控制,下面为大家简要介绍下具体的实现,感兴趣的朋友可以参考下,希望对大家有所帮助
  • HTML5贪吃蛇中文版

    2020-12-01 21:08:12
    HTML5贪吃蛇中文版基于HTML5 canvas制作,贪吃蛇网页版小游戏,代码附带详细中文注释,供大家参考。
  • HTML5贪吃蛇中文版.zip

    2019-07-04 21:30:14
    HTML5贪吃蛇中文版基于HTML5 canvas制作,贪吃蛇网页版小游戏,代码附带详细中文注释,供大家参考。
  • HTML5贪吃蛇小游戏.zip

    2019-07-11 09:41:12
    HTML5魅族贪吃蛇小游戏是魅族魅蓝手机新品发布会发布的一款创意贪吃蛇网页版小游戏,使用键盘上下左右控制键进行游戏操作。
  • html5贪吃蛇

    2013-03-26 09:35:41
    自己写的代码 下载就可以运行 直接移植手机浏览器即可享受游戏的乐趣 不过仅供开发人员参考
  • Html5 贪吃蛇特效是一款简单的使用键盘按键的游戏效果,游戏规则:按上下左右键控制方向。
  • HTML5贪吃蛇中文版基于HTML5 canvas制作,贪吃蛇网页版小游戏,代码附带详细中文注释,供大家参考。
  • 贪吃蛇HTML5代码

    2018-06-04 20:16:56
    此段代码实现了简单的贪吃蛇网页版,用css、HTML5和JS完成
  • 【实例简介】自定义 蛇的图片和食物的图片大小 canvas 画图 【实例截图】 【核心代码】 var canvas=document.getElementById("canvas");... t.snake=new Snake(100,100,5,500); t.snake.init(); }

    【实例简介】自定义 蛇的图片和食物的图片大小 canvas 画图

    【实例截图】

    4689ac236a001faa379d313912df20ed.png

    【核心代码】

    var canvas=document.getElementById("canvas");

    var ctx=canvas.getContext('2d');

    var gridWidth=20;

    var score=0;

    var foods=new Array(),snakes=new Array();

    var bgIamge =new Image();

    bgIamge.src = 'images/head.jpg';

    var partten;

    var foodIamge =new Image();

    foodIamge.src = 'images/food.jpg';

    var parttenFood;

    function gameStart(){

    var farm=new Farm();

    food_interval=setInterval(farm.addfood,2000);

    }

    gameStart();

    function gameover(){

    var judge=confirm("游戏结束,是否重新开始");

    score=0;

    textmsg.innerHTML=score "分";

    clearInterval(snake_interval);

    clearInterval(food_interval);

    if(!judge){

    return false;

    }

    gameStart();

    }

    function Food(x,y,w){

    var t=this;

    t.x=x;

    t.y=y;

    t.w=w;

    t.foodInit=function(){

    parttenFood= ctx.createPattern(foodIamge, 'repeat');

    ctx.beginPath();

    ctx.arc(x w/2,y w/2,w/2,0,360,false);

    debugger;

    ctx.fillStyle=parttenFood;

    ctx.fill();

    ctx.closePath();

    }

    t.equal=function(node){

    if(this.x==node.x && this.y==node.y){

    return true;

    }else{

    return false;

    }

    }

    }

    function Block(x,y,w){

    var t=this;

    t.x=x;

    t.y=y;

    t.w=w;

    t.drawBlock=function(){

    partten= ctx.createPattern(bgIamge, 'repeat')

    ctx.beginPath();

    ctx.arc(x w/2,y w/2,w/2,0,360,false);

    ctx.fillStyle= partten;

    ctx.fill();

    }

    t.clear=function(){

    ctx.fillStyle='white';

    ctx.strokeStyle='white';

    ctx.fillRect(x,y,w,w);

    ctx.strokeRect(x,y,w,w);

    }

    t.equal=function(node){

    if(this.x==node.x && this.y==node.y){

    return true;

    }else{

    return false;

    }

    }

    }

    function Snake(x,y,len,speed){

    var t=this;

    t.x=x;

    t.y=y;

    t.dir='R';

    t.len=len;

    var nx=x;ny=y;

    t.init=function(){

    for(var i=0;i

    var tempBlock=new Block(nx,ny,gridWidth);

    tempBlock.drawBlock();

    nx-=gridWidth;

    snakes.push(tempBlock);

    }

    snake_interval=setInterval(t.move,speed);

    }

    document.οnkeydοwn=function(e){

    var code=e.keyCode;

    t.odir=t.dir;

    switch(code){

    case 37:

    t.dir='L';

    break;

    case 38:

    t.dir='U';

    break;

    case 39:

    t.dir='R';

    break;

    case 40:

    t.dir='D';

    break;

    }

    }

    t.move=function(){

    var newHead;

    if(snakes[0].x snakes[0].w >=canvas.width || snakes[0].x-snakes[0].w<0 ||

    snakes[0].y-snakes[0].w<0 || snakes[0].y snakes[0].w>canvas.height){

    gameover();

    }else{

    if(t.dir=='R'){

    newHead=new Block(snakes[0].x gridWidth,snakes[0].y,gridWidth);

    }else if(t.dir=='L'){

    newHead=new Block(snakes[0].x-gridWidth,snakes[0].y,gridWidth);

    }else if(t.dir=='D'){

    newHead=new Block(snakes[0].x,snakes[0].y gridWidth,gridWidth);

    }else if(t.dir=='U'){

    newHead=new Block(snakes[0].x,snakes[0].y-gridWidth,gridWidth);

    }

    }

    if(newHead.x==snakes[1].x && newHead.y==snakes[1].y){

    t.dir=t.odir;

    return;

    }

    newHead.drawBlock();

    snakes.unshift(newHead);

    snakes[snakes.length-1].clear();

    snakes.pop();

    for(var i=0;i

    if(foods[i].equal(snakes[0])){

    t.growth();

    score=score 10;

    textmsg.innerHTML=score "分";

    t.len=t.len 1;

    clearInterval(snake_interval);

    speed=speed<20?speed:speed-10;

    snake_interval=setInterval(t.move,speed);

    }

    }

    for(var i=1;i

    if(snakes[i].equal(snakes[0])){

    gameover();

    }

    }

    }

    t.growth=function(){

    var tail1=snakes[snakes.length-1];

    var tail2=snakes[snakes.length-2];

    var addBlock;

    if(tail1.x==tail2.x){

    if(tail1.y>tail2.y)

    addBlock=new Block(tail1.x,tail1.y gridWidth,gridWidth);

    else

    addBlock=new Block(tail1.x,tail1.y-gridWidth,gridWidth);

    }else{

    if(tail1.x>tail2.x)

    addBlock=new Block(tail1.x gridWidth,tail1.y,gridWidth);

    else

    addBlock=new Block(tail1.x-gridWidth,tail1.y,gridWidth);

    }

    snakes.push(addBlock);

    addBlock.drawBlock();

    }

    }

    function Farm(){

    var t=this;

    ctx.fillStyle='white';

    ctx.fillRect(0,0,canvas.width,canvas.height);

    foods=[];

    t.addfood=function(){

    var x=parseInt(canvas.width/gridWidth*Math.random())* gridWidth;

    var y=parseInt(canvas.height/gridWidth*Math.random())* gridWidth;

    var food=new Food(x,y,gridWidth);

    food.foodInit();

    foods.push(food);

    }

    snakes=[];

    t.snake=new Snake(100,100,5,500);

    t.snake.init();

    }

    展开全文
  • 简易html5贪吃蛇

    2021-06-12 08:45:19
    1.[图片]E6~0%QPA46ER843UQJ$0Z`H.jpg​2. [文件] snake.htmlThe snake gamefunction log(msg) {console....}Your browser cannot support html5.this.onkeydown = function(e) {var code = e.keyCode;if (code ==...

    1.[图片] E6~0%QPA46ER843UQJ$0Z`H.jpg

    1eb180ed4e72001a2a37e0caddc671fe.gif

    697b2579a07c7b8e0d2314ff7ceb7a6a.png

    ​2. [文件] snake.html

    The snake game

    function log(msg) {

    console.log(msg);

    }

    Your browser cannot support html5.

    this.onkeydown = function(e) {

    var code = e.keyCode;

    if (code == 37)

    changeMove(3);

    if (code == 38)

    changeMove(0);

    if (code == 39)

    changeMove(1);

    if (code == 40)

    changeMove(2);

    }

    function changeMove(val) {

    if ((move == 0 || move == 2) && (val == 2 || val == 0))

    return;http://www.huiyi8.com/hunsha/chuangyi/​

    if ((move == 3 || move == 1) && (val == 1 || val == 3))

    return;创意婚纱照片

    move = val;

    }

    function dead(snake) {

    // 撞墙壁

    switch (move) {

    case 0:

    if (snake[0] < 0) {

    log('up:' + snake[0]);

    return true;

    }

    break;

    case 1:

    if (snake[0] % 20 == 0) {

    log('right:' + snake[0]);

    return true;

    }

    break;

    case 2:

    if (snake[0] >= 400) {

    log('down:' + snake[0]);

    return true;

    }

    break;

    case 3:

    if ((snake[0] + 1) % 20 == 0) {

    log('left:' + snake[0]);

    return true;

    }

    break;

    default:

    break;

    }

    // 咬自己

    for(var i = 1; i < snake.length ; i ++) {

    if(snake[0] == snake[i]) {

    log('self:' + snake[0]);

    return true;

    }

    }

    return false;

    }

    // rand=-1表示食物被吃,要求重新生成食物

    function run(rand) {

    //ctx.fillStyle = '#000000';

    ctx.clearRect(100, 100, 300, 300);

    // 画布容器

    var container = new Array(400);

    for ( var i = 0; i < container.length; i++) {

    container[i] = 0;

    }

    for ( var i in snake) {

    container[snake[i]] = 1;

    }

    // 生成食物

    if(rand == -1) {

    var rands = [];

    for ( var i in container) {

    if (container[i] == 0)

    rands.push(i);

    }

    rand = rands[parseInt(Math.random() * rands.length)];

    }

    // 放入画布容器

    container[rand] = 1;

    for ( var i = 0; i < container.length; i++) {

    if (container[i] == 0) {

    ctx.fillRect(100 + sw * (i % 20),

    100 + sw * parseInt((i / 20)), sw, sw);

    ctx.strokeRect(100 + sw * (i % 20),

    100 + sw * parseInt((i / 20)), 10, sw);

    } else {

    ctx.strokeRect(100 + sw * (i % 20),

    100 + sw * parseInt((i / 20)), sw, sw);

    }

    }

    var slen = snake.length;

    var shead = snake[0], send = snake[slen - 1];

    ctx.fillStyle = '#000000';

    ctx.fillRect(100 + sw * (shead % 20), 100 + sw * parseInt((shead / 20)), sw, sw);

    //ctx.fillRect(100 + sw * (shead % 20), 100 + sw * parseInt((shead / 20)), sw, sw);

    ctx.fillStyle = '#ff0000';

    ctx.beginPath();

    ctx.arc((100 + sw * (shead % 20)) + sw / 2, (100 + sw * parseInt((shead / 20))) + sw / 2, sw / 2, 0, Math.PI * 2, false);

    //不关闭路径路径会一直保留下去,当然也可以利用这个特点做出意想不到的效果

    ctx.closePath();

    ctx.fill();

    ctx.fillStyle = '#000000';

    //ctx.strokeRect(100 + sw * (shead % 20), 100 + sw

    //      * parseInt((shead / 20)), sw, sw);

    for ( var i = slen - 1; i > 0; i--) {

    snake[i] = snake[i - 1];

    }

    switch (move) {

    case 0:

    snake[0] = shead - 20;

    break;

    case 1:

    snake[0] = shead + 1;

    break;

    case 2:

    snake[0] = shead + 20;

    break;

    case 3:

    snake[0] = shead - 1;

    break;

    default:

    break;

    }

    // 死亡

    if (dead(snake)) {

    alert('game over');

    return false;

    }

    // 蛇吃到食物,增加移动次数,到达蛇尾,把食物放到蛇数组

    if (eat && ms++ == slen) {

    ms = 0;

    snake.push(send);

    eat = false;

    }

    // 吃到食物,重新生成食物

    if (snake[0] == rand) {

    eat = true;

    rand = -1;

    }

    setTimeout('run(' + rand + ')', speed);

    }

    //log(snake);

    //for(var i = 0; i < 300; i ++)

    var canvas = document.getElementById('canvas');

    canvas.width = 400;

    canvas.height = 400;

    var ctx = canvas.getContext('2d');

    var snake = []; // 蛇对象

    snake.push(205);

    snake.push(204);

    snake.push(203);

    snake.push(202);

    snake.push(201);

    // move:移动方式[0, 1, 2, 3] = [up, right, down, left]

    // ms:当蛇吃到食物后的移动次数,以此来判断增加蛇数组长度

    // eat:蛇是否吃到食物

    // sw:蛇方块宽度

    // speed:速度ms

    var move = 1, ms = 0, eat = false, sw = 10, speed = 50;

    run(-1);

    log(canvas);

    WebGL实现HTML5贪吃蛇3D游戏

    js1k.com收集了小于1k的javascript小例子,里面有很多很炫很酷的游戏和特效,今年规则又增加了新花样,传统的classic类型基础上又增加了WebGL类型,以及允许增加到2K的++类型, ...

    &lbrack;置顶&rsqb; 63行代码完美实现html5 贪吃蛇游戏

    以前也很少关注html5,感觉选择html已经慢慢成为趋势,想了解下.就找了个游戏学习了,写完这个游戏感觉html5和js结合很紧密,如果js不是特别好.估计需要先补习下js,这个只是个人的建议,不一 ...

    使用TypeScript实现简单的HTML5贪吃蛇游戏

    TypeScript是一种由微软开发的自由和开源的编程语言.它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程.安德斯·海尔斯伯格,C#的首席架构师,已 ...

    Javascript基础示例:用JS写简易版贪吃蛇(面向对象)

    废话不多说,代码如下:

    & ...

    HTML5贪吃蛇源代码

    显示效果例如以下:点击这里!       代码下载:点击这里!

    python贪吃蛇

    代码地址如下:http://www.demodashi.com/demo/13335.html 一.先展示python贪吃蛇效果 二.操作说明 按键 功能 UP 向上移动 DOWN 向下移动 LEFT ...

    WebGL实现HTML5的3D贪吃蛇游戏

    js1k.com收集了小于1k的javascript小例子,里面有很多很炫很酷的游戏和特效,今年规则又增加了新花样,传统的classic类型基础上又增加了WebGL类型,以及允许增加到2K的++类型, ...

    &lbrack;原创&rsqb;html5游戏&lowbar;贪吃蛇

    代码随便写写,尚有许多不足,PC与手机端皆可运行 手机端滑屏操作,PC端方向键操作 疑问: 生成食物,与判断是否可以移动方面 有两种实现方式, 1.使用js内存,数组循环判断 2.使用dom的quer ...

    100行JS实现HTML5的3D贪吃蛇游戏

    js1k.com收集了小于1k的javascript小例子,里面有很多很炫很酷的游戏和特效,今年规则又增加了新花样,传统的classic类型基础上又增加了WebGL类型,以及允许增加到2K的++类型, ...

    随机推荐

    Java数据结构——有序链表

    //================================================= // File Name : SortedList_demo //--------------- ...

    【xml】利用OpenCV解析

    看到一篇讲的很清楚的博客:http://blog.csdn.net/jarvischu/article/details/8481510

    win2003 服务器安全设置详细介绍

    第一步:一.先关闭不需要的端口  我比较小心,先关了端口.只开了3389 21 80 1433(MYSQL)有些人一直说什么默认的3389不安全,对此我不否认,但是利用的途径也只能一个一个的穷举爆破, ...

    HTML第一部分

    HTML      内容(hyper text  markup language,超文本标记语言) CSS        网页美化 Javacript 脚本语言 第一部分 HTML

    Send User to a Portal Folder

    Sometimes you would want to give users the option to click a button on the page and send them back t ...

    JavaScript高级程序设计11&period;pdf

    与操作字符串有关的最后一个方法是localeCompare(),这个方法比较两个字符串,按照字符串的字母表中的位置分别返回-1,0,1 var stringValue="yellow&quo ...

    一键安装IIS的点点滴滴——For所有Microsoft的操作系统(下)

    原文 http://www.cnblogs.com/cdts_change/archive/2010/03/09/1681392.html 接着上一篇的讲,下面我们将讨论Windows7.Window ...

    python生成器之斐波切纳数列

    面试的时候遇到过这样的一个题目: 斐波切纳数列1,2,3,5,8,13,21.........根据这样的规律,编程求出400万以内最大的斐波切纳数,并求出是第几个斐波切纳数. 方法一: 方法二:这个方 ...

    ios常见加密解密方法

    在其他平台中经常会计算MD5值,在iOS平台中也提供了该方法,首先需要导入头文件 #import  方法CC_MD5可以获取MD5 ...

    展开全文
  • 贪吃蛇,最主要的功能点:1、蛇的移动2、改变蛇的方向3、放置食物4、增加舍身5、怎么挂的,具体实现如下,简单实用就60行,感兴趣的朋友可以参考下哈,希望对大家有所帮助
  • 代码片段: [removed][removed] [removed][removed] [removed][removed]
  • html5贪吃蛇源码

    热门讨论 2016-03-13 12:07:45
    html5贪吃蛇源码,代码浅显易懂。
  • html5贪吃蛇游戏

    2018-01-18 15:57:08
    html5代码编写的贪吃蛇游戏,可以在网站直接运行。利用hbuild软件实现,简单美观实用。
  • HTML5贪吃蛇.zip

    2019-06-14 10:00:53
    h5+js+css--小游戏 实现贪吃蛇
  • HTML5 Canvas贪吃蛇网页小游戏代码是一款简单黑白风格好玩的在线网页小游戏特效。
  • Snake//内置大量BUG,I'm sorry.var lev=100; //定时器间隔时间var num=30; //网格大小,现在是30x30var direction=3; //0:up 1:down 2:left 3:rightvar handle; //用于管理定时器var sco...
    Snake

    //内置大量BUG,I'm sorry.

    var lev=100; //定时器间隔时间

    var num=30; //网格大小,现在是30x30

    var direction=3; //0:up 1:down 2:left 3:right

    var handle; //用于管理定时器

    var score=0; //分数

    var pause=true; //暂停使用

    var canvas = document.getElementById('plank');

    var context = canvas.getContext('2d');

    var snakex=new Array(); //存储蛇身x坐标,下同

    var snakey=new Array();

    var prize=new Array(-1,-1); //食物的位置

    function rand(){ //产生随机数

    return parseInt(Math.random()*num);

    }

    function chk(x,y){ //检查是否结束,包括越界

    if(x<0||y<0) return false;

    if(x>num-1||y>num-1) return false;

    for (var i=0; i!=snakex.length-1;i++) {

    if(snakex[i]==x&&snakey[i]==y) {return false;}

    };

    return true;

    }

    function drawScore(text){ //打印分数

    context.clearRect(0,0,300,25);

    context.fillText("Score:"+text,5,5);

    }

    function makeprize(){ //产生食物的位置

    var flag=false;

    var prizepre=new Array(2); //使用链表会更好

    while(!flag){ //食物位置不能在蛇体内

    flag=true;

    prizepre[0]=rand();prizepre[1]=rand();

    for (var i=0; i!=snakex.length;i++) {

    if((snakex[i]==prizepre[0])&&(snakey[i]==prizepre[1])) {flag=false;}

    }

    }

    prize=prizepre;

    }

    function runscore(x,y){ //判断是否吃到食物,并做处理

    if(prize[0]==x&&prize[1]==y){

    score=score+1;

    drawScore(score);

    snakex[snakex.length]=prize[0];

    snakey[snakey.length]=prize[1];

    makeprize();

    drawNode(prize[0],prize[1]);

    return true;

    }

    return false;

    }

    function run(){ //定时器用来判断snake行进方向等等

    switch(direction){ //方向

    case 0: snakex[snakex.length]=snakex[snakex.length-1];snakey[snakey.length]=snakey[snakey.length-1]-1;break;

    case 1: snakex[snakex.length]=snakex[snakex.length-1];snakey[snakey.length]=snakey[snakey.length-1]+1;break;

    case 2: snakex[snakex.length]=snakex[snakex.length-1]-1;snakey[snakey.length]=snakey[snakey.length-1];break;

    case 3: snakex[snakex.length]=snakex[snakex.length-1]+1;snakey[snakey.length]=snakey[snakey.length-1];break;

    }

    if(!runscore(snakex[snakex.length-1],snakey[snakey.length-1])){

    if(chk(snakex[snakex.length-1],snakey[snakey.length-1])==false) {

    clearInterval(handle);

    drawScore('\\tGame over');

    return;

    }

    drawNode(snakex[snakex.length-1],snakey[snakey.length-1]);

    }

    clearNode(snakex[0],snakey[0]);

    snakex.shift();

    snakey.shift();

    }

    function drawNode(x,y){ //画点,共30X30个点(10*10像素算1个点)

    context.fillRect(x*10+1,y*10+31,10,10);

    }

    function clearNode(x,y){

    context.clearRect(x*10+1,y*10+31,10,10);

    }

    function init(){ //初始化,设置画布大小,启动定时器等等

    canvas.width = 510;

    canvas.height = 600;

    context.font = "normal 20px Airl";

    context.textBaseline = "top";

    context.fillText('P键开始/暂停,方向键控制',0,350);

    drawScore('');

    context.strokeRect(0,30,302,302);

    makeprize();

    drawNode(prize[0],prize[1]);

    snakex[0]=0;snakex[1]=1;snakex[2]=2;

    snakey[0]=0;snakey[1]=0;snakey[2]=0;

    drawNode(snakex[0],snakey[0]);drawNode(snakex[1],snakey[1]);drawNode(snakex[2],snakey[2]);

    }

    document.οnkeydοwn=function(event){ //注册键盘事件,up,down,left,right,暂停键p

    var e = event || window.event;

    if(e&&e.keyCode==38){

    direction=0;

    }

    if(e&&e.keyCode==40){

    direction=1;

    }

    if(e&&e.keyCode==37){

    direction=2;

    }

    if(e&&e.keyCode==39){

    direction=3;

    }

    if(e&&e.keyCode==80){

    if(pause) {pause=false;handle=setInterval(run,lev);}

    else {pause=true;clearInterval(handle);}

    }

    }

    init();

    展开全文
  • 基于H5的贪吃蛇

    2018-05-16 11:07:11
    基于html5贪吃蛇游戏,文件压缩包含有代码和图片资源,解压压缩包用浏览器打开HTML文件就可以开始游戏。
  • html5贪吃蛇小游戏

    2021-06-08 15:13:06
    HTML导入代码模板:贪吃蛇function snake(money, card) {this.x = money;this.y = card;}function n97() {var initX = 10;var initY = 10;var SIZE = 20;this.nokia6700 = new Array();this.nokia5230 = new Array()...
  • Html5 贪吃蛇特效是一款简单的使用键盘按键的游戏效果,游戏规则:按上下左右键控制方向。
  • 如何用HTML5制作贪吃蛇游戏发布时间:2020-07-09 15:09:59来源:亿速云阅读:122作者:Leah如何用HTML5制作贪吃蛇游戏?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求...
  • HTML5 SVG创意贪吃蛇动画特效是一款基于Canvas绘制的卡通可爱的贪吃蛇来回游走动画特效。
  • 本篇小编为大家分享一个用html5实现的简单贪吃蛇特效代码,喜欢的小伙伴们可以看一下Snake//内置大量BUG,I'm sorry.var lev=100; //定时器间隔时间var num=30; //网格大小,现在是30x30var direction=3; //0:up 1:...
  • HTML5魅族贪吃蛇小游戏是魅族魅蓝手机新品发布会发布的一款创意贪吃蛇网页版小游戏,使用键盘上下左右控制键进行游戏操作。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,423
精华内容 3,369
关键字:

html5贪吃蛇

友情链接: CCF-压缩编码.zip