本文介绍了Snake Code - 使蛇的脸成为图像的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想让这条蛇的脸成为图像.目前,它使用带有颜色的填充样式,但我希望它是图像.我怎样才能用这个代码做到这一点?

另外,我想知道如何添加箭头以便它可以在手机上工作.感谢任何可以提供帮助或提供见解的人.

(function() {//////////////////////////////////////////////////////////////画布 &语境var 画布;var ctx;//蛇var 蛇;var蛇目录;var snake_next_dir;var蛇速度;//食物var 食物 = {x: 0,y:0};//分数无功分数;//墙var 墙;//HTML 元素var screen_snake;var screen_menu;var screen_setting;var screen_gameover;var button_newgame_menu;var button_newgame_setting;var button_newgame_gameover;var button_setting_menu;var button_setting_gameover;变量 ele_score;var speed_setting;var wall_setting;////////////////////////////////////////////////////////////var activeDot = 函数(x,y){ctx.fillStyle = "#FFFFFF";ctx.fillRect(x * 10, y * 10, 10, 10);}////////////////////////////////////////////////////////////var changeDir = 函数(键){if (key == 38 &&snake_dir != 2) {蛇_next_dir = 0;} 别的 {if (key == 39 &&snake_dir != 3) {蛇_next_dir = 1;} 别的 {if (key == 40 &&snake_dir != 0) {蛇_next_dir = 2;} 别的 {if (key == 37 &&snake_dir != 1) {蛇_next_dir = 3;}}}}}////////////////////////////////////////////////////////////var addFood = function() {food.x = Math.floor(Math.random() * ((canvas.width/10) - 1));food.y = Math.floor(Math.random() * ((canvas.height/10) - 1));for (var i = 0; i = 0; i--) {蛇推({x:我,y:15});}蛇_next_dir = 1;分数 = 0;altScore(分数);添加食物();canvas.onkeydown = 函数(evt){evt = evt ||窗口事件;changeDir(evt.keyCode);}主循环();}//////////////////////////////////////////////////////////////改变蛇的速度...//150 = 慢//100 = 正常//50 = 快var setSnakeSpeed = 函数(速度值){蛇速度 = 速度值;}////////////////////////////////////////////////////////////var setWall = 函数(wall_value){墙 = 墙值;如果(墙== 0){screen_snake.style.borderColor = "#606060";}如果(墙== 1){screen_snake.style.borderColor = "#FFFFFF";}}//////////////////////////////////////////////////////////////0 代表游戏//1 为主菜单//2 为设置屏幕//3 为游戏结束画面var showScreen = 函数(screen_opt){开关(screen_opt){案例0:screen_snake.style.display = "block";screen_menu.style.display = "无";screen_setting.style.display = "无";screen_gameover.style.display = "无";休息;情况1:screen_snake.style.display = "无";screen_menu.style.display = "block";screen_setting.style.display = "无";screen_gameover.style.display = "无";休息;案例2:screen_snake.style.display = "无";screen_menu.style.display = "无";screen_setting.style.display = "block";screen_gameover.style.display = "无";休息;案例3:screen_snake.style.display = "无";screen_menu.style.display = "无";screen_setting.style.display = "无";screen_gameover.style.display = "block";休息;}}////////////////////////////////////////////////////////////window.onload = 函数(){canvas = document.getElementById("snake");ctx = canvas.getContext("2d");//屏幕screen_snake = document.getElementById("snake");screen_menu = document.getElementById("menu");screen_gameover = document.getElementById("gameover");screen_setting = document.getElementById("setting");//纽扣button_newgame_menu = document.getElementById("newgame_menu");button_newgame_setting = document.getElementById("newgame_setting");button_newgame_gameover = document.getElementById("newgame_gameover");button_setting_menu = document.getElementById("setting_menu");button_setting_gameover = document.getElementById("setting_gameover");//等等ele_score = document.getElementById("score_value");speed_setting = document.getElementsByName("speed");wall_setting = document.getElementsByName("wall");//--------------------button_newgame_menu.onclick = function() {新游戏();};button_newgame_gameover.onclick = function() {新游戏();};button_newgame_setting.onclick = function() {新游戏();};button_setting_menu.onclick = function() {显示屏幕(2);};button_setting_gameover.onclick = function() {显示屏幕(2)};设置蛇速度(150);设置墙(1);showScreen("菜单");//--------------------//设置//速度for (var i = 0; i < speed_setting.length; i++) {speed_setting[i].addEventListener("click", function() {for (var i = 0; i < speed_setting.length; i++) {如果 (speed_setting[i].checked) {setSnakeSpeed(speed_setting[i].value);}}});}//墙for (var i = 0; i < wall_setting.length; i++) {wall_setting[i].addEventListener("点击", function() {for (var i = 0; i < wall_setting.length; i++) {如果(wall_setting[i].checked){setWall(wall_setting[i].value);}}});}document.onkeydown = 函数(evt){if (screen_gameover.style.display == "block") {evt = evt ||窗口事件;如果(evt.keyCode == 32){新游戏();}}}}})();
::selection {颜色:#FFFFFF;背景:透明;}::-moz-选择{颜色:#FFFFFF;背景:透明;}* {边距:0;填充:0;字体系列:VT323";}身体 {背景色:#000000;}.裹 {左边距:自动;右边距:自动;}标题{宽度:340px;字体大小:0;}帆布 {显示:无;边框样式:实心;边框宽度:10px;边框颜色:#FFFFFF;}画布:焦点{大纲:无;}/* 顶部样式 */h1{显示:内联块;宽度:100px;字体大小:32px;颜色:#FFFFFF;}.分数 {显示:内联块;宽度:240px;字体大小:20px;颜色:#FFFFFF;文本对齐:右;}.score_value {字体大小:继承;}/* 所有屏幕样式 */#gameover a,#设置一个,#菜单一个{显示:块;}#gameover a,#设置一个:悬停,#菜单a:悬停{光标:指针;}#gameover a:hover::before,#setting a:hover::before,#menu a:hover::before {内容:>";右边距:10px;}/* 菜单屏幕样式 */#菜单 {显示:块;宽度:340px;填充顶部:95px;填充底部:95px;字体大小:40px;左边距:自动;右边距:自动;文本对齐:居中;颜色:#FFF;}#菜单 h2 {-webkit-animation: logo-ani 1000ms 线性无限;动画:logo-ani 1000ms 线性无限;底边距:30px;}#菜单一个{字体大小:30px;}@-webkit-keyframes logo-ani {50%{-webkit-transform: scale(1.3, 1.3);}100% {-webkit-transform: scale(1.0, 1.0);}}@keyframes logo-ani {50%{变换:比例(1.3,1.3);}100% {变换:比例(1.0,1.0);}}/* 游戏结束屏幕样式 */#游戏结束 {显示:无;宽度:340px;填充顶部:95px;填充底部:95px;左边距:自动;右边距:自动;文本对齐:居中;字体大小:30px;颜色:#FFF;}#gameover p {边距顶部:25px;字体大小:20px;}/* 设置屏幕样式 */#环境 {显示:无;宽度:340px;左边距:自动;右边距:自动;填充顶部:85px;填充底部:85px;字体大小:30px;颜色:#FFF;文本对齐:居中;}#设置 h2 {底边距:15px;}#设置 p {边距顶部:10px;}#设置输入{显示:无;}#设置标签{光标:指针;}#设置输入:选中+标签{背景颜色:#FFF;颜色:#000;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet"><header class="wrap"><h1>蛇</h1><p class="score">分数:<span id="score_value">0</span></p></标题><canvas class="wrap" id="snake" width="320" height="320" tabindex="1"></canvas><!-- 游戏结束屏幕--><div id="gameover"><h2>游戏结束</h2><p>press <span style="background-color: #FFFFFF; color: #000000">space</span>开始一个</p><a id="newgame_gameover">新游戏</a><a id="setting_gameover">设置</a>

<!-- 设定画面--><div id="设置"><h2>设置</h2><a id="newgame_setting">新游戏</a><p>速度:<input id="speed1" type="radio" name="speed" value="120" 选中/><label for="speed1">慢</label><input id="speed2" type="radio" name="speed" value="75"/><label for="speed2">普通</label><input id="speed3" type="radio" name="speed" value="35"/><label for="speed3">快速</label></p><p>墙:<input id="wallon" type="radio" name="wall" value="1" 选中/><label for="wallon">开</label><input id="walloff" type="radio" name="wall" value="0"/><label for="walloff">关闭</label></p>

<!-- 主菜单画面--><div id="菜单"><h2>蛇</h2><a id="newgame_menu">新游戏</a><a id="setting_menu">设置</a>

解决方案

将您的图像转换为 base64 字符串,然后对于第一个点/头部使用图像:

var img = new Image();//创建新的 img 元素img.src = 数据:图像/PNG; BASE64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAMAAAC67D + PAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAA21BMVEXoTTvqTTzpUD7nTjzmTTvrUkDpTjzmSznUPSrVPCrnTDrSOSfTOizlTDrvoJnoqJ/pVkTmU0P5urH1p53mSTjjPiv7nZF0f4NZaGvpn5b9s6qDl5iira/+ NI/jPirkPyz7lop + iYtleHzsnpT7raOTpqqqtbf4lovnSjf0lorylonpSDbnTDj5oZf2mIzlSDXkOyjIY1vrd2rrWEbZZ1zYQDLsTTroTz/lRjPalY7 +///////j19fVSz7tTjvmTjntRjPialzZhH3sVkXsSzniRTTYQTDmSTbmTT3qb45jAAAAAWJLR0Q7OQ70bAAAAAd0SU1FB + QEDw4AEYzMSFoAAABvSURBVAjXY2BgZGJiZmFlZWNgYGDn4GTn4ubhBTJZ + PgFBIWERdgYRMXEJSSlpGVk5RjkFRSVlFVU1dTlGRg0NLW0dXT19JkZGNgMDI2MTUzNgNrMLSytrG1s7eyBbGYHRydnFwYwYHN1c/dgYAAAtKsKjnGo4BwAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjAtMDQtMTVUMTQ6MDA6MTctMDQ6MDAVi7z/AAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIwLTA0LTE1VDE0OjAwOjE3LTA0OjAwZNYEQwAAAABJRU5ErkJggg ==";for (var i = 0; i 

I would like to make the face of this snake an image. Currently, it using a fill style with a color but I would like it to be an image. How can I do it with this code?

In addition, I want to find out how to add arrows so that it could work on a mobile phone. Thank you for anyone who can help or provide insight.

(function() {
  /////////////////////////////////////////////////////////////

  // Canvas & Context
  var canvas;
  var ctx;

  // Snake
  var snake;
  var snake_dir;
  var snake_next_dir;
  var snake_speed;

  // Food
  var food = {
    x: 0,
    y: 0
  };

  // Score
  var score;

  // Wall
  var wall;

  // HTML Elements
  var screen_snake;
  var screen_menu;
  var screen_setting;
  var screen_gameover;
  var button_newgame_menu;
  var button_newgame_setting;
  var button_newgame_gameover;
  var button_setting_menu;
  var button_setting_gameover;
  var ele_score;
  var speed_setting;
  var wall_setting;

  /////////////////////////////////////////////////////////////

  var activeDot = function(x, y) {
    ctx.fillStyle = "#FFFFFF";
    ctx.fillRect(x * 10, y * 10, 10, 10);
  }


  /////////////////////////////////////////////////////////////

  var changeDir = function(key) {

    if (key == 38 && snake_dir != 2) {
      snake_next_dir = 0;
    } else {

      if (key == 39 && snake_dir != 3) {
        snake_next_dir = 1;
      } else {

        if (key == 40 && snake_dir != 0) {
          snake_next_dir = 2;
        } else {

          if (key == 37 && snake_dir != 1) {
            snake_next_dir = 3;
          }
        }
      }
    }

  }

  /////////////////////////////////////////////////////////////

  var addFood = function() {
    food.x = Math.floor(Math.random() * ((canvas.width / 10) - 1));
    food.y = Math.floor(Math.random() * ((canvas.height / 10) - 1));
    for (var i = 0; i < snake.length; i++) {
      if (checkBlock(food.x, food.y, snake[i].x, snake[i].y)) {
        addFood();
      }
    }
  }

  /////////////////////////////////////////////////////////////

  var checkBlock = function(x, y, _x, _y) {
    return (x == _x && y == _y) ? true : false;
  }

  /////////////////////////////////////////////////////////////

  var altScore = function(score_val) {
    ele_score.innerHTML = String(score_val);
  }

  /////////////////////////////////////////////////////////////

  var mainLoop = function() {

    var _x = snake[0].x;
    var _y = snake[0].y;
    snake_dir = snake_next_dir;

    // 0 - Up, 1 - Right, 2 - Down, 3 - Left
    switch (snake_dir) {
      case 0:
        _y--;
        break;
      case 1:
        _x++;
        break;
      case 2:
        _y++;
        break;
      case 3:
        _x--;
        break;
    }

    snake.pop();
    snake.unshift({
      x: _x,
      y: _y
    });


    // --------------------

    // Wall

    if (wall == 1) {
      // On
      if (snake[0].x < 0 || snake[0].x == canvas.width / 10 || snake[0].y < 0 || snake[0].y == canvas.height / 10) {
        showScreen(3);
        return;
      }
    } else {
      // Off
      for (var i = 0, x = snake.length; i < x; i++) {
        if (snake[i].x < 0) {
          snake[i].x = snake[i].x + (canvas.width / 10);
        }
        if (snake[i].x == canvas.width / 10) {
          snake[i].x = snake[i].x - (canvas.width / 10);
        }
        if (snake[i].y < 0) {
          snake[i].y = snake[i].y + (canvas.height / 10);
        }
        if (snake[i].y == canvas.height / 10) {
          snake[i].y = snake[i].y - (canvas.height / 10);
        }
      }
    }

    // --------------------

    // Autophagy death
    for (var i = 1; i < snake.length; i++) {
      if (snake[0].x == snake[i].x && snake[0].y == snake[i].y) {
        showScreen(3);
        return;
      }
    }

    // --------------------

    // Eat Food
    if (checkBlock(snake[0].x, snake[0].y, food.x, food.y)) {
      snake[snake.length] = {
        x: snake[0].x,
        y: snake[0].y
      };
      score += 1;
      altScore(score);
      addFood();
      activeDot(food.x, food.y);
    }

    // --------------------

    ctx.beginPath();
    ctx.fillStyle = "#000000";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // --------------------

    for (var i = 0; i < snake.length; i++) {
      activeDot(snake[i].x, snake[i].y);
    }

    // --------------------

    activeDot(food.x, food.y);

    // Debug
    //document.getElementById("debug").innerHTML = snake_dir + " " + snake_next_dir + " " + snake[0].x + " " + snake[0].y;

    setTimeout(mainLoop, snake_speed);
  }

  /////////////////////////////////////////////////////////////

  var newGame = function() {

    showScreen(0);
    screen_snake.focus();

    snake = [];
    for (var i = 4; i >= 0; i--) {
      snake.push({
        x: i,
        y: 15
      });
    }

    snake_next_dir = 1;

    score = 0;
    altScore(score);

    addFood();

    canvas.onkeydown = function(evt) {
      evt = evt || window.event;
      changeDir(evt.keyCode);
    }
    mainLoop();

  }

  /////////////////////////////////////////////////////////////

  // Change the snake speed...
  // 150 = slow
  // 100 = normal
  // 50 = fast
  var setSnakeSpeed = function(speed_value) {
    snake_speed = speed_value;
  }

  /////////////////////////////////////////////////////////////
  var setWall = function(wall_value) {
    wall = wall_value;
    if (wall == 0) {
      screen_snake.style.borderColor = "#606060";
    }
    if (wall == 1) {
      screen_snake.style.borderColor = "#FFFFFF";
    }
  }

  /////////////////////////////////////////////////////////////

  // 0 for the game
  // 1 for the main menu
  // 2 for the settings screen
  // 3 for the game over screen
  var showScreen = function(screen_opt) {
    switch (screen_opt) {

      case 0:
        screen_snake.style.display = "block";
        screen_menu.style.display = "none";
        screen_setting.style.display = "none";
        screen_gameover.style.display = "none";
        break;

      case 1:
        screen_snake.style.display = "none";
        screen_menu.style.display = "block";
        screen_setting.style.display = "none";
        screen_gameover.style.display = "none";
        break;

      case 2:
        screen_snake.style.display = "none";
        screen_menu.style.display = "none";
        screen_setting.style.display = "block";
        screen_gameover.style.display = "none";
        break;

      case 3:
        screen_snake.style.display = "none";
        screen_menu.style.display = "none";
        screen_setting.style.display = "none";
        screen_gameover.style.display = "block";
        break;
    }
  }

  /////////////////////////////////////////////////////////////

  window.onload = function() {

    canvas = document.getElementById("snake");
    ctx = canvas.getContext("2d");

    // Screens
    screen_snake = document.getElementById("snake");
    screen_menu = document.getElementById("menu");
    screen_gameover = document.getElementById("gameover");
    screen_setting = document.getElementById("setting");

    // Buttons
    button_newgame_menu = document.getElementById("newgame_menu");
    button_newgame_setting = document.getElementById("newgame_setting");
    button_newgame_gameover = document.getElementById("newgame_gameover");
    button_setting_menu = document.getElementById("setting_menu");
    button_setting_gameover = document.getElementById("setting_gameover");

    // etc
    ele_score = document.getElementById("score_value");
    speed_setting = document.getElementsByName("speed");
    wall_setting = document.getElementsByName("wall");

    // --------------------

    button_newgame_menu.onclick = function() {
      newGame();
    };
    button_newgame_gameover.onclick = function() {
      newGame();
    };
    button_newgame_setting.onclick = function() {
      newGame();
    };
    button_setting_menu.onclick = function() {
      showScreen(2);
    };
    button_setting_gameover.onclick = function() {
      showScreen(2)
    };

    setSnakeSpeed(150);
    setWall(1);

    showScreen("menu");

    // --------------------
    // Settings

    // speed
    for (var i = 0; i < speed_setting.length; i++) {
      speed_setting[i].addEventListener("click", function() {
        for (var i = 0; i < speed_setting.length; i++) {
          if (speed_setting[i].checked) {
            setSnakeSpeed(speed_setting[i].value);
          }
        }
      });
    }

    // wall
    for (var i = 0; i < wall_setting.length; i++) {
      wall_setting[i].addEventListener("click", function() {
        for (var i = 0; i < wall_setting.length; i++) {
          if (wall_setting[i].checked) {
            setWall(wall_setting[i].value);
          }
        }
      });
    }

    document.onkeydown = function(evt) {
      if (screen_gameover.style.display == "block") {
        evt = evt || window.event;
        if (evt.keyCode == 32) {
          newGame();
        }
      }
    }
  }

})();
::selection {
  color: #FFFFFF;
  background: transparent;
}

 ::-moz-selection {
  color: #FFFFFF;
  background: transparent;
}

* {
  margin: 0;
  padding: 0;
  font-family: "VT323";
}

body {
  background-color: #000000;
}

.wrap {
  margin-left: auto;
  margin-right: auto;
}

header {
  width: 340px;
  font-size: 0;
}

canvas {
  display: none;
  border-style: solid;
  border-width: 10px;
  border-color: #FFFFFF;
}

canvas:focus {
  outline: none;
}


/* Top Styles */

h1 {
  display: inline-block;
  width: 100px;
  font-size: 32px;
  color: #FFFFFF;
}

.score {
  display: inline-block;
  width: 240px;
  font-size: 20px;
  color: #FFFFFF;
  text-align: right;
}

.score_value {
  font-size: inherit;
}


/* All screens style */

#gameover a,
#setting a,
#menu a {
  display: block;
}

#gameover a,
#setting a:hover,
#menu a:hover {
  cursor: pointer;
}

#gameover a:hover::before,
#setting a:hover::before,
#menu a:hover::before {
  content: ">";
  margin-right: 10px;
}


