问题描述
我想让这条蛇的脸成为图像.目前,它使用带有颜色的填充样式,但我希望它是图像.我怎样才能用这个代码做到这一点?
另外,我想知道如何添加箭头以便它可以在手机上工作.感谢任何可以提供帮助或提供见解的人.
(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>