使用electron为贪吃蛇游戏创建全局快捷键

Posted 2021-02-06 smart-girl

上图就是我们的简体版贪吃蛇游戏，我们可以看到使用键盘上面的上下左右可以对贪吃蛇进行控制。
The picture above is our simplified version of Snake Eating Game. We can see that the top
and bottom of the keyboard can control Snake Eating.
所用到的代码如下
The code used is as follows

//这个是对方向进行的控制
//This is direction control.
window.document.onkeydown = function(event) {
  if (!allowPressKeys){
    return null;
  }
  let keyCode;
  if(!event)
  {
    keyCode = window.event.keyCode;
  }
  else
  {
    keyCode = event.keyCode;
  }

  switch(keyCode)
  {
    case 37:
      if (direction !== 'right') {
        moveLeft();
      }
      break;

    case 38:
      if (direction !== 'down'){
        moveUp();
      }
      break;

    case 39:
      if (direction !== 'left'){
        moveRight();
      }
      break;

    case 40:
      if (direction !== 'up'){
        moveDown();
      }
      break;

    default:
      break;
  }
};

app.css
body {
    margin: 1em;
    padding: 0;
    background: #111;
    color: white;
    font-family: helvetica;
  }
  
  canvas {
    border: solid 1px red;
    width: 800px;
    height: 400px;
  }
  
  #scoreboard {
    padding-bottom: 1em;
  }
  
  #label, #score, #bar {
      float: left;
      padding: 8px;
  }
  
  #pause_menu, #restart_menu {
    display: none;
  }

app.js
'use strict';
let currentState;
let canvas, ctx, gridSize, currentPosition, snakeBody, snakeLength, direction, score, suggestedPoint, allowPressKeys, interval, choice;

function updateScore () {
  score = (snakeLength - 3) * 10;
  document.getElementById('score').innerText = score;
}

function hasPoint (element) {
  return (element[0] === suggestedPoint[0] && element[1] === suggestedPoint[1]);
}

function makeFoodItem () {
  suggestedPoint = [Math.floor(Math.random()*(canvas.width/gridSize))*gridSize, Math.floor(Math.random()*(canvas.height/gridSize))*gridSize];
  if (snakeBody.some(hasPoint)) {
    makeFoodItem();
  } else {
    ctx.fillStyle = 'rgb(10,100,0)';
    ctx.fillRect(suggestedPoint[0], suggestedPoint[1], gridSize, gridSize);
  }
}

function hasEatenItself (element) {
  return (element[0] === currentPosition.x && element[1] === currentPosition.y);
}

function leftPosition(){
 return currentPosition.x - gridSize;
}

function rightPosition(){
  return currentPosition.x + gridSize;
}

function upPosition(){
  return currentPosition.y - gridSize;
}

function downPosition(){
  return currentPosition.y + gridSize;
}

function whichWayToGo (axisType) {
  if (axisType === 'x') {
    choice = (currentPosition.x > canvas.width / 2) ? moveLeft() : moveRight();
  } else {
    choice = (currentPosition.y > canvas.height / 2) ? moveUp() : moveDown();
  }
}

function moveUp(){
  if (upPosition() >= 0) {
    executeMove('up', 'y', upPosition());
  } else {
    whichWayToGo('x');
  }
}

function moveDown(){
  if (downPosition() < canvas.height) {
    executeMove('down', 'y', downPosition());
  } else {
    whichWayToGo('x');
  }
}

function moveLeft(){
  if (leftPosition() >= 0) {
    executeMove('left', 'x', leftPosition());
    } else {
    whichWayToGo('y');
  }
}

function moveRight(){
  if (rightPosition() < canvas.width) {
    executeMove('right', 'x', rightPosition());
  } else {
    whichWayToGo('y');
  }
}

function executeMove(dirValue, axisType, axisValue) {
  direction = dirValue;
  currentPosition[axisType] = axisValue;
  drawSnake();
}

function moveSnake(){
  switch (direction) {
    case 'up':
      moveUp();
      break;

    case 'down':
      moveDown();
      break;

    case 'left':
      moveLeft();
      break;

    case 'right':
      moveRight();
      break;
  }
}

function restart () {
    document.getElementById('play_menu').style.display='block';
    document.getElementById('pause_menu').style.display='none';
    document.getElementById('restart_menu').style.display='none';
    pause();
    start();
}

function pause(){
    document.getElementById('play_menu').style.display='none';
    document.getElementById('pause_menu').style.display='block';
  clearInterval(interval);
  allowPressKeys = false;
}

function play(){
    document.getElementById('play_menu').style.display='block';
    document.getElementById('pause_menu').style.display='none';
  interval = setInterval(moveSnake,100);
  allowPressKeys = true;
}