/* Menu Screen Style */

#menu {
  display: block;
  width: 340px;
  padding-top: 95px;
  padding-bottom: 95px;
  font-size: 40px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  color: #FFF;
}

#menu h2 {
  -webkit-animation: logo-ani 1000ms linear infinite;
  animation: logo-ani 1000ms linear infinite;
  margin-bottom: 30px;
}

#menu a {
  font-size: 30px;
}

@-webkit-keyframes logo-ani {
  50% {
    -webkit-transform: scale(1.3, 1.3);
  }
  100% {
    -webkit-transform: scale(1.0, 1.0);
  }
}

@keyframes logo-ani {
  50% {
    transform: scale(1.3, 1.3);
  }
  100% {
    transform: scale(1.0, 1.0);
  }
}


/* Game Over Screen Style */

#gameover {
  display: none;
  width: 340px;
  padding-top: 95px;
  padding-bottom: 95px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  font-size: 30px;
  color: #FFF;
}

#gameover p {
  margin-top: 25px;
  font-size: 20px;
}


/* Settings Screen Style */

#setting {
  display: none;
  width: 340px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 85px;
  padding-bottom: 85px;
  font-size: 30px;
  color: #FFF;
  text-align: center;
}

#setting h2 {
  margin-bottom: 15px;
}

