javascript - Snake Game with Controller Buttons for Mobile Use **UPDATED** -
** note: i've edited javascript below , linked new jsfiddle still not getting buttons control snake's movement arrow keys on keyboard **
i’m trying create real easy snake game project need have buttons game work on mobile. there except need have buttons control movement of snake on screen:
html:
<div class="game-container"> <div class="container"> <div class="splashscreen"> <h1> snake </h1> <h2> click start. </h2> <input class="startbutton" type="button" value="start" /> </div> <div class="finishscreen" style="display:none"> <h1> game on </h1> <p> score was: <span id="score"></span> </p> <input class="startbutton" type="button" value="restart" /> </div> <canvas id="canvasarea" width="450" height="450" style="display:none;"></canvas> </div> <div class="button-pad"> <div class="btn-up"> <button type="submit" class="up"> <img src="http://aaronblomberg.com/sites/ez/images/btn-up.png" /> </button> </div> <div class="btn-right"> <button type="submit" class="right"> <img src="http://aaronblomberg.com/sites/ez/images/btn-right.png" /> </button> </div> <div class="btn-down"> <button type="submit" class="down"> <img src="http://aaronblomberg.com/sites/ez/images/btn-down.png" /> </button> </div> <div class="btn-left"> <button type="submit" class="left"> <img src="http://aaronblomberg.com/sites/ez/images/btn-left.png" /> </button> </div> </div> jquery:
( function( $ ) { $( function() { $(document).ready(function () { $(".startbutton").click(function () { $(".splashscreen").hide(); $(".finishscreen").hide(); $("#canvasarea").show(); init(); }); //canvas stuff var canvas = $("#canvasarea")[0]; var ctx = canvas.getcontext("2d"); var w = $("#canvasarea").width(); var h = $("#canvasarea").height(); //lets save cell width in variable easy control var sw = 10; var direction; var nd; var food; var score; //lets create snake var snake_array; //an array of cells make snake function endgame() { $("#canvasarea").hide(); $("#score").text(score); $(".finishscreen").show(); } function init() { direction = "right"; //default direction nd = []; create_snake(); create_food(); //now can see food particle //finally lets display score score = 0; //lets move snake using timer trigger paint function //every 60ms if (typeof game_loop != "undefined") clearinterval(game_loop); game_loop = setinterval(paint, 60); } function create_snake() { var length = 5; //length of snake snake_array = []; //empty array start (var = length - 1; >= 0; i--) { //this create horizontal snake starting top left snake_array.push({ x: i, y: 0 }); } } //lets create food function create_food() { food = { x: math.round(math.random() * (w - sw) / sw), y: math.round(math.random() * (h - sw) / sw), }; //this create cell x/y between 0-44 //because there 45(450/10) positions accross rows , columns } //lets paint snake function paint() { if (nd.length) { direction = nd.shift(); } //to avoid snake trail need paint bg on every frame //lets paint canvas ctx.fillstyle = "#0056a0"; ctx.fillrect(0, 0, w, h); ctx.strokestyle = "#ffffff"; ctx.strokerect(0, 0, w, h); //the movement code snake come here. //the logic simple //pop out tail cell , place infront of head cell var nx = snake_array[0].x; var ny = snake_array[0].y; //these position of head cell. //we increment new head position //lets add proper direction based movement if (direction == "right") nx++; else if (direction == "left") nx--; else if (direction == "up") ny--; else if (direction == "down") ny++; //lets add game on clauses //this restart game if snake hits wall //lets add code body collision //now if head of snake bumps body, game restart if (nx == -1 || nx == w / sw || ny == -1 || ny == h / sw || check_collision(nx, ny, snake_array)) { //end game return endgame(); } //lets write code make snake eat food //the logic simple //if new head position matches of food, //create new head instead of moving tail if (nx == food.x && ny == food.y) { var tail = { x: nx, y: ny }; score++; //create new food create_food(); } else { var tail = snake_array.pop(); //pops out last cell tail.x = nx; tail.y = ny; } //the snake can eat food. snake_array.unshift(tail); //puts tail first cell (var = 0; < snake_array.length; i++) { var c = snake_array[i]; //lets paint 10px wide cells paint_cell(c.x, c.y); } //lets paint food paint_cell(food.x, food.y); //lets paint score var score_text = "score: " + score; ctx.fillstyle = "#ffffff"; ctx.filltext(score_text, 5, h - 5); //set font , font size ctx.font = '12px arial'; //position of fill text counter ctx.filltext(itemcounter, 10, 10); } //lets first create generic function paint cells function paint_cell(x, y) { ctx.fillstyle = "#d8d8d8"; ctx.fillrect(x * sw, y * sw, sw, sw); } function check_collision(x, y, array) { //this function check if provided x/y coordinates exist //in array of cells or not (var = 0; < array.length; i++) { if (array[i].x == x && array[i].y == y) return true; } return false; } // lets prevent default browser action arrow key usage var keys = {}; window.addeventlistener("keydown", function(e){ keys[e.keycode] = true; switch(e.keycode){ case 37: case 39: case 38: case 40: // arrow keys case 32: e.preventdefault(); break; // space default: break; // not block other keys } }, false); window.addeventlistener('keyup', function(e){ keys[e.keycode] = false; }, false); //lets add keyboard controls $(document).keydown(function (e) { var key = e.which; var td; if (nd.length) { var td = nd[nd.length - 1]; } else { td = direction; } //we add clause prevent reverse gear if (key == "37" && td != "right") nd.push("left"); else if (key == "38" && td != "down") nd.push("up"); else if (key == "39" && td != "left") nd.push("right"); else if (key == "40" && td != "up") nd.push("down"); //the snake keyboard controllable }); }); $(document).on('click', '.button-pad > button', function(e) { if ($(this).hasclass('left-btn')) { e = 37; } else if ($(this).hasclass('up-btn')) { e = 38; } else if ($(this).hasclass('right-btn')) { e = 39; } else if ($(this).hasclass('down-btn')) { e = 40; } $.event("keydown", {keycode: e}); }); }); })( jquery ); http://jsfiddle.net/aaronblomberg/9w3gk3ma/3/
this need need up, down, left, , right arrow buttons control snake...
any greatly appreciated.
you cold make this:
var ismobile; checkmobile = function() { if ($(window).width() <= 766) { ismobile = true; } else { ismobile = false; } } $(window).resize(checkmobile()); $(document).ready(checkmobile()); if (ismobile) { $('.button-pad').show(); } else { $('.button-pad').hide(); } .button-pad:
$(document).on('click', '.button-pad > button', function(e) { if ($(this).hasclass('left')) { e = 37; } else if ($(this).hasclass('up')) { e = 38; } else if ($(this).hasclass('right')) { e = 39; } else if ($(this).hasclass('down')) { e = 40; } $.event("keydown", {keycode: e}); }
Comments
Post a Comment