function gameOver(){
  pause();
  window.alert('Game Over. Your score was ' + score);
  ctx.clearRect(0,0, canvas.width, canvas.height);
    document.getElementById('play_menu').style.display='none';
  document.getElementById('restart_menu').style.display='block';
}

function drawSnake() {
  if (snakeBody.some(hasEatenItself)) {
    gameOver();
    return false;
  }
  snakeBody.push([currentPosition.x, currentPosition.y]);
  ctx.fillStyle = 'rgb(200,0,0)';
  ctx.fillRect(currentPosition.x, currentPosition.y, gridSize, gridSize);
  if (snakeBody.length > snakeLength) {
    let itemToRemove = snakeBody.shift();
    ctx.clearRect(itemToRemove[0], itemToRemove[1], gridSize, gridSize);
  }
  if (currentPosition.x === suggestedPoint[0] && currentPosition.y === suggestedPoint[1]) {
    makeFoodItem();
    snakeLength += 1;
    updateScore();
  }
}

window.document.onkeydown = function(event) {
  if (!allowPressKeys){
    return null;
  }
  let keyCode;
  if(!event)
  {
    keyCode = window.event.keyCode;
  }
  else
  {
    keyCode = event.keyCode;
  }

  switch(keyCode)
  {
    case 37:
      if (direction !== 'right') {
        moveLeft();
      }
      break;

    case 38:
      if (direction !== 'down'){
        moveUp();
      }
      break;

    case 39:
      if (direction !== 'left'){
        moveRight();
      }
      break;

    case 40:
      if (direction !== 'up'){
        moveDown();
      }
      break;

    default:
      break;
  }
};

function start () {
  ctx.clearRect(0,0, canvas.width, canvas.height);
  currentPosition = {'x':50, 'y':50};
  snakeBody = [];
  snakeLength = 3;
  updateScore();
  makeFoodItem();
  drawSnake();
  direction = 'right';
  play();
}

function initialize () {
  canvas = document.querySelector('canvas');
  ctx = canvas.getContext('2d');
  gridSize = 10;
  start();
}

function togglePauseState () {
  if (currentState) {
    if (currentState === 'play') {
      pause();
        currentState = 'pause';
    } else {
      play();
        currentState = 'play';
    }
   } else {
     pause();
     currentState = 'play';
   }
}

const ipcRenderer = require('electron').ipcRenderer;

function togglePauseState () {
  if (currentState) {
    if (currentState === 'play') {
      pause();
      currentState = 'pause';
    } else {
      play();
      currentState = 'play';
    }
  } else {
    pause();
    currentState = 'play';
    }
}

ipcRenderer.on('togglePauseState', togglePauseState);

window.onload = initialize;

<html>
  <head>
    <title>Snake</title>
    <link href="app.css" rel="stylesheet" />
    <script src="app.js"></script>
  </head>
  <body>
    <div id="scoreboard">
      <span id="label">Score:</span>
      <span id="score"></span>
            <div id="bar">
                    <div id="play_menu">
                    <button onclick="pause();">Pause</button>
                    </div>
                  <div id="pause_menu">
                    <button onclick="play();">Resume</button>
                        <button onclick="restart();">Restart</button>
                  </div>
                  <div id="restart_menu">
                    <button onclick="restart();">Restart</button>
                  </div>
                </div>
            </div>
    </div>
    <canvas></canvas>
  </body>
</html>

main.js
'use strict';

const {app, globalShortcut, BrowserWindow} = require('electron');

let mainWindow = null;

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    width: 840,
    height: 470,
    useContentSize: true
  });
  mainWindow.loadURL(`file://${__dirname}/index.html`);
  mainWindow.on('closed', () => { mainWindow = null; });
  const pauseKey = globalShortcut.register('CommandOrControl+P', () => {
    mainWindow.webContents.send('togglePauseState');
  });
  if (!pauseKey) alert('You will not be able to pause the game from the keyboard');
});

app.on('will-quit', () => {
  globalShortcut.unregister('CommandOrControl+P');
});

{ "name": "snake-electron", "version": "1.0.0", "description": "The Snake game, built with Electron for the book ‘Cross Platform Desktop Applications‘", "main": "main.js", "scripts": { "start": "node_modules/.bin/electron .", "test": "echo "Error: no test specified" && exit 1" }, "keywords": [ "electron", "keyboard", "shortcuts" ], "author": "Paul Jensen ", "license": "MIT", "dependencies": { "electron-prebuilt": "^1.2.5" } }

本文的例子学习自 <<跨平台桌面应用开发基于Electron与NW.js>>这本书
by要学的东西很多，我还差很远