#setting p {
  margin-top: 10px;
}

#setting input {
  display: none;
}

#setting label {
  cursor: pointer;
}

#setting input:checked+label {
  background-color: #FFF;
  color: #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">

<header class="wrap">
  <h1>Snake</h1>
  <p class="score">Score: <span id="score_value">0</span></p>
</header>

<canvas class="wrap" id="snake" width="320" height="320" tabindex="1"></canvas>

<!-- Game Over Screen -->
<div id="gameover">
  <h2>Game Over</h2>
  <p>press <span style="background-color: #FFFFFF; color: #000000">space</span> to begin a</p>
  <a id="newgame_gameover">new game</a>
  <a id="setting_gameover">settings</a>
</div>

<!-- Setting screen -->
<div id="setting">
  <h2>Settings</h2>

  <a id="newgame_setting">new game</a>

  <p>Speed:
    <input id="speed1" type="radio" name="speed" value="120" checked/>
    <label for="speed1">Slow</label>
    <input id="speed2" type="radio" name="speed" value="75" />
    <label for="speed2">Normal</label>
    <input id="speed3" type="radio" name="speed" value="35" />
    <label for="speed3">Fast</label>
  </p>

  <p>Wall:
    <input id="wallon" type="radio" name="wall" value="1" checked/>
    <label for="wallon">On</label>
    <input id="walloff" type="radio" name="wall" value="0" />
    <label for="walloff">Off</label>
  </p>

</div>

<!-- Main Menu Screen -->
<div id="menu">
  <h2>Snake</h2>

  <a id="newgame_menu">new game</a>
  <a id="setting_menu">settings</a>
</div>

解决方案

Convert your image to a base64 string, then for the first dot/head use the image instead:

var img = new Image(); // Create new img element
    img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAMAAAC67D+PAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAA21BMVEXoTTvqTTzpUD7nTjzmTTvrUkDpTjzmSznUPSrVPCrnTDrSOSfTOizlTDrvoJnoqJ/pVkTmU0P5urH1p53mSTjjPiv7nZF0f4NZaGvpn5b9s6qDl5iira/+nI/jPirkPyz7lop+iYtleHzsnpT7raOTpqqqtbf4lovnSjf0lorylonpSDbnTDj5oZf2mIzlSDXkOyjIY1vrd2rrWEbZZ1zYQDLsTTroTz/lRjPalY7+///////j19fVSz7tTjvmTjntRjPialzZhH3sVkXsSzniRTTYQTDmSTbmTT3qb45jAAAAAWJLR0Q7OQ70bAAAAAd0SU1FB+QEDw4AEYzMSFoAAABvSURBVAjXY2BgZGJiZmFlZWNgYGDn4GTn4ubhBTJZ+PgFBIWERdgYRMXEJSSlpGVk5RjkFRSVlFVU1dTlGRg0NLW0dXT19JkZGNgMDI2MTUzNgNrMLSytrG1s7eyBbGYHRydnFwYwYHN1c/dgYAAAtKsKjnGo4BwAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjAtMDQtMTVUMTQ6MDA6MTctMDQ6MDAVi7z/AAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIwLTA0LTE1VDE0OjAwOjE3LTA0OjAwZNYEQwAAAABJRU5ErkJggg==";

for (var i = 0; i < snake.length; i++) {
  if (!i) {
    ctx.drawImage(img, snake[i].x * 10, snake[i].y * 10);
  } else {
    activeDot(snake[i].x, snake[i].y);
  }
}

这篇关于Snake Code - 使蛇的脸成为图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-05 13:40
查看